This week’s Uncle Pete’s corner will be wrapping up the Gmail Style Email Entry Field

Last week we covered the requirements, and did the coding for the entry field and lookup ahead style combo box. This week we are wrapping up with the variable number and width of columns looper. Which will introduce some less used features of WebDev that sure are handy when you need them. Be sure to check out Part 1.

Here is a screen shot of what we are going for. The area with the yellow boxes  with names, is actually a looper. Notice that there are a variable number of columns, Row 1 has 5 names while Row 2 only has 3 names.

There are several WebDev features working in unison to accomplish this. Let’s build them up step by step and see the process

Starting with the Looper we turn on the setting for Variable Columns, also notice this is a Classic looper not AJAX. Ajax loopers introduce scrolling and other features that make them behave more like tables which is not what we want here.

I started with a Looper with one attribute to contain the name to display. A cell to make the yellow box, a static that is linked to the attribute to display the name, and a button (the red round minus sign) to delete an entry.

I set the anchoring to adapt the width to the content on the cell, the static, and the looper.

Here is what it looks like at design time with the looper selected.

When I first started on this project, I truly thought that I would be done at this point but I quickly learned this did not give me the effect I wanted, as you can see from this screen shot of the same names entered

Notice the size of the boxes adjust based on the content. However they butt into each other as they grow, I solve this with a variation of an old trick from my Cold Fusion and pure HTML days ( yes I still have PTSD from that). I place a static in the Looper, outside the cell, to use a little space and force some spacing between the boxes regardless of their size.

Nothing real fancy about the static, it has nothing entered for the caption (so it will be blank). Notice my naming convention, hopefully this will remind me that it is there for a reason when I have to edit this page 2 years from now.

The statics width is the same as the space allowed between the cell and the end of the looper and I made the height the same as the looper, Here is a screen shot of it selected at design time.

And as you can see in the below screen shot we now have spacing between the boxes.

But notice that the looper is not using the full width of the page like we want. This issue had me scratching my head for quite a while, and trying different things.

Warning, there may be some developer black magic involed in this next step! I finally notice that it seemed like it was keying into the width of the To field as the restraining boundary. Using the chrome developer tools soon showed me why. If you right click and choose inspect element, you get a spit screen showing you the HTML code and the page. As you hover your mouse over the HTML code, that portion of the page is highlighted in blue. Here is the screen with the mouse hovering over the code that is the looper.

As we move the mouse in the code we find out something interesting. There is a Div section defined that is containing all of the entry fields and as you can see below that is what is constraining the width.

You may be wondering if I have a cell or something defined on that page that is causing this. The answer is no. This is WebDev converting our design into HTML and CSS code, it unfortunately just doesn’t always get it “right” for what we want. So what I needed was a way to “short circuit” this behavior and not force my Looper into a the smaller DIV section. A cell is the answer to that issue.

Nothing real special about the cell. I make it tall enough to contain the looper and wide enough to use the entire page. I place the looper inside it, and I set the formatting so it doesn’t have any border or background.

Here is the cell selected at design time

And as we can see at run time we are now getting the desired effect.

And if we use Chromes developer’s tools, we will see that WebDev has made the containing DIV section wide enough to allow our Looper to grow to the width of the page..

And with that we have a looper with variable numbers of columns and variable widths. Note that if I did not have a good fundamental understanding of HTML and CSS I would have been at a lost on what the issue was or how to fix it. Even those WebDev does a great job of “protecting” use from the plumbing if we don’t know how the plumbing works, we are in for a mess when a leak develops!

I would also like to note that one of the reason I encourage others to do webinars and blogs is how much it improves your own code. As it almost invariably happens while working on this presentation I noticed several things that could be done better. My original solution to the width issue involved several more cells and blank statics, but the mere act of preparing for a presentation forces you to do a code review and fully understand your code so that you can present it.

 

Be sure to go over to wxLive.us and watch the Uncle Pete’s corner webinar that is the companion to this article.

Uncle Pete’s Corner is weekly webinar on all things WX every Friday , to watch the recorded version of this webinar, many other WX related webinars or to watch future ones live go to wxLive.us

[suffusion-the-author display=’author’]

[suffusion-the-author display=’description’]

 

• WEBDEV
• WX