Search

Prerequisites: Futurama Web Tutorial 2.

Minimum Futurama Version to be used: 3.2

Learning goal: In this Tutorial we will continue with the previous tutorials. A couple of TextBoxes, a new object, will be added to the website. Together they will form the day, month and year of a date. This date will then be shown on the screen. We will also discuss the properties 'ShowInitialValue' and 'AutoPostBack'. We will not cover formulas that can be added to validate the input of the textboxes and to check whether the resulting date is a valid one. This is left for the reader. 

Click here for the example of Tutorial 1. Save the contents of the ZIP-file (i.e. the directory "HelloWorld" plus it’s contents) in the main Futurama directory and rename the directory "HelloWorld" to "Textboxes". Of course you can also do the tutorial and save the result in a new directory "Textboxes".

  • Open the Editor.
  • Open with File » Open or the button  the file calc.xml in the directory "Textboxes".
  • Rename the Document to "Textboxes".
  • Change the property PageTitle to "Textboxes".
  • Change the property Text of the WebLabel 'Text' also to 'Textboxes'.

We’ll now start with adding three TextBoxes.

  • Select WebPanel 'centre', do a rightclick in the Design Window and select New » TextBox.
  • Give the TextBox the name 'Day'.

This is going to be the place on the website where the day can be filled in by the user. Because a month can have 31 days at most, we will indicate that the maximal length of the input is 2 characters.

  • Give the property MaxLength value 2.

On order to define a layout for the textbox we have to give it a CssClass.

  • Open the file content.css in the directory "Textboxes" and add the following text to the file. Save the file afterwards.
.textbox
{
float:left;
margin-top:20px;
text-align:center;
}

.day
{
width:20px;
}

.month
{
width:20px;
margin-left:20px;
}

.year
{
width:40px; 
}

The class .textbox containts properties that all three textboxes will get. The classes .day, .month and .year have additional properties for the individual textboxes. We could have skipped the use of the class .textbox and have added it’s properties to each of the three individual classes, but this will make the stylesheet more laborious to maintain and increase the risk that something is overlooked.

  • In the Futurama Editor give the property CssClass of Textbox 'Day' the value "textbox day". This means that 'Day' will get the properties of class "textbox" as well as class "day".
  • Manoeuver 'Day' between 'Text' and 'right'.

Especially when Futurama Documents increase in size, it becomes more difficult to keep track of all of it’s objects and classes. As We have added to content.css a number of additional classes, but as we have seen, not all have yet been used in the Editor (in particular .month and .year). In Futurama we can generate en overview of the classes and which of these are used and which are not.

  • Go to Edit » CheckCSS. The following screen will appear:

We can see here that .textbox and .day are indeed used (Used styles) and .month and .year not (yet) (Unused styles). In practice this can be a useful check, for it is recommendable to keep the stylesheet as small as possible. Therefore, classes that are defined in the stylesheet but are not used can better be removed.

The next step is to create two more TextBoxes for the month and year.

  • Copy TextBox 'Day twice and rename the copies 'Month' and 'Year'.
  • Give the property MaxLength of 'Month' the value 2 and the property CssClass the value "textbox month".
  • Give the property MaxLength of 'Year' the value 4 and the property CssClass the value "textbox year".
  • Manoeuver 'Month' between 'Text' and 'Day'.
  • Manoeuver 'Year' between 'Day' and 'right'.
  • Verify with Edit » CheckCSS that .month and .year have moved from Unused styles to Used styles.

For the sake of clearity we will add two WebLabels between 'Day, 'Month' and 'Year' containing only a slash.

  • Create in the Design Window with New » WebLabel two WebLabels and call these 'slash1' and 'slash2'.
  • Define for both WebLabels at the property Text a Fixed with value "/".
  • Give both WebLabels at the property CssClass the value "textbox slash".

The latter we have to add to our content.css. Add the following text to the file and save it.

.slash
{
margin-left:2px;
margin-right:2px;
}
  • Manoeuver 'slash1' between 'Month' and 'Day' and 'slash2' between 'Day' and 'Year'.

Now it’s time to see what the resulting website is so far.

  • Save the document.
  • Open the Internet Explorer or another webbrowser and type the following URL 'http://localhost/futurama/default.aspx?folder=Textboxes'. Here "localhost/futurama" and "Textboxes" are the name and location of the Futurama directory. In your organization the name and/or location can differ. Ask your system administrator for assistence.

The screen should now look like the one below. Verify that the first and second textbox can have a maximum of twee characters while the third has a maximum of four.

image

The next step is to model what should be done with the values of the day, month and year that a user will enter. We would like that the three values are combined in a single date that will be shown on screen.

  • Create in the the Document 'Textboxes' a Node and call it 'Validation'.
  • In the Node 'Validation' create three UserVariables with New » UserVariable.

A UserVariable is an Object the value of which is not predetermined. The value of a UserVariable is determined during runtime by the user when he enters input in the website. In our case this will be the case when the user enters a day, month or year in the respective TextBoxes.

  • Name the three UserVariables 'Day', 'Month' and 'Year'. Leave the type as it is (i.e. long).

Now we have to make sure every UserVariable is connected to the proper TextBox. So if the user enters a day, the uservariable 'Day' will be assigned this value.

  • Select the TextBox 'Day' and click on the button 3puntjesat the property UserVariable.
  • Define a Reference to the UserVariable 'Day'.
  • Repeat this action for the TextBoxes 'Month' and 'Year' and their respective identically labeled UserVariables.

It is possible to assign a UserVariable a Default value. This is the initial value of the UserVariable. When the UserVariable is connected to a TextBox, as in our case, this initial value can be made visible in the TextBox in the website by means of the property 'ShowInitialValue' of the TextBox. We will setup the Default values in such a way that the date of today is shown initially.

  • Define at the property DefaultValue of UserVariable 'Day' a Formula and select Date and Time » Day long.
  • Define at the argument Date a Formula and select Date and Time » Now date. Click on OK thrice.

In the Results Window we can now verify that the value of the UserVariable is indeed the day of today.

  • Repeat the steps stated aboven for the UserVariables 'Month' and 'Year', but select the Formula Date and Time » Month long and Date and Time » Year long respectively.
  • Verify that the result is indeed the month and year of today.
  • Set the property ShowInitialValue of the TextBoxes 'Day', 'Month' and 'Year' to True. If we would not do this the Textboxes in the website would remain empty.

The Editor should now look like below.

When the Document is saved and we open it in a webbrowser, we can see in the three TextBoxes the day, month and year of today.

The final thing that needs to be done is to compose a date out of the separate values for the day, month and year.

  • Create in the Node 'Validation' a new Formula of type date.
  • Call the Formula 'Date'.
  • Select Date and Time » Date date.
  • At the argument Year, Month and Day make a Reference to the UserVariable 'Year', 'Month' and 'Day' respectively. Click on OK.

In the Results Window the date of today should now be seen. But we would also like to show this date on screen.

  • In the Node 'centre' create a new WebLabel and manoeuver it between TextBox 'Year' and WebPanel 'right'.
  • Call the WebLabel 'Date'.
  • Give the WebLabel 'Date' the CssClass "weblabel".
  • Create in the property Text a Formula and select Text » FormatDate string.
  • Make in the argument Date a Reference to the Formula 'Date' in the Node 'Validation'.
  • Give the argument Format the value "MMMM d, yyyy". This format will make sure the date is presented with the name of the month written fully e.g. "January 5, 2009". Click on OK twice.

We have to make sure that if a user fills in the textboxes on the website the date will be shown automatically. This can be accomplished with the aid of the property AutoPostback. This property can have the value 'True' or 'False'. When the property of a Textbox is set to 'True' immediately after leaving this Textbox the entered value will be used by in the calculations. When the property is set to 'False' this will not happen. Instead the user will have to click on a submitbutton. See here for more information about the properties AutoPostback and Submitbutton.

  • For the three Textboxes set the property AutoPostBack to 'True'.
  • Save the document and open it in a webbrowser. The following screen will appear:


The date of today is initially shown. It is possible now to fill in other days, months and years in the TextBoxex and show the date on screen by pressing Enter. Note that there is no check on neither the values in the Textboxes nor the date. It is possible to fill in non-numerical characters and invalid numbers e.g. 14 for the month. In this case the date shown will have been increased by the 'excess'. For example, when entered 14/1/2011 will result in February 1, 2012, two months later than 12/1/2011.

A complete example of this exercise can be downloaded here: Textboxes. Note that this example is created in version 3.2 of Futurama. Opening this example in a newer version of Futurama will prompt Futurama to update the example to the newer version. Click OK when this message appears.