Module: Editor
Version: 4.2.1 +
User: Developer
Difficulty: Easy
Introduction
In this exercise we will create a simple interactive application.
Prerequisites
- The Futurama Editor must be installed.
- Futurama Runtime must be installed.
- Completing the tutorial Adding interactivity to your website first, is recommended.
Description
Interactivity is the ability for website visitors to create an action and get a response on the website. In this exercise we will create an application that adds up two numbers that are entered by a user.
Assignment
Create a Website application that has two input fields and adds up the numbers entered by a visitor.
Take the following steps to do so:
- Create a new Futurama Document in the Futurama Editor
- Create two UserVariables of type Long and name them Input1 and Input2.
- Create a formula 'Add' that adds up both numbers. You can test this function by giving the UserVariables testvalues and then evaluating the formula in the Evaluate-window.
- Create a WebPage object in which you will create the content of the website.
- Create two TextBox objects in your WebPage, and name them Input1 and Input2. In the UserVariable property, refer to the corresponing UserVariables.
- Create a WebLabel object in your WebPage, named 'Result'. In the Text property, refer to the add formula.
- Create a Button object in your WebPage. In the Text property enter a text like 'Go'. The button only needs to invoke a new pageload, so there are no further properties you need to fill in.
- Open your website in a browser and see if your application works.
Tips
- Remember to select the webpage as your StartWebPage in your Document.
- We didn't pay any attention to the lay out of the website. Therefore the content of the website is all in the same line without any space in betweeen.
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.
- (Easy): Change the website in the following ways:
- Use WebPanels to show the result and button beneath the input fields.
- Use a stylesheet to include background-colors to the different parts of your website.
- Set the default values of both the input fields to 5, so that a result of 10 is displayed when your website opens.
- Set the property 'ShowInitialValues' to 'True', so that the values of 5 are shown as well.
- (Medium): Add a second formula in which the input numbers are multiplied. Add a second WebLabel object for displaying the result. You don't need to add a button, TextBoxes or UserVariables!
- (Difficult): Use the property PostBackOnEnter to create the same interactivity without using the button. Delete the Button object.