Photo by nasrulekram

This week’s Uncle Pete’s corner kicks off a series of post and webinars covering all aspects of WebDev Loopers. Today’s post and Webinar will be an intro to Loopers but in the coming weeks we will get into some advanced WebDev Looper Concepts

Since this is a overview, there won’t be as much hands on work as we normally do, but today we will answer the following questions:

1. Just what the heck is a Looper anyway?
2. Why would I use a Looper instead of a Table?
3. Loopers are available in WinDev as well, Why am I talking about WebDev?
4. Converting a Table to a Looper
5. Now what the heck are Atrributes?
6. Preview of the next few weeks.

Just what the heck is a Looper anyway?

If we look at the WX help we will find “A looper is used to repeat the controls found in a specific area.” Wow, with an explanation like that there really isn’t any need for me to do an article is there 🙂

Well what they means is that a Looper is simply a “contain control” that allows you to have several controls (edit controls, statics, combos, etc) inside it and then repeat them multiple times. A prime example use of a Looper control is an eCommerce Site. Let’s take a look at a eCommerce site you may have heard of Amazon.com. To reproduce this interface with WebDev, you would use a looper, and as you see inside that looper would be an Image controls, several static controls, a rating control, etc. And for each row of data the entire group of controls is repeated.

Why would I use a Looper instead of a Table?

The above eCommerce example is one reason that a Looper is more appropriate than a table. You can provide a much richer and more detailed interface than you could with a simple table. Another example would be for Edit in Place, for a complex Edit in Place, you could present the data in a looper as “mini forms” instead of a table / form style interface.

Loopers are available in WinDev as well, Why am I talking about WebDev?

I have used Loopers a few times for very specific things in WinDev when needed, but for WebDev I don’t think I could survive without them.  Tables in WebDev are not as feature rich as WinDev table are.  Warning soapbox material to follow! I find that generally speaking tables just don’t feel natural on the web, and the drive to make web apps look like windows apps just seems like the wrong approach most of the time to me. I feel that the environment should dictate the interface and you should take full advantage and cater to what is available in each environment (windows, web, mobile) instead of trying to create a one interface fits all application that ends up being the least common denominator of all three. As always there are exceptions to that but in general terms that is what I have found in my projects and development style.

Converting a Table to a Looper

WebDev gives us some great re-factoring and productivity tools and Loopers is no exception to that. This is not a feature I use often because I generally start out with a Looper in the first place, but if you inherit a project or what seemed like it was going to be a quick listing of records grows into more complex requirements, you might find yourself needing to convert a table to a Looper. Well WebDev would never make us do something like that form scratch, instead there is a swap Table to Looper feature (not there is not a Looper to Table feature).

So for instance if you had a table similar to the example below:

You can use the Control->Swap->Table to Looper function.

Which will convert the table into a looper and translate the fields to entry fields leaving you with something like this:

Which is a good start but there is still some work to be done. First a little explanation of what you are seeing in designer. You will notice the controls are surrounded with a contain which appears similar to a cell, but when you select it you will see the blue boundary repeats itself several times, this is representing how additional rows of the Looper that will be displayed at runtime. Since you don’t want it to run off the page the first step is to change the number of rows. As you can see in the screen shot about it looks like 4 rows could be displayed within the page boundaries. So right click on the Looper and select description (Quick Tip: You have to be careful because you can also get the description of one of the edit controls instead, so right click in an empty area of the first row of the Looper.  On the general tab of the Looper change the Maximum number of lines per page to 4.

Now the blue boundary will only show the possible 4 rows that will be displayed.

This last thing you can do is add a pager control. You are probably pretty familiar with a pager control even if you didn’t know what they were called. Many web interfaces that show you list of records will show you a certain number of records per page and then give you a control that allows you to jump to a particular page.

From the Insert->Control menu select Pager.

And on the General tab of the Pager associate it with the Looper.

Now what the heck are Attributes?

The next step is to define the attributes of the Looper. Unlike a table that you just add columns to, a Looper requires attributes. You will notice in designer that the interface for setting attributes is very similar to the table description interface, except for each control in your Looper you have the opportunity to set properties, such as their value, visibility, background color, etc.

So to begin setting up the sample we have been working on, I cleaned up the interface a little by, removing the captions, and changing price to a static. as you can see in this screen shot.

If you try to link this controls to your database fields like you normally would for a form you will get an error message

Which is telling you that you need to use the describe Looper interface and attributes to setup the linking. So right click on the Looper and chose Description from the popup menu.

The first thing to do is setup the Content tab, which is very similar to the content tab for a table. In this instance we are doing a Direct File Access on the Product table.

Now you can added each an attribute to the Looper for each control (Name, Description and Price). Similar to adding columns to a table. Begin by pressing the new button

Name your attribute, this is similar to the column name for tables and will be used for any hand code that you do.

Next is a combo box that lets you select which control in the looper this attribute is for. Later on you will see that you can have multiple attributes defined for one control.

And in the final combo box choose which property the attribute represents. In this case it is value. You will notice that there are quite a few properties that can be selected, but as you start creating advanced Loopers you will find that not every property of a control has been exposed via Loopers, and later in the article you will see one possible solution to that issue.

Now that you have the attribute defined, you can link it to your database field the same as you would an edit control on a form, via the link tab.

Once you have defined the other two attributes if you run the page you will see that the data is being displayed in the controls of the Looper.

But if that was all you were going to do it sure seemed like a lot more work than using a table! So now it is time to add some advanced attributes. Lets start with an easy one. Say the boss decides that anything that is under $1 he doesn’t want any price displayed. To accomplish that add another attribute to the Looper for the price control, however this time select the visible property.

Since this attribute doesn’t represent an actual value in the database (we are not storing true or false to display price in the database), you don’t link this attribute to anything. Instead in the Row display process of the Looper you can added some code to set the value of the attribute.

And if you were to run the page you would see that when the price falls below $1 the price is not displayed.

You may be wondering why use an attribute if you are going to have logic in the row display code anyway. Why not just directly reference the control, such as this

This issue is that the controls in a Looper are repeated for each row, but the above code is reference the “base” control. What would happen is if the very last row displayed triggered the Visble = False code then the price would be hidden for the entire Looper, not just that row. There are ways to use a syntax similar to arrays to reference the specific instance of a control in a Looper but for these purposes using an attribute is much easier.

Say that same boss decided that any price under $15 should be shown in Red? Simply add another attribute this time for the color property and add some additional code to the Row Display process.

But now for a curve ball, say the same Boss decides that any price between $12 and $13 should have be shown as strike-through. No problem you say you just add another attribute but when you get to the property selection you will find that strike-through is not a selection. I have found a work around for this issue that once you understand the concept can be used to do a lot of “tricky” things in a Looper. Although strike-through is not a property, HTML Before and HTML After are. Remember everything you do in WebDev eventually has to be converted to JavaScript and HTML code to display in a browser. Well the HTML tag for strike-through is <del> so if you put <del> in the HTML Before and </del> in the HTML After Attributes then it will make it into the HTML code and achieve the desired results. So add two new attributes.

And then the following code to the Row Display Process

And if you were to run the page you would see the an effect similar to this

And if you view the source code of that generated page you will see were the HTML code was injected

As I said this is a great technique to master as it will allow you to accomplish all sorts of things, I have used it to create Jump to Anchors, display extra images and links, etc.

What’s Next?

As you can see from even our simple example Loopers can get very complex and on an advanced Looper you can easily be managing 20-30 attributes. This can become very unwieldly with procedural code. So next week I will show you how to create an array to hold all the values for the attributes, and based the looper on the array instead of directly on the file. And then we will go even a step further and create a class to manage that array. This will be very import as we move further and further into advanced loopers with Breaks with Headers and footers etc.

So be sure to tune in to Uncle Pete’s Corner on  wxLive.us each Friday at 7:15 AM CST (5:15 PST)

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

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

 

• WEBDEV
• WX