Intel HTML5 Tools for developing mobile applications

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.

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

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

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.

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

01
application.AppDelegate.prototype.setWindow = function(arg1) {
02
    // ================================================================
03
    // REFERENCES TO THIS FUNCTION:
04
    // line(17): C:WorkBloggingechuraevAccelerometerAccelerometerAppDelegate.m
05
    //    In scope: AppDelegate.application_didFinishLaunchingWithOptions
06
    //    Actual arguments types: [*js.APT.View]
07
    //    Expected return type: [unknown type]
08
    //
09
    //if (APT.Global.THROW_IF_NOT_IMPLEMENTED)
10
    //{
11
        // TODO remove exception handling when implementing this method
12
       // throw "Not implemented function: application.AppDelegate.setWindow";
13
    //}
14
this._window = arg1;
15
};
16
 
17
application.AppDelegate.prototype.window = function() {
18
    // ================================================================
19
    // REFERENCES TO THIS FUNCTION:
20
    // line(20): C:WorkBloggingechuraevAccelerometerAccelerometerAppDelegate.m
21
    //    In scope: AppDelegate.application_didFinishLaunchingWithOptions
22
    //    Actual arguments types: none
23
    //    Expected return type: [unknown type]
24
    //
25
    // line(21): C:WorkBloggingechuraevAccelerometerAccelerometerAppDelegate.m
26
    //    In scope: AppDelegate.application_didFinishLaunchingWithOptions
27
    //    Actual arguments types: none
28
    //    Expected return type: [unknown type]
29
    //
30
    //if (APT.Global.THROW_IF_NOT_IMPLEMENTED)
31
    //{
32
        // TODO remove exception handling when implementing this method
33
       // throw "Not implemented function: application.AppDelegate.window";
34
    //}
35
return this._window;
36
};

01
APT.createNamespace("application");
02
 
03
document.addEventListener("appMobi.device.ready",onDeviceReady,false);
04
 
05
APT.ViewController = Class.$define("APT.ViewController");
06
 
07
application.ViewController = Class.$define("application.ViewController", APT.ViewController, {
08
    __init__: function() {
09
        this.$super();
10
    };>});

01
div#Label_590244915
02
{
03
    left: 20px;
04
    color: rgba(256,256,256,1);
05
    height: 21px;
06
    position: absolute;
07
    text-align: left;
08
    width: 320px;
09
    top: 0px;
10
    opacity: 1;
11
}
12
div#Label_781338720
13
{
14
    left: 20px;
15
    color: rgba(256,256,256,1);
16
    height: 21px;
17
    position: absolute;
18
    text-align: left;
19
    width: 42px;
20
    top: 29px;
21
    opacity: 1;
22
}
23
div#Label_463949782
24
{
25
    left: 20px;
26
    color: rgba(256,256,256,1);
27
    height: 21px;
28
    position: absolute;
29
    text-align: left;
30
    width: 42px;
31
    top: 51px;
32
    opacity: 1;
33
}
34
div#Label_817497855
35
{
36
    left: 20px;
37
    color: rgba(256,256,256,1);
38
    height: 21px;
39
    position: absolute;
40
    text-align: left;
41
    width: 42px;
42
    top: 74px;
43
    opacity: 1;
44
}
45
div#Label_705687206
46
{
47
    left: 70px;
48
    color: rgba(256,256,256,1);
49
    height: 21px;
50
    position: absolute;
51
    text-align: left;
52
    width: 42px;
53
    top: 29px;
54
    opacity: 1;
55
}
56
div#Label_782673145
57
{
58
    left: 70px;
59
    color: rgba(256,256,256,1);
60
    height: 21px;
61
    position: absolute;
62
    text-align: left;
63
    width: 42px;
64
    top: 51px;
65
    opacity: 1;
66
}
67
div#Label_1067317462
68
{
69
    left: 70px;
70
    color: rgba(256,256,256,1);
71
    height: 21px;
72
    position: absolute;
73
    text-align: left;
74
    width: 42px;
75
    top: 74px;
76
    opacity: 1;
77
}
78
div#View_774585933
79
{
80
    left: 0px;
81
    height: 548px;
82
    position: absolute;
83
    width: 320px;
84
    top: 20px;
85
    opacity: 1;
86
}

 

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.

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

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

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

01
function suc(a) {
02
    document.getElementById('accel_x').innerHTML = a.x;
03
    document.getElementById('accel_y').innerHTML = a.y;
04
    document.getElementById('accel_z').innerHTML = a.z;
05
}
06
 
07
var watchAccel = function () {
08
    var opt = {};
09
    opt.frequency = 5;
10
    timer = AppMobi.accelerometer.watchAcceleration(suc, opt);
11
}
12
 
13
function onDeviceReady() {
14
    watchAccel();
15
}
16
document.addEventListener("appMobi.device.ready",onDeviceReady,false);

The complete application source code can be found here.

Follow Us

Team Digit

Team Digit is made up of some of the most experienced and geekiest technology editors in India! View Full Profile