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

By Bill Hatfield  |  eMail Email    Print Print  Post a comment

Exploring the IDE and the Generated App

In addition to the build engine and the APIs, Intel XDK provides a powerful IDE and emulation environment for creating and testing your applications.

Emulation Environment

As you can see in the emulator, your application is running and provides the buttons and navigation you specified in the wizard. Play around with it. Every time you modify your application you can come here to the emulator to view the results.

Click the Toggle Emulator/Edit button (the orange one at the upper left) now to see the editor and file management interface.

Toggle Emulator/Edit

When you want to go back to the emulator, you just click the same icon.

Be aware: The editor does not automatically save your changes when you switch over to the emulator. You must click the Save button in the upper left corner of the editor tab or hit Ctrl+S to save the file before you switch. Also, once you are in the emulator, you must click the Reload App button (just under the orange button) to test with the most current changes.

Reload App button

Take a look at the editor interface. Along the left you see a folder hierarchy that shows all the files that are a part of your application. As you can see, a number of files are included automatically.

The most important one in this new application is index.html. If that file doesn’t appear automatically, click its name on the left and it will show up in the editor as you see above.

If you’re not a fan of the color scheme, don’t worry – it’s easy to change. Just click the Options button in the toolbar for the index.html editor window.

index.html editor window

Here you can change the theme (colors and font used in the editor) and set other preferences.

change the theme

Now let’s look at the code.

The Intel App Framework provides W3C CSS selectors (that work much like jQuery) and a standardized user interface that looks great on Android, iOS and other platforms.

So what does that provide? Scroll down to the body of the page, to a div called “content”.

<div class="panel" title="Main" data-footer="footer_0" data-nav="nav_0" id="page_0" style="" selected="selected" data-appbuilder-object="page">
<ul class="list" data-appbuilder-object="list" data-position="static">
   <li>
      <a href="#Space">Space</a>
   </li>
   <li>
      <a href="#Time">Time</a>
   </li>
</ul>
</div>
 

This is literally all that’s needed to create the first screen of the application. With this you specify the title of the screen, some text and the buttons your user will use for navigation.

But what anchors are being referenced in those links? Scroll down to the next lines.

<div class="panel" title="Space" data-footer="footer_0" data-nav="nav_0" id="Space" style="" data-appbuilder-object="page">
<ul class="list" data-appbuilder-object="list" data-position="static" style="z-index: 0;">
   <li>
      <a href="#K2M">Kilometers to Miles</a>
   </li>
   ...
</ul>
</div>
 
<div class="panel" title="Time" data-footer="footer_0" data-nav="nav_0" id="Time" style="" data-appbuilder-object="page">
   <div class="text_item" data-appbuilder-object="text" data-position="static">
   <p>
      Select the time and time zone to convert from:
   </p>
   ...
   </div>
</div>
 

Each div defines another screen in the application and can contain any content and links you like.

Finishing the App

The XDK has provided an excellent starting point and finishing this app should be pretty straightforward.

First, if you decide you need new pages, you can create them by simply copying one of the existing screen divs (like Space) and changing the ID and title. The contents can be any valid HTML5. In this case, you’ve created all the pages you needed already.

You’ll recall that you created the forms, you didn’t tell the XDK what you wanted to when the form button was clicked. The first step is to point them to some JavaScript functions which you can then write.

Scroll through the code and look for all the form button tags. They’ll look like this.

<a class="button" href="#" style="" data-appbuilder-object="button" ...

Delete the href=”#” attribute and replace it with onclick=”xyz” where xyz has the following values.

Form 
Button onclick value
K2M  K2MConvert
M2F M2FConvert
H2A   H2AConvert
H2A   TimeConvert

 

Now to coding these conversion functions. You can write your code in a separate file and pull it in at the top (as is done with the libraries) or you can write your code in the page. For simplicity, I’ll suggest you just scroll up to the script tag at the top of the page and add this code below all the other code.

        var K2MConvert = function() {
            var k = $("#kilometers").val()
            var m = (k * 0.621371).toFixed(2);
            $("#K2MAnswer").text(k + " kilometers = " + m + " miles")
        }
        
 
        var M2FConvert = function() {
            var m = $("#meters").val()
            var f = (m * 3.28084).toFixed(2);
            $("#M2FAnswer").text(m + " meters = " + f + " feet")
        }
 
        var H2AConvert = function() {
            var h = $("#hectares").val()
            var a = (h * 2.47105).toFixed(2);
            $("#H2AAnswer").text(h + " hectares = " + a + " acres")
        }
 
 
 

As you can see it’s easy to reference controls on your page by using the jQuery syntax. For each function we simply retrieve the value entered, multiply it appropriately and display the results.

Go ahead and click Save; run the application in the emulator by clicking on the orange button in the upper left corner of the page. Click Space and then try out each of the screens.

The last function is for the time conversion.

      var TimeConvert = function() {
      var validTime = /^\d{1,2}:\d{2}$/;
      var timeFrom = $("#timefrom").val()
      if(timeFrom == '' || !timeFrom.match(validTime)) {
         $("#TimeAnswer").text("Invalid date - please re-enter")
         return
      }
      var zoneFrom = $("#timezonefrom").val()
      var zoneTo = $("#timezoneto").val()
      var zoneDiff = zoneFrom - zoneTo
 
      // Copy the hours into a date variable and
      // add the timezone offset
      var newTime = new Date()
      newTime.setHours((timeFrom.split(":"))[0]) // part before :
      newTime.setHours(newTime.getHours() + zoneDiff)
            
      var newTimeString = newTime.getHours() + ":" + (timeFrom.split(":"))[1]
            
      $("#TimeAnswer").text("The corresponding time is " + newTimeString)
   }

Save and run to try out the Time page.

The code uses a regular expression to validate the time entered and show an error if it doesn’t match or they didn’t enter anything. Once we’re sure we have a good time, we retrieve the time-zone values selected. The values for the zones are 1 through 4. So subtracting the first value from the second tells us the number of hours we need to add to the date.

Next, in order to calculate the time correctly, a date object is created and the hours from the time entered is set. (There’s no need to set the minutes because they will be the same for any continental US time zone.) Then the time zone offset is added to the date. The string to display is constructed by pulling out the updated hours and concatenating the original minutes.

Note: This implementation may seem a bit awkward, but the other option was to simply add the offset to the hours entered and then check to see if the sum was out of range (greater than 24 or negative, for example) and then correct it. This approach allows the intelligence built into the Date object to do that for us.


Page 5 of 6

Previous Page
1 2 3 4 5 6
Next Page

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  • HTML5 eBook

    HTML5 ebook

    HTML5 is the new standard that is expected to take over the Web. New versions of browsers are already starting to support the advanced features. Learn why HTML5 is important and discover how to use start using it today.
  • Html5 Logo