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.

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

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 PropertyValue
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.

Page 4 of 6

Previous Page
1 2 3 4 5 6
Next Page

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  • Html5 Logo