IDE 提供了移动网络调色板，使用户能够开发交互式网络应用程序。此调色板提供了广泛的功能，包括用于添加常见 Web 界面框架功能（如 HTML5、jQuery Mobile 和 Ionic 标记）到 html 文件的拖放小组件。它还包含诸如面板、页面、列表、按钮之类的窗口小组件，以便使用户应用程序更加用户友好和高效。
按照说明完成以下步骤
向项目添加一个新的 HTML5 jQuery Mobile 文件
HTML5 jQuery Mobile文件模板包含插入到文件 HTML 头部的 JavaScript 和 CSS 库引用。此模板还插入jQuery Mobile页面和listview窗口小组件的框架到文件的 HTML 正文。以下过程详细介绍了将模板插入到项目中的步骤。
要在现有项目中创建新的 HTML5 jQuery Mobile 文件
-
在
项目资源管理器视图中，展开[项目名称] >src>main。 -
右键单击
webapp，然后单击 。 -
如下填写有关 html 文件的字段
-
确保父文件夹字段显示为
[项目名称]/src/main/webapp。 -
在
文件名字段中，键入 HTML5 文件的名称。
-
-
单击
下一步。 -
从
模板表中，选择HTML5 jQuery Mobile 页面 (1.4)，然后单击完成。
结果：新文件列在项目资源管理器视图中的项目webapp目录下，并且文件在编辑器中打开。
向 Web 应用程序添加新页面
使用jQuery Mobile 页面窗口小组件向移动应用程序添加页面，如下所示
-
在
项目资源管理器视图中，展开 [项目名称] >src>main>webapp。 -
右键单击新建的 html 文件，然后单击 。
-
在
调色板视图中，单击jQuery Mobile选项卡，查看可用的微件并单击页面。 -
按以下方式填写有关页面字段的信息
-
在
页眉字段中，为页面页眉键入名称。 -
在
页脚字段中，为页面页脚键入名称。
-
-
单击
完成。
图 2. 添加新页面 -
单击
保存图标保存对该文件所做的更改。
结果：页面已添加到 html 文件中。Page 微件向导也会自动将 JS 和 CSS 引用添加到该文件中。
自定义 Web 应用程序的主页
使用 jQuery Mobile 调色板中的微件自定义页面。按照说明向页面添加菜单。此菜单链接到其他三个页面：主页、搜索和 添加联系人 页面。
创建菜单并将其添加到应用程序页面
向页面添加面板
-
将光标放到需要放置面板的 HTML 文件中。
-
在
调色板视图中，在jQuery Mobile选项卡中，单击面板。 -
按以下方式填写有关面板的字段
-
在
ID字段中，键入my_panel_ID。 -
取消选中
添加菜单复选框。
-
-
单击
完成。 -
保存 html 文件。
结果：与新添加的面板相对应的代码段将添加到您放置光标的 html 文件中。
向面板添加列表
-
在面板的代码段内，将光标放到新列表的所需位置。
-
在
调色板视图中，在jQuery Mobile选项卡中，单击列表视图。 -
按以下方式填写有关列表视图的字段信息
-
在
项目部分的第 1 个选项卡中的标签字段中，键入页面上第一个列表项的名称。 -
在
网址 (href)字段中，为该标签键入网址标识符。
-
-
单击
完成。 -
保存 html 文件。
结果：新列表项名称会显示在代码段中。
在页面的页眉中添加按钮以显示列表
-
将光标放到页眉中新按钮的所需位置。
-
在
调色板视图中，在jQuery Mobile选项卡中，单击按钮。 -
按如下方式填写按钮的字段
-
在
Label字段中键入Menu。 -
在
URL (href)字段中，键入#后跟随面板 ID（在本例中为#my_panel_ID）。 -
在
Icon列表中，选择一个图标。 -
在
Icon position列表中，选择一个所需的值。 -
选中
Icon only复选框。
-
-
单击
完成。 -
保存 html 文件。
结果：将下列代码添加到 html 文件的主体。
<div data-role="page" id="page-1">
<div data-role="panel" id="my_panel_ID">
<ul data-role="listview" id="listview-1">
<li><a href="1st_item.html">1st_item</a></li>
<li><a href="item2.html">Item 2</a></li>
<li><a href="item3.html">Item 3</a></li>
</ul>
</div>
<div data-role="header">
<h1>This is the Page Header</h1>
<a href="#my_panel_ID" id="button-1" class="ui-btn ui-icon-plus ui-btn-icon-notext ui-corner-all">Menu</a>
</div>
<div data-role="content">
<p>Page content goes here.</p>
</div>
<div data-role="footer">
<h4>This is the Page Footer</h4>
</div>
</div>使用 BrowserSim 运行和测试 HTML5 移动应用程序
按如下方式导航至 BrowserSim 上的界面以测试新添加的应用程序元素
-
在
Project Explore视图中，展开[项目名称] >src>main>webapp。 -
右键单击已更改的 html 文件，然后单击。
结果：出现一个模拟设备并显示应用程序。
您知道吗？
-
当
Palette视图不可见时访问jQuery Mobile调色板，单击，展开General并选择Palette。 -
单击并在
Command Groups Availability下选择BrowserSim以在工具栏中添加 BrowserSim。它在工具栏中显示为电话图标。 -
使用
Panel小组件创建菜单、可折叠栏、抽屉等。List View小组件是包含指向列表项的链接的无序列表。jQuery Mobile 应用必要的样式以使列表视图适合移动设备使用。 -
按以上列出的步骤在
Add Contacts页面中添加联系人。您可以使用Mobile Web调色板中的Text Input图标在Add Contacts页面中添加Name、Email和Phone Number字段。
