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

Friday Jul 26th 2013 by Bill Hatfield
Share:

An unexpected player has entered the fray with a tool that makes HTML5 mobile development easy while also directly addressing some of the shortcomings of Web technologies in mobile apps. See a demonstration of how quickly you can begin creating your own apps using HTML5.

This article is sponsored by Intel, but was independently written by the author.

The software development industry has always provided hope for the independent developer and small development shop. Indie success stories abound from the early days of the PC and more from the early days of the Web. But today there's more opportunity for independents than ever before. Why? Two reasons:

New platforms and audiences

  • Mass adoption of sophisticated phones and tablets have dramatically increased the audience for apps of all kinds – from casual games to specialized medical applications.
  • The unprecedentedly low price-point for apps has made new software purchases practically an every-day occurrence for many users.

A lower barrier-to-entry into the market than ever before

  • App stores handle all the burdensome details of purchase processing and distribution.
  • In-app advertising and up-sell features are easily implemented and handled automatically by third parties.
  • Pre-packaged advertising and app promotion opportunities exist for all budget levels, from free-but-effective guerilla tactics to complete launch bundles provided by professional advertising firms.
  • Numerous options for app development tools and libraries to fit the requirements of your project.

It’s that last item that’s closest to the developer’s heart. The development environment you choose has the potential to be the biggest source of pain or the greatest key to your success. And that’s what I want to zero in on in this article.

Know Your Options

The explosion of interest in phone/tablet apps has triggered a corresponding explosion in software development tools and environments. In the early days of the Apple iPhone, mobile app development meant learning Objective-C and programming on an Apple Mac. And native application development is still a viable option for some projects. On the other hand, Web application development offers a very different approach and comes with its own benefits and downsides. More recently a variety of hybrid-app development options have arisen to fill the gap between native and Web development.

Going Native

Creating a native application means writing code specifically for the target mobile platform, using the platform’s recommended language and APIs.

Apple has been particularly restrictive in this, making it very difficult to use anything but their required hardware and software setup to develop applications that are distributed through the App Store. Specifically, that means an Apple Mac running the XCode development environment to develop Objective-C applications.

Google Android native app requirements are not quite as strict. You can develop on Linux, Mac OS X or Windows. Apps are written in Java using the Android SDK, which includes a debugger, libraries and an emulator. Google supports the Eclipse IDE, but it’s also possible to use IntelliJ IDEA and NetBeans IDEs.

Microsoft Windows 8 Apps may be built with JavaScript and HTML. Or for a more traditional, statically-typed environment, you can use Visual Basic, C# or C++ together with Microsoft’s XAML user-interface language. Finally, for the ultimate in speed, power and control you can use C++ with the DirectX user interface library. Whatever language you choose, the development environment is the same: Microsoft Visual Studio 2012.

So why would you want to go the native-development route? There are a few important benefits:

  • Your application has full and direct access to all the native features of the hardware including the accelerometer, multi-touch input and the camera
  • You get complete control of implementation details
  • The final build will have the fastest possible performance for graphics, network access and all the other device components

Sounds ideal! But there are important cons to consider.

  • As you can see, each platform has its own – different! – language and API requirements. That means you either bet the farm on the future of a single platform or you go in prepared for application ports that require rewriting from scratch.
  • Depending on your background and the platform you want to target, you may have a steep learning curve. Many would-be iOS developers have been put-off by the prospect of Objective-C.
  • Development time for native app development projects can be long, due to the often-low-level programming language and arcane APIs. And in the mobile app world, time-to-market is always a critical factor.

Mobilizing the Next Web Revolution

But all current mobile platforms have Web browsers, don’t they? Why not just build Web applications that are customized to work well with a touch interface?

Of course it’s not as simple as that. Some hurdles:

  • Adjusting to limited and widely varying screen sizes
  • Making the Web application responsive to common gestures
  • Implementing the kind of UI elements that are common on mobile platforms
  • Making use of mobile hardware capabilities, like geo-location

Fortunately, the great demand for alternatives to native app development has spawned a wealth of JavaScript libraries to meet all these needs.

Given such rich JavaScript library support, the mobile Web app option has important benefits:

  • Provides a much faster cross-platform development which  makes it possible to write the application once and run it on a wide variety of mobile platforms
  • Leverages the language and toolset that many developers already know

That addresses every one of the issues with native development! Unfortunately we’ve also lost some of the benefits we had with native development. Mobile Web app downsides:

  • No generic HTML5 App Store presence
  • Purchasing access/upsell options must be handled by the application
  • Despite JavaScript library support, access to native features like multi-touch, accelerometer and camera will be more limited – capabilities will likely include a common subset of features provided by all platforms
  • Execution speed - HTML5's canvas and other media features, while powerful, don't meet the performance requirements for many media-intensive apps and games - especially when running in phone and tablet browsers

Given that a tremendous number of apps require graphic/multimedia capabilities, the last one is a deal-breaker for many projects.

Reaching for the Best of Both Worlds: Intel XDK

The limitations of native apps and Web mobile apps have inspired some developers to figure out how to cut through the impasse and find a way to get fast development with a familiar language and good graphic performance.

Intel XDK is a set of tools and libraries that represent a new class of hybrid applications. It leverages HTML and JavaScript technologies, but then compiles the final app into an executable that’s indistinguishable from one that was native-built – and can be submitted to any platform’s app store.

The XDK provides quite a number of libraries and technologies. I want to highlight a handful of them that will really make a difference for your projects.

App Build and Deployment

Intel XDK applications don’t simply run in a browser. Although you use standard HTML5 technologies, the end result is compiled into a native executable for the platform(s) you choose. With a single source, you can generate apps that work on iOS, Android, Windows 8 App, Facebook App and Kindle. This assures that you get much faster time to deployment because your app is ready to be submitted to the various app stores.

App Dev Center

Leveraging Mobile Hardware Features with the JavaScript API

You won’t be a serious competitor in the app market unless your app integrates deeply with the features provided by mobile platforms. Intel XDK meets this challenge with their JavaScript API. It provides access to the accelerometer, camera, geo-location, audio/video player, notifications and more. Best of all, this single API reaches across many mobile platforms.

The App Game Interface Accelerated Canvas

Even with a compiled application, the standard HTML5 canvas doesn’t provide a serious gaming platform on mobile hardware. That’s where Intel’s App Game Interface canvas comes into play. It re-implements a subset of the HTML5 canvas from the ground up with dramatically increased speed approaching and often meeting the performance of applications written directly in Objective-C, Java or .NET.

Strong Support for Game Development

Game development is challenging but you can be a lot more productive with the right framework. Intel XDK provides three important components:

  • ImpactJS is a JavaScript library that provides a programming structure and a library of functions that ease common game development tasks. (However you do have to purchase a license to develop with ImpactJS for $100.)
  • playMobi provides a standard implementation of common game elements like achievements, leader boards, player and social objects.
  • Box2D is a popular 2D physics engine to support creating games like Angry Birds. For regular and irregular shapes, you can assign density, friction and other properties that determine how it interacts with other objects and the world.

Quick and Powerful On-Device Testing and Debugging

All mobile development environments provide an emulator for quickly running your code to test as you’re coding. And they all provide some way of copying the app to a real-world device to get the real look and feel. However, it’s not always easy to move an app to a device and get it working - especially on iOS. Fortunately the XDK has found ways around the common issues and makes on-device testing almost as quick and easy as using the emulator. This greatly aids your turn-around cycle, especially for cross-platform apps. And it assures you find device-specific issues earlier in the process.

Installing Intel XDK (using Windows 8)

The Intel XDK is free to download, install and use. But before you download it, be sure you have Java (version 6 or 7) installed. You’ll also need the Google Chrome browser. The Intel XDK development environment runs locally, but it uses Chrome to present its UI.

http://java.com/download

http://google.com/chrome

Because the development environment is Java/Chrome-based you can develop on Windows, Apple OS X and Linux. The XDK install process is much the same as described here, but specifics are provided on the Intel site.

With the requirements in place, head to http://intel.ly/HTML5XDK and click Go to the XDK Download Page. There you’ll download a file called XDK.jnlp. Run it. You may see an install permission window. If so, check the Always trust… checkbox and then Run.

As the install progresses, you’ll be prompted to select the projects folder for Intel XDK.

Select Projects

Don’t just click Save here (as I did the first time I installed it). If you do each new project you create will create a new folder under Documents. Instead, create a new folder (using the folder icon on the top right of the dialog, third from the left). Call it IntelXDK Projects (or whatever you like) and then select that folder and click Save.

Now you’ll be required to sign in with an Intel XDK account.

Log In or Sign Up

Don’t have one? Just enter your email address and click Submit. Then fill out the New Account Sign Up form and click next. An account is required to use the Intel XDK – it allows you to easily make use of all the cloud-based features.

New Account

Once your account is created you may see several windows appear with tips, updates or announcements. Read through them if you like or just click close for now.

Finally you’re presented with the Intel XDK IDE.

XDK

The install process has added an Intel XDK icon to your Start menu/Start screen. To access the IDE again later, click the Start button on your keyboard, type XDK and hit Enter.

In the next section I’ll provide a quick overview of the IDE features you see here. Then in the following section I’ll show you how to create your first (actually useful!) application.

Exploring the IDE

The IDE is the integration point for all the features provided by the XDK. I’ll give you a quick run-down of what you’re seeing here.

The Toolbar

As you can see there’s a colorful button bar along the top of the screen. As you’d expect, this provides access to common features.

Toolbar

Going from left to right, here’s a quick description of each button. You can always see the button’s name by hovering over it.

  • Intel logo – It’s not a button. They just want to remind you who’s responsible for all this coolness.
  • Toggle Emulation/Editor – It toggles between the emulator, which is running your app and the editor where you modify the source code.
  • New application – Provides options for a variety of templates and demo applications you can use as a starting point for your new project. When new projects are created, they are stored on your local machine and can later be pushed to the cloud (on Intel’s servers). This makes it easy to develop and run your app on multiple machines and multiple platforms – including the target devices.
  • Project selector (or Switch application) – Switching between several projects you’re working on is simple with this dropdown. It’s also handy for jumping to the provided demos to steal (er, borrow) their code to use in your own projects.
  • Add release and Delete release – Provide source code and release management capabilities.
  • Open project folder – This is not the button you use to open a new project in the IDE. Use the Project selector for that. This button opens Windows Explorer, showing the folder that holds your project files.
  • Edit source code – Like Open project folder, this button doesn’t do what you might expect at first. The editor that’s built-in to the IDE is quite capable. But if you prefer, you can use your own favorite editor to develop your applications and use the IDE for compiling, emulating and building. If you do use a different editor, this button will launch that editor with the project you’re currently working with in the emulator.
  • Show/Hide Debug Console – One benefit of hosting the XDK IDE in Chrome is that you can use Chromes powerful built-in debugger to chase down problems in your HTML/JavaScript. This button opens and closes the debug console panel at the bottom of the browser window.

Debug Button

  • Test on Local WiFi – Opens a window that walks you through the steps you need to do on your device to test your app there via WiFi.
  • App Tester – Like Test on Local WiFi, this window provides instructions for a tester to open an app that you’ve provided access to. This will push your application to the cloud and the App Tester will need to have a local instance installed on your mobile device to pull your app from the cloud.
  • Send app link – Makes your app available to others so that they can test it.
  • Build for app store – When you’re ready to create your final build for submission, this is the place to go.
  • Previous Builds – Access previous builds for reference or troubleshooting.
  • Credentials – Allows you to set up oAuth or another credential system for use with your app.
  • API documentation – Links to the online API documentation page.
  • Help – Shows a menu with links to a variety of sources for information.
  • Account settings – Change your email, password and other features.
  • Logout – End the current session.

The Device Simulation Features

Mobile devices come in a variety of shapes and can be held and used in a variety of ways. The panels along the right provide a way of simulating some of these features in the emulator.

Device Emulation

Starting from the top:

  • DEVICE EMULATION – Select the device you want to emulate. This not only changes the look of the emulator, it sets the screen resolution appropriately so you can see how your user interface adapts.
  • ACCELEROMETER – Simulates tilting the device in three dimensions.
  • DATA CONNECTION – How does your application respond when bandwidth is limited or not available?
  • GEOLOCATION – If your app features geolocation features (i.e. where’s the nearest Mexican restaurant?), you don’t want to go traipsing all over the country just to test it! The bottom panel allows you to test your application as if it were at the location specified.

The Emulator Button Bar

Finally a few common emulator commands are available in the vertical button bar that appears on the left (only when you’re in emulation mode).

Vertical Button Bar

From the top:

  • Reload the app – Get into the habit of clicking on this immediately when you switch from the editor to the emulator. It re-retrieves the current files in your application and starts again from your home screen. If you don’t click, you may be running an older version of your app!
  • Rotate – Locks the current rotation.
  • Push Notifications – Provides the ability to simulate pushed message.
  • Enable multiTouch Emulation – Allows you to simulate multi-touch interactions with the emulator by using right-clicks along with left-clicks. Clicking this button will provide directions.

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.

Title 
ID
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.

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.

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.

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

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

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.

Deploying Far and Wide

Intel XDK shines in its cross-platform reach. Once you’re application is complete, simply click the Build for app store button in the toolbar and then select Upload & build. Now you’ll see a page like this.

the Build for app store

The top row shows all the supported platforms you can target to build a native application. This final executable is suitable for app store upload to any store supporting that platform. The second row shows web-based platform targets, including Facebook apps and Chrome apps.

You’ll notice that some of the options have a button indicating issues to be fixed. These are usually relatively minor tweaks or additions that are either required or recommended for deployment to the given platform, like icons, splash screens and required certificates. This is a great reminder to aid in getting all your ducks in a row before your final deploy.

You can select ‘Fix issues’ to enter into a build wizard for the selected platform. The screens that follow, will hold your hand through the entire process, even if you’ve never built an app before.

Rolling Ahead, Full Steam!

If you’re excited about this environment and are eager to learn more, Intel provides a number of options – and all of them can be reached from one central hub - the App Learning Center.

http://developer.html5dev-software.intel.com

Intel's App Learning Center

Videos are available for the phases of your development cycle and at the bottom you can access a list of articles on key topics, tutorials, forums and documentation for all the available APIs.

Oh and don’t miss the cheat-sheets!

http://html5dev-software.intel.com/documentation/references/index.html

Have fun!

About the Author

Bill Hatfield is the bestselling author of numerous books for software developers including ASP.NET For Dummies. He’s a Certified Microsoft Software Developer and Trainer and loves coding and sharing new technologies with others. He works from his home in Indianapolis, with his wife Melanie and two crazy kids, Bryce and Zoe.

 

This article is sponsored by Intel, but was independently written by the author.

Share:
Home
Mobile Site | Full Site
Copyright 2017 © QuinStreet Inc. All Rights Reserved