Search

 

Module: Editor

Version: 4.2.1 +

User: Developer

Difficulty: Medium

Introduction

In this exercise we will create a simple interactive application by using a DropDownList

 

Prerequisites

- The Futurama Editor must be installed.
- Futurama Runtime must be installed.
- Completing the tutorial Adding interactivity to your website first, is recommended. 

 

 

Description 

We use a DropDownList in a WebPage  to choose a person. Next to the DropDownList we want the nationality of the chosen person to be displayed.

Assignment

Create a DropDownList in a WebPage were we can select a person from the table below. On the WebPage next to the name the nationality of the chosen person should be displayed. When we change the person, the nationality should change as well.

Index   Name  Gender  Nationality  City 
Frank Man Dutch Rotterdam
Sarah  Woman French Lyon
John Man English Manchester
David Man American Washington DC

Take the following steps to do so:

  1. Create a DataTable type String with the appriopriate size, and copy the data above into this table.
  2. Create a Webpage and create a DropDownList within in. Name is something like ListOfNames.
  3. Within the DropDownList, create 4 WebLabels. In the property Text of the WebLabels, fill in the names (Frank, Sarah..) of the DataTable, in the same order. You can name the WebLabels likewise.
  4. Create a UserVariable, Type long and name it 'Index'. In the DropDownList, create a reference to this Index in the property Uservariable.
  5. Create a Formula, Type string, function Index (Table section). In the Table input, refer to the DataTable. In the Row input, refer to the UserVariable Index. For the Column input, fill in the number of the column where we can find the nationality of the persons. (Please not that the Index column doesn't count, ánd that you should start counting with 0 instead of 1)
  6. In the WebPage create a WebLabel, and name it something like 'Result'. In the property Text, refer to the Formula which returns the nationality.
  7. The DropDownList also has the property AutoPostBack. This should be switched to True. In that way, when we select something in the dropdownlist, the value is directly submitted to the UserVariable Index. Otherwise we should have f.i. create a button to trigger a postback.

Tips

  • Remember to select the webpage as your StartWebPage in your Document.
  • The DefaultValue of the UserVariable has to be zero.

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

  • (Easy;) Next to the nationality, show the city of the person as well. 
  • (Medium:) Set the AutoPostBack property of the DropDownList to False, and create a button so that the correct nationality is displayed after selecting a different person in the DropDownlist

Updated: 2014-07-08