Apply the Nested Repeat Region Wizard from the MX Kollection tab of the Insert panel. This way, all continents will be displayed, each one with its own countries (of course, not in the wanted layout yet).
Configure the first step of the wizard as shown here.
Configure the second step of the wizard as shown
below:
Choose the List repeat style.
Click Finish when you are done configuring the wizard.
The page in Dreamweaver,
in Design view, should look like
this (for the PHP server model):
Note: If the translator does not look right, save the page,
close it, and reopen it.
Press F12
to preview the page in browser (after saving and uploading it to the server),
and see the current continents/countries display:
On your way to the wanted layout, there are some changes you need to perform back in the Dreamweaver page:
First, select all the content in the second table column and press Ctrl+X to cut it from its current location. To select the whole content, follow the instructions below, according to you server model:
For PHP, click the Nested Repeat translator.
For ASP VBScript, select the first element in the column (the "ASP" icon on the very left), and then, while keeping the Shift key pressed, use the right arrow to select the rest of the elements in that column. To make sure you selected everything, switch to Code View and check if everything between the <td> and </td> tags is selected. Then return to Design View.
For ColdFusion, click the <cfloop> translator in Design view, then switch to Code view. Extend the selection a few rows above as well, so all the content between the <td> and </td> tags is selected. Then return to Design View.
Click the dynamic text in the first table column, press the right arrow to position the cursor after it, and then press Enter (twice) to create a new paragraph in that table cell. On the new paragraph, paste (Ctrl+V) the clipboard content.
Right-click inside the second table column (which is empty now), and from the contextual menu that opens, select Table -> Delete Column to remove the column.
Click the first dynamic text (the master one) to select it, and make it bold (Ctrl+B, or use the Property Inspector button).
Select the content you pasted earlier on the second paragraph, and then press Tab. To select that certain content, follow the instructions below, according to you server model:
For PHP, click the Nested Repeat translator.
For ASP VBScript, select the first element in that paragraph (the "ASP" icon on the very left), and then, while keeping the Shift key pressed, use the right arrow to select the rest of the elements in the paragraph. To make sure you selected all you need, switch to Code View and check if everything between the <p> and </p> tags is selected. Then return to Design View.
For ColdFusion, click the <cfloop> translator in Design view, then switch to Code view. Extend the selection a few rows above as well, so all the content between the <p> and </p> tags is selected. Then return to Design View. If when you press the Tab key, a new paragraph is created (instead of indenting the content), place the cursor there and then press Delete so that the content below will lift one paragraph up.
Click inside the translator in page (for example, click the master dynamic text), and then select the <table> tag in the Tag Selector. Change the border thickness from 1 pixel to 0 pixels:
Since you want to display countries (items) in
three columns (for each continent), it would make sense to apply the Looper Wizard on the detail dynamic text. But
when you try to do that, you get the following message:
In this case, you need to use a certain trick so that the Nested Repeat structure will not be recognized in the Server Behaviors tab of the Application panel anymore. Follow the instructions below, according to you server model:
For PHP:
Click the Nested Repeat translator to select that section, and then switch to Code view.
In the beginning part, after the opening brace "{" of the if structure body, enter: //trick (comment). The code should look like this:
Note: You can enter a comment in other places of the structure as well.For ASP VBScript:
Click the first "ASP" icon on the second paragraph, and then switch to Code view.
In the beginning part, after the if-then line, enter: 'trick (comment). The code should look like this:
Still in that code zone, replace the name of the nested_detail2country_cnt variable with nested_detail2country_src. There should be four replacements. The code should look like this afterwards:
For ColdFusion:
Click the <cfloop> translator in Design view, then switch to Code view. A couple of rows above the selection, before the select line, enter: <!---trick---!> (comment). The code should look like this:
Enter the same comment at the beginning of the page (Code view), above the select line inside the third <cfquery> tag. The code should look like this:
Notice how the Nested Repeat server behavior disappears from the Server Behaviors tab of the Application panel.
It is now possible to apply the Looper Wizard. Select the detail dynamic text (single-click) and access the wizard from the MX Kollection tab of the Insert panel.
Configure the wizard interface as shown below:
Since for each continent (category) you want to display countries (items) in a certain number of columns, select the Horizontal looper type.
Select the detail2country_cnt recordset to loop by. This recordset was created by the Nested Repeat Region Wizard.
Check to display all the records (countries in a continent), in 3 columns.
Click OK when you are done configuring the wizard.
Click the detail dynamic text, and in the Tag Selector select the <table> tag corresponding to the table added by the Looper Wizard (second <table> tag). Set its cell padding to 3 pixels, its cell spacing to 10 pixels, and its border to 0 pixels (just as shown here).
There is one more thing to do, but totally compulsory. In order for countries (items) to be displayed in the number of columns set (3), there is a line of code that needs to be duplicated:
For PHP:
Click the Horiz Looper translator in Design view, then switch to Code view.
In the selected section, locate the $nested_detail2country_cnt= 1; line (above the line with the increment operation), copy it, and then paste it after the while line (before the ?> closing tag). The code should look like this afterwards:
For ASP VBScript:
Click the Horizontal Looper translator in Design view, then switch to Code view.
In the selected section, locate the nested_detail2country_cnt = 1 line (in the first if structure), copy it, and then paste it after the Wend line (in that code section). The code should look like this afterwards:
Then comment the code line above the next Wend line (type ' at the beginning). The code should look like this:
For ColdFusion:
In the Server Behaviors tab of the Application panel, select the Nested Show If Not First server behavior and press the Minus (-) button to remove it. If you notice an extra comma in Design view, inside the <cfloop> translator, delete it as well (make sure you only delete the comma and nothing else).
Select the Horizontal Looper server behavior in the Server Behaviors tab of the Application panel and switch to Code view. Notice that the <cfloop> tags are outside the <table> tags. What you need to do it to move them inside the <tr> tags:
Move the <cfloop query="detail2country_cnt"> line after the <tr> one.
Move the </cfloop> line above the </tr> one.
After cutting and pasting the two lines, the code should look like this:
After following all the steps
above, save the page, upload it to the server, and press F12
to preview it in browser:
