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

作者: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 应用移植工具


说明: 目前的测试版程序将于 2013 年 12 月 31 日终止。英特尔® HTML5 应用移植工具-测试版将不再可用。

我们需要做的第一件事就是选择一款 iOS 加速计应用,然后将 Objective-C* 源代码转换成 HTML5。 此时我们需要使用英特尔® HTML5 应用移植工具和此处的源代码: [iOS_source.zip] (注: IOS_source 示例代码是按照英特尔示例软件许可而提供的,详情见附录 B)。可供您下载英特尔 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” 属性。


	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;

	};

	

打开 viewcontroller.js 文件。 删除原 iOS 应用中与加速计协同使用的所有函数。 最终我们会得到这个文件:


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

	    };>});

	

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

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

在更新了模拟器窗口之后,您会看到:

 

为了对加速计函数进行编码,我们需要使用 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 文件。 为了使域名更符合逻辑,我们必须将其从:

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

改为:

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

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

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


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

	

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

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

应用快照如下:

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

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

 

英特尔和 Intel 标识是英特尔公司在美国和/或其他国家的商标。
版权所有 © 2013 年英特尔公司。 保留所有权利。
*其他的名称和品牌可能是其他所有者的资产。

附件尺寸
下载 html5-tools-result.zip427.71 KB
下载 ios-source.zip86.05 KB
如需更全面地了解编译器优化,请参阅优化注意事项