应用程序查看源代码

TizenWeb应用程序开发-初学者版本1.
0(2014/09/XX)TizenWeb应用程序开发-初学者目录1.
Tizen简介6了解Tizen6Tizen作为开放源软件平台.
6Tizen作为Web软件平台6Tizen作为行业支持的软件平台.
6Tizen社区网站72.
Tizen体系结构.
83.
TizenWebAPI简介9Tizen设备API.
94.
Web应用程序开发入门.
12计划和设计应用程序.
12安装TizenSDK.
12先决条件.
12安装TizenSDK(在线)13安装TizenSDK(脱机)13创建应用程序项目.
13创建Web应用程序项目.
14支持的模板和示例16创建用户模板.
16设置项目属性.
18配置应用程序.
19使用UIBuilder创建应用程序UI.
26创建UIBuilder项目.
27添加页面.
27设计页27处理针对页面的事件.
30测试UIBuilder项目.
32生成应用程序.
32运行和调试应用程序.
32除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
2|页TizenWeb应用程序开发-初学者在模拟器中运行应用程序33在仿真器中运行应用程序33在目标设备上运行应用程序.
34调试应用程序.
34快速开发支持.
36打包应用程序.
37查看应用程序包.
37本地化应用程序385.
使用Tizen高级UI.
40Tizen高级UI简介.
40开始使用简单的应用程序.
40添加页面41处理针对页面的事件.
42可用的UI小程序42处理多个页面、小程序和事件436.
使用TizenWebAPI45日历45日历API的主要功能45向日历添加事件.
46在批处理模式下向日历添加事件.
47管理事件.
48在批处理模式下管理多个日历事件.
49更新重复性日历事件.
49接收有关日历更改的通知50转换日历项51联系人.
52联系人API的主要功能.
52检索地址簿53添加联系人54在批处理模式下添加多个联系人.
54管理联系人55在批处理模式下管理多个联系人.
56除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
3|页TizenWeb应用程序开发-初学者接收有关联系人更改的通知.
57导入联系人57导出联系人58管理人士.
59消息传递59消息传递API的主要功能.
60发送消息.
61管理消息.
62同步电子邮件.
63接收有关消息存储更改的通知65多媒体.
66发现内容.
66捕获图像和视频.
67播放音频和视频.
68流式传输多媒体.
71NFC72NFCAPI的主要功能.
72管理NFC连接性.
75检测NFC标记和对等设备75处理NDEF消息.
76与NFC标记交换NDEF数据.
76与对等设备交换NDEF数据.
77除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
4|页TizenWeb应用程序开发-初学者关于本文档本文档面向Tizen应用程序开发人员,旨在帮助他们理解Tizen平台以及开发Tizen应用程序.
本文档中的信息基于撰写之际的Tizen2.
3alpha版本.
有关更详细信息以及最新参考信息,请访问Tizen开发人员网站以便获得TizenSDK帮助文档.
本文档中的信息仍会更改.
有关最终版本,请参阅正式的TizenSDK文档.
除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
5|页TizenWeb应用程序开发-初学者1.
Tizen简介了解TizenTizen是针对多种设备类别的开放源操作系统,例如智能电话、车载信息(IVI)设备、可穿戴设备、智能电视、计算机、相机和打印机等.
Tizen具有以下关键特性:Tizen作为开放源软件平台Tizen是一种灵活的开放源操作系统,完全是为满足移动和互连设备生态系统的所有各方的需要而构建的,包括设备制造商、移动网络运营商、应用程序开发人员和独立软件供应商.
作为开放源软件平台,Tizen对个体和公司都提供了非常多的机遇.
Tizen是由社区基于开放源的管控方式开发的,对于想要参与的所有人都开放.
开发人员可以在不同的层级对Tizen项目作出贡献,例如,作为平台贡献者或应用程序开发人员.
Tizen作为Web软件平台Tizen针对应用程序开发的重心是HTML5,HTML5目前被认为是针对移动应用程序的首选开发环境.
HTML5允许开发人员构建跨平台应用程序:以便编写一次代码,然后跨多个平台运行该代码.
Tizen支持大多数正式HTML5标准以及某些补充标准和旧标准,并且支持大多数主流W3CAPI.
TizenWeb引擎包含一个呈现引擎和一个JavaScript引擎;呈现引擎将标记内容(例如HTML和图像文件)与格式信息(例如CSS)结合在一起并且在屏幕上显示带格式的内容,而JavaScript引擎解释并且执行JavaScript.
Tizen作为行业支持的软件平台Tizen联盟对Tizen项目提供强有力的行业支持.
成立Tizen联盟是为了指引Tizen的行业角色,包括收集需求、标识和促进服务模型以及整个行业市场推广和教育.
有关详细信息,请参阅www.
tizenassociation.
org.
Tizen项目处于Linux基金会下并且由技术督导小组管辖.
该技术督导小组是针对Tizen项目的主要决策实体,其工作重心放在平台开发和交付以及形成用于垂直支持设备的工作组上.
除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
6|页TizenWeb应用程序开发-初学者Tizen社区网站主要Tizen社区网站是:Tizen主网站(www.
tizen.
org)Tizen项目的这个主要网站提供文章和博客.
您可为其他Tizen网站创建Tizen帐户并且获取与项目和活动有关的最新新闻.
Tizen开发人员(developer.
tizen.
org)针对Tizen开发人员的这个官方网站提供TizenSDK以及用于开发Tizen应用程序的不同资源.
您可与论坛中的其他开发人员讨论技术问题,并且查找用于开发您的应用程序的有帮助的示例代码.
Tizen源(source.
tizen.
org)这个Tizen开放源项目的官方网站提供Tizen源代码以及用于生成源代码的说明.
您可以使用Git跟踪源代码发布以及检索最新修订.
Tizen项目JIRA(bugs.
tizen.
org/jira)这个针对Tizen项目的官方JIRA网站允许您注册、跟踪bug以及针对新功能提供建议.
TizenWiki(wiki.
tizen.
org)该Tizenwiki允许您针对Tizen项目协调文档.
除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
7|页TizenWeb应用程序开发-初学者2.
Tizen体系结构Tizen体系结构包括用于开发Web应用程序的WebAPI以及用于开发本机应用程序的本机API.
因为Web应用程序构成了用于开发Tizen的主要方法,所以本文档主要针对WebAPI.
下图展示了Tizen体系结构.
图1:Tizen体系结构Tizen体系结构由以下子系统构成:WebFrameworkWebFramework实现最新的Web技术,可通过W3C/HTML5API访问.
该框架支持W3C和其他标准化组定义的大量HTML5功能,例如音频、视频、窗体、2D画布元素、振动、Web图形库(WebGL)、CSS3、WebSocket和Web辅助线程.
该框架还包括设备API,这允许您访问设备功能,例如警报、无线数据交换和消息传递.
该框架通过严格的基于规则的安全控制系统(防止对API的恶意使用)提供设备功能.
核心Web模块提供为低功率设备优化的Web框架的完整实现.
除了WebAPI之外,该实现还包括WebKit(这是用于在浏览器中呈现网页的布局引擎)以及用于运行Web应用程序的Web运行时.
本机子系统本机子系统提供Web框架所要求的功能.
该子系统由开放源库以及Web框架使用一组附加的本机API构成.
有关本机API的详细信息,请参阅TizenSDK帮助.
内核内核子系统包含为Tizen定制的Linux内核以及设备驱动程序.
Kernel(内核)NativeSubsystem(本机子系统)WebFrameworkW3C/HTML5DeviceAPIs(设备API)WebUITouchCSS3WebGWorker…VideoBTCallAlarmMessagSystemInfo…WebRuntime(Web运行时)ApplicationFramework(应用程序框架)Graphics&UI(图形和用户界面)Multimedia(多媒体)WebMessaging(消息传递)Location(位置)Security(安全性)System(系统)Base(基础)Connectivity(连接)Telephony(电话)PIMLinuxKernelandDeviceDrivers(Linux内核与设备驱动程序)除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
8|页TizenWeb应用程序开发-初学者3.
TizenWebAPI简介您使用TizenWebAPI开发TizenWeb应用程序,TizenWebAPI由W3C/HTML5API、补充WebAPI和Tizen设备API构成.
下图展示了不同类型的WebAPI.
图2:TizenWebAPITizen设备API设备API基于JavaScript并且提供对设备的平台功能的高级访问.
主要设备API是:警报API警报API允许您计划系统警报时间.
通过警报,您可以运行其他应用程序以便在特定时间执行特定操作.
您可以将警报计划为只触发一次,也可以计划为按预定义间隔反复触发.
应用程序API通过应用程序API,您可以检索与在设备上安装或者当前正在设备上运行的应用程序有关的信息.
在安装、更新或删除应用程序时您还可以接收通知,并且执行应用程序管理任务,例如启动或退出应用程序.
蓝牙API通过蓝牙API,您可以使用设备的蓝牙功能,例如管理本地蓝牙适配器、将设备与其他蓝牙设备配对,以及通过蓝牙连接交换数据.
除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
9|页TizenWeb应用程序开发-初学者日历API通过日历API,您可以在日历中管理事件和任务.
日历是事件或任务的集合,取决于日历类型.
每个事件或任务都具有一系列属性,例如目的、开始时间和持续时间.
联系人API通过联系人API,您可以管理联系人以及在地址簿中列出的人士.
联系人对象始终与特定地址簿相关联.
人士对象是与同一个人相关联的一个或多个联系人的聚合.
内容API通过内容API,您可以搜索内容,例如在设备上本地存储的图像、视频和音乐.
您还可以执行内容管理任务,例如查看和更新内容属性.
下载API通过下载API,您可以从Internet下载文件.
还可以监视下载进度和状态.
文件系统API通过文件系统API,您可以管理设备文件系统的文件和文件夹.
该文件系统API提供对文件系统的非受限部分的访问,这些部分表示为虚拟根位置.
这些虚拟根构成了多个位置的集合,它们结合在一起作为您的应用程序可以访问的单个虚拟文件系统.
消息传递API通过消息传递API,您可以将消息传递功能用于SMS、MMS和电子邮件通信.
HTML5消息传递进程使用统一资源标识符(URI).
NFCAPI通过NFCAPI,您可以使用近场通信(NFC)服务在NFC设备("对等方")或标记之间交换数据.
这些设备可以共享联系人、照片和视频,并且还可以充当智能卡.
您可以使用NFC设备针对多种行为(例如支付帐单或下载优惠券)与NFC标记进行通信.
通知API通过通知API,您可以提供与应用程序事件有关的通知.
程序包API通过程序包API,您可以检索有关程序包的详细信息,例如ID、图标路径和版本.
在安装、更新或删除程序包时您还可以接收通知,并且执行程序包管理任务,例如安装或卸载程序包.
电源API通过电源API,您可以访问设备的电力资源.
目前,支持屏幕和CPU电力资源,使您可以请求特定的电源状态并且控制屏幕的亮度.
系统信息API通过系统信息API,您可以访问设备的系统属性.
您可以检索不同的设备和系统详细信息,例如当前电池电量水平、可用存储量以及蜂窝网络连接的状态.
系统设置API通过系统设置API,您可以访问设备的针对家庭的设置,以及锁定屏幕墙纸、来电铃音和电子邮件通知音.
除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
10|页TizenWeb应用程序开发-初学者时间API通过时间API,您可以通过检索日期和时间信息使用区域设置特定的日历功能.
您还可以更改设备的日期、时间和时区,以及执行与日期和时间相关的计算.
TizenAPI通过TizenAPI,您可以使用常见的Tizen功能.
TizenAPI包含用于查询方法、一般的成功和错误事件处理程序、一般的错误界面以及用于定义位置信息的简单坐标界面的筛选器和排序模式的筛选器和排序模式.
Web设置API通过Web设置API,您可以设置Web视图属性.
有关设备API的详细信息,请参阅TizenSDK帮助.
除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
11|页TizenWeb应用程序开发-初学者4.
Web应用程序开发入门Tizen提供工具以便管理您的应用程序的从构思和设计、到开发和发布、再到最终的应用程序停用的整个生命周期.
开发TizenWeb应用程序:1.
计划和设计应用程序2.
安装TizenSDK3.
创建应用程序项目4.
创建应用程序UI5.
生成应用程序6.
运行和调试应用程序7.
打包应用程序8.
根据需要他本地化应用程序计划和设计应用程序开发一个TizenWeb应用程序的第一步是使用您选择的设计工具计划和设计应用程序.
在您完成了对您的应用程序的计划和设计后,安装TizenSDK并且创建应用程序项目.
安装TizenSDKTizenSDK是用于开发TizenWeb和本机应用程序的一组全面的工具.
它包含IDE、仿真器、工具链、示例代码和帮助文档.
在安装该SDK时,您可以选择在线安装或脱机安装.
先决条件在开始安装前,请检查您的计算机是否满足以下系统要求:操作系统:–MacOSX10.
7Lion(64位)或MacOSX10.
8MountainLion(64位)或MacOSX10.
9Mavericks(64位)–MicrosoftWindows7(32位或64位)或MicrosoftWindows8(32位或64位)–Ubuntu12.
04、12.
10或14.
04(32位或64位)双核2GHzCPU2GBRAM6GB可用磁盘空间本地管理员权限除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
12|页TizenWeb应用程序开发-初学者有关先决条件的详细信息,请参阅https://developer.
tizen.
org/downloads/sdk/installing-sdk/prerequisites-tizen-sdk.
安装TizenSDK(在线)在线安装TizenSDK:1.
下载SDK安装管理器.
2.
运行SDK安装管理器.
3.
单击Next(下一步).
4.
接受条款和条件,然后单击Next(下一步).
5.
选择您要安装的组件,然后单击Next(下一步).
6.
选择SDK主文件夹,然后单击Install(安装).
SDK安装向导将在安装完毕时通知您.
您现在可以在IDE中创建应用程序项目.
安装TizenSDK(脱机)从映像文件脱机安装SDK:1.
下载SDK安装管理器.
2.
下载SDK映像文件.
3.
运行SDK安装管理器.
4.
单击Advanced(高级).
5.
在AdvancedConfiguration(高级配置)窗口中,选择SDKImage(SDK映像).
6.
单击文件夹按钮,浏览到SDK映像文件,然后单击OK(确定).
7.
单击Next(下一步).
8.
接受条款和条件,然后单击Next(下一步).
9.
选择您要安装的组件,然后单击Next(下一步).
10.
选择SDK主文件夹,然后单击Install(安装).
SDK安装向导将在安装完毕时通知您.
您现在可以在IDE中创建应用程序项目.
创建应用程序项目在计划和设计了您的应用程序并且安装了SDK后,您现在就可以在IDE中创建Web应用程序项目了.
在创建应用程序项目时,请使用适当的项目模板或示例.
基于该模板或示例,项目向导将自动实现应用程序需要运行的基本功能.
您可以从多种模板和示例中进行选择.
还可以创建您自己的用户模板.
最后,要实现所需功能,请仔细设置项目属性和配置应用程序.
除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
13|页TizenWeb应用程序开发-初学者创建Web应用程序项目为您的应用程序创建Web应用程序项目:1.
在IDE中,依次选择File>New>TizenWebProject(文件>新建>TizenWeb项目).
如果看不到想要的项目选项,请确保您在使用TizenWeb视角:a.
选择Window>OpenPerspective>Other(窗口>打开视角>其他).
b.
选择TizenWeb视角.
2.
在NewTizenWebProject(新建TizenWeb项目)窗口中,定义项目详细信息:a.
选择应用程序要基于的模板或示例.
b.
定义项目的名称.
注意:TizenAPI名称不能用作项目名称.
项目名称的长度必须介于2到49个字符之间,并且只能包含以下字母数字字符:a-z、A-Z、0-9.
3.
如果启用,则单击Next(下一步)按钮,然后自定义jQueryMobile或TizenWebUIFramework模板设置.
4.
单击Finish(完成).
新的应用程序项目将显示在ProjectExplorer(项目资源管理器)视图中,其中包含config.
xml文件中的默认内容以及若干项目文件夹中的默认内容.
除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
14|页TizenWeb应用程序开发-初学者图3:创建TizenWeb应用程序项目导入项目将现有Tizen应用程序项目导入到IDE中:1.
在IDE中,依次选择File>Import>Tizen>TizenWebProjectsandWidgetfile.
2.
单击Browse(浏览),然后选择包含您的现有项目或小程序文件的根文件夹(.
wgt).
在选择项目后,您可以通过选择Copyprojectsintoworkspace(将项目复制到工作区)将其复制到工作区中.
3.
单击Finish(完成).
除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
15|页TizenWeb应用程序开发-初学者支持的模板和示例您可以基于多种模板和示例创建TizenWeb应用程序.
除了预定义的模板之外,还可以创建您自己的用户模板.
下表列出了可用于TizenWeb应用程序开发的预定义的模板.
表1:预定义模板项目类型应用程序类型说明Basic空白应用程序这是空的Tizen应用程序模板.
TizenWebUIBuilder空应用程序单页应用程序多页应用程序导航应用程序这些模板基于TizenWebUIBuilder.
TizenWebUIFramework单页应用程序多页应用程序主详细信息应用程序导航应用程序这些模板基于TizenWebUIFramework.
jQueryMobile单页应用程序多页应用程序主详细信息应用程序导航应用程序这些模板基于jQueryMobile.
您可以基于以下颜色主题更改应用程序页眉、正文和页脚:A:黑色B:蓝色C:灰色D:浅灰色E:黄色创建用户模板您可以通过复制现有用户模板或通过将现有项目作为用户模板导出,创建您自己的用户模板.
然后,您可以使用这些模板创建新项目.
用户模板位于/ide/user-templates/web文件夹中以及用户定义的文件夹中.
文件夹的确切位置取决于操作系统:Linux/MacOSX:/home/${USER_NAME}/tizen-sdk-dataWindows:C:\tizen-sdk-data用户模板的项目文件夹包含项目相关的文件,这些文件复制到从模板创建的新项目.
可以在您的新项目中修改这些文件.
下表描述某一用户模板随附的文件以及项目文件夹内容.
除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
16|页TizenWeb应用程序开发-初学者表2:用户模板文件文件内容description.
xml该文件由以下在项目向导中显示的模板描述信息构成::项目类型名称.
可以使用相同的用户模板创建若干项目类型.
:项目类型版本.
:预览文件名.
:说明标题.
tizen-app-template.
xml该文件由以下在项目向导中显示的模板定义信息构成::用户模板名称.
:小程序类型.
默认设置为TIZEN.
:说明文件名称.
默认设置为description.
xml.
icon64和icon32属性:图标图像文件名称.
数字后缀指示图标大小(以像素为单位).
复制用户模板从现有用户模板创建新用户模板:1.
复制并且重命名相应的/ide/user-templates/web文件夹.
该文件夹包含默认模板布局.
2.
编辑新文件夹中的文件,或者根据需要添加新文件,例如屏幕快照或图标图像以及CSS和JavaScript文件.
将项目作为用户模板导出将现有项目作为新用户模板导出:1.
在IDE中,依次选择File>Export>Tizen>UserTemplate(文件>导出>Tizen>用户模板).
2.
在UserTemplateExportWizard(用户模板导出向导)窗口中,定义项目和用户模板详细信息:a.
选择源项目.
b.
定义用户模板的名称.
c.
单击Browse(浏览),然后选择用户模板的导出位置.
除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
17|页TizenWeb应用程序开发-初学者图4:定义用户模板的导出位置d.
要将模板添加到NewTizenWebProject(新建TizenWeb项目)窗口的UserTemplate(用户模板)选项卡,请选择Importatemplatetothenewprojectwizardautomatically(自动将模板导入到新项目向导).
e.
或者,要选择要在项目向导中显示的模板说明、预览图像和图标文件,请单击Next(下一步).
3.
单击Finish(完成).
设置项目属性在实现实际应用程序功能前,为您的应用程序项目设置所有必需的属性.
设置项目属性:1.
在IDE中,在ProjectExplorer(项目资源管理器)视图中右键单击项目,然后选择Properties(属性).
2.
设置以下属性:–API权限–内部版本属性–JSON属性3.
单击Apply(应用).
除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
18|页TizenWeb应用程序开发-初学者注意:仅使用IDE中的配置编辑器设置项目属性.
如果您使用其他编辑器创建或编辑config.
xml文件,您的应用程序可能不会像预期一样工作.
在完成了对项目属性的设置后,配置应用程序.
检查API权限检查您的项目中的源代码以便确定是否违反了任何API权限:1.
在Properties(属性)窗口中,依次选择Project>Properties>TizenSDK>Web>Privilege(项目>属性>TizenSDK>Web>权限).
2.
如果您想要在特定文件夹中排除JavaScript文件,请在ExcludedFolderSettings(排除的文件夹设置)窗格中定义文件夹.
排除文件夹可避免对库文件(例如tizen-ui-fw和jQuery)进行不必要的分析.
默认排除tizen-web-ui-fw文件夹.
3.
要自动执行权限检查,请在ModeSettings(模式设置)面板中选择所需选项.
4.
要在生成过程中执行权限检查,请选择Runprivilegecheckswithbuild(针对生成运行权限检查).
还可以通过在上下文菜单中选择Project>CheckPrivilege(项目>检查权限),执行权限检查.
结果将显示在Problems(问题)视图中.
设置生成属性设置生成属性:1.
在Properties(属性)窗口中,依次选择TizenSDK>Package>Web(TizenSDK>程序包>Web).
2.
选择OptimizeWebresources(优化Web资源).
3.
在Optimization(优化)窗格中,添加要从优化中排除的任何文件.
设置JSON属性设置JSON属性:1.
在Properties(属性)窗口中,依次选择TizenSDK>Web>JSONProperties(TizenSDK>Web>JSON属性).
2.
选择EnableJSONvalidationinproject(在项目中启用JSON验证).
配置应用程序每个应用程序都包含config.
xml文件,该文件包含用于配置应用程序的各种属性.
要编辑该config.
xml文件,请通过在ProjectExplorer(项目资源管理器)视图中双击该文件来打开它.
可以通过使用编辑器中的相应选项卡来编辑以下属性:除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
19|页TizenWeb应用程序开发-初学者概述定义一般信息.
小程序定义许可信息和UI首选项.
功能定义软件和硬件功能要求.
权限定义用于访问受限的API或API组的权限.
策略定义用于请求外部网络资源权限的网络URL.
本地化定义config.
xml文件的名称、说明和许可元素的本地化信息.
首选项定义可以使用WidgetAPI设置和检索的键值对.
Tizen定义特定于Tizen的要求信息.
源查看和编辑config.
xml文件的原始XML代码.
在完成了对应用程序的配置后,创建应用程序UI.
概述通过Overview(概述)选项卡,您可以定义应用程序的一般信息.
下表列出了您可以在该选项卡中编辑的属性.
表3:概述属性属性说明标识符应用程序ID.
版本应用程序的当前版本.
名称在应用程序菜单或其他上下文中显示的应用程序名称.
内容应用程序的安装文件.
图标应用程序的自定义图标,显示在主菜单中.
图标格式必须为具有alpha的32位PNG,并且图标大小必须为117x117像素.
除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
20|页TizenWeb应用程序开发-初学者小程序通过Widget(小程序)选项卡,您可以定义应用程序的许可信息和UI首选项.
下表列出了您可以在该选项卡中编辑的属性.
表4:小程序属性属性说明管理小程序作者创建了该应用程序的个人或组织.
电子邮件作者的电子邮件地址.
网站与该应用程序相关联的IRI,例如社交网络上的主页或配置文件.
许可证提供该应用程序的内容所基于的软件许可证.
该许可证可以包含内容(例如使用协议)、再分发声明和版权许可条款.
许可URL与软件或内容许可证相关联的有效IRI或路径.
说明应用程序的自由形式说明.
管理小程序UI宽度启动文件视口宽度.
高度启动文件视口高度.
查看模式首选查看模式.
功能通过Features(功能)选项卡,您可以定义应用程序的软件和硬件功能要求.
定义可用于TizenStore中的应用程序filtering(筛选).
添加所需功能:1.
在Features(功能)选项卡中,单击Add(添加).
2.
从列表中选择某一功能.
3.
单击Save(保存).
在添加功能后,您可以在Source(源)选项卡中查看代码,例如:权限通过Privileges(权限)选项卡,您可以定义用于从应用程序访问受限的API或API组的权限.
该选项卡充当用于请求要在运行时使用的应用程序的IRI可标识运行时组件绑定的标准化工具.
添加权限:除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
21|页TizenWeb应用程序开发-初学者1.
在Privileges(权限)选项卡中,单击Add(添加).
2.
在Addprivilege(添加权限)窗口中,设置以下选项之一:–Internal(内部):从预定义的API列表中选择一个权限.
您可以通过按住CTRL键选择多个权限.
–Privilegename(权限名称):手动输入包含权限定义的URL.
–File(文件):单击Browse(浏览),然后选择一个权限文件(.
xml或.
widlprocxml).
3.
单击Finish(完成).
在添加权限后,您可以在Source(源)选项卡中查看代码,例如:策略通过Policy(策略)选项卡,您可以定义用于请求外部网络资源权限的网络URL.
根据W3C访问请求策略(WARP),您默认不能访问外部网络资源.
如果您需要访问外部网络资源,则必须为其请求网络资源权限.
下表列出了您可以在该选项卡中编辑的属性.
表5:策略属性属性说明content-security-policy针对打包或托管应用程序的其他内容安全策略.
根据W3C内容安全策略1.
0定义策略字符串.
下面的示例展示了Source(源)选项卡的代码:script-src'self'content-security-policy-report-only仅限监控目的的针对打包或托管应用程序的其他内容安全策略.
下面的示例展示了Source(源)选项卡的代码:script-src'self';report-uri="http://example.
com/report.
cgi"allow-navigation对于Web应用程序允许的URL域的列表.
该属性是可选的.
下面的示例展示了Source(源)选项卡的代码:tizen.
org*.
tizen.
orgaccess网络资源权限.
请求网络资源权限:1.
单击Add(添加).
2.
在NetworkURL(网络URL)列中,输入您要访问的资源URL.
除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
22|页TizenWeb应用程序开发-初学者3.
要允许应用程序访问URL子域,请通过单击该值将Allowsubdomain(允许子域)中的值设置为true.
下面的示例展示了Source(源)选项卡的代码:本地化通过Localization(本地化)选项卡,您可以定义config.
xml文件的名称、说明和许可元素的本地化信息.
添加本地化信息:1.
在Name(名称)面板中,单击Add(添加).
2.
选择某一区域设置,并且输入您的名称.
3.
在Description(说明)面板中,单击Add(添加).
4.
选择某一区域设置,然后输入应用程序的说明.
5.
在License(许可证)面板中,单击Add(添加).
6.
选择某一区域设置,然后输入许可证和许可证URI.
在添加本地化信息后,您可以在Source(源)选项卡中查看代码,例如:LeeWidgetApacheLicense,Version2.
0首选项通过Preferences(首选项)选项卡,您可以定义可以使用WidgetAPI设置和检索的键值对.
应用程序在运行时期间使用这些键值对.
添加键值对:1.
在Preferences(首选项)选项卡中,单击Add(添加).
2.
在Name(名称)列中输入键,在Value(值)列中输入该键的值.
3.
要将键值对设置为只读,请通过单击该值将Read-only(只读)中的值设置为true.
在添加键值对后,您可以在Source(源)选项卡中查看代码,例如:TizenTizen选项卡可用于定义特定于Tizen的要求信息.
该选项卡显示Tizen架构扩展.
该选项卡上的某些属性是必需的,其他是可选的.
下表列出了您可以在该选项卡中编辑的属性.
除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
23|页TizenWeb应用程序开发-初学者表6:Tizen属性属性说明应用程序IDTizen应用程序ID,它是从Tizen程序包ID和项目名称随机生成的.
该属性是必需的.
所需版本指示应用程序支持的最低API版本.
此属性是必需的并且必须是浮点值,例如1.
0或2.
0.
内容src在W3C小程序包装和XML配置中,Web应用程序起始页是小程序包内的文档.
TizenWRT允许在外部服务器上托管起始页.
元素用于指向相关文档.
设置screen-orientation屏幕方向模式:横向纵向自动旋转该属性是可选的.
默认值为portrait.
context-menu支持上下文菜单.
该属性是可选的.
默认值为enable.
background-support设置在应用程序发送到后台时应用程序是否继续执行.
该属性是可选的.
默认值为disable.
encryption应用程序资源(HTML、CSS和JavaScript文件)的加密.
该属性是可选的.
默认值为disable.
install-location安装位置,例如SD卡.
该属性是可选的.
默认值为auto.
hwkey-event支持硬件键.
该属性是可选的.
默认值为enable.
app-control描述应用程序提供的应用程序控制功能.
operation(操作)、uri和mime字段描述其他应用程序可以请求的功能,src字段描述处理请求的应用程序页.
下面的示例展示了Source(源)选项卡的代码:除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
24|页TizenWeb应用程序开发-初学者app-widgetidDynamicBoxID.
ID格式为[id].
[anystring].
primary在您单击应用程序图标以便添加DynamicBox并且使用Addfromapptray(从应用程序托盘添加)选项后,主DynamicBox将显示在主屏幕上.
您可以通过使用Addmoreapp-widget(添加更多程序和小程序)选项添加辅助DynamicBox.
只能有一个DynamicBox可以将该属性的值设为true.
auto-launch要在单击DynamicBox时启动应用程序,请将该属性的值设置为true.
update-period用于确定重新加载DynamicBox的频率(以秒为单位).
最小值为1800.
0.
默认行为是no-update.
box-labelDynamicBox的名称.
box-icon在您选择Addmoreapp-widget(添加更多程序和小程序)选项时该图标显示在该列表上.
box-contentsrc属性指定基于应用程序根文件夹的起始页的相关路径.
mouse-event属性指定指示DynamicBox内容接收鼠标向下和向上事件的标志.
touch-effect属性指定指示在用户单击DynamicBox时必须应用于DynamicBox的特殊UI效果的标志.
box-sizepreview属性指定在DynamicBox上显示的图像文件的路径.
use-decoration属性指定DynamicBoxViewer是否将框装饰应用于框大小.
pdsrc属性指定基于应用程序根文件夹的起始页的相关路径,并且用于显示DropView.
还可以定义DropView高度.
DropView宽度始终固定到设备屏幕宽度.
帐户显示名称帐户提供程序的显示名称.
该属性是必需的.
多个帐户设置是否支持多个帐户.
该属性是必需的.
图标表示帐户提供程序的图标的路径.
该图标图像由帐户设置使用,并且必须放置于共享文件夹中.
该大小为72x72像素.
该属性是必需的.
小图标表示帐户提供程序的小图标的路径.
该图标图像由帐户设置使用,并且必须放置于共享文件夹中.
该大小为45x45像素.
该属性是必需的.
功能以IRI格式定义的帐户提供程序的功能:http:///accounts/capability/可以使用以下预定义功能:除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
25|页TizenWeb应用程序开发-初学者http://tizen.
org/account/capability/contact在帐户与联系人相关时使用.
http://tizen.
org/account/capability/calendar在帐户与日历相关时使用.
该属性是可选的.
元数据键可通过Tizen应用程序API访问(只读)元数据.
下面的示例展示了Source(源)选项卡的代码:该属性是可选的.
该值必须是唯一字符串.
值可通过Tizen应用程序API访问(只读)元数据.
下面的示例展示了Source(源)选项卡的代码:该属性是可选的.
该值必须是字符串.
源通过Source(源)选项卡,可以查看和编辑config.
xml文件的原始XML代码.
对其他选项卡进行的任何更改都将显示在config.
xml文件中.
注意:该config.
xml文件必须不仅要符合XML文件格式,还要符合W3C规格要求.
以XML格式编辑配置文件仅供高级用户使用.
使用UIBuilder创建应用程序UITizenIDE提供UIBuilder以便创建应用程序UI.
UIBuilder通过允许您使用拖放WYSIWYG(所见即所得)编辑器排列小程序,简化了UI创建过程.
有关使用其他方法创建应用程序UI的详细信息,请参阅使用Tizen高级UI.
使用UIBuilder创建应用程序UI1.
创建UIBuilder项目2.
添加新页3.
通过添加和排列UI小程序设计页面4.
处理UI小程序事件5.
测试UIBuilder项目有关UIBuilder的详细信息,请参阅Tizen开发指南中的UIBuilder.
除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
26|页TizenWeb应用程序开发-初学者创建UIBuilder项目UIBuilder项目在IDE工作区中创建用于生成TizenWeb应用程序的骨干源代码以及所需文件和文件夹.
您可以使用UIBuilder创建和修改页面布局.
UIBuilderproject项目使用TizenWebUIBuilder框架作为编程模型的指导.
创建UIBuilder项目类似于创建Web应用程序项目.
在NewWebProject(新建Web项目)窗口中,选择TizenWebUIBuilder项目模板.
添加页面您可以将多个页面添加到UIBuilder应用程序.
添加新页:1.
在IDE中,依次选择File>New>Other(文件>新建>其他).
2.
在New(新建)窗口中,依次选择Tizen>TizenWebUIBuilderPage(Tizen>TizenWebUIBuilder页).
3.
在NewPageFile(新建页文件)窗口中,为页面选择UIBuilder项目并且输入新的页ID.
4.
单击Finish(完成).
新页将显示在PageDesigner(页设计器)视图中.
设计页您可以使用PageDesigner(页设计器)视图从页面中添加和删除UI小程序、将小程序排列为您想要的布局以及设置小程序属性.
您可以将多种不同类型的小程序添加到页面.
您可以通过设置目标设备分辨率、放大和缩小以及将设计区域缩放到可用屏幕空间,配置页面的设计区域.
向页面添加小程序:1.
在IDE的Pages(页)视图中,单击要将小程序添加到的页面的缩略图.
PageDesigner(页设计器)视图将显示该页的设计区域.
除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
27|页TizenWeb应用程序开发-初学者图5:TizenIDE中的UIBuilder项目2.
将小程序从Palette(调色板)区域拖到设计区域.
设计区域中下一个空位置用虚点构成的长方形标记.
父小程序或内容对象为蓝色.
有关添加小程序的详细信息,请参阅放置小程序.
除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
28|页TizenWeb应用程序开发-初学者图6:将小程序从调色板添加到页面3.
在设计区域中或Outline(大纲)视图中选择小程序.
下图显示Outline(大纲)视图的特写,列表项小程序嵌套在列表小程序内.
图7:大纲视图除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
29|页TizenWeb应用程序开发-初学者4.
在Properties(属性)视图中,设置小程序属性.
下图显示列表项小程序的Properties(属性)视图,列表项文本突出显示以便用于编辑.
图8:属性视图5.
根据需要在设计区域中移动小程序.
放置小程序您可以将子小程序添加到容器小程序中,例如List中.
例如,可以将一组ListItem小程序添加到List小程序中.
如果放置于设计区域中的某个List小程序不包含任何ListItem小程序,则List小程序将显示消息"DropaListItem"(删除列表项).
只能将特定类型的小程序添加到容器小程序中.
例如,只能将ListItem小程序添加到List小程序中.
如果您尝试将ListItem小程序添加到其他类型的小程序中,则设计区域将变为红色,指示该小程序不能放置于那里.
如果您将某一小程序添加到正确类型的容器小程序中,则设计区域将变为蓝色,指示这是有效放置.
处理针对页面的事件为小程序添加事件处理程序:1.
在IDE的PageDesigner(页设计器)视图的设计区域中,选择该小程序.
2.
在Properties(属性)视图中,选择Action(操作)选项卡.
3.
单击要添加事件处理程序的事件的加号按钮,然后从Action(操作)下拉列表中选择RunJavaScriptFunction(运行JavaScript函数).
4.
在Function(函数)字段中,定义事件处理程序的名称,然后单击该字段旁的播放按钮.
除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
30|页TizenWeb应用程序开发-初学者图9:将SwipeLeft处理程序添加到列表项.
UIBuilder为事件处理程序生成骨干代码,例如:/***@param{Object}event*@base_page1_page*@returns{Boolean}*/_page1_page.
prototype.
listitem3_onswipeleft=function(event){};5.
输入特定于应用程序的事件处理程序代码.
每个小程序都具有自己的唯一ID,并且您可以通过使用该ID从事件处理程序访问该小程序.
可以在Outline(大纲)视图中查看和编辑该小程序ID.
例如,下面的代码在用户从左侧扫过listitem3小程序上方时显示警报窗口:_page1_page.
prototype.
listitem3_onswipeleft=function(event){window.
alert("HelloWorld");};除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
31|页TizenWeb应用程序开发-初学者测试UIBuilder项目测试UIBuilder项目:1.
在IDE中,在ProjectExplorer(项目资源管理器)视图中选择该项目.
2.
要在仿真器或目标设备中测试该项目,请依次选择Run>Runas>TizenWebApplication(运行>运行方式>TizenWeb应用程序).
3.
要在模拟器中测试该项目,请依次选择Run>Runas>TizenWebSimulatorApplication(运行>运行方式>TizenWebSimulator应用程序).
生成应用程序在您可以运行和调试应用程序之前,必须首先生成该应用程序.
您可以自动或手动生成应用程序:要自动生成该应用程序,请在IDE中,依次选择Project>BuildAutomatically(项目>自动生成).
如果您选择该选项,则只要更改和保存源代码或资源,该IDE就自动重新生成该应用程序.
要手动生成该应用程序,请在IDE中,依次选择Project>BuildProject(项目>生成项目).
如果您选择该选项,则可以在方便时生成您的项目.
注意:如果您选择手动生成应用程序:确保您在运行或调试项目前具有最新的生成输出.
要删除项目生成输出,请在IDE中,依次选择Project>Clean(项目>清除).
运行和调试应用程序在生成您的应用程序后,在以下一个或多个环境中运行并且调试该应用程序:模拟器通过TizenWebSimulator,您可以运行使用TizenWebAPI的应用程序.
仿真器TizenSDKEmulator模拟用于运行TizenWeb应用程序的目标环境.
使用该环境,您可以在将您的应用程序部署到实际目标设备前测试该应用程序.
目标设备通过在目标设备上运行您的应用程序,您可以在实际目标环境中调试和测试您的应用程序.
您可以通过使用快速开发支持(RDS)更快地运行和调试您的应用程序.
有关您可以使用的调试方法和工具的详细信息,请参阅调试应用程序.
在完成对您的应用程序的调试后,您可以打包应用程序了.
除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
32|页TizenWeb应用程序开发-初学者在模拟器中运行应用程序注意:TizenWebSimulator要求GoogleChrome以便运行.
要使用Simulator,请首先下载并且安装GoogleChrome,然后在模拟器首选项中指定浏览器安装位置.
在模拟器中运行应用程序:1.
如果您是首次运行该应用程序,则通过从菜单中依次选择Run>RunConfigurations>TizenWebSimulatorApplication(运行>运行配置>TizenWebSimulator应用程序)来运行配置.
运行配置包含必需的应用程序启动设置.
2.
通过执行以下操作之一运行应用程序:–在ProjectExplorer(项目资源管理器)视图中,右键单击该项目,然后选择RunAs>TizenWebSimulatorApplication(运行方式>TizenWebSimulator应用程序).
–在菜单中,依次选择Run>RunAs>TizenWebSimulatorApplication(运行>运行方式>TizenWebSimulator应用程序).
–在工具栏中,单击Run(运行).
在应用程序启动后,该模拟器将加载在config.
xml文件的Content(内容)字段中指定的文件.
最通常指定的文件是index.
html.
该模拟器将使用WebKit在浏览器中呈现您的应用程序.
所有GoogleChrome开发功能均在模拟器中提供,包括RemoteInspector工具,您可以通过按下F12键打开该工具.
通过模拟器,您可以设置设备屏幕尺寸和方向,将事件和消息(例如地理位置数据和传感器输入事件)发送到您的应用程序以便进行调试.
在仿真器中运行应用程序注意:运行仿真器要求最少20MB的可用磁盘空间.
该映像可能占用最多10GB的磁盘空间.
在仿真器中运行应用程序:1.
启动仿真器:a.
从桌面(Linux)或"开始"菜单(Windows)或者从命令行启动EmulatorManager.
MacOSX并不提供针对EmulatorManager的快捷方式.
b.
在EmulatorManager的Name(名称)列中选择该仿真器映像如果您是首次使用EmulatorManager,将创建仿真器映像:i.
单击CreateNew(新建).
ii.
设置映像详细信息.
iii.
单击Save(保存).
c.
单击LaunchEmulator(启动仿真器).
除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
33|页TizenWeb应用程序开发-初学者2.
通过执行以下操作之一运行应用程序:–在ProjectExplorer(项目资源管理器)视图中,右键单击该项目,然后选择RunAs>TizenWebApplication(运行方式>TizenWeb应用程序).
–在菜单中,依次选择Run>RunAs>TizenWebApplication(运行>运行方式>TizenWeb应用程序).
–在工具栏中,单击Run(运行).
3.
要停止该仿真器,请右键单击该仿真器,然后单击Close(关闭).
在目标设备上运行应用程序在目标设备上运行应用程序:1.
将目标设备连接到您的计算机.
2.
在IDE中,依次选择Run>RunConfigurations(运行>运行配置).
3.
在RunConfigurations(运行配置)窗口中,单击NewLaunchConfiguration(新的启动配置).
快速开发支持用于跳过程序包上载并且加快应用程序运行速度.
RDS默认启用.
要禁用它,请依次选择Window>Preferences>TizenSDK>RapidDevelopmentSupport(窗口>首选项>TizenSDK>快速开发支持).
4.
使用Timeout(超时)值滑块设置超时.
超时值表示应用程序启动的等待时间.
如果您在使用较低配置的计算机,则设置一个较高的超时值,以免发生应用程序启动失败错误.
5.
单击Run(运行).
如果在运行配置中不需要任何更改,则可以通过执行以下操作之一在目标设备上运行应用程序:在ProjectExplorer(项目资源管理器)视图中,右键单击该项目,然后选择RunAs>TizenWebApplication(运行方式>TizenWeb应用程序).
在菜单中,依次选择Run>RunAs>TizenWebApplication(运行>运行方式>TizenWeb应用程序).
在工具栏中,单击Run(运行).
如果您的应用程序成功在目标设备上启动,则JavaScriptLogConsole(JavaScript日志控制台)将自动在IDE中启动.
该视图显示应用程序JavaScript日志.
调试应用程序通过调试应用程序,您可以了解其控制流.
您可以通过在目标设备上运行应用程序并且调试其JavaScript代码来调试该应用程序.
JavaScript代码调试使用RemoteInspector工具.
在目标设备上开始调试应用程序:1.
将目标设备连接到您的计算机.
2.
在IDE中,通过执行以下操作之一打开DebugConfigurations(调试配置)窗口:–在ProjectExplorer(项目资源管理器)视图中,右键单击该项目,然后选择DebugAs>DebugConfigurations(调试方式>调试配置).
除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
34|页TizenWeb应用程序开发-初学者–在菜单中,依次选择Run>DebugConfigurations(运行>调试配置).
3.
在DebugConfigurations(调试配置)窗口中,单击NewLaunchConfiguration(新的启动配置).
快速开发支持(RDS)用于跳过程序包上载并且加快应用程序运行速度.
RDS默认启用.
要禁用它,请依次选择Window>Preferences>TizenSDK>RapidDevelopmentSupport(窗口>首选项>TizenSDK>快速开发支持).
4.
使用Timeout(超时)值滑块设置超时.
超时值表示应用程序启动的等待时间.
如果您在使用较低配置的计算机,则设置一个较高的超时值,以免发生应用程序启动失败错误.
5.
单击Debug(调试).
如果在调试配置中无需任何更改,则可以通过执行以下操作之一在目标设备上调试应用程序:在ProjectExplorer(项目资源管理器)视图中,右键单击该项目,然后选择DebugAs>TizenWebApplication(调试方式>TizenWeb应用程序).
在菜单中,依次选择Run>DebugAs>TizenWebApplication(运行>调试方式>TizenWeb应用程序).
在工具栏中,单击Debug(调试).
在调试开始后,RemoteInspector将显示在一个新的GoogleChrome窗口中.
您可以使用RemoteInspector执行以下调试任务:检查样式检查DOM检查资源调试JavaScript代码注意:RemoteInspector始终在新浏览器窗口中打开.
不支持在要调试的应用程序和RemoteInspector之间的生命周期同步.
为使RemoteInspector工作,必须在设备上安装GoogleChrome.
当GoogleChrome安装在该设备时,TizenSDK会自动检测到它.
要选择浏览器路径,请转到Window>Preferences>TizenSDK>Web>Chrome(窗口>首选项>TizenSDK>Web>Chrome).
调试JavaScript代码注意:您在调试JavaScript代码前必须启用调试.
要调试JavaScript代码,请从RemoteInspector菜单中单击Sources(源).
您可以通过在编辑器左侧的标记栏区域中右键单击,然后选择ToggleBreakpoint(切换断点),在代码中设置断点.
在设置了断点后,您可以查看变量、表达式和当前回调.
还可以通过使用以下控制按钮控制调试.
除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
35|页TizenWeb应用程序开发-初学者表7:用于在断点之间进行调试的控制按钮按钮说明恢复当前执行.
逐句跳过突出显示的语句.
执行当前行,并且如果该行包含某一方法,则执行该方法而不进入该方法.
单步执行突出显示的语句.
执行当前行,并且如果该行包含某一方法,则单步执行该方法.
跳出当前方法.
停用所有断点.
如果您的应用程序成功在目标设备上启动,则JavaScriptLogConsole(JavaScript日志控制台)将自动在IDE中启动.
该视图显示应用程序JavaScript日志.
快速开发支持借助于快速开发支持(RDS),您可以通过节约部署时间快速开发Tizen应用程序.
在使用RDS时,将首先正常启动应用程序(正常模式).
在首次启动后,将跳过打包过程,并且只有已修改、添加和删除的文件将安装在目标设备上(RDS模式).
如果在启动时出现某个错误,则应用程序将在正常模式下启动.
在正常模式下启动应用程序:1.
打包应用程序.
2.
将打包后的文件传输到目标设备.
3.
在目标设备上安装打包后的文件.
如果应用程序已安装,则在安装前卸载已安装的应用程序.
在RDS模式下启动应用程序:1.
搜索增量文件(已更改、已添加和已删除的文件).
2.
将增量文件传输到目标设备.
3.
如果修改了config.
xml文件,则运行文件夹配置.
RDS选项默认启用.
要禁用它,请在IDE中,依次选择Window>Preferences>TizenSDK>RapidDevelopmentSupport(窗口>首选项>TizenSDK>快速开发支持).
注意:在多应用程序项目中不支持RDS.
如果您想要从设备中删除某一应用程序,则必须手动删除已安装的应用程序,因为启动过程不包含卸载.
除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
36|页TizenWeb应用程序开发-初学者打包应用程序在成功运行并调试您的应用程序后,您需要将其打包.
您可以打包应用程序并且启用单次下载并安装.
通过IDE提供的应用程序包装管理器,您可以在仿真器中或目标设备上安装并卸载该程序包.
注意:必须使用作者证书对应用程序进行签名.
如果您不具有证书,则使用证书生成程序创建证书,然后在IDE中注册该证书.
Web应用程序包装基于W3C包装和配置规范.
您可以使用以下生成选项管理包装:自动在使用自动生成选项时,IDE将自动识别源和资源中所有已保存的更改,然后重新生成项目.
自动生成选项默认启用.
要禁用或启用该选项,请在IDE中,依次选择Project>BuildAutomatically(项目>自动生成).
手动通过手动生成选项,您可以手动使用您所做更改手动生成项目.
要使用该选项:a.
在IDE中,通过选择Project>BuildAutomatically(项目>自动生成)禁用自动生成选项.
b.
通过选择Project>Clean(项目>清除)删除项目生成输出.
c.
通过选择Project>BuildProject(项目>自动生成)重新生成项目.
注意:在使用手动生成选项时,确保在运行或调试项目时生成输出是最新版本.
还可以通过从命令行运行web-packaging命令打包您的应用程序:web-packagingproject.
wgtproject/默认情况下,将创建应用程序包装一次.
您可以在应用程序开发过程中的任何点查看程序包内容.
查看应用程序包要查看某一应用程序包的内容,请在ProjectExplorer(项目资源管理器)视图中双击项目.
wgt文件.
在应用程序项目中提供的所有文件将显示在列表中.
对程序包内容列表中的文件的任何更改(例如删除文件或拖放文件)将不会反映在实际项目文件中.
除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
37|页TizenWeb应用程序开发-初学者图10:查看应用程序包的内容本地化应用程序您可以通过为不同区域设置创建单独的应用程序版本,为不同语言和区域性本地化您的应用程序.
本地化您的应用程序:1.
通过执行以下操作之一启动本地化向导:–在ProjectExplorer(项目资源管理器)视图中,右键单击该项目,然后选择Localization>LocalizationWizard(本地化>本地化向导).
–在菜单中,依次选择Project>Localization>LocalizationWizard(项目>本地化>本地化向导).
2.
在LocalizationWizard(本地化向导)中,从文件列表中选择要本地化的文件,然后单击Next(下一步).
已本地化的文件将灰显.
3.
在Availablelocales(可用区域设置)列表中,选择区域设置并且将它们添加到Selectedlocales(所选区域设置)列表中.
单击Next(下一步).
已支持的区域设置将灰显.
4.
通过选中所需区域设置列下的复选框,将文件与特定区域设置相关联.
已为特定区域设置本地化的文件的复选框将灰显.
5.
单击Finish(完成).
除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
38|页TizenWeb应用程序开发-初学者在ProjectExplorer(项目资源管理器)视图中,将创建一个新的locales(区域设置)文件夹,其中对于每个区域设置都包含单独的子文件夹.
子文件夹包含所选文件的副本.
使用这些副本创建文件的本地化版本.
图11:区域设置子文件夹除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
39|页TizenWeb应用程序开发-初学者5.
使用Tizen高级UI本章介绍Tizen高级UI(TAU)框架以及它所提供的基本UI元素,并且向您展示Tizen对最新CSS功能的支持是如何允许您创建类似于Flipboard的效果的.
有关使用其他方法创建应用程序UI的详细信息,请参阅使用Tizen高级UI.
Tizen高级UI简介Tizen高级UI是用于开发Web应用程序的HTML、CSS和JavaScript框架.
该框架提供向您的应用程序提供唯一Tizen风格的UI元素.
该框架还提供用于处理UI元素的事件和实用程序方法.
因为HTML已支持有意义的基元元素,例如页眉、内容、页脚和按钮,所以,TAU仅为基元元素以及其他一些功能提供主题.
开始使用简单的应用程序开始使用简单的单页Web应用程序:1.
创建Web应用程序项目并且选择TizenWebUIFramework>SinglePageApplication(TizenWebUI框架>单页应用程序)作为应用程序模板.
图12:为新的Web应用程序项目选择模板除非另有注明,否则,本文中的内容(代码示例除外)基于CreativeCommonsAttribution3.
0获得许可,而本文中包含的所有代码示例都基于BSD-3条款获得许可.
有关详细信息,请参阅内容许可.
40|页TizenWeb应用程序开发-初学者2.
为应用程序声明视口元标记:视口是Web引擎在其中显示UI的屏幕区域.
视口元数据标记指示Web引擎以某一特定的形式系数(例如特定屏幕宽度)为目标.
这允许Web引擎为当前设备和屏幕上的应用程序UI确定正确的比例系数.
例如,要为您的应用程序指定360个像素的目标宽度,请声明以下视口元标记:如果您在创建为每个设备动态调整其UI的响应性应用程序,则声明以下视口元标记:device-width值将目标宽度设置为当前设备屏幕的理想宽度.
除了width之外,还可以在视口元标记中指定其他形式系数属性,例如height、initial-scale、minimum-scale、maximum-scale和user-scalable.
但是,使用其他这些属性时要小心.
错误的值可能导致Web引擎显示不正确的UI.
3.
导入TAUCSS和JavaScript文件:.
.
.
.
.
.
该模板提供您的应用程序代码的基本框架,这样,您现在就可以开发应用程序.
添加页面要在设备屏幕上显示UI,您需要将至少一个视图添加到应用程序.
每个视图都会占满整个屏幕.
在TAU中,视图声明为页.
要将页添加到应用程序,请使用以下代码: