Click here to Skip to main content
15,867,488 members
Articles / Web Development / HTML5
Article

Intel® HTML5 Tools for developing mobile applications

1 Dec 2013CPOL4 min read 26K   26  
Intel® HTML5 Tools for developing mobile applications

This article is in the Product Showcase section for our sponsors at CodeProject. These articles are intended to provide you with information on products and services that we consider useful and of value to developers.

Visit Intel® Developer Zone for Android

HTML5 is the new HTML standard. Recently, Intel Corporation announced a set of HTML5 Tools for developing mobile applications. This paper shows you how to port an Apple iOS* accelerometer app to HTML5 using these tools. Please note: Auto-generated code created by the Intel® XDK may contain code licensed under one or more of the licenses detailed in Appendix A of this document. Please refer to the Intel XDK output for details on which libraries are used to enable your application.

Intel® HTML5 App Porter Tool 

The first thing we’ll do is take an iOS accelerometer app and convert the Objective-C*source code to HTML5. We’ll do this using the Intel® HTML5 App Porter Tool and the source code found here: [iOS_source.zip] (Note: IOS_source sample code is provided under the Intel Sample Software License detailed in Appendix B). You can download the Intel HTML5 App Porter Tool from the Tools tab here: http://software.intel.com/en-us/html5. After filling in and submitting the form with your e-mail address, you will get links for downloading this tool. The instructions on how to use this tool can be found on this site: http://software.intel.com/en-us/articles/tutorial-creating-an-html5-app-from-a-native-ios-project-with-intel-html5-app-porter-tool

When you are finished performing all the steps, you will get HTML5 source code.

Intel XDK

You can open the HTML5 code in any IDE. Intel offers you a convenient tool for developing HTML5 applications: Intel XDK – Cross platform development kit (http://html5dev-software.intel.com/). With Intel XDK, developers can write a single source code for deployment on many devices. What is particularly good is it is not necessary to install it on your computer. You can install it as an extension for Google Chrome*. If you use another browser, you have to download a JavaScript* file and run it. Sometimes it’s necessary to update Java*.

After installing Intel XDK, you will see the main window:

Image 1

If you want to port existing code, press the big "Start new" button.

If you’re creating a new project, enter the Project Name and check "Create your own from scratch," as shown in the screen shot below.

Image 2

Check "Use a blank project." Wait a bit, and you will see the message "Application Created Successfully!"

Click "Open project folder."

Image 3

Remove all files from this folder and copy the ported files. We haven’t quite ported the accelerometer app yet. We still have to write an interface for it. It is possible to remove the hooks created by the Intel HTML5 App Porter Tool. Remove these files:

  • todo_api_application__uiaccelerometerdelegate.js
  • todo_api_application_uiacceleration.js
  • todo_api_application_uiaccelerometer.js 
  • todo_api_js_c_global.js

To update the project in Intel XDK, go to the editor window in the Windows emulator.

Open the index.html file and remove the lines left from the included files.

Image 4Image 5

Open the todo_api_application_appdelegate.js file and implement the unmapped "window" property of the delegate.

application.AppDelegate.prototype.setWindow = function(arg1) {
    // ================================================================
    // REFERENCES TO THIS FUNCTION:
    // line(17): C:WorkBloggingechuraevAccelerometerAccelerometerAppDelegate.m
    //    In scope: AppDelegate.application_didFinishLaunchingWithOptions
    //    Actual arguments types: [*js.APT.View]
    //    Expected return type: [unknown type]
    //
    //if (APT.Global.THROW_IF_NOT_IMPLEMENTED)
    //{
        // TODO remove exception handling when implementing this method
       // throw "Not implemented function: application.AppDelegate.setWindow";
    //}
this._window = arg1;
};

application.AppDelegate.prototype.window = function() {
    // ================================================================
    // REFERENCES TO THIS FUNCTION:
    // line(20): C:WorkBloggingechuraevAccelerometerAccelerometerAppDelegate.m
    //    In scope: AppDelegate.application_didFinishLaunchingWithOptions
    //    Actual arguments types: none
    //    Expected return type: [unknown type]
    //
    // line(21): C:WorkBloggingechuraevAccelerometerAccelerometerAppDelegate.m
    //    In scope: AppDelegate.application_didFinishLaunchingWithOptions
    //    Actual arguments types: none
    //    Expected return type: [unknown type]
    //
    //if (APT.Global.THROW_IF_NOT_IMPLEMENTED)
    //{
        // TODO remove exception handling when implementing this method
       // throw "Not implemented function: application.AppDelegate.window";
    //}
return this._window;
};

Open the viewcontroller.js file. Remove all the functions used for working with the accelerometer in the old iOS app. In the end we get this file:

APT.createNamespace("application");


document.addEventListener("appMobi.device.ready",onDeviceReady,false);


APT.ViewController = Class.$define("APT.ViewController");


application.ViewController = Class.$define("application.ViewController", APT.ViewController, {

    __init__: function() {

        this.$super();

    };>});

In the ViewController_View_774585933.css file, we have to change styles of element colors from black to white to be readable on the black background: color: rgba(0,0,0,1); color: rgba(256,256,256,1);. As a result we get:

CSS
div#Label_590244915
{
	left: 20px;
	color: rgba(256,256,256,1);
	height: 21px;
	position: absolute;
	text-align: left;
	width: 320px;
	top: 0px;
	opacity: 1;
}
div#Label_781338720
{
	left: 20px;
	color: rgba(256,256,256,1);
	height: 21px;
	position: absolute;
	text-align: left;
	width: 42px;
	top: 29px;
	opacity: 1;
}
div#Label_463949782
{
	left: 20px;
	color: rgba(256,256,256,1);
	height: 21px;
	position: absolute;
	text-align: left;
	width: 42px;
	top: 51px;
	opacity: 1;
}
div#Label_817497855
{
	left: 20px;
	color: rgba(256,256,256,1);
	height: 21px;
	position: absolute;
	text-align: left;
	width: 42px;
	top: 74px;
	opacity: 1;
}
div#Label_705687206
{
	left: 70px;
	color: rgba(256,256,256,1);
	height: 21px;
	position: absolute;
	text-align: left;
	width: 42px;
	top: 29px;
	opacity: 1;
}
div#Label_782673145
{
	left: 70px;
	color: rgba(256,256,256,1);
	height: 21px;
	position: absolute;
	text-align: left;
	width: 42px;
	top: 51px;
	opacity: 1;
}
div#Label_1067317462
{
	left: 70px;
	color: rgba(256,256,256,1);
	height: 21px;
	position: absolute;
	text-align: left;
	width: 42px;
	top: 74px;
	opacity: 1;
}
div#View_774585933
{
	left: 0px;
	height: 548px;
	position: absolute;
	width: 320px;
	top: 20px;
	opacity: 1;
}

After updating the emulator window, you see:

Image 6

To code the accelerometer functions, we need to use the appMobi JavaScript Library. Documentation for this library can be found here. It’s installed when you download Intel XDK.

Open the index.html file and add this line into the list of scripts:

<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/appmobi.js"></script>

Open the ViewController_View_774585933.html file. We have to rename fields to more logical names from:

<div data-apt-class="Label" id="Label_705687206">0</div>
<div data-apt-class="Label" id="Label_782673145">0</div>
<div data-apt-class="Label" id="Label_1067317462">0</div>

to:

<div data-apt-class="Label" id="accel_x">0</div>
<div data-apt-class="Label" id="accel_y">0</div>
<div data-apt-class="Label" id="accel_z">0</div>

The same should be done in the ViewController_View_774585933.css file, where we have to rename the style names.

Open the viewcontroller.js file and write some functions for using the accelerometer.

function suc(a) {
    document.getElementById('accel_x').innerHTML = a.x;
    document.getElementById('accel_y').innerHTML = a.y;
    document.getElementById('accel_z').innerHTML = a.z;
}

var watchAccel = function () {
    var opt = {};
    opt.frequency = 5;
    timer = AppMobi.accelerometer.watchAcceleration(suc, opt);
}

function onDeviceReady() {
    watchAccel();
}
document.addEventListener("appMobi.device.ready",onDeviceReady,false);

Update the project, and you can see it on the emulator window:

Image 7

You can see how the accelerometer works on Intel XDK using the "ACCELEROMETER" panel:

Image 8

The application will look like this:

Image 9

The complete application source code can be found here.
Appendix A: Intel® XDK Code License Agreements

Appendix B: Intel Sample Source Code License Agreement

Intel and the Intel logo are trademarks of Intel Corporation in the U.S. and/or other countries.
Copyright © 2013 Intel Corporation. All rights reserved.
*Other names and brands may be claimed as the property of others.

Other Related Articles

To learn more about Intel tools for the Android developer, visit Intel® Developer Zone for Android.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United States United States
Intel is inside more and more Android devices, and we have tools and resources to make your app development faster and easier.


Comments and Discussions

 
-- There are no messages in this forum --