用于开发移动应用的英特尔® HTML5 工具

作者：杜伟 (Intel)

by Egor Churaev

下载

用于开发移动应用的英特尔® HTML5 工具 [PDF 821.98KB]
iOS 源代码[ZIP file 168 KB]
HTML5 工具结果源代码[ZIP file 86KB]

HTML5 是最新的 HTML 标准。英特尔公司于近日推出了一套可用于开发移动应用的 HTML5 工具。本文将为您展示如何通过使用这些工具将一款 Apple iOS* 加速计应用移植到 HTML5 上。请注意：由 XDK 创建的自动生成代码可能会包含本文附录 A 中一个或多个许可协议许可的代码。如欲详细了解哪些库可用来支持您的应用，请参见 XDK 输出结果。

英特尔® HTML5 应用移植工具

我们需要做的第一件事就是选择一款 iOS 加速计应用，然后将 Objective-C* 源代码转换成 HTML5。此时我们需要使用英特尔® HTML5 应用移植工具和此处的源代码： [iOS_source.zip] (注：我们在附录 B 中的英特尔示例软件许可下已经提供了 IOS_source 示例代码）。您可以从此处的工具标签中下载英特尔 HTML5 应用移植工具： http://software.intel.com/en-us/html5。在填充完表格并使用您的电子邮件提交之后，您会得到该工具的下载链接。有关本工具的使用说明，请访问网站：http://software.intel.com/en-us/articles/tutorial-creating-an-html5-app-from-a-native-ios-project-with-intel-html5-app-porter-tool。

在您执行完所有的步骤之后，您会得到 HTML5 源代码。

英特尔® XDK

你可以在任何 IDE 中打开 HTML5 代码。英特尔为您提供了一个可用于开发 HTML5 应用的方便工具：英特尔® XDK – 跨平台开发工具包 (http://html5dev-software.intel.com/)。借助英特尔 XDK，开发人员可以写出一种可在多个设备上部署的源代码。该工具包的一个独特优势就在于您无需将其安装在您的电脑上即可使用。您可以将其作为一个 Google Chrome* 扩展进行安装。如果您使用的是另一个浏览器，您必须下载一个 JavaScript* 文件并运行该文件。有时很有必要更新 Java*。

在安装完英特尔 XDK 之后，您会看到主窗口：

如果您想要移植现有的代码，请按下 “Start new” 按钮。

如果您正在创建一个新项目，请输入项目名称并检查 “Create your own from scratch”，如以下屏幕截图所示。

检查“Use a blank project”。稍后您会看到 “Application Created Successfully!”信息。

点击“Open project folder”。

删除本文件夹中的所有文件并拷贝移植的文件。我们现在仍然没有移植加速计应用。我们必须创建一个适合它的接口。有可能会删除由英特尔 HTML5 应用移植工具创建的所有钩子。删除这些文件：

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

如欲更新英特尔 XDK 中的项目，请转至 Windows 模拟器中的编辑窗口。

打开 index.html 文件并从包含的文件中删除剩余的行。

打开 todo_api_application_appdelegate.js 文件并执行委托的未映射 “window” 属性。

`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 };

打开 viewcontroller.js 文件。删除所有在旧的 iOS 应用中加速计工作时使用过的函数。最终我们会得到这个文件：

`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 };>});

在 ViewController_View_774585933.css 文件中，我们必须将数据元的颜色从黑色改成白色，使其在黑色背景中清晰可读： color: rgba(0,0,0,1); à color: rgba(256,256,256,1);. 最终我们获得：

`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 }

在更新了模拟器窗口之后，您会看到：

为了对加速计函数进行编码，我们需要使用 appMobi JavaScript Library。有关该库的文件，请查看此处。在您下载英特尔 XDK 时它已经被安装。

打开 index.html 文件并将本行添加到脚本列表中：

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

打开 ViewController_View_774585933.html 文件。为了使域名更符合逻辑，我们必须将其从：

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

我们应该在 ViewController_View_774585933.css 文件中执行同样的操作，此时我们必须对风格名称重新命名。

打开 viewcontroller.js 文件并编写一些可以使用加速计的函数。

`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);`

更新该项目，您可以在模拟器窗口中看到该过程：

借助“加速计”面板，您可以看到加速计如何在英特尔 XDK 上工作：

应用快照如下：

如欲了解完整的应用源代码，请查看此处.
附录 A： 英特尔® XDK 代码许可协议

附录 B： 英特尔示例源代码许可协议

附件	尺寸
下载 html5-tools-result.zip	427.71 KB
下载 ios-source.zip	86.05 KB