JBoss 项目
Red Hat
首页 / 文档 / 操作指南 / 创建您的第一个移动 Web 应用程序

操作指南

创建您的第一个移动 Web 应用程序

移动 Web 工具提供了一个 HTML5 项目 向导，允许您创建针对移动设备优化的 Web 应用程序。HTML5 项目 向导是您在 IDE 中创建所有新的 HTML5 Web 应用程序的实用起点。该向导将从 Maven 原型生成一个准备部署的 HTML5 移动应用程序示例，并包含 REST 资源。

如本文所述，您可以使用 JBoss Tools HTML 编辑器 自定义应用程序，使用移动浏览器模拟器 BrowserSim 部署和查看应用程序，并使用 LiveReload 在 IDE 中修改和保存应用程序源代码时刷新 BrowserSim。

以下说明演示了如何完成以下任务

  1. 创建 HTML5 项目

  2. 构建和部署应用程序

  3. 使用 BrowserSim 查看应用程序

  4. 为 BrowserSim 启用 LiveReload

  5. 更改应用程序

本文将引导您完成这些配置要求中的每一个，必须按照给定的顺序完成。

先决条件：为可用服务器配置 IDE

本文中的说明向您展示了如何将 HTML5 Web 应用程序部署到服务器。必须为要部署应用程序的任何服务器配置 IDE，包括应用程序服务器的位置和类型以及任何自定义配置或管理设置。您可以在部署应用程序时完成此配置，但本文假设您已在之前完成了配置。

有关配置本地运行时服务器并将应用程序部署到它的信息，请参阅 将应用程序部署到本地服务器。

1. 创建 HTML5 项目

HTML5 项目 向导将基于 Maven 原型生成一个示例项目，以及您提供的项目和应用程序标识符。Maven 原型版本在向导第一页的 描述 字段中指示，您可以通过在向导中选择企业或非企业目标运行时来更改版本，从而更改项目的样式和依赖项。

要创建 HTML5 项目，请完成以下步骤

  1. 在 JBoss Central 中，在 从头开始 下，单击 HTML5 项目。

  2. 从 目标运行时 列表中选择一个 IDE 就绪服务器，然后单击 下一步。

  3. 完成有关 HTML5 项目的字段，如下所示

    • 在 项目名称 字段中，输入项目的名称。

    • 在 包 字段中，输入项目的字母数字包。

  4. 单击 完成。

  5. 当出现 'HTML5 项目' 项目已准备就绪 提示时，单击 完成。

该项目将被生成，并在 项目资源管理器 视图中列出。

2. 构建和部署应用程序

生成 HTML5 项目后，可以立即将其构建并部署到应用程序服务器。

要构建和部署应用程序，请完成以下步骤

  1. 在 项目资源管理器 视图中，右键单击 {项目名称} 并单击 以...方式运行  在服务器上运行。

  2. 确保选择了 选择现有服务器。

  3. 从服务器表中展开 localhost，选择要部署应用程序的服务器，然后单击 完成。

    Select the runtime server to run the application.
    图 1. 选择运行应用程序的服务器

控制台 视图将显示服务器启动和部署应用程序的输出。部署完成后，IDE 默认 Web 浏览器将打开并显示已部署的 Web 应用程序。

Select the runtime server to run the application.
图 2. 在浏览器中查看企业 HTML5 Web 应用程序
Select the runtime server to run the application.
图 3. 在浏览器中查看非企业 HTML5 Web 应用程序

3. 使用 BrowserSim 查看应用程序

HTML5 Web 应用程序的界面针对移动设备进行了优化。您可以使用 BrowserSim 查看和测试这些网页，就像它们在移动设备上一样。此移动设备 Web 浏览器模拟器提供了针对不同移动设备的皮肤，可以轻松地测试和调试移动设备的 Web 应用程序。

要使用 BrowserSim 查看应用程序，请完成以下步骤

  1. 确保正在使用 JBoss 透视图。要打开 JBoss 透视图，请单击 窗口  打开透视图  其他 并双击 JBoss。

  2. 在 服务器 视图中，展开服务器适配器以列出应用程序。

  3. 右键单击 {应用程序名称} 并单击 显示在  BrowserSim。

HTML5 Web Application Viewed with BrowserSim.
图 4. 使用 BrowserSim 查看 HTML5 Web 应用程序

4. 为 BrowserSim 启用 LiveReload

移动 Web 工具支持 LiveReload 协议，该协议可在应用程序源代码被修改并保存时自动重新加载已启用的浏览器中的网页。LiveReload 可以为您的系统浏览器启用，并且如本文所述，也可以为 BrowserSim 启用。这将提供交互式的 Web 开发体验。

要为 BrowserSim 启用 LiveReload，请完成以下步骤

  1. 关闭所有打开的 BrowserSim 模拟设备。

  2. 在 服务器 视图中，右键单击现有服务器以显示上下文菜单，然后单击 新建  服务器。

  3. 从列表中展开 基本，选择 LiveReload 服务器 并单击 完成。

  4. 在 服务器 视图中，右键单击 LiveReload 服务器 并单击 启动。

  5. 在 服务器 视图中，右键单击 {应用程序名称} 并单击 显示在  BrowserSim。

LiveReload 将自动为该 BrowserSim 模拟设备以及 LiveReload 服务器运行期间打开的所有后续设备启用。

5. 更改应用程序

在为 BrowserSim 启用 LiveReload 后，您可以更改应用程序源代码，BrowserSim 会在保存更改时自动重新加载应用程序。这里通过对项目 index.html 文件进行简单更改来演示这一点，具体来说是更改应用程序标题横幅中的文本。

要更改您的应用程序，请完成以下步骤

  1. 在 项目资源管理器 视图中，展开 {项目名称} > src > main > webapp。

  2. 双击 index.html 以使用 JBoss Tools HTML 编辑器 打开它进行编辑。

  3. 在 <body> 标记内找到以下代码行

    <h3>HTML5 Quickstart</h3>

    并将其替换为

    <h3>My Quickstart</h3>

  4. 通过按 Ctrl+S（或 Cmd+S）保存文件。

此代码更改将修改主应用程序页面上显示的标题。请注意，当您保存更改后的文件时，BrowserSim 会自动重新加载网页，并且应用程序修改会立即显示。

您知道吗？

  • 您也可以通过在 JBoss 透视图中单击 文件  新建  HTML5 项目 来启动 HTML5 项目 向导。

  • 您可以通过右键单击 项目资源管理器 视图中的 .html 文件并单击 使用...打开  BrowserSim 来使用 BrowserSim 测试未部署的 .html 文件。

  • 要将 BrowserSim 设置为 IDE 默认 Web 浏览器，请在 JBoss 透视图中单击 窗口  Web 浏览器  BrowserSim 或单击 窗口  首选项  常规  Web 浏览器 并从 外部 Web 浏览器 列表中选择 BrowserSim。

  • 您也可以为已打开的 BrowserSim 模拟设备启用 LiveReload。启动 LiveReload 服务器后，右键单击 BrowserSim 模拟设备框架并单击 启用 LiveReload。

返回顶部