WebDev Loopers Part 1

973920808_1e924a8fce
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.

2013-03-29_1027

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:

2013-03-29_1048

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

2013-03-29_1049

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

2013-03-29_1243

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.

2013-03-29_1252

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.

2013-04-11_0804

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

2013-04-11_0805

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.

2013-04-11_0647

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.

2013-04-11_0657

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

2013-04-11_0659

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.
2013-04-11_0702

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.

2013-04-11_0703

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

2013-04-11_0710

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

2013-04-11_0713

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.

2013-04-11_0714

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.

2013-04-11_0716

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.
2013-04-11_0721

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.

2013-04-11_0722

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.

2013-04-11_0726

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.

2013-04-11_0729

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

2013-04-11_0731

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
2013-04-11_0734

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.

2013-04-11_0740

2013-04-11_0740_001

2013-04-11_0741

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.

2013-04-11_0752

And then the following code to the Row Display Process

2013-04-11_0752_001

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

2013-04-11_0753

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

2013-04-11_0754

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’]

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

 

One thought on “WebDev Loopers Part 1

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s