用于开发移动应用的英特尔® HTML5 工具
来源:互联网 发布:淘宝店卖话费充值 编辑:程序博客网 时间:2024/05/16 19:50
作者:杜伟 (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: 英特尔示例源代码许可协议
英特尔和 Intel 标识是英特尔公司在美国和/或其他国家的商标。
版权所有 © 2013 年英特尔公司。 保留所有权利。
*其他的名称和品牌可能是其他所有者的资产。
附件 尺寸
- 用于开发移动应用的英特尔® HTML5 工具
- 用于开发移动Web应用的HTML5框架和应用
- 英特尔为您提供了一个可用于开发 HTML5 应用的方便工具
- html5移动应用开发的优势
- 用于HTML5移动开发的几大移动APP开发框架
- 用于HTML5移动开发的10大移动APP开发框架
- 用于HTML5移动开发的10大移动APP开发框架
- 用于HTML5移动开发的几大移动APP开发框架
- 移动端 HTML5开发工具
- [移动开发] 在英特尔® 凌动™ 平台上进行 Android* 应用开发和优化
- 11个移动应用开发的HTML5框架和应用
- 开发移动应用的十个优秀工具
- Sencha Architect 2:用于构建桌面与移动HTML5应用的所见即所得IDE
- Sencha Architect 2:用于构建桌面与移动HTML5应用的所见即所得IDE
- 畅享英特尔® 移动科技 开启Android 应用开发新时代
- 畅享英特尔® 移动科技 开启Android 应用开发新时代
- 2015年必火的五个Html5移动开发工具推荐
- HTML5在移动应用开发中的应用
- SyncTools--->备份数据工具类
- 比较两数大小(指针)
- u-boot源码分析 --- 启动第二阶段004
- 打造属于自己的前端开发神器 -- 给Sublime Text加上Eclipse的光环
- Java回顾之网络通信
- 用于开发移动应用的英特尔® HTML5 工具
- 程序猿也爱学英语(上),有图有真相
- 在注册表里设定ie首页的样例
- silverlight 2.0 外部参数传递到app中
- 对目前一些混淆器的总结
- C#中问号的用法(非表达式)---单问号,双问号
- 一步一步教你破解Silverlight源码,反编译Silverlight项目的实操
- u-boot源码分析 --- 启动第二阶段005
- Json(c#)序列化与反序列化