Exercise 3: The ChangeValue object (Difficult)

Tutorials > Beginners > Working with Actions in Futurama > Exercise 3: The ChangeValue object (Difficult)

Module: Editor

Version: 4.2.1 +

User: Developer

Difficulty: Difficult

Introduction

In this exercise the ChangeValue object is used.

Prerequisites

- The Futurama Editor must be installed.
- Futurama Runtime must be installed.
- Completing the tutorial Working with Actions in Futurama first, is recommended.

Description

This is a sequel of the exercise ’World Population’ and a varation to the exercise ’On and Off’. You can download the basis for this exercise (the end-result of the World Population exercise) by clicking here.

In the Exercise 'On and Off' we worked with two buttons to turn the graphs visibility on/off. Instead of using two buttons we want to use one button to control the graphs visibility. Therefore we will use the ChangeValue object.

Assignment

Make for every continent one button that that will switch the visibibily of the series of that continent on or off.

Take the following steps to do so:

Futurama Editor

Create a section Node in your application, in which you add a UserVariable for every continent, type Boolean. These UserVariables will represent the visibility of the continent series. (So you can name them accordingly.)
Create Button objects in the Webpage, one for every continent.
Create a ChangeValue object within each Button object. We will use the ChangeValue to switch the value of the visibility UserVariable. In the property 'TargetUserVariable', refer to the corresponding UserVariable. In the property 'NewValue', create a logic formula 'Not', and again refer to the UserVariable. When the ChangeValue is executed, the value of the UserVariable will switch from 'True' to 'False' or vice versa.
Now at the top of your webpage, create an Action object that will set the correct visibility values. The property 'TargetControl' should refer to the Population graph.
Within the Action object, create a Node named 'Series'. Within this Node, create references to the different UserVariables. By giving the references the correct names, like 'Asia:Visible', the visibility property will be set each time the page is loaded.

Now open your website in a browser and see if you can change the visibility of the different series by clicking the buttons.

Tips

The Action object should be placed above the Population graph. In that way, when the page is loaded, the Action is executed before the graph is rendered. If the Action is placed below the graph, the graph will already be 'displayed' on the website, before the Action could change the properties.
The default Value of the UserVariables determines the initital visibility of the series. Set the property DefaultValue to True, to get the webstie to open with a fully shown graph.
Remember to fill in the Text property of every Button.

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

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.

(Medium:) Make sure the height of the Y-Axis (amount of people) is a fixed value. In this way it is more clear that the different continents appear and disappear.
(Difficult:) You can change the Text property of the Buttons as well. Extend the websites flexibility by adding 'On' or 'Off' to the Button texts, depending on whether the button will change the visibility to 'True' or 'False'.

Updated: 2013-04-12