Leverage Your HTML5 Savvy to Build Commercial, Cross-Platform Apps and Games - Page 4

By Bill Hatfield | eMail Email Print Print

Now choose the ELEMENTS tab on the left. The Main page will provide a list of options for the user. Under LAYOUT, the second item is List. Drag and drop this item to your Main page in the center.

Layout: List

The list will automatically include two items.

Main Page

You’ll notice the Properties List now appears on the right.

List Properties

Confusingly, Item 1 and 2 and are identified as Item 0 and 1 here. No matter – you’ll be changing the names anyway. The text for each shows the HTML that represents this element. By default, they are links to other pages.

Change Item 0 so that it looks like this.

<a href="#Space">Space</a>

Change Item 1 to look like this.

<a href="#Time">Time</a>

Don’t forget to click Apply!

Now return to the PAGES tab on the left and click to select the Space page. Then click the ELEMENTS tab. There are three options for conversion, so this will be another list. Add the list as you did in Main. Add a third item to the list by clicking the plus icon in the lower left of the List Properties pane. Set the properties as below.

Item 0:

<a href="#K2M">Kilometers to Miles</a>

Item 1:

<a href="#M2F">Meters to Feet</a>

Item 2:

<a href="#H2A">Hectares to Acres</a>

When you click Apply, you’ll see the appropriate text appear for the list items.

List Item Text

Return to the PAGES tab on the left. I’ll come back to Time later - for now click the page Kilometers to Miles. Then click the ELEMENTS tab. Add the following controls in this order:

Text (in the MEDIA section)
Input (in the FORMS section)
Button (again in FORMS)
Another Text

Set the properties as specified below. Leave any unspecified properties with their default values. Remember you must hit Apply after setting the properties for each control! If you click to select another control without hitting Apply, your changes will be lost.

Control	Property	Value
Text	Text	<p>Enter the distance in kilometers and click Convert to Miles.</p>
Input	ID	Kilometers
	Text	In Kilometers
	Label	Distance
Button	ID	ToMilesButton
	Text	Convert to Miles
Text	Text	<span id="K2MAnswer"></span>

The result should look like this.

Kilometers to Miles

That’s it for page Kilometers to Miles. And, actually, Meters to Feet and Hectares to Acres are nearly identical. Follow the same procedure you did for Kilometers to Miles and use these property values to create the controls.

Meters to Feet

Control	Property	Value
Text	Text	<p>Enter the length in meters and click Convert to Feet.</p>
Input	ID	Meters
	Text	In Meters
	Label	Length
Button	ID	ToFeetButton
	Text	Convert to Feet
Text	Text	<span id="M2FAnswer"></span>

Hectares to Acres

Control	Property	Value
Text	Text	<p>Enter the area in hectares and click Convert to Acres.</p>
Input	ID	Hectares
	Text	In Hectares
	Label	Area
Button	ID	ToAcresButton
	Text	Convert to Acres
Text	Text	<span id="H2AAnswer"></span>

The last page to complete is Time. In this one, the user can find out what time it is in a different time zone. First they enter their own time and a time zone. Then they enter the time zone that they want to convert to. Add these controls, in order.

Text
Input
Select (in FORMS)
Text
Select
Button

Set these properties.

Control	Property	Value
Text	Text	<p>Select the time and time zone to convert from:</p>
Input	ID	Time
	Text	21:30
	Label	Time
Select	ID	TimeZoneFrom
	Text	Time Zone
	Option 1 Text	Eastern
	Option 1 Value	1
	Option 2 Text	Central
	Option 2 Value	2
	Option 3 Text	Mountain
	Option 3 Value	3
	Option 4 Text	Pacific
	Option 4 Value	4
Text	Text	<p>Select the time zone to convert to:</p>
Select	ID	TimeZoneTo
	Text	Time Zone
	Option 1 Text	Eastern
	Option 1 Value	1
	Option 2 Text	Central
	Option 2 Value	2
	Option 3 Text	Mountain
	Option 3 Value	3
	Option 4 Text	Pacific
	Option 4 Value	4
Button	ID	ToAcresButton
	Text	ConvertTimeButton
Text	Text	<span id="TimeAnswer"></span>