通过使用Hybrid Mobile Project向导，移动混合工具能让您快速创建以Cordova为基础的混合移动应用程序。对于在 IDE 中创建所有以Cordova为基础的新移动应用程序来说，此向导都是一个有用的起点。
正如本文所示，从这个基础开始，您可以通过以下操作自定义应用程序：使用Cordova Plug-in Discovery 向导添加一系列用于访问设备硬件的Cordova插件。您还可以在不退出 IDE 的情况下使用移动应用程序模拟器 CordovaSim 测试您的以Cordova为基础的混合移动应用程序。此 IDE 还允许您在 FeedHenry 服务器上部署您的混合移动项目。
对于混合移动工具和 CordovaSim 的新用户来说，Hybrid Mobile Project向导同样是一个理想的起点，指导您完成在生成基础 Cordova 项目之前为Cordova 应用程序开发设置 IDE 和系统所需的步骤。
|
在尝试使用 JBoss Tools 安装或创建混合移动项目之前，请确保 Android SDK 已安装并已更新。在没有工作且已更新的 Android SDK 安装的情况下创建或安装混合移动项目，可能会导致意外错误。 |
此处的说明展示了如何完成以下任务
1. 先决条件
确保满足以下先决条件才能创建混合移动项目
1.1 启用 JBoss Hybrid Mobile Tools + CordovaSim 功能
要启用 JBoss Hybrid Mobile Tools + CordovaSim 功能
-
在 JBoss Central 中，单击
软件/更新选项卡。 -
在
可用功能列表中，选中JBoss Hybrid Mobile Tools + CordovaSim复选框，然后单击安装/更新。
图 1. Hybrid Mobile Tools + CordovaSim 复选框已选中 -
按照屏幕上的说明完成安装。
安装过程中，您可能会收到有关安装未签名内容的警告。如果是这样，请检查内容的详细信息，如果您满意，请单击确定以继续安装。
安装完成后，系统将提示您重新启动 Eclipse。单击是以立即重新启动，如果需要保存未保存的任何已打开项目的更改，请单击否。请注意，在重新启动 IDE 之前，IDE 更改不生效。
2. 创建 Hybrid Mobile 项目
安装项目向导要求后，您可以重新启动 Hybrid Mobile 项目向导并按照步骤操作以完成基于模板的项目的创建。在向导中，您必须为项目和应用程序指定标识符，并选择要用于构建项目的 Cordova 引擎版本。
若要创建 Hybrid Mobile 项目，请完成以下步骤
-
在 JBoss Central 中，在
从头开始下，单击Hybrid Mobile 项目。 -
按如下方式填写有关项目和应用程序的字段
-
在
项目名称字段中，键入项目的名称。 -
在
名称字段中，键入应用程序的名称 -
在
ID字段中，键入应用程序的字母数字包名称；ID 类似于 Java 包名称，并且必须以字母字符开头，至少包含一个点。
图 3. 提供项目和应用程序信息
-
-
单击
下一步。 -
从
可用引擎表中，选择最新的 Apache Cordova 版本。如果可用引擎表为空，首先单击下载并按照说明在您的系统上安装最新的 Cordova 引擎版本。 -
单击
完成。
结果：该项目将在项目浏览器视图中创建并列出。
3. 自定义 Hybrid Mobile 项目
在构建和运行 Hybrid Mobile 应用程序之前，此处提供了有关自定义项目、添加 Cordova Device Motion 插件和修改源代码以使用它的说明。该插件可访问移动设备加速计，而添加到此项目的代码片段每秒检查一次数据，并在应用程序的前页上显示 X、Y、Z 加速度值。此插件只是可添加到 Hybrid Mobile 项目的插件目录中的一个插件。
要使用 Cordova 设备运动插件自定义混合移动项目，请完成以下步骤
-
在
项目资源管理器视图中，右键单击{项目名称}并单击安装 Cordova 插件。 -
在
查找字段中，输入motion。 -
从经过筛选的插件列表中，选择
org.apache.cordova.device-motion并单击完成。 -
在
项目资源管理器视图中，展开{项目名称} > www。 -
双击
index.html，在 JBoss Tools HTML 编辑器中将其打开。 -
如下编辑
index.html-
在闭合的
</head>标记前添加以下行<script type="text/javascript" charset="utf-8" src="cordova.js"></script> <script type="text/javascript" charset="utf-8" src="js/index.js"></script> -
使用以下行替换
<body></body>标记内的代码<div class="app"> <h1>My Cordova Accelerometer App</h1> <div id="accelerometer">Waiting for accelerometer...</div> </div>
图 4. 修改后的 index.html 文件
-
-
按 Ctrl+S（或 Cmd+S）保存
index.html文件。 -
在
项目资源管理器视图中，展开{项目名称} > www > js。 -
双击
index.js，在 IDE JavaScript 编辑器中将其打开。 -
用以下行替换
index.js中的代码// The watch id references the current `watchAcceleration` var watchID = null; // Wait for device API libraries to load document.addEventListener("deviceready", onDeviceReady, false); // device APIs are available function onDeviceReady() { console.log("deviceready"); startWatch(); } // Start watching the acceleration function startWatch() { // Update acceleration every 1 seconds var options = { frequency: 1000 }; watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options); } // Stop watching the acceleration function stopWatch() { if (watchID) { navigator.accelerometer.clearWatch(watchID); watchID = null; } } // onSuccess: Get a snapshot of the current acceleration function onSuccess(acceleration) { var element = document.getElementById('accelerometer'); element.innerHTML = 'Acceleration X: ' + acceleration.x + '<br />' + 'Acceleration Y: ' + acceleration.y + '<br />' + 'Acceleration Z: ' + acceleration.z; } // onError: Failed to get the acceleration function onError() { alert('onError!'); } -
保存
index.js文件。
结果：您的混合移动项目现在已自定义并保存。
4. 使用 CordovaSim 测试混合移动应用程序
您可以使用 CordovaSim 在 IDE 中构建并测试混合移动应用程序。CordovaSim 是专用于测试基于 Cordova 的混合移动应用程序的移动设备模拟器。通过使用 CordovaSim 控制面板，您可以为移动设备硬件输入示例数据，如此处为设备加速度计所示。
要使用 CordovaSim 运行并测试您的混合移动应用程序，请完成以下步骤
-
在
项目资源管理器视图中，右键单击{项目名称}并单击 。 -
在 CordovaSim 控制面板中，展开
加速度计并将 3D 设备表示拖动到生成设备加速度计数据中。
图 5. 生成设备加速度计数据，显示应用程序
结果：您的混合移动应用程序正在运行以进行测试。
5. 在 FeedHenry 服务器上部署混合移动项目
IDE 允许用户快速且轻松地将 IDE 中开发的移动混合（Cordova）应用程序在 FeedHenry 服务器上发布。
此处说明将演示如何完成以下任务
5.1 将 Cordova 应用程序连接到 FeedHenry 服务器
要将 Cordova 应用程序连接到 FeedHenry 服务器
-
在
项目资源管理器视图中，右键单击{项目名称}，然后 。请参考创建混合移动项目部分来创建混合移动 (Cordova) 应用程序。
-
在搜索字段中，输入
FeedHenry，然后选择新建 FeedHenry 应用程序，并单击下一步。 -
在
创建 FeedHenry 应用程序窗口中，输入以下详细信息-
确保
源项目字段显示主 Cordova 项目的名称 -
在
选择 FeedHenry 项目字段中，选择 FeedHenry 项目名称 -
在
Git 远程名称字段中，为 FeedHenry 存储库输入 Git 远程名称
-
-
单击
完成。
结果：几乎完成 窗口确认已在平台上创建项目。项目资源管理器视图中的项目结构显示feedhenry.js和fhconfig.json文件。
5.2 将 Cordova 应用程序推送到 FeedHenry 服务器
若要将应用程序推送到 FeedHenry 服务器
-
在
项目资源管理器视图中，右键单击{项目名称}并单击。 -
如果系统提示您确认连接，请单击
是。 -
在
推送分支 master窗口中，输入以下详细信息-
在
远程字段中，输入远程 Git 存储库的位置。 -
在
分支字段中，输入master。
-
-
单击
下一步。
图 7. 在“推送分支 master”窗口中添加的推送详细信息 -
在
推送确认窗口中确认详细信息，然后单击完成。 -
已推送到 git窗口确认推送操作。单击确定。 -
在
https://[your-studio-domain].feedhenry.com登录 FeedHenry。 -
单击
项目，然后单击相关应用程序。
结果：Cordova 应用程序在 FeedHenry 实例中可见。
6. 修改移动应用程序图标
使用config.xml文件中的icon标签为移动混合应用程序定义图标。如果没有指定图标，则使用 Apache Cordova 徽标作为默认图标。
若要更改应用程序图标
-
将图标保存在您项目的 <workspace>
/www/res/icon目录中。 -
在 IDE 中，在
项目资源管理器视图中，找到config.xml文件。注意：如果您使用的是 Cordova 4.0.0 或更低版本，则config.xml文件位于 {project_name} >www目录中。对于高于 4.0.0 的 Cordova 版本，config.xml文件位于上一级，在项目目录中。 -
双击
config.xml以在 config.xml 编辑器中将其打开。 -
单击
config.xml选项卡以编辑文件。 -
要定义针对所有平台的单个默认图标，请将下列代码添加到
config.xml文件中 widget 标记内的任何位置<icon src="www/res/icon[image name].png" />添加到 config.xml 文件中的图标标记
或者
-
要定义针对 Android 的像素完美图标，请将下列代码添加到
config.xml文件中<platform name="android"> <icon src="www/res/android/[image name].png" density="ldpi" /> <icon src="www/res/android/[image name].png" density="mdpi" /> <icon src="www/res/android/[image name].png"density="hdpi" /> <icon src="www/res/android/[image name].png" density="xhdpi" /> </platform> -
要定义针对 iOS 的像素完美图标，请将下列代码添加到
config.xml文件中<platform name="ios"> <icon src="www/res/ios/[image name].png" width="180" height="180" > </platform>
-
-
保存
config.xml文件。 -
右键单击应用程序，然后单击 。
-
在模拟器上，单击
Home按钮，然后单击Applications按钮以查看应用程序的修改后图标。
结果：修改了该应用程序的图标。
7. 编辑应用程序欢迎屏幕
您可以使用 config.xml 文件中 platform 标记内的 splash 标记编辑与应用程序关联的欢迎屏幕。如果使用的是 Cordova 4.0.0 或更高版本，则必须先安装新的 cordova-plugin-splashscreen 才能继续使用欢迎屏幕，然后使用以下步骤编辑欢迎屏幕。对于低于 4.0.0 版本的 Cordova，只需按照以下步骤编辑欢迎屏幕。
要更改应用程序欢迎屏幕
-
将用于欢迎屏幕的图像另存为 <<workspace>
/www/res您项目中的目录。 -
在 IDE 中，在
项目资源管理器视图中，找到config.xml文件。注意：如果您使用的是 Cordova 4.0.0 或更低版本，则config.xml文件位于 {project_name}>www目录中。对于高于 4.0.0 版本的 Cordova，config.xml文件位于项目目录中的更高级别。 -
双击
config.xml以在 config.xml 编辑器中将其打开。 -
单击
config.xml选项卡以编辑文件。 -
要定义欢迎屏幕，请将下列代码添加到
config.xml文件中 widget 标记内注意：您可以使用 Android 项目中存在的任何密度。<platform name="android"> <splash src="www/res/[image name].png" density="land-hdpi"/> <splash src="www/res/[image name].png" density="land-ldpi"/> <splash src="www/res/[image name].png" density="land-mdpi"/> <splash src="www/res/[image name].png" density="land-xhdpi"/> <splash src="www/res/[image name].png" density="port-hdpi"/> <splash src="www/res/[image name].png" density="port-ldpi"/> <splash src="www/res/[image name].png" density="port-mdpi"/> <splash src="www/res/[image name].png" density="port-xhdpi"/> </platform> <preference name="SplashScreenDelay" value="10000" /> -
保存
config.xml文件。 -
右键单击应用程序，然后单击 。
结果：在应用程序启动时，将出现已编辑的欢迎屏幕。
您知道吗？
-
您可以通过在 JBoss Central
Software/Update选项卡中找到 JBoss Hybrid Mobile Tools 和 CordovaSim 来手动启动安装，也可以将下列链接拖动到 JBoss Central：https://devstudio.jboss.com/central/install?connectors=org.jboss.tools.aerogear.hybrid -
可以在创建项目后更改与该项目关联的 Cordova 引擎。在
Project Explorer视图中，右键单击项目并单击Properties。单击Hybrid Mobile Engine并选择要使用的引擎。单击OK保存引擎更改并关闭Properties窗口。 -
您可以下载多个 Cordova 引擎到系统中，以便构建项目。可以从项目
Properties窗口中的Hybrid Mobile Engine窗格以及Hybrid Mobile Project向导中访问Download向导。 -
通过 IDE，您还可以使用已连接的 Android 设备、系统 Android 仿真器和系统 iOS 模拟器启动 Cordova 项目测试。在此进程中，该项目会以必要的原生格式构建。
-
使用 CordovaSim 控制面板，您可以生成各种设备硬件的模拟数据，包括地理位置和电池状态。CordovaSim 还管理摄像头操作，支持您上传系统图像以模拟接收摄像头数据。
-
CordovaSim 控制面板中“加速计”下方的“摇晃”按钮可以用来模拟硬件摇晃手势，并测试其对应用程序造成的影响。
