Module: Editor
Version: 4.2.1 +
User: Developer
Difficulty: Medium
Introduction
In this exercise we will display a table of multiple arrays in our website, using XSLT.
Prerequisites
- The Futurama Editor must be installed.
- Futurama Runtime must be installed.
- Completing the tutorial Using XSLT to display data first, is recommended.
Description
In the previous exercise we've displayed the in- and output of a formula on our website using XSLT.
In this exercise we will extend the complexity of the information we want to display. We will display arrays using the for-each element in the XSLT-file. Therefore we have to create XML with the array-information wanted.
For this exercise an XSLT-file is needed. It's not part of this exercise to create this XSLT-file yourself, so you can download this file by clicking here.
Assignment
Create the table below in the Futurama Editor. When you've created a DataTable with the correct Type (String) and the correct dimensions, you can copy the data from screen into the Editor.
| Index | Name | Gender | Nationality | City |
|---|
| 1 |
Frank |
Man |
Dutch |
Rotterdam |
| 2 |
Sarah |
Woman |
French |
Lyon |
| 3 |
John |
Man |
English |
Manchester |
| 4 |
David |
Man |
American |
Washington DC |
Now create a WebPage in which the following information is displayed, out of the DataTable, using XSLT.
| Name | Gender | Nationality |
|---|
| Frank |
Man |
Dutch |
| Sarah |
Woman |
French |
| John |
Man |
English |
| David |
Man |
American |
Take the following steps to do so:
- Open the Futurama Editor and create a new Document. You can give the Document the name ‘Persons’.
- First, create the Table given above.
- Next, create a Range object, that counts from zero to three. This Range will be used to create the arrays with the information we want to display.
- Now create a WebPage object, in which we will build the construction needed for displaying the information. (This WebPage should be the StartWebPage of your Document.)
- Within the WebPage, create an XmlConverter object. You can name the XmlConverter Result. In the XSLTFileName property, refer to the given XSLT-file 'Overview.xslt'.
- We now have to insert the right information into the XSLT-file. Open the XSLT-file to verify that we want to display a table with three columns, 'Name', 'Gender' and 'Nationality'.
The table is created using the 'for-each' element that loops through a variable named 'Persons'. In the XML, three arrays should be created, 'Name', 'Gender' and 'Nationality'.
To insert the Table Input, create an Action object, which you can name 'Create Table Input'. Place it above the XmlConverter, and refer to the XmlConverter in the TargetControl property.
- Within the Action object, create an XmlBuilder object. You can name the XmlBuilder ‘Data’.
- Within this XmlBuilder we will create the three arrays mentioned. Create three Index-formulas, type String. In the 'Table' property, you refer to the DataTable created. In the 'Row' property, refer to the Range. For the column property, you can enter the number of the column that refers to the column number of the DataTable. Verify that the number entered corresponds to the correct column number by evaluating your formula. The formulas should be named 'Name', 'Gender' and Nationality'.
- Save your file, and open your website in a browser.
Tips
- Open the XSLT-file to see how the for-each statement is constructed.
- Do not forgot to refer to your WebPage in the StartWebPage property of your Document.
Solutions
Download
You can download our solution for this assignment by clicking the image at the right. (Futurama 4.2.1.2)
Please note that you can very well have a different solution that is just as good as ours.
Variations
- (Easy:) Change the column name of the nationality from 'Nationality' to 'Nation'.
- (Medium:) Extend the table displayed with the City element. You'll have to add the array to the XmlBuilder and alter the XSLT-file accordingly.
- (Hard:) Sort the table in alphabetical order by Name.