Blog RSS feed
Price: $24.99
The Horizontal/Vertical Looper is so-called because it repeats your data from your database horizontally or vertically, using a combination of rows and columns. It acts in a similar fashion to the standard Repeat Region that is supplied with Dreamweaver. The server behavior will build a table around your data and display the data in rows and columns.
The server behavior works well with Dreamweaver, because it does not use "echo" or "print" statements to build a table around your data. The table that is created can be edited in the Dreamweaver environment, allowing you to define styles or apply properties to your table cells. Also, it was designed to work in tandem with the standard Dreamweaver recordset paging behaviors.
Applying the Horizontal/Vertical Looper
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 as you would do if you were creating a data display page using a Repeat Region.
2. 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. Dreamweaver 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.
3 . After the database content is on the page, I've also inserted a transparent gif, which you can see is about 1 pixel high and about 170 pixels long. This will make sure that all of the data is spaced out evenly after you apply the Horizontal/Vertical Looper. This step is not necessary, but it gives the page a more uniform look. You can also achieve this with CSS if you prefer not to use spacer gifs.
4 . Select the items that you want to be inside the Horizontal/Vertical Looper with your mouse, click the "+" sign in the Server Behaviors palette and choose Tom-Muck.com> Horizontal Vertical Looper
5. 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.
Also, choose to display horizontal results or vertical results. If you choose Horizontal, the results will display left to right like this:
1 2 3
4 5 6
7 8 9
If you choose Vertical, the results will display up and down like this:
1 4 7
2 5 8
3 6 9
Click OK (we'll talk about the Advanced tab later)
6. 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, or CSS. Or you can choose to leave it plain as we've done here.
7. The Horizontal Looper works with all of the standard "Recordset Paging" Server Behaviors that ship with Dreamweaver, 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 the built in Dreamweaver object Recordset Navigation Bar to the finished page shown here.
Advanced Tab
The Advanced tab allows you to set the rows/columns and the horizontal/vertical setting through a variable, which can be a hard-coded variable, or a variable from a database value, form field, or link.
On the following page, I've added a form with the method set to GET, and two form fields named txtRows and txtColumns. The form fields will allow a user to fill in the number of rows or columns.
In the Server Behavior, I've switched to the Advanced tab and entered the PHP code for the two form fields (leaving the Vertical Variable Name left set to the default):
When I run the page now, I can fill in the number of rows or columns that I want to display:
Using CSS
The server behavior works well if you use CSS instead of transparent gifs to size or position your content. For example, if I put a <div> tag around my dynamic content like this, I can then set a class and a style for the div:
<div class="hloop">
<p><strong><?php echo $row_rsBooks['Title']; ?></strong></p>
<p>ISBN: <?php echo $row_rsBooks['ISBN']; ?></p>
<img src="<?php echo $row_rsBooks['Coverpic']; ?>" /></div>
I would select this entire block to apply the server behavior to, so that everything including the <div> tag is repeated by the Horizontal/Vertical Looper. Now in the head (or in a separate stylesheet), I set up the styles:
<style>
.hloop {border:1px solid red; padding:20px;vertical-align:top; width:200px; height:300px;}
.hloop img {margin-left:10%; }
</style>
The display now looks like this:
There are a lot of different ways to style the content, and the server behavior will not get in the way of your design.
This Server Behavior works in PHP/MySQL in Dreamweaver MX 2004, Dreamweaver 8, Dreamweaver CS3/CS4/CS5/CS5.5/CS6.
For more information, contact Tom Muck at http://www.tom-muck.com/contact.cfm
