 |
 |
Horizontal Looper Repeat Region:
The Horizontal Looper is so-called because it repeats your data from your database horizontally as well as vertically. It acts in a similar fashion to the standard Repeat Region that is supplied with UltraDev, but instead of "number of records" you are prompted for Rows and Columns. Let's take a look at how it's applied.
| 1. The first thing you need to do is to put a data connection and a recordset on your page. You can do this in the standard way, and then drag a couple of fields onto the page. In this example, I've also dropped a dynamic image on the page that gets its content from the database. UltraDev makes this easy by giving the option for "Data Sources" in the Image dialog box. All you need in the database is a relative path to the image, and then make sure the images are in the right place in the web directory. |
 |
| 2. After the database content is on the page, I've also applied a transparent gif, which you can see is about 2 pixels high and about 170 pixels long. This will make sure that all of the data is spaced out evenly after you apply the HLooper. This step is not necessary, but it gives the page a more uniform look. |
 |
3. After selecting the items with your mouse, click the "+" sign in the Server Behaviors palette and choose "Horizontal Looper 2": |
| 4. This will bring you to the Horizontal Looper dialog box: you are given the choice of Rows and Columns or All Records. If you choose All Records, you have to choose how many columns to use to display the data. |
 |
 |
5. After setting the number, we'll go back and click on the "Live Data" mode, to get a better feel for how it's going to look in the browser. You can see that all of the content has expanded into a table. This table can be edited like a regular table with borders, cell padding, cell spacing, etc. Or you can choose to leave it borderless as we've done here. |
| 6. The Horizontal Looper works with all of the standard "Move to" Server Behaviors that ship with UltraDev, including Move to Previous, Move To Next, and the rest. It also works well with the Recordset Navigation set of behaviors: Pages List, Links List, and Navigation Links. We've added Links List and Navigation Links behaviors to the finished page shown here. |
 |
This Server Behavior works in all server models:
- ASP VBscript
- ASP JavaScript
- JSP
- ColdFusion
Also, the behavior is fully compatible with UltraDev 1 and UltraDev 4 and will update any Horizontal Loopers created with the original HLooper to the new version. There were some minor script changes between versions 1 and 2 of the Horizontal Looper. If you have an old version of the Horizontal Looper on the page, it will show up in the Server Behaviors palette as "**old version**". If you try to edit the Horizontal Looper by double-clicking it in the SB palette, you will be presented with the following dialog box:
By simply clicking the OK button, the behavior is automatically updated to the new version. If you prefer to leave the old version intact, click cancel.
Using Nested Regions:
With a little trickery, you can nest Horizontal Looper regions inside of Repeat Regions, and vice versa. On this page, I defined two recordsets, but I placed the second recordset inside of the outer Repeat Region. Inside, a Horizontal Looper region displays data returned from the second recordset. The entire region is repeated using the standard repeat region, creating a nested region.
These techniques often require some hand-coding, but can frequently be accomplished using the standard UltraDev Server Behaviors and a little cutting and pasting.
|
|
