|
When developing dynamic pages, most of the time we deal with lists of items (Product List, Order List, Country List, etc.) and we build dynamic tables to display them.
Assume that we want to display the products returned from a database query on the page. Copy & paste the XML content given below into a file and save the file as "c:\xml\products.xml".
<?xml version="1.0" encoding="UTF-8"?>
<root>
<products>
<item>
<NAME>Desktop Computer</NAME>
<STOCK>20</STOCK>
<PRICE>799.99</PRICE>
</item>
<item>
<NAME>Notebook Computer</NAME>
<STOCK>10</STOCK>
<PRICE>1199.99</PRICE>
</item>
<item>
<NAME>Laser Printer</NAME>
<STOCK>5</STOCK>
<PRICE>649.00</PRICE>
</item>
<item>
<NAME>Hard Disk Drive</NAME>
<STOCK>30</STOCK>
<PRICE>88.5</PRICE>
</item>
</products>
</root>
|
You can see that each product is represented by an <item> tag under the <products> tag and each item tag contains the same set of tags which are NAME, STOCK and PRICE. To be able to display all the products in the XML file we need a repeating mechanism.
Steps:
| 1. | Create a new page in your project |
| 2. | Set its "XML file for Preview "property to "c:\xml\products.xml" |
| 3. | Click on Panel ( ) icon on the Basic Elements toolbar and click on an empty spot on the page design area |
| 4. | Enter "/products/item" to the "Repeat | For Each" property of the panel element |
| 5. | Insert 3 text elements into the panel and dock them to the panel by using the ( ) button on the Dock & Anchors toolbar. |
| 6. | Define the $vof() functions in the values of the text elements as follows. |
Note that $vof() definitions are made relative to the /product/item nodes. It would be a mistake if they are defined as $vof(/products/item/NAME); because a definition that has a "/" character at the first position means the first products/item/NAME node starting from the root node.
| 7. | Define the $vof() macros in the values of the text elements as follows. |
| 8. | Align the STOCK text in the center ( ) and the PRICE text to the right ( ). |
| 9. | Enter "#.###.00" to the "Value Format" property of the PRICE text |
| 10. | Click on the panel element to select it and click on ( ) button on the Align & Size toolbar to eliminate the unused space at the bottom and the right side of the panel element. |
| 11. | Press F9 to preview it; The result in the browser should look like this; |
| 12. | To give a different background color for the even numbered rows enter "$vof(position() mod 2 = 0 ? 'silver')" to the "Background | Color" property of the panel. |
| 13. | Additionally, to give warning for the low stock level enter "$vof(STOCK < 20 ? 'red')" to the "Font | Color"property of the element |
| 14. | Press F9 again to see the following result on the browser. |
| 
