Search

Module: Editor

Version: 4.2.1 +

User: Developer

Difficulty: Easy

Introduction

In this exercise you will work with an action in your website application

 

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 previous exercise Adding CSSYou can download the basis for this exercise (the end-result of this previous exercise), by clicking here.
The Action object enables you to invoke changes in your application. It can for instance be used to change properties of other Futurama objects. In this exercise we will use the Action object to change the color of a WebPanel, when a visitor clicks a button.

Assignment

Create in your website application three buttons that will change the color of the left WebPanel.

Take the following steps to do so:

Futurama Editor

  1. Create in Futurama Editor in the left WebPanel three buttons, and within every button an Action object.
  2. Select the TargetControl property and refer to the Left WebPanel, as this is the object that the Action will 'work' on.
  3. Create in every Action a Fixed (string). Give all these Fixed's the name 'CssClass'. This will cause the property CssClass of the WebPanel to change to the value of the fixed.
  4. Give each Fixed a different appropriate value in the Text property: for example: 'red', 'green' and 'orange'.

Css File

  1. Open the StyleSheet that is connected to your WebPage.
  2. Add the CssClasses ('.red', '.green' and '.orange') to your stylesheet, and copy the content of the CssClass 'Left', but with the corresponding background-color.
Now open your website in a browser and see if you can change the color of the left panel by clicking the buttons. 

 

Tips

  • The text for each Fixed should be identical to the class you add in your CSS file, including the uppercase.
  • You can test in the Editor if your Action indeed changes the CssClass property. Rightclick the Action object and choose Debug --> Execute.
  • If you make changes in the Editor, you should save and then restart your application in your browser. If you make changes in the Css-file, you don't need to restart. Just refresh the website and your change will be visible.
  • You can consider to remove the Class 'left' from your website. To make sure that your websites starts correctly, you should change the default CssClass entry to one of the remaining 'color classes'.
  • Your buttons will be placed directly next to each other. You can fix this by using CSS, or (quick fix) just give a blank change in the name of the button. 

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:) Let the buttons change the color of the right panel instead of the left panel. You don't have to change their positions.
  • (Medium:) Place the buttons beneath each other instead of next to each other.
  • (Difficult:) In your CSS file the height, width and position of the left panel is now defined three times. Change your CSS construction (Editor and CSS-file) so that this is only defined once. (To do so, you will have to enter two classes to the WebPanel.)
    In this way your website is easier maintainable. If you want to change the size of the left webpanel, you only have to make one change in the CSS-file, instead of one.

Updated: 2013-01-09