创建交互式 XDIME Portlet

My FAQ,最新最全的IT技术FAQ

最新100篇 | 推荐100篇 | 专题100篇 | 排行榜 | 搜索 | 在线API文档

当前位置： > IBM专区 > WebSphere > WebSphere综合

创建交互式 XDIME Portlet

作者:佚名时间:2005-09-11 19:33 出处:互连网责编:小渔

摘要：为 WebSphere Everyplace Mobile Portal 创建交互式 XDIME Portlet

级别: 初级

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 浏览器以及自定义用户代理：
1. 打开 Firefox 浏览器。
2. 从 Firefox 浏览器中选择 Tools => User Agent Switcher => Options => Options。
3. 选择左窗格中的 User Agents。
4. 单击 Add。
5. 输入以下值：
  - Description：Sanyo
  - User Agent：Mozilla/4.0 (MobilePhone SCP-8100/US) NetFront/3.0
6. 单击 OK。
7. 重复步骤 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。