building horizontal loops and nested repeated regions

Building Horizontal Loops and Nested Repeated Regions

version 1.2.0

MX Looper Suite Tutorial

Table of ContentsOverview..........................................................................................................3

Prerequisites...................................................................................................3Requirements..........................................................................................................3Typographic conventions........................................................................................3Files........................................................................................................................3

Functional overview.........................................................................................4Nested Repeated Regions Explained.......................................................................4Horizontal Loopers Explained..................................................................................4Paged Recordset Navigation...................................................................................4

Configuring Your Site.......................................................................................5Database Design.....................................................................................................5Creating the database.............................................................................................5Creating a Dreamweaver MX Site............................................................................6

Using The MX Looper Suite..............................................................................8Creating Multiple Level Menus................................................................................8Dynamic Lists using Nested Repeated Regions.....................................................21Creating an Image Gallery....................................................................................23Building Paged Navigation Menus.........................................................................26

Conclusions....................................................................................................29

Appendix - versions.......................................................................................30PHP.......................................................................................................................30ASP.......................................................................................................................30ASP.......................................................................................................................30

Copyright.......................................................................................................30

http://www.interakt.ro/


OverviewThe MX Looper tutorial is meant to learn you how to use the Server Behaviors and the commands included in thispackage.

The MXLooper tool targets a very large range of developers as it can be included in PHP, ASP and ColdFusionpages using the PHP_MySQL, PHAkt2 (PHP_ADODB), ASP_VBScript, ASP_JavaScript or ColdFusion servermodels.

We will create a PHP/ASP/ColdFusion site connecting to a MySQL/Microsoft Access database, structured on foursections: we'll create a dynamic website menu, demonstrating the power of the Nested Repeat Region command, anested list to display the employees from a company departments, an Image Gallery frontend to demonstrate theHorizontal Looper and a Paged Navigation Bar.

The sample site will contain an index page and four samples pages including notes.

Prerequisites

RequirementsThis tutorial requires basic knowledge of Macromedia Dreamweaver MX development practices.

In order to use the MX Looper Suite you'll have to install the following software programs:

Macromedia Dreamweaver MX http:// www.macromedia.com /

Dreamweaver MX 6.1 updater

PHAkt2 http://www.interakt.ro/products/ PHAkt /

PHP/ASP/ColdFusion server model

Apache/PHP http:// www.apache.org /

A MySQL/PostgreSQL/Microsoft Access database http:// www.mysql.com / ; http:// www.postgresql.org /

NOTES:

A. Please follow the install notes found in each installation kit to configure your workspace. We presume you havea correctly configured platform for PHP/ASP/ColdFusion development under Dreamweaver MX (the configuredWindows or Linux server, share or ftp access, a Dreamweaver MX site).

Typographic conventionsThe notations and text formats used in this tutorial are found below:

database name will be displayed using bold font "HorizLooper_database"

database table: using a italic font "employees_emp"

database field will be displayed using a bold italic font "id_dep"

site name: underlined font "new site"

site page: mono spaced italic "index.php"

recordset name: underlined italic "recordset"

application button, menu or panel: bold font "Button"

source code: monospaced font "<?php echo "MX Loopers tutorial"?>"

FilesThe MX Looper Suite tutorial includes the SQL script to create the database and the files of the created site. Userscan use these files to overcome some technical difficulties they might encounter or to compare the results.

The database generation script: mxlooper.sql


MX Looper Suite Tutorialnested.mbd

The Nested website: LooperSuite_site_ADOdb.zip

LooperSuite_site_MySQL.zip

LooperSuite_site_ASP_J.zip

LooperSuite_site_ASP_VB.zip

LooperSuite_site_CF.zip

This tutorial: MX Looper Suite Tutorial.pdf

Functional overview

Nested Repeated Regions ExplainedMost of today's websites are listing large datasets from multiple sources. As a result, the need to create nestedrepeated regions has appeared and Macromedia hasn't solved it yet. Because of the way Dreamweaver recordsetsare created (above the HTML tag), it is impossible to create nested recordsets in the page body.

To overcome this limitation, our implementation of a Nested Repeat Region will use two recordsets, one being themaster recordset (for example the list with the departments in a company), and the other being the detail recordset(for example the company employees). Is the relational view, those two recordsets will be related to two tablesinvolved in a foreign key relationship (that means that the employees table will have a field called foreign key,that will store the primary key of the departments table).

A nested repeat region is usually created by looping in the master recordset and then setting the filter for the detailrecordset. That means that when we loop through the departments table, we will change the filter for theemployees recordset to the new primary key that identifies a department.

Horizontal Loopers ExplainedA Horizontal Looper will allow users to repeatedly display data on rows and columns. Users can control thenumber of records to list on each row as well as the number of rows to be displayed on the same page.

Dreamweaver MX allows you by default to create simple Repeat Regions. Even if powerful, those Repeat Regionswill always display the data in a tabular form, with only one table row per database record. This approach adds animportant limitation to the developer, that can't create a dynamic table with the database information (for examplehe might decide to present the departments in a tabular approach (3 rows, 3 columns) to better use the HTML pagesize limitations).

That's why we need the possibility of selecting a dynamic area on the page, then create a horizontal looper aroundit, to display the information in a tabular way.

Paged Recordset NavigationMacromedia Dreamweaver MX already includes recordset navigation commands and behaviors that automaticallygenerates code required to implement such features. However, using the default commands and SBs, users canonly navigate per records, and not per pages. It is also difficult to navigate in the surrounding pages, as thestandard navigation bar only allows you to go one page previously or next in the recordset,

With the MX Looper Suite, InterAKT has brought an important improvement by creating Paged RecordsetNavigation Statistics and Bars indicating the current page, the total number of pages instead of records andallowing users to directly visit a certain page using the navigation menu links.

For the moment, the "Paged Navigation Menus" for the ASP and ColdFusionMXLooper Suite versions are not implemented. We will develop this feature for laterversions.



Configuring Your Site

Database DesignThis tutorial is meant to be a demonstration of four dynamic site sections that can be implemented with the MXLooper Suite: dynamic menu multiple levels depth, dynamic departments/employees lists generation using nestedrepeated regions, dynamic frontend for image galleries and paged navigation menus. Therefore, the databasestructure will be strongly related with those features.

The dynamic menus are generated from a single table named "menu_mnu" containing four fields. In this table, the"idmnu_mnu" will act as a foreign key to "id_mnu". These field will be used to link the menu with it's parent (ifthere is the case).

The "department_dep" and "employee_emp" tables will be used to demonstrate dynamic list generation withnested repeated regions. Between these tables we have defined a "one to many" relation by using the "iddep_emp"foreign key included in the "employee_emp" table.

To implement the image gallery we have chosen to keep images in a site folder and to store the image names in adatabase table. Therefore, we have created a single table where we'll store this information.

At last, the "list_lst" table will be used to generate page content to help us demonstrate the Paged RecordsetNavigation.

Please find below the graphical representation of the database structure, made using the InterAKT visual queryeditor, QuB.

Creating the databaseTo create the database you can either use a database administration tool or you can create it in the command shell.

MySQL DatabaseThe PHP developers will use mxlooper.sql.

For your convenience please name the database "nested" as this is the name that we have used in this tutorial.Once the database is created you should run the "mxlooper.sql" that will automatically create the tables describedabove and some sample data. The images listed in the "image_img" table can be found in the tutorial site "img/"folder.

The "mxlooper.sql" script used to generate the database tables, for the MYSQL database server, are included inthe MX Looper Suite distribution package in a zip archive.

Microsoft Access DatabaseThe ASP/ColdFusion developers will use the nested.mdb database that is provided along with this tutorial.


Figure 1 Visual representation of the "nested" database


Creating a Dreamweaver MX SiteThe site that we'll use for this tutorial is a sample site that will have an index page namedindex.php/index.asp/index.cfm and four pages, one for each main features included in the MX LooperSuite. The pages are named: menu.php/menu.asp/menu.cfm,department.php/department.asp/department.cfm, images.php/images.asp /images.cfm and list.php (this page will be created only by the PHP developers as the feature used is notavailable for the ASP/ColdFusion MXLooper Suite versions).

Open the Macromedia Dreamweaver MX and, by using the "New Site" option from the "Site" menu and create anew site named "LooperSuite". Configure your site following the next three steps.

The following screenshots are made only for the site using the PHP_ADODB servermodel. For the developers who use the other types of server models, the only differenceis that they should choose their own server model in the Configuring the Testing Serversection.

Step 1: Configuring the Local Information SectionThe information requested in the Local info section is about the local configuration setting, that you will useduring the development process: local root folder (as you can see, we used the "D:\work\Nested\" folder) and theURL of the actual site http:// address (in our case, the HTTP address will be http://ducu.iakt.ro/www/test/Nested/(this is a local URL, so don’t try to load it in your browser)).

Step 2: Configuring the Remote Information SectionIn the Remote info section of this menu, you will have to indicate the connection type used to upload the files onthe production server and the actual path on the remote computer. You can also choose to automatically upload thefiles on the server after saving them, which can be very useful and will save you a lot of "Ctrl+Shift+U" keypresses (as this is the shortcut for uploading a file on the server). If you are working in a team, you might also wishto activate the Check In/Check Out support that will forbid two users to edit the same file.


Figure 3 Configuring the site Remote Info

Figure 2 Configuring the site Local Info


Step 3: Configuring the Testing Server SectionThe Testing Server section refers to the type of connection and protocol used to connect to a test server. PHAkt2users will have to select PHP_ADODB, the Dreamweaver PHP_MySQL users will select PHP_MySQL as servermodel, the Dreamweaver ASP_VBscript users will select ASP_VBscript as server model, the DreamweaverASP_JavaScript users will select ASP_JavaScript as server model while the Dreamweaver ColdFusion users willselect ColdFusion as server model. The HTTP address of the site and the path of the remote site root folder arealso required:


Figure 4 Configuring the Testing Server


Using The MX Looper Suite

Creating Multiple Level MenusAs we have already said, we will create a single site with four separate sections and an index page to demonstratethe MX Looper Suite features.

Edit the site and create, in the site root folder, the following files: • index.php/index.asp/index.cfm

• menu.php/menu.asp/menu.cfm

• images.php/images.asp /images.cfm

• department.php/department.asp/department.cfm

• list.php

Use the "New File" option displayed in the of the Files panel, "File" menu:

The index.php/index.asp/index.cfm page is the site entry page and it will be used as the main pagepointing to site's four sections. It is a simple page displaying a title and four static links. To create links, you havemake a selection on page and use the mouse right button to access the Dreamweaver MX contextual menu. Selectthe "Make Link" option from the menu and, in the displayed interface, select the link target file.

The following picture is a preview of the index.php/index.asp/index.cfm page:

Once the site index page is finished we'll pass to the menu.php/menu.asp/menu.cfm file which be used todisplay a dynamically generated menu.

We'll start by defining a connection to the site database.

Configuring the Database Connection

PHP_ADODBOpen the menu.php. To create a connection, go to the "Databases" tab from the "Application" panel, push the


Figure 5 Create New File

Figure 6 The site main page

MX Looper Suite Tutorial"+" button and choose the "ADODB Connection" option:

Dreamweaver will display the connection configuration window. Follow the example below to properly configurethe connection:

PHP_MySQLOpen the menu.php. To create a connection, go to the "Databases" tab from the "Application" panel, push the"+" button and choose the "MySQL Connection" option:

Dreamweaver will display the connection configuration window. Follow the example below to properly configurethe connection:


Figure 8 Configuring the ADOdb Connection

Figure 7 Create the database connection

Figure 9 Create the databaseconnection


ASPIn order to be able to query the nested.mdb database to retrieve information, you have to create a "System DSN".The Data Source Name (DSN) provides connectivity to a database through an ODBC driver. The DSN containsdatabase name, directory, database driver, UserID, password, and other information. Once you create a DSN for aparticular database, you can use the DSN in an application to call information from the database.

The DSN should be created on the ColdFusion server. From the Start menu go to Settings->Control Panel->Administrative Tools->Data Sources (ODBC) and select the System DSN panel. Click on the Add button andselect the Microsoft Access Driver (*.mdb) as driver for which you want to set up a data source.

In the configuration window that is displayed, enter "nested" for the Data Source Name, select the nested.mdbdatabase from your local folder as shown below:

Next, in Dreamweaver MX, open the menu.asp page. Go to the Databases tab from the Application panel andclick on the "+" button. In the connection configuration window that is displayed, enter the connection name (forexample nested), check you should check the Using DSN on Testing Server radio box, click on the DSN buttonand select nested, the DSN that you have created on your testing server.


Figure 11 The ODBC Microsoft Access Setup Window

Figure 10 Configuring the MySQL Connection


ColdFusionIn order to be able to query the nested.mdb database to retrieve information, you have to create a "System DSN".The Data Source Name (DSN) provides connectivity to a database through an ODBC driver. The DSN containsdatabase name, directory, database driver, UserID, password, and other information. Once you create a DSN for aparticular database, you can use the DSN in an application to call information from the database.

The DSN should be created on the ColdFusion server. From the Start menu go to Settings->Control Panel->Administrative Tools->Data Sources (ODBC) and select the System DSN panel. Click on the Add button andselect the Microsoft Access Driver (*.mdb) as driver for which you want to set up a data source.

In the configuration window that is displayed, enter ktml for the Data Source Name, select the nested.mdbdatabase from your local folder as shown below:

Next, as you open the menu.cfm page, you will notice in the Bindings tab in the Application panel a list withthe settings that are to be made in order to use dynamic data on the page:


Figure 12 Configuring the MDB Connection

Figure 13 ODBC Microsoft Access Setup Window


As you can see, the next step is to specify the RDS login for your ColdFusion server. After clicking on the RSDlogin link, enter the password to access the ColdFusion server:

If the nested system DSN that you have created previously is found, it will be displayed in the Databases tab andthe 4th and 5th steps of the Bindings tab list will be also checked. If not, click on the data source link and you willbe redirected on a Internet browser window where you should enter the ColdFusion server password. Select theData Sources sub-menu from the DATA & SERVICES left menu. In the Add New Data Source section enter"nested" for the Data Source Name, select "Microsoft Access" as driver and click on the Add button.

Check that nested has been added in the Connected Data Sources list:


Figure 14 Using Dynamic Data

Figure 15 Login to ColdFusion RDS

Figure 16 Add New Data Source


Go back in Dreamweaver MX and click on the Refresh button:

Normally, the nested database should appear in the Databases list.

Creating Multiple Level MenusBesides the generated menu the menu.php/menu.asp/menu.cfm page will also contain some static elementslike the page title few explanations. The title is in fact a description of what the page does. On the page first row,write "Site Menu Sample, using one repeated region (Menu) and two nestedrepeated regions (Sub and Sub-sub-menu):". The title zone will be separated from the content bya horizontal line insert using the "Horizontal Rule" button displayed in Dreamweaver MX "Common" tab fromthe "Insert" panel:

The page will display a three level menu generated from "menu_mnu" database table. The data is extracted fromthis table using three recordsets, one for each menu level. To display menu entries we'll use a Repeated Regionand two Nested Repeated Regions server behaviors.

By using the Horizontal Looper command we can directly create a two level-depth menu, implying two recordsets,a repeated region, used to display first level menus, and a nested repeated region to display second level menuentries. The third level will be added using the server behaviors and some customizations.

As explained, we'll first create the first two levels by using the MX Loopers, "Nested Repeated Region"command. Go to "MX Loopers" tab in the Dreamweaver "Insert" panel and use the "Nested Repeated Region"button.


Figure 19 Inserting Horizontal Lines

Figure 18 The Refresh Button

Figure 17 Connected Data Sources


For the moment, the "Paged Navigation Menus" for the ASP and ColdFusionMXLooper Suite versions are not implemented. Therefore, the first two buttons from the"MX Loopers" tab do not exist. We will develop this feature for later versions.

Dreamweaver will display the command configuration window where the source datasets must be configured. The"Connection" field requires a defined connection which will be used to get the datasets while the the "Repeatstyle" field will set the repeated region layout style. If the "List" style is chosen, the records will be displayed in acomma separated list, while if the "Sub-table" style is chosen the detail records will be displayed using separatedtable rows.

Example:

In the next fields we must select the dataset master table, the master table primary key and the field to display (thisfield will be displayed in page by the repeat region) as well as the detail table, the foreign key to primary table (thedetail table field that defines the relation between this table and the master table) and the detail table field todisplay (field to be displayed by the nested repeat region).

In our case the master table and the detail table are the same, as we have created, inside this table, a supplementalfield named "idmnu_mnu" which is used as foreign key. Follow the below image to properly configure thecommand:


Figure 20 Nested Repeated Region Button

Figure 22 Nested repeat region – List styleFigure 21 Nested repeat region – Tree style


The command will insert two recordsets, one for extracting data from the master table and another to extract datafrom the detail table, a repeated region that will display the first recordset results and a nested repeated region todisplay the second recordset results. We can see the generated server behavior list in the "Server Behavior" tab inthe "Application" panel.

Users can edit a server behavior from the list by using a double click on the selected item. We will rename therecordsets so that we can easily recognize them. The "rs1menu_mnu" recordset will be renamed "level1", while the"rs2menu_mnu" recordset will be renamed "level2". Dreamweaver MX will prompt an alert message and thendisplay the "Find and Replace" interface, so that the recordset name can be changed in all places where isreferenced. Just press "OK" on the first warning and "Replace All" in the next interface.

As you have might observed when the database tables were presented, the "menu_mnu" table also includes a"order_mnu" field that should help us set the menu entries in a desired order. Therefore we have to edit the tworecordsets and change the generated SQL so that the resulting data should be ordered by the "order_mnu" field.As previous recordset modif, go to "Server Behavior" tab, edit the recordset one by one and change the SQLscript. Follow the below image for details:


Figure 24 Server Behavior List

Figure 23 Configure the Nested Repeated Region Command


The resulting data will be displayed on page in a table containing two dynamic text fields on separate rows. We'llmodify the table border to "0" and set the dynamic texts font color into different blue shades.

The generating result should look like in the below image:

To insert the menu third level we have to create a new recordset that will be used to extract the menu entries and anested repeated region to display recordset results. Go to "Server Behavior" tab in the "Application" panel, pushthe "+" button and select the "Recordset" option:


Figure 26 Menu page preview

Figure 27 Two level nested repeat region

Figure 25 Order by "order_mnu" field


For PHP/ASP developersName the recordset "level3", select "nested" as recordset connection, choose "idmnu_mnu" as recordset filtervariable which is an "Entered Value" equals to "12345" and order by "order_mnu" field.

For ColdFusion developersName the recordset "level3", select "nested" as recordset connection.

When you are using the ColdFusion version of the MXLooper Suite, you do not have to enter the "12345" valuefor the idmnu_mnu field. You will be able to select this field in the "NestedRepeat/Nested Repeated Region"Server Behavior interface.


Figure 28 Create New Recordset

Figure 29 Configuring the level3 recordset - PHP


For PHP, ASP and ColdFusion developersThe next step will be performed by the PHP, ASP and ColdFusion developers.

Now we have to insert a new row in the existing table to display the "level3" recordset name field. To do that wehave to select the second row, use the mouse right button and choose the "Table/Insert Rows or Columns"option from the displayed contextual menu:

Due to a Dreamweaver code rendering problem, we'll have to split the new row into two cells before inserting therecordset field and create the repeated region. If not, Dreamweaver will generate the nested repeated region codeinside the <TR> tag, displaying all the results on the same row. Select the last row and use the "Split cell intorows or columns" button from the Dreamweaver "Properties" panel:


Figure 31 Insert Table Row

Illustration 30 Configuring the level3 recordset - ColdFusion


Now go to the "Bindings" tab in the "Application" panel, expand the "level3" recordset from the list and drag the"name_mnu" field into the first cell of table's last row. Also we'll change the font color to a light blue shade.

At this point we have to create the nested repeated region to display all the recordset results. Select the last rowand go to the "Server Behavior" tab in the "Application" panel. Press the "+" button and select the"NestedRepeat/Nested Repeated Region" option from the displayed menu:

For PHP/ASP developersIn the server behavior configuration window, choose "level2" as master recordset, choose "id_mnu" as primarykey and "level3" as detail recordset:


Figure 32 Split cell button

Figure 33 Dragging the name field into table cell

Figure 34 Creating a Nested Repeating Region SB


For ColdFusion developersAs explained above, the "NestedRepeat/Nested Repeated Region" Server Behavior interface has another field:Foreign Key. Configure it as shown below:

For PHP, ASP and ColdFusion developersThe next step will be performed by the PHP, ASP and ColdFusion developers.

At this point we have created all the elements required to generate a three level menu from a database source.Returning to Dreamweaver <TR> problem, we can now join the two cells that we have previously created. Wesimply have to select the cells and use the "Merge selected cells using spans" button from the "Properties" panel.

We'll finish by adding a new page layer displaying a short menu description. Go to Dreamweaver Insert menu andchoose the "Layer" option. When selecting the layer, Dreamweaver will display its properties fields in the"Properties" panel. To set new set new properties for the defined layer, follow the below image:


Figure 35 Configuring the Nested Repeated Region SB


All it rest to do is to enter layer's content, enter a "Back" link to the index.php/index.asp/index.cfmpage, save the page and upload it on the server. It will look like in the following image:

Dynamic Lists using Nested Repeated RegionsBesides generating menus, the nested repeated regions could be used to generate dynamic list containing data frommultiple recordsets. In this case, one ore more recordset fields will be repeatedly displayed every time otherrelated fields are displayed. Using the MX Loopers Suite we can automatically create a nested repeated region sothat all the required data can be displayed correctly.

In the department.php/department.asp/department.cfm we'll build a dynamic list using the MXLooper Suite "Nested Repeated Region" command. The page will also contain, as for themenu.php/menu.asp/menu.cfm , a page header and an information layer.

Open the department.php/department.asp/department.cfm and insert the page header like in thebelow image:

Now go to "MX Loopers" tab in the Dreamweaver "Insert" panel and push the "Nested Repeated Region"button. In the displayed configuration window select the "nested" connection, the "List" as style, the"department_dep" table as primary table and the "employee_emp" as detail table. Use the following image toproperly configure the command:


Figure 36 Defining layer properties

Figure 38 Department List page header

Figure 37 Menu Page Preview


The command will insert two recordsets, two dynamic text fields a "Repeated Region" and a "Nested RepeatedRegion" server behaviors along with a "Nested Show If Not First" server behavior. The first recordset is used toextract data from the master table which in our case is the departments table, while the second recordset is used toextract data from the detail table which in our case is the employees table. The Repeated Region will display allthe first recordset results while the Nested Repeated Region will display the second recordset results. The "NestedShow If Not First" server behavior is used to control the separator display, more exactly to avoid separatordisplay after the last result.

The server behavior list can be viewed in the Server Behavior tab in the Dreamweaver "Application" panel.Rename the first recordset to "departments" and the second one to "employees":

At this point we have finished to create the page application logic and we'll add a description layer, like in themenu.php/menu.asp/menu.cfm page. Configure the layer properties like in the below image:

Enter the layer content and add a "Back" link pointing to the index.php/index.asp/index.cfm file andthen save the file and uploaded on the server. The below image is thedepartments.php/departments.asp/departments.cfm page preview:


Figure 40 Server Behaviors List

Figure 41 List Page Layer Properties

Figure 39 Configuring the Nested Repeated Region for List Page


Creating an Image GalleryImage galleries are a common feature in any dynamic website. They usually include dynamic image lists andimage detail pages. The most difficult to implement was the image list as it was not possible to control the numberof images to display on the same row without writing manual code. With the Horizontal Looper Commands andSBs we can automatically control the number of rows and columns in a image gallery or other dynamic list.

In this tutorial we have chosen to create a image gallery along with the required navigation menus. The imageswill be stored in a site folder named "img". The images names will be recorded in the "image_img" table in thesite database.

First create the "img" folder under your site root and then open theimages.php/images.asp/images.cfm page and insert the page header as shown in the following image:

In order to display images on page we have to get the current image list from the "image_img" table. This is doneusing a new recordset named "images". To create the recordset, go to the "Server Behavior" tab in the"Application" panel and push the "+" button. Follow the below image to properly configure the recordset:


Figure 42 List Page Preview

Figure 43 Image List Page Header

Figure 44 Configuring the "images" recordset

MX Looper Suite TutorialNow we have to create an image place holder, that will define the thumbnail image properties. Go toDreamweaver "Common" tab, in the "Insert" panel, and use the "Image Placeholder" button:

The placeholder will contain a dynamic image field having as data source the "picture_img" field from the"images" recordset. The dynamic field can be easily created by dragging the "picture_img" field, displayed in the"Binding" tab when the "images" recordset is expanded, into the image placeholder.

Now we have to define the dynamic image field properties, specially the field dimensions and data source. Whenthe field is selected, Dreamweaver will display its current properties in the "Properties" panel. We have changedthese properties as shown in the below image:

Make sure that you add, in the "Src" field, the correct path to images folder. We have added "img/", as we storethe images in the "img/" folder placed under our site root.

Because we want to display two images on the same row we cannot use a repeated region to do that because thisbehavior can display only one recordset result per row. Therefor, we need to use a Horizontal Looper commandwhich automatically creates the code needed to create a horizontal loop. Such a loop will help us decide thenumber of result to display on the same row without having to modify the resulting code by hand.

Select the dynamic image field then go to "MX Loopers" tab, in the "Insert" panel, and press the "HorizontalLooper" button:

In the command configuration window, displayed by Dreamweaver, we can chose the source recordset which, inour case, is "images", select the number of rows and the number of columns to display:

The "Horizontal Looper" command will insert into page a one cell table containing the selected dynamic imagefield. For aesthetic reasons we'll set the table cell padding parameter to "20". To do that, select the table and editit's properties in the Dreamweaver "Properties" Panel:


Figure 45 Using Image Placeholder Button

Figure 46 Configuring the Dynamic Image Properties

Figure 47 Horizontal Looper Button

Figure 48 Set Table Properties


As for the case of usual repeated regions we also have to add navigation menus in order to be able to access alldatabase records. MX Looper Suite includes improved navigation commands, that will help us create navigationmenus on pages and not on recordset results.


To insert a navigation menu we'll use the the "Recordset Page Navigation Bar" button displayed in the "MXLoopers" tab from the "Insert" panel and choose the "images" as source recordset. We'll also insert a page statusbar using the "Recordset Page Navigation Status" displayed under the same "Nested" tag. As for the navigationbar we choose the "images" recordset as data source.

In the Dreamweaver's Design View, the images.php/images.asp/images.cfm page should look like inthe below image:

At this moment we have a functional image gallery that just requires some simple formating. We'll add a "Back"link pointing to site's index.php file and the page description layer, whose properties are defined like in thebelow image:

The generated output page should look like in the below image:


Figure 50 Page preview in Dreamweaver Design View

Figure 49 Configuring the Horizontal Looper Command


Building Paged Navigation MenusASP & ColdFusion


PHPNowadays sites publish large data sets, usually split in multiple small chunks in order to be easily read by users.To easily pass from one page to another we use navigation menus, a command already implemented inDreamweaver MX.

The MX Looper Suite includes improved versions of the "Recordset Navigation Bar" and "Recordset NavigationPage Status" commands which will be explained in this chapter. We'll use as data source table the "list_lst"containing 20 records. In our example we'll list these records by groups of two thus creating ten subpages.

We'll start by opening the list.php page and inserting the page header as shown in the below image:

Then we have to create a recordset named "list" which we use to extract data from the selected table. Configurethe recordset as in the following image:

As we'll display only the "name_lst" field from the source table, we don't have to create a dynamic table, arepeated region will work just fine. Go to the "Bindings" tab from the "Application" panel, expand the "list"recordset and drag the "name_lst" field on the page.


Figure 51 Defining Layer Properties

Figure 53 Navigation Page Header

Figure 52 MX Looper Image Gallery Sample


Select the field and go to the Dreamweaver "Application" tab from the "Insert" panel and push the "RepeatedRegion" button. In the displayed configuration window choose the "list" recordset and set the value "ShowRecords at a Time" field to "2".

Now we have to insert on the page the recordset navigation bar and the page status bar. To add a status bar, go to"MX Loopers" from the "Insert" panel, push the "Recordset Page Navigation Status" button and choose the"list" recordset. To insert a navigation bar, use the "Recordset Page Navigation Bar" from the same tab andselect the "list" recordset.

When edited using Dreamweaver Design View, the page should look like in the following image:

Now we'll add the "Back" link pointing to the index.php page and the page description layer configured asshown in the below image:

That's all. At this point the navigation page is ready to be saved and uploaded on server. When loaded in a browserit should look like in the following image:


Figure 54 Configuring the "list" recordset

Figure 55 Improved Navigation Page Preview



Figure 56 Defining Layer Properties

Figure 57 Navigation Page Preview


ConclusionsThe MX Looper Suite contains a pack of Commands and Server Behaviors designed to help web developers createdynamic websites faster.



Appendix - versions

PHPTo create this tutorial we have used the following software versions:

Code Generator: Macromedia Dreamweaver MX 6.0

Macromedia Dreamweaver MX Update 6.1

Extensions: MX Looper Suite 1.2.0

PHAkt 2.6.2

Database server: MySQL 3.23.x/4.x

PHP: PHP 4.3.0

Web server: Apache Web Server 1.3.27

Operating systems:

Workstation: Microsoft Windows 98

Web server: Redhat Linux 7.2

ASPTo create this tutorial we have used the following software versions:

Code Generator: Macromedia Dreamweaver MX 6.1 or 2004


Database server: Ms Access

Web server: IIS 5.0

Operating systems:

Workstation: Microsoft Windows XP

Web server: Windows XP Professional

ColdFusionTo create this tutorial we have used the following software versions:

Code Generator: Macromedia Dreamweaver MX 6.1 or 2004


Database server: Ms Access

Web server: ColdFusion MX 6.0

Operating systems:

Workstation: Microsoft Windows XP

Web server: Windows XP Professional

CopyrightWindows is a trademark of Microsoft, Inc.

Dreamweaver MX is a trademark of Macromedia, Inc.

Redhat is a trademark of Redhat, Inc.


Copyrights and Trademarks

Copyright - 2000-2003 by InterAKT Online, SRL.All Rights Reserved. This tutorial is subject to copyright protection.

PHAkt, ImpAKT, NeXTensio, QuB, Transaction Engine, MX Looper Suite

are trademarks of InterAKT.

All other trademarks are acknowledged as the property of their respective owners.

This document and the product to which it pertains are distributed under licenses restrictingtheir use, copying, distribution, and decompilation. No part of this document or of theassociated product may be reproduced in any form by any means without prior written

authorization of InterAKT Online, except when presenting only a summary of the tutorialand then linking to the InterAKT website.

DOCUMENTATION IS PROVIDED “AS IS” AND ALL EXPRESS OR IMPLIEDCONDITIONS, REPRESENTATIONS AND WARRANTIES, INCLUDING ANY

IMPLIEDWARRANTY OF MERCHANTABILITY, FITNESS FOR A PARTICULARPURPOSE OR NON-INFRINGEMENT, ARE DISCLAIMED, EXCEPT TO THE

EXTENT THAT SUCH DISCLAIMERS ARE HELD TO BE LEGALLY INVALID.

Send comments and suggestions to [email protected].

building horizontal loops and nested repeated regions

Documents