我们将演示所需的三个简单步骤，用它们来移动化包括在WebLogic Platform 8.1.2中的“TutorialsApp”的“FirstPageFlow”组件。

准备工作

• 确保WebLogic Platform 8.1.2及其示例都已经安装
• 安装并配置所选择的移动设备模拟器
• 在示例Workshop Domain中安装MobileAware Device Database
  1. Tools->WebLogic Server->Start WebLogic Server
  2. Tools->Mobility->Install MobileAware Device Database

启动Multi-Channel
1. 打开Platform TutorialsApp

• 在从Windows Explorer中双击<bea_dir>\weblogic81\samples\platform\ TutorialsApp\TutorialsApp.work
• 或者，从Workshop中使用“File->Open->Application...”浏览到该文件并点击“Open”

2. 启动Multi-Channel

• 右击FirstPageFlow
• 从下拉菜单中选择“Enable multi-channel”

步骤1：将页面移动化
　　打开FirstPageFlow\login_pages\login.jsp
从Workshop的Palette（通常在底部靠左处）的Mobility选项卡中把“Mobilize Page”图标拖到Design View中。

　　在页面顶部中会出现一行消息：“This page contains mobility markup”(“本页已包含移动标记”)

　　点击此消息一次，然后您就会看到一个标签<mm:page>被插入到这个JSP文件中。在设计视图框底部会显示出来。

步骤2：编组
　　接着，我们将对JSP页面进行标记，以选中并封装需要被显示在小屏幕设备上的重要信息。这个动作成为“编组”。这里，我们将介绍的重点放到页面上的用户登录表单。
　　选择设计视图中的form元素。在form中点击，接着在设计视图底部的文档层次结构路径中点击<form>元素。这是最简单的方法。<form>元素会变成粗体并且在设计视图中会出现一个选择框。

　　现在，把“Group”图标（不是“Group Reference”）从Palette拖到页面中。

　　组标签是一组“wrapping”移动标签中的一个。
　　当在设计视图中选择了一个元素，您可以选择是用标签包裹此元素或者它的内容。在本例中，我们用<mm:group>标签包裹我们刚选择的form元素。所以我们选中对话框中的对应单选按钮。
　　您可以为这个组添加一个合适的ID和Title。例如，我们都填写“Login”，然后点击OK。

步骤3：给“菜单驱动”设备添加布局
　　第三步是为“菜单驱动”设备添加一个布局。
　　把“Layout”图标从面板拖到页面中。
　　注意：“菜单驱动”设备是小屏幕设备且通常只有有限的输入功能。对这类设备，由基于菜单的层次导航来定位信息比传统的PC浏览器上的平面布局要更合适。

　　此时将出现一个对话框，使您可为布局文件选择一个名字，并且指定该布局所对应的设备类。这里，缺省值对两个选项都合适。

　　点击OK将执行两个操作。首先，在JSP页面中插入一个<mm:layout>标签来指定“IsMenuDriven”类的设备要使用哪个布局文件。然后，创建这个布局文件，其中包含了对页面中所有组的引用，接着打开这个新文件。在本例中只有一个组，所以所生成的布局结构中也只含有一个引用。

完成
　　注册页面现在可以被转移到移动设备上了。

• 点击Control-S来保存所有的文件
• 打开Tutorial的页面流控制器FirstPageFlow\investigateJPF\InvestigateJPFController.jpf
• 在Workshop的测试浏览器中观看此页面
• 启动您的模拟器

　　只需点击移动性工具条中的一个模拟器启动按钮，您就能在模拟器中看到您的页面了。

　　您的移动页面看起来可能跟下面的相似。这取决于所使用的模拟器。

改进用户体验
　　缺省情况下，在菜单驱动设备中首先显示的是一列链接，即布局中的组标题。选择组标题，就可以显示组的完整内容。
　　在我们的例子中，因为只有一个组，所以第一屏只含有一个称为“Login”的链接。您会想到让组的内容在第一屏全屏显示，从而使用户更方便地使用。
　　通过改变组的特性，这很容易办到。

• 返回到您的布局文件
• 点击名为“Group 'Login'”的蓝色框
• 在特性编辑器中，使用下拉列表把“display”的值从“headings”变成“all”
• 按Control-S来再次保存所有的文件

　　现在，用户就能在第一页中看到注册表而不是一个链接了。

继续
　　用同样的三个步骤，把应用程序的第二个页面也移动化。(FirstPageFlow\investigateJPF\request.jsp).

1. 页面移动化：

• 把“Mobilize Page”图标从Mobility Palette拖到页面中

2. 编组：

• 使用设计视图和层次结构路径选择<netui:form:>元素
• 拖入“Group”图标
• 选择“Wrap selected <netui:form>”
• 输入ID和Title（例如，都输入"Request"）

3. 创建布局：

• 从Mobility面板中拖动“Layout”图标
• 点击OK接受缺省设置
• 点击Request组并用特性编辑器把“display”设置为“all”

　　按control-S来保存文件，并在您的测试浏览器和模拟器中观看它们。确保每次您启动时都返回到JPF文件而不是直接打开JSP。

更进一步
　　对FirstPageFlow\investigateJPF\response.jsp.重复上面的步骤
　　试着把图表和“Request another credit report”分别编组。注意这两个组在布局文件中是如何显示的，另外，它们可以分别设置为显示“headings”或“all”。
　　把<table-model>标签拖到表中，观察它是如何设定HTML移动设备排列表的格式的。

结束语
　　仅通过三个简单的拖放步骤，您就能把一个应用程序转移到移动设备上了。这是通过向已有应用程序添加标记来实现的。这样就不必删除或重放任何已经存在的HTML或者NETUI标签。
　　您已经看到用编组把页面中的重要信息转移到移动设备上是多么简单了。您还能用移动性标签特性来为那些内容操纵布局和导航。MobileAware的Mobile Interaction Server可以根据需要来转换内容，以便转移到所有的移动设备上。