Leverage Your HTML5 Savvy to Build Commercial, Cross-Platform Apps and Games - Page 4
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.
The list will automatically include two items.
You’ll notice the Properties List now appears on the right.
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.
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.
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> |
You’re done! Click the Save button at the top center of the page.
After doing some work, Intel XDK return you to the IDE, editing your newly minted application.