Leverage Your HTML5 Savvy to Build Commercial, Cross-Platform Apps and Games - Page 3
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.
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.
The Launching App Starter page appears. Click Launch 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.
- 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.
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 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 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 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.
Here you see the Home icon that appears by default and you can easily add any other navigation options you like.
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.
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.
|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.