Channels ▼
RSS

Mobile

Developing Cross-Platform Mobile Apps with HTML5 and Intel XDK


Intel XDK is a cross-platform IDE that packages many different tools and frameworks with specific tweaks from Intel to simplify designing, debugging, building, and deploying cross-platform hybrid HTML5 mobile apps. In this first article of a two-part series on developing mobile apps with Intel XDK, I explain how to create an HTML5 hybrid app from scratch that uses Intel App Framework and Apache Cordova. In each step, I describe how to take advantage of the IDE features to increase productivity.

Creating a Project for an HTML5 Hybrid App in Intel XDK

Intel XDK is a free and multiplatform IDE that runs on Windows, Mac OS X, and Linux. You must sign in with an Intel Developer Zone account to start working with the IDE. If you don't have an account, you can register for free after you start the IDE for the first time. Notice that when you are asked to enter your User Name, you must enter the e-mail address you provided when you signed up.

The latest versions improve both the performance and the stability of the IDE and its integration with different tools. At the time of writing, the current version is v1536. In addition, it is important to read the known issues of the latest versions. When you target multiple platforms and the latest versions of the mobile operating systems or Web browsers, there are usually some additional tweaks that you should include that may not be included in the UI settings. For example, in version v1536, you need to add an additional file yourself if you want to specify a custom iPhone 6 Plus icon and splash screen.

I want to create a hybrid app capable of running on iOS, Android, Windows Phone, and Windows 8 mobile devices. The app must use the accelerometer available on the mobile devices to control the movement of a robot device (an Internet of Things project). The robot device provides a REST API and the mobile app has to interact with this API to allow the user to control the continuous movement of the robot by moving the mobile device.

The sample situation represents a typical scenario in which it is convenient to create a hybrid app with a single codebase to make it run in all the desired devices. The user experience with the hybrid app will be very similar to the user experience provided by native apps targeting each mobile platform. The app just needs to react to the accelerometer, provide some feedback to the user, and make REST API calls. To keep things simple and to focus on Intel XDK tools and features, I'll start with a simple app that captures the device motion and provides some feedback to a user.

Follow these steps to create a new project in the IDE:

  • Click on the down arrow at the right side of the XDK PROJECTS tab, located at the upper left corner of the window, and then click on New Project.
  • Click Start with a Template below App Developer Projects.
  • Click Blank App Designer and then Use This Template. This template allows you to use the drag-and-drop App Designer UI editor.
  • Select the folder in which you want to save the project and enter the project's name (RobotController). Finally, click Create.
  • After you click No Thanks, the IDE will display a dialog box to allow you to select the desired framework. Select App Framework and click Select. Intel XDK is also compatible with Bootstrap 3, jQuery Mobile, and Topcat. Notice that the use of App Framework limits you to use only W3C-valid selectors.

The IDE displays the files for the project at the left-hand side and the App Designer UI editor for the main page: index.html. The initial files and structure for the project within the www folder is:

  • app_framework folder: Includes JavaScript and CSS files for App Framework 2.1.
  • css folder: Includes stylesheets (CSS and LESS files) for the app and the main page.
  • index.html: The main and single view for the app.
  • js folder: You can add additional JavaScript files to this folder.
    • app.js: You can place your event handlers in this file.
    • init-app.js: You can edit this file to customize your app initialization code.
  • xdk folder:
    • init-dev.js: This function is included in this file unify the commonly used ready events. The file includes the initialization code needed to handle XDK device-ready, Cordova-device ready, or browser document-ready init events. This way, the initialization code enables you to run the app in any of the supported environments.

The IDE displays the active project name (RobotController) at the right side of XDK PROJECTS. You will notice six tabs at the top of the window: DEVELOP, EMULATE, TEST, DEBUG, PROFILE, and BUILD. The DEVELOP tab is activated and allows you to use the App Designer UI editor and the code editor. You can easily switch from the design view to the code view by clicking on the CODE and DESIGN buttons located in the upper left corner of the DEVELOP tab. By default, when you switch to CODE, Intel XDK uses the Brackets editor. The editor is useful but, unfortunately, the IDE doesn't have refactoring tools.

Specifying Options for Different Platforms

The app built with Intel XDK is going to run in a webview (embedded browser) in the mobile device. The app can only do what the webview and the included plugins provide. Thus, it is necessary to make sure that the plugin needed to retrieve values from the device motion (accelerometer) is included.

You should click on XDK PROJECTS at the upper-left corner of the Intel XDK window to check the project's settings and configure permissions on the different platforms. It is a bit confusing because you might expect a SETTINGS or CONFIGURATION tab, but someone decided XDK PROJECTS to be the shortcut to access the project's settings.

Now, go to CORDOVA 3.X HYBRID MOBILE APP SETTINGS and activate the Accelerometer checkbox under Included Plugins | Standard Cordova Plugins (see Figure 1). This way, the org.apache.cordova.device-motion Cordova plugin will be included in the project. Both the Device and SplashScreen standard Cordova plugins checkboxes are also checked, so both are already included in the project. Notice that the Intel XDK Accelerometer (intel.xdk.accelerometer) has been deprecated and you have to use the Cordova plugin.

HTML5
Figure 1: Selecting the plugins to be included.

Go to Featured & Custom Cordova Plugins and activate the Device checkbox under INTEL XDK PLUGINS. This way, the intel.xdk.device plugin will be included in the project. This plugin makes it easy to set the desired rotate orientation and disable the device auto-rotation. I want to keep the accelerometer sample very simple and make it work with a portrait orientation.

Whenever you target multiple mobile platforms, there are many settings that are specific to each target platform. For example, you might want to configure specific build settings, launch icons, and splash screens. In this example, I will use the default values, but I suggest you to take a look at BUILD SETTINGS and LAUNCH ICONS AND SPLASH SCREENS. You can easily configure each platform settings without leaving the IDE. However, as I mentioned before, make sure you read the known issues for Intel XDK to make sure that you don't need to make additional changes for any specific platform.

The IDE will add the following XML configuration files to the root folder of the project:

  • intelxdk.config.android.xml
  • intelxdk.config.crosswalk.xml
  • intelxdk.config.ios.xml
  • intelxdk.config.windows8.xml

The following lines show the code for intelxdk.config.ios.xml. Notice the included plugins.

<?xml version='1.0' encoding='UTF-8'?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:intelxdk="http://xdk.intel.com/ns/v1" id="xdk.intel.ad.project" version="0.0.1">
<!--This file is generated by the Intel XDK. Do not edit this file as your edits will be lost.           -->
<!--To change the contents of this file, see the documentation on the intelxdk.config.additions.xml file.-->
<intelxdk:version value="1.0"/>
<intelxdk:cordova-cli version="3.5"/>
<name>RobotController</name>
<content src="index.html"/>
<access origin="*"/>
<intelxdk:plugin intelxdk:name="Device" intelxdk:value="org.apache.cordova.device" intelxdk:version="0.2.9"/>
<intelxdk:plugin intelxdk:name="SplashScreen" intelxdk:value="org.apache.cordova.splashscreen" intelxdk:version="0.3.0"/>
<intelxdk:plugin intelxdk:name="Accelerometer" intelxdk:value="org.apache.cordova.device-motion" intelxdk:version="0.2.7"/>
<intelxdk:plugin intelxdk:name="Device" intelxdk:value="intel.xdk.device"/>
<preference name="ios-target" value="5"/>
<preference name="ios-configuration" value="adhoc"/>
<!--creationInfo:{"src":"https://edge-intel.s3.amazonaws.com/jsapp/production/release-2014-ww45/template-a-blank-appdesigner/sample.zip","projectTypeName":"com.intel.xdk.projecttype.jsapp"}--></widget>

Building the UI and Making Changes with Live Layout Editing

I do believe live previews are extremely useful to reduce development time. I hate writing code and having to wait until I execute the app to see the results. Intel XDK includes features that make it easy to see the UI as you make changes to the HTML code or work with the UI designer.

Go back to the DEVELOP tab and make sure the DESIGN view is activated. In case you don't want to drag and drop controls to the workspace, you can use the HTML5 code I provide later.

Drag and drop the following controls from the CONTROLS palette to the workspace (see Figure 2):

  • A LAYOUT | HEADER. Set the Title property to Robot Controller.
  • A LAYOUT | GRID control below the previously dropped HEADER. By default, the UI designer will place a 3x3 grid with 3 rows and 3 cells per row.
  • A button in the second column of the first grid row. Set its Label to Up, activate the Icon checkbox and select one of the built-in up arrow icons. Set its ID to up.
  • A button in the first column of the second row. Set its Label to Left, select an appropriate icon and set its ID to left.
  • A button in the third column of the second row. Set its Label to Right, select an appropriate icon and set its ID to right.
  • A button in the second column of the third row. Set its Label to Down, select an appropriate icon and set its ID to down.
  • A LAYOUT | ROW control below the grid.
  • A FORM | TEXTAREA control within the previously added row. Set its Label to Accelerometer read values: and set Rows to 3. Then set its ID to accelerometer.

HTML5
Figure 2: The UI designer in Intel XDK.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video