级别: 初级
Mohan K Jadhav , 软件工程师, IBM
2005 年 8 月 29 日
本文将向您展示如何使用 IBM WebSphere Everyplace Mobile Portal 和 WebSphere Studio Application Developer 5.x 为移动和无线设备开发 Portlet，涉及从在 Application Developer 中设置测试环境到创建和测试支持 XDIME 的交互式移动 Portlet 的整个过程。
引言
Mobile Portal 扩展了 IBM WebSphere Portal Server（以下称为 Portal Server）软件技术，以满足移动和无线服务提供者的需要。有了 Mobile Portal，您就可以开发与特定设备无关的内容。这允许您一次性创建内容和服务，并将其呈现在不同设备上而无需进行任何其他改编。
XDIME 是一种抽象的、与设备无关的标记语言，可处理和转换成各种标记语言，例如 WML 1.1、WML 1.3、XTHML Basic、XHTML-MP、HTML 3.2 和 HTML 4.0 等等。使用 XDIME，应用程序可以生成一个支持大量设备的标记。如果设备不支持同一种标记语言，则可以将 XDIME 转换成适合每种设备的标记语言。这使得开发人员可以将主要精力放在业务逻辑和应用程序的内容上，而不是专注于适应每种标记语言的细微差别的乏味细节。
本文包含以下几部分：
- 示例场景描述我们将在本文中使用的应用程序。
- 先决条件列出学习本教程所需的软件。
- 设置环境讨论如何设置测试 XDIME Portlet 的环境。
- 创建 XDIME 资源描述如何创建 XDIME Portlet。
- 测试应用程序描述使用 Firefox 浏览器和 Nokia™ Mobile Browser Simulator 测试示例应用程序的步骤。
示例场景
示例场景是一个基本用户身份验证流，如图 1 所示。Portlet 接受用户 ID 和密码。如果这些信息有效，则显示一条成功消息；否则，显示一条失败消息。为了简单起见，本文不在示例中包含数据库操作。
图 1. 示例场景
先决条件
- WebSphere Portal Server Version 5.0.2.1
- WebSphere Application Server Version 5.0.1
- WebSphere Studio Application Developer Version 5.1.2 (Application Developer)
- Portal Toolkit Version 5.0.2.2 (Portal Toolkit)
- Mobile Portal Toolkit Version 5.0.1(Mobile Toolkit)
- Mozilla Firefox Version 1.0
- User Agent Switcher for Mozilla Firefox Version 1.0.6
- Nokia Mobile Browser Simulator Version 4.0
- Nokia WAP Gateway Simulator Version 4.0
设置环境
首先，我们需要设置开发和测试 XDIME Portlet 的环境。本文假定已经在您的计算机上安装和配置了下列产品。
- Portal Server
- Application Server
- Application Developer
- Portal Toolkit
除了上面列出的软件之外，您还需要有下列产品：
- 用于开发 XDIME Portlet 的 Mobile Toolkit
- Firefox 浏览器的 User Agent Switcher 附件
- 用于测试 XDIME Portlet 的 Nokia Browser Simulator 和 Nokia Gateway Simulator。另外，您还可以使用任何设备仿真器（例如用于 Pocket PC 或 Palm PC 的仿真器）来测试 XDIME Portlet。
下面几部分描述了如何安装和配置以上各项。
安装 Mobile Toolkit
您可以从 Everyplace Toolkit for WebSphere Studio product page 下载 Mobile Toolkit。安装说明作为下载的一部分包括在内。
Mobile Toolkit 帮助您为无线和移动客户机编写 Portlet 应用程序。您可以使用工具包来开发与设备无关的应用程序，这些应用程序使用 XDIME，并支持使用像 WML、XHTML 和 HTML 这样的标记语言的设备。
安装和配置 Firefox 浏览器
从 Mozilla Firefox home page 下载并安装 Firefox 浏览器。通过下列步骤配置 Firefox 浏览器以及代理服务器：
- 打开 Firefox 浏览器。
- 选择 Tools => Options。
- 选择窗格中的 General。
- 单击 Connection Settings。
- 选择 Manual proxy configuration。
- 输入代理详细信息，并单击 OK。
- 单击 Options 窗口中的 OK。
安装 Firefox 的 User Agent Switcher
要安装 Firefox 的 User Agent Switcher，需要完成以下步骤：
- 打开 Firefox 浏览器。
- 从 Firefox User Agent Switcher page 安装 User Agent Switcher。
- 关闭浏览器并重新打开它，以确保对 User Agent Switcher 的更改生效。
- 通过下列步骤配置 Firefox 浏览器以及自定义用户代理：
- 打开 Firefox 浏览器。
- 从 Firefox 浏览器中选择 Tools => User Agent Switcher => Options => Options。
- 选择左窗格中的 User Agents。
- 单击 Add。
- 输入以下值：
- Description：Sanyo
- User Agent：Mozilla/4.0 (MobilePhone SCP-8100/US) NetFront/3.0
- 单击 OK。
- 重复步骤 4 到步骤 6 来添加以下用户代理：
- Description：Smartphone
- User Agent：Mozilla/2.0 (compatible; MSIE 3.02; Windows CE; Smartphone;)
和
- Description：Pocket PC
- User Agent：Mozilla/2.0 (compatible; MSIE 3.02; Windows CE; PPC; 240x320)
安装和配置 Nokia 移动浏览器模拟器
Nokia 浏览器模拟器是一个移动 Internet 浏览器 SDK，用于从 Internet 或本地文件系统浏览移动 Internet 内容（WML、XHTML 和 Push 消息）。要使用 Nokia Browser Simulator，您需要安装和配置 Nokia WAP Gateway Simulator，它是一个基于多用户 Nokia Activ Server 的单用户 WAP Gateway。借助 Nokia Gateway Simulator，您可以通过使用 WAP 协议（例如 Nokia Browser Simulator 4.0）进行通信的程序访问移动 Internet。有关如何下载 Nokia Browser Simulator 和 Nokia Gateway Simulator 的信息，请参阅参考资料。
创建 XDIME 资源
既然我们已经设置了开发和测试 Portlet 的环境，我们实际需要的就是开发诸如 Portlet、JSP 和其他策略文件这样的 XDIME 资源。
创建 Portlet 项目
要创建 Portlet 项目，可以遵循以下步骤：
- 打开 Application Developer。
- 选择 File => New => Other => Portlet Development => Portlet Project，如图 2 所示。
- 单击 Next。
图 2. 创建 Portlet 项目
- 输入项目名称，如图 3 所示。在本例中，我们将使用
MobileLogin。
- 选择 Basic portlet 作为 Portlet 的类型，并确保选中 Configure advanced options。
- 单击 Next。
图 3. Portlet 项目属性
- 在 J2EE Settings 页上，单击 New，并输入新的企业应用程序项目的名称，如图 4 所示。
- 单击 Finish。
- 单击 J2EE Settings 页上的 Next。
图 4. 验证新的 Portlet 项目
- 单击 Features 页上的 Next。
- 单击 Portlet Settings 页上的 Next。
- 确保选中 Event Handling 页上的 Add action listener 和 Add form sample，如图 5 所示。
- 单击 Next。
图 5. 定义 Portlet 事件处理
- 选中 Miscellaneous 页上的 Add xdime markup support，如图 6 所示。
- 单击 Finish。
图 6. 定义 Portlet 选项
- 您的项目应该如图 7 所示。
图 7. 验证新项目
创建布局
XDIME 应用程序所针对的不同设备将具有不同的屏幕大小和屏幕分辨率。这使得在所有设备上呈现相同的内容非常困难。为了解决这一问题，XDIME 允许我们为所有目标设备保留具有共同特色的 标记。因为每种设备均由布局支持，而且所有这些布局都定义在布局策略中，所以 Mobile Portal 的 Multi-Channel Server (MCS) 组件为基于布局策略的特定设备提供正确的标记。有关 MCS 和布局的详细信息，请参阅参考资料。
就本文而言，我们将创建一个供所有设备使用的简单布局。要做到这一点，需要完成以下步骤：
- 右键单击 Portlet 项目的 WebContent。
- 选择 New => Folder。
- 输入
mcs-policies 作为文件夹名称。
- 单击 Finish。
- 右键单击 mcs-policies 文件夹。
- 依次选择 New =>Other 和 MCS => Layout，如图 8 所示。
- 单击 Next。
图 8. 创建新布局
- 在 New Layout 页上输入布局名称，例如
login。
- 单击 Next。
- 在 MCS Settings 页上，浏览到 <MOBILE_TK_INSTALL_FOLDER>\DeviceRepository 文件夹，其中 <MOBILE_TK_INSTALL_FOLDER> 是 Mobile Toolkit 的安装文件夹。
- 选择 devices.mdpr 文件。该文件是 Mobile Toolkit 提供的缺省设备策略。
- 单击 Next。
- 在 New Device Layout 页上，选择 Master，创建可应用于所有设备的基本布局，如图 9 所示。
- 单击 Finish。请注意，在设计模式中 login.mlyt 文件是打开的。
图 9. 创建设备布局
- 通过选择 Window => Show View => Outline 来打开 Outline 视图，如图 10 所示。这将显示一些错误消息，但您可以忽略它们，因为我们将在随后的步骤中更正这些错误。
图 10. Outline 视图
- 在 Outline 视图中，右键单击 Canvas, Master 下的 Empty，并选择 Add => Form。
- 右键单击 Form，选择 Attributes，并输入表单的名称，例如
loginForm。
- 右键单击 Form 下的 Empty，选择 Add => Grid => N by M，并为 Rows 输入
4，为 Columns 输入 1。单击 OK。
- 右键单击 Grid 下的 Empty，并选择 Add => Pane => Pane。
- 右键单击 Pane，选择 Attributes，然后输入窗格的名称，例如
useridPane。
- 重复步骤 19 和 20，创建三个以上具有如下名称的窗格：
- passwordPane
- submitPane
- messagePane
- 保存文件。布局应该如图 11 所示。
图 11. 验证布局
编辑 XDIME JSP
既然已经在 Portlet 页中创建了一个用于安排字段的布局，我们就将这些字段分配到 Portlet 中它们各自的窗格。
- 使用源编辑器打开项目的 WebContent/mobilelogin/jsp/xdime 文件夹中的 MobileLoginPortletView.jsp。
- 编辑代码，如下所示：
清单 1. 编辑 JSP
<!-- keep JSP page compiler from generating code that accesses the session --!>
<!@ page session="false" contentType="text/xml; charset=ISO-8859-1" !>
<!-- load WPS portlet tag library and initialize objects -->
<!@ taglib uri="/WEB-INF/tld/portlet.tld" prefix="portletAPI" !>
<portletAPI:init />
<!-- Create a layout policy for your portlet.
Specify the layout name as the value
for the layoutName attribute of the canvas element below. --!>
<canvas layoutName="/login.mlyt" type="portlet">
<xfform
name="loginForm"
action="<portletAPI:createReturnURI><portletAPI:URIAction name='Submit'/>
</portletAPI:createReturnURI>"
method="post">
<xftextinput name="userId" type="text" caption="User ID : "
captionPane="useridPane"
entryPane="useridPane"
initial=""/><br/>
<xftextinput name="password" type="password" caption="Password : "
captionPane="passwordPane"
entryPane="passwordPane"
initial=""/><br/>
<xfaction name="Submit" type="submit" caption="Submit"
captionPane="submitPane"
entryPane="submitPane"/><br/>
<pane name="messagePane">
<!
String message = (String)request.getSession().getAttribute("MESSAGE");
if(message != null) {
!>
<b><!=message!></b>
<! } !>
</pane>
</xfform>
</canvas>
|
请注意，我们在上述代码中使用了下列 XDIME 元素：
表 1. XDIME 元素
| XDIME 元素 | 等价 HTML 元素 | 说明 |
| <xfform> |
<form> |
页面中的表单 |
| <xftextinput type="text"t> |
<input type="ttext"t> |
文本字段 |
| <br/> |
<br> |
换行符 |
| <xfaction> |
<input type="submit"> |
动作按钮 |
有关 XDIME 元素的详细信息，请参阅参考资料。
您还可以看到，不同元素分配到 login 布局中的不同窗格，上述代码的 <canvas> 标记中引用了该布局。
编辑 Portlet
既然已经创建了 JSP，现在就让我们在 Portlet 中编写代码以验证用户 ID 和密码，并显示适当的消息。
- 在源代码编辑器中，打开 Java Resources 文件夹中的 MobileLoginPortlet.java。
- 创建一个私有方法，如下所示：
private boolean isValidUser(String userId, String password) {
if("test".equals(userId) && "password".equals(password)) {
return true;
}
return false;
}
|
- 在 actionPerformed() 方法中添加下列代码行：
if("Submit".equals(actionString.trim())){
try {
String userId = request.getParameter(".userId".);
String password = request.getParameter(".password".);
String message = null;
if(isValidUser(userId,password)) {
message = "Hello, ". + userId + "., Welcome!".;
} else {
message = ".Sorry, Invalid UserId/Password".;
}
request.getSession().setAttribute("MESSAGE",message);
} catch (Exception e) {
e.printStackTrace();
}
}
|
在本文中，只有当用户 ID 为 test 且密码为 password 时，isValidUser() 方法才返回 true。在实际情况中，可以根据数据储存库（如数据库或 LDAP 目录）进行验证。
测试应用程序
既然已经完成了所需的配置和开发，现在就让我们测试应用程序。将使用 Firefox 浏览器和 Nokia Browser Simulator 来测试应用程序。
使用 Firefox 测试
我们将使用已启用合适 User Agent 的 Firefox 浏览器运行应用程序。要在浏览器中安装 User Agent，请参阅 Install the Agent Switcher for Firefox。
要使用 Firefox 测试 XDIME Portlet，可以遵循下列步骤：
- 为门户创建一个测试服务器，并为 Portlet 项目配置它。
- 启动该测试服务器。
- 打开 Firefox 浏览器。
- 通过选择 Tools => User Agent Switcher 来选择用户代理。
- 从 http://<HOST>:<PORT>/wps/myportal 访问门户，其中 <HOST> 是计算机的 IP 或名称，<PORT> 是配置测试服务器的端口。
- 图 12 显示了门户的登录窗口，其中启用了用户代理 Sanyo。
图 12. 门户登录
- 使用有效的门户用户 ID 登录。
- 您将看到如图 13 所示的一些内容。
图 13. 选择 Portlet
- 选择 MobileLogin portlet。如下所示：
图 14. 移动登录
- 在 User ID 字段中输入
test，在 Password 字段中输入 password，然后单击 Submit。
- 您将看到如图 15 所示的消息：
图 15. 登录消息
如果您使用任何其他的 ID 或密码登录，则会看到一条错误消息，如图 16 所示。
图 16. 登录失败
使用 Nokia Browser Simulator 测试
要使用 Nokia Browser Simulator 测试，需要完成以下步骤：
- 确保应用程序的测试服务器启动并运行。
- 选择 Start => Programs => Nokia => Nokia WAP Gateway Simulator => WAP Gateway Simulator 4.0 - Console 启动 Nokia Gateway Simulator。
- 选择 Start => Programs => Nokia => Nokia => Nokia Mobile Browser Simulator => NMBS 4.0 启动 Nokia Browser Simulator。
- 选择 File => Load URL。
- 输入 URL 访问门户。例如，http://<HOST>:<PORT>/wps/myportal，其中<HOST> 是计算机的 IP 或名称，<PORT> 是配置测试服务器的端口，如图 17 所示。
图 17. Nokia 模拟器——输入门户 URL
- 单击 Load。
- 显示门户登录窗口，如图 18 所示。
图 18. Nokia 模拟器——门户登录
请注意选择 Nokia Browser Simulator 左下方的 Options 和右下方的 Back。在底部居中位置，有一个用于从四个方向浏览屏幕的导航控件。导航控件中央是一个圆，您可以单击它，以将光标放在屏幕上所需的位置。有关如何使用 Nokia Browser Simulator 界面的进一步信息，请参阅 Nokia Browser Simulator 用户指南 中的“使用 NMB 界面”部分。用户指南包含在产品的下载部分。
- 要输入用户 ID，请单击向下箭头，直到突出显示 User ID 字段为止。当它突出显示时，单击导航控件中央的圆，将光标放在 User ID 字段中。在 User ID 字段中输入
test。
- 在 Password 字段中输入
password，然后定位到 Log in 按钮并单击它。屏幕显示如图 19 所示：
图 19. Nokia 模拟器——选择 Portlet
- 定位到 MobileLogin portlet 链接并单击它。屏幕显示如图 20 所示：
图 20. Nokia 模拟器——移动登录
- 在 User ID 字段中输入
test，在 Password 字段中输入 password，并单击 Submit。 您将看到如图 21 所示的消息。
图 21. Nokia 模拟器——登录消息
如果您使用任何其他 ID 或密码登录，则应该看到一条错误消息，如图 22 所示。
图 22. Nokia 模拟器——登录失败
 |
结束语
通过学习本文，您已经了解了如何：
- 设置 Application Developer 测试环境来测试 XDIME Portlet。
- 创建 Portlet 项目，并通过设备布局配置它。
- 创建支持 XDIME 的 JSP 和 Portlet。
- 使用 Firefox 浏览器和 Nokia Browser Simulator 测试 XDIME Portlet。
|
