65.9K
CodeProject 正在变化。 阅读更多。
Home

用于开发移动应用程序的 Intel® HTML5 工具

Intel 平台上的 Android
starIconstarIconstarIconstarIconstarIcon

5.00/5 (2投票s)

2013年12月2日

CPOL

4分钟阅读

viewsIcon

27230

用于开发移动应用程序的 Intel® HTML5 工具

访问 Intel® Android 开发者专区

HTML5 是新的 HTML 标准。最近，英特尔公司宣布了一套用于开发移动应用程序的 HTML5 工具。本文将向您展示如何使用这些工具将 Apple iOS* 加速计应用程序移植到 HTML5。请注意：英特尔® XDK 生成的代码可能包含在本文档附录 A 中详述的一个或多个许可证下获得许可的代码。请参阅英特尔 XDK 输出，了解有关用于启用应用程序的库的详细信息。

英特尔® 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 源代码。

Intel XDK

您可以在任何 IDE 中打开 HTML5 代码。英特尔为您提供了方便的 HTML5 应用程序开发工具：Intel XDK – 跨平台开发套件（http://html5dev-software.intel.com/）。使用 Intel XDK，开发人员可以编写单一源代码以部署到许多设备上。特别好的是，不必将其安装在您的计算机上。您可以将其作为 Google Chrome* 的扩展程序安装。如果您使用其他浏览器，则必须下载 JavaScript* 文件并运行它。有时需要更新 Java*。

安装 Intel XDK 后，您将看到主窗口

如果您想移植现有代码，请按大的“开始新项目”按钮。

如果您要创建新项目，请输入项目名称并勾选“从头开始创建自己的项目”，如下图所示。

勾选“使用空白项目”。稍等片刻，您将看到消息“应用程序创建成功！”

点击“打开项目文件夹”。

删除此文件夹中的所有文件并复制移植的文件。我们还没有完全移植加速计应用程序。我们仍然需要为其编写一个界面。可以删除英特尔 HTML5 应用移植工具创建的挂钩。删除这些文件

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

要更新 Intel 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 文件中，我们需要将元素颜色样式从黑色更改为白色，以便在黑色背景上可读：color: rgba(0,0,0,1); color: 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 库。该库的文档可在此处找到。下载 Intel XDK 时会安装它。

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

<script type="text/javascript" charset="utf-8" src="https://: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>

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>

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

更新项目，您可以在模拟器窗口中看到它

您可以使用“ACCELEROMETER”面板在 Intel XDK 中查看加速计的工作方式

应用程序将如下所示

完整的应用程序源代码可在此处找到。
附录 A：英特尔® XDK 代码许可协议

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

Intel 和 Intel 标志是 Intel Corporation 在美国和/或其他国家/地区的商标。
版权所有 © 2013 英特尔公司。保留所有权利。
*其他名称和品牌可能被声明为他人的财产。

其他相关文章

要详细了解 Intel 的 Android 开发工具，请访问 Intel® Android 开发者专区。

© . All rights reserved.