Search

 

Module: Editor

Version: 4.2.1 +

User: Developer

Difficulty: Easy

Introduction

In this exercise we will display information on 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 

This is a sequel of the Exercise Summation (Adding interactivity to your website). You can download the basis for this exercise (the end-result of the Summation exercise and the extra external files) by clicking here.

In this exercise we want to display information in our website, by converting XML to HTML. Therefore the XMLConverter object is used, which refers to an XSLT document. EXtensible Stylesheet Language Transformations (XSLT) is a language that transforms XML documents into other documents, like HTML, XML, PDF etc. 

Assignment

Create an overview that displays the input and output of the Add function in the website. The overview should show the following table:

Amount One  150
Amount Two  200
Result  350

In the basis-download you will find an XSLT file and a CSS file that you can use for this exercise.

Take the following steps to complete the assignment:

  1. Open the Futurama-file website.xml.
  2. Create an XmlConverter object within the website, below the input button. In the XSLTFileName property, refer to the XSLT document. In this document we have defined the HTML we want to display in our website, and in which way the XML input will be transformed into HTML. Open the document to see the table structure. Note the input tags 'Amount_1', 'Amount_2' and 'Result' within the table.
  3. We will now create the XML input for the XMLConverter. Create an Action object and place it above the XMLConverter.
  4. Within the Action object, create an XMLBuilder object and name it ‘Data’. The XMLBuilder will hold the XML that we need as input for the XMLConverter. In the Action object, refer to the XMLConverter in the TargetControl property. 
  5. Within the 'Data' XMLBuilder, create references to the input Uservariables and the Result, and name them in accordance with the names mentioned in the XSLT document. 
  6. In the StyleSheet property of the WebPage object, refer to the CSS file.

Tips

  • With the XSLT document given, the name of the XMLBuilder does not need to be 'Data'. If you change it, the overview table will be displayed as well. You can change this by entering a name in the  tag in the XSLT document, instead of the asterisk *.

Solutions

Download

image

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

If you want some more practise on this subject, you could try the extra exercises below.
We won't provide a solution for these variations, just consider them as a way to further experiment with Futurama.
  • (Easy): Add a text 'This application is created using Futurama software' below the overview table. Enter this text within the XSLT Document.
  • (Difficult): Add a text line 'This calculation was performed on ' below the overview table. Use the formula 'DateNow()', enter it in the XMLBuilder and refer to the name of the formula in the XSLT document.

Updated: 2013-04-12