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

By Bill Hatfield  |  eMail Email    Print Print  Post a comment


Altering (or at Least Converting) Time and Space

Ready to jump in and play? I’ll show you how to create a simple application and point out highlights of the development environment along the way. Use this as a springboard for your own experimentation.

The purpose of this utility app is to provide conversions for common measurements (kilometers to miles, meters to feet, etc.) and time conversions across time-zones.

Creating the Application

Click the + icon in the toolbar at the top, on the left side. This is how you create a new project. When you do, you’ll see the first step of the new app project wizard.

New HTML 5 App Project

The first step is to give your project a name and decide how you want to generate it. Intel does a great job of providing a running start in creating your application. You can build a standard navigational interface, start with a demo or use their game development template.

For this application enter spacetime for the Project Name and select the top radio button: Use the App Starter wizard to set up pages, navigation & more. Click Next.

Launch App Starter

The Launching App Starter page appears. Click Launch App Starter.

The App Starter appears. This screen works very much like other GUI development tools you may have used. It allows you to create new pages, add controls to the page and set control properties. But be aware – what you are creating is a template to get you started. Once you generate the template you won’t be able to come back to this interface to make changes. Instead you’ll add-to and update your interface from HTML/CSS/JavaScript. The good news, though, is that Intel XDK makes that process easy, too.

App Starter

At the top in the center there are three icons:

  • Preview – “Runs” your app so that you can test it, interacting with it as a user would.
  • Save – Generates the HTML/CSS/JavaScript application based on what you have created here. Don’t click this until you are done creating your interface.
  • Toggle Rotation – Allows you to view the pages you create in landscape or portrait orientations.

In the upper-right there’s a dropdown labeled CSS Theme. It provides the option of numerous looks that can be applied to your application.

Click the Hello World button. The Button Properties and Button Styles panels appear.

Hello World Button

As you’d expect, the ID and Title allow you to name the button and specify the text that appears on it. If you want to use this button to navigate to a new page, you can identify the page in Link and specify in Transition an animation that should be used. The Button Styles box provides an easy way for you to specify the look of your button using standard CSS notation.

On the left side, you can see the PAGES tab along with several other tabs, which will come in handy.

Pages Tab

PAGES lists all the pages you’ve created. You can click on any page in the list to see its controls and change their properties.

Elements Tab

ELEMENTS provides common layout options, form controls and the ability to add text, anchors, pictures and videos to your page using a familiar drag-and-drop interface.

Nav Tab

NAV allows you to identify text and icons that appear in the headers, footers and side-navigation elements of your page. Clicking footer_0, for example replaces the Properties pane on the right with a Footer Setup pane.

Footer Setup

Here you see the Home icon that appears by default and you can easily add any other navigation options you like.

Tree Tab

TREE provides an alternate way of working with the controls on the current page. Although you can always click on a control to change its properties, you can also view the controls here and, when the interface gets complicated, specify more precisely how your controls should look and work.

Back on the PAGES tab, you’ll notice a plus icon that appears at the top. Click it. This creates a new page. The page’s properties appear on the right.

Page Properties

Change the Title to Space and the ID to Space. The rest of the settings are fine. Now click Apply. Be sure to always click Apply after you make a change. If you don’t your changes will be discarded without warning when you click to edit another page!

The list below lists all the pages you will need for this application. Create the remaining pages using the properties specified.

Main    page_0
Space Space
Time      Time
About About
Kilometers to Miles  K2M
Meters to Feet  M2F
Hectares to Acres   H2A

Once you’ve created the pages, you’re ready to add controls. Click to select page Main. Click within the page to select the Hello World button. Click the Delete button at the bottom of the Button Properties panel. You’ll see the Are you sure you want to delete this node? dialog. Click OK. The button will disappear.

Note: I’m using the term “page” here, as the Intel XDK interface and documentation do, to refer to the various screens that appear one-at-a-time for the user. This is not meant to imply that each will exist in its own separate HTML file. In fact, once your app is generated, you’ll see that all these “pages” are defined in a single index.html. This makes maintenance easier.

Page 3 of 6

Previous Page
1 2 3 4 5 6
Next Page

Make a Comment

Loading Comments...