内容


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

Comments

引言

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 转换成适合每种设备的标记语言。这使得开发人员可以将主要精力放在业务逻辑和应用程序的内容上,而不是专注于适应每种标记语言的细微差别的乏味细节。

本文包含以下几部分:

示例场景

示例场景是一个基本用户身份验证流,如图 1 所示。Portlet 接受用户 ID 和密码。如果这些信息有效,则显示一条成功消息;否则,显示一条失败消息。为了简单起见,本文不在示例中包含数据库操作。

图 1. 示例场景
图 1. 示例场景
图 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 浏览器以及代理服务器:

  1. 打开 Firefox 浏览器。
  2. 选择 Tools => Options
  3. 选择窗格中的 General
  4. 单击 Connection Settings
  5. 选择 Manual proxy configuration
  6. 输入代理详细信息,并单击 OK
  7. 单击 Options 窗口中的 OK

安装 Firefox 的 User Agent Switcher

要安装 Firefox 的 User Agent Switcher,需要完成以下步骤:

  1. 打开 Firefox 浏览器。
  2. Firefox User Agent Switcher page 安装 User Agent Switcher。
  3. 关闭浏览器并重新打开它,以确保对 User Agent Switcher 的更改生效。
  4. 通过下列步骤配置 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 项目,可以遵循以下步骤:

  1. 打开 Application Developer。
  2. 选择 File => New => Other => Portlet Development => Portlet Project,如图 2 所示。
  3. 单击 Next
    图 2. 创建 Portlet 项目
    图 2. 创建 Portlet 项目
    图 2. 创建 Portlet 项目
  4. 输入项目名称,如图 3 所示。在本例中,我们将使用 MobileLogin
  5. 选择 Basic portlet 作为 Portlet 的类型,并确保选中 Configure advanced options
  6. 单击 Next
    图 3. Portlet 项目属性
    图 3. Portlet 项目属性
    图 3. Portlet 项目属性
  7. 在 J2EE Settings 页上,单击 New,并输入新的企业应用程序项目的名称,如图 4 所示。
  8. 单击 Finish
  9. 单击 J2EE Settings 页上的 Next
    图 4. 验证新的 Portlet 项目
    图 4. 验证新的 Portlet 项目
    图 4. 验证新的 Portlet 项目
  10. 单击 Features 页上的 Next
  11. 单击 Portlet Settings 页上的 Next
  12. 确保选中 Event Handling 页上的 Add action listenerAdd form sample,如图 5 所示。
  13. 单击 Next
    图 5. 定义 Portlet 事件处理
    图 5. 定义 Portlet 事件处理
    图 5. 定义 Portlet 事件处理
  14. 选中 Miscellaneous 页上的 Add xdime markup support,如图 6 所示。
  15. 单击 Finish
    图 6. 定义 Portlet 选项
    图 6. 定义 Portlet 选项
    图 6. 定义 Portlet 选项
  16. 您的项目应该如图 7 所示。
    图 7. 验证新项目
    图 7. 验证新项目

创建布局

XDIME 应用程序所针对的不同设备将具有不同的屏幕大小和屏幕分辨率。这使得在所有设备上呈现相同的内容非常困难。为了解决这一问题,XDIME 允许我们为所有目标设备保留具有共同特色的 标记。因为每种设备均由布局支持,而且所有这些布局都定义在布局策略中,所以 Mobile Portal 的 Multi-Channel Server (MCS) 组件为基于布局策略的特定设备提供正确的标记。有关 MCS 和布局的详细信息,请参阅参考资料

就本文而言,我们将创建一个供所有设备使用的简单布局。要做到这一点,需要完成以下步骤:

  1. 右键单击 Portlet 项目的 WebContent。
  2. 选择 New => Folder
  3. 输入 mcs-policies 作为文件夹名称。
  4. 单击 Finish
  5. 右键单击 mcs-policies 文件夹。
  6. 依次选择 New =>OtherMCS => Layout,如图 8 所示。
  7. 单击 Next
    图 8. 创建新布局
    图 8. 创建新布局
    图 8. 创建新布局
  8. 在 New Layout 页上输入布局名称,例如 login
  9. 单击 Next
  10. 在 MCS Settings 页上,浏览到 <MOBILE_TK_INSTALL_FOLDER>\DeviceRepository 文件夹,其中 <MOBILE_TK_INSTALL_FOLDER> 是 Mobile Toolkit 的安装文件夹。
  11. 选择 devices.mdpr 文件。该文件是 Mobile Toolkit 提供的缺省设备策略。
  12. 单击 Next
  13. 在 New Device Layout 页上,选择 Master,创建可应用于所有设备的基本布局,如图 9 所示。
  14. 单击 Finish。请注意,在设计模式中 login.mlyt 文件是打开的。
    图 9. 创建设备布局
    图 9. 创建设备布局
    图 9. 创建设备布局
  15. 通过选择 Window => Show View => Outline 来打开 Outline 视图,如图 10 所示。这将显示一些错误消息,但您可以忽略它们,因为我们将在随后的步骤中更正这些错误。
    图 10. Outline 视图
    图 10. Outline 视图
    图 10. Outline 视图
  16. 在 Outline 视图中,右键单击 Canvas, Master 下的 Empty,并选择 Add => Form
  17. 右键单击 Form,选择 Attributes,并输入表单的名称,例如 loginForm
  18. 右键单击 Form 下的 Empty,选择 Add => Grid => N by M,并为 Rows 输入 4,为 Columns 输入 1。单击 OK
  19. 右键单击 Grid 下的 Empty,并选择 Add => Pane => Pane
  20. 右键单击 Pane,选择 Attributes,然后输入窗格的名称,例如 useridPane
  21. 重复步骤 19 和 20,创建三个以上具有如下名称的窗格:
    • passwordPane
    • submitPane
    • messagePane
  22. 保存文件。布局应该如图 11 所示。
    图 11. 验证布局
    图 11. 验证布局
    图 11. 验证布局

编辑 XDIME JSP

既然已经在 Portlet 页中创建了一个用于安排字段的布局,我们就将这些字段分配到 Portlet 中它们各自的窗格。

  1. 使用源编辑器打开项目的 WebContent/mobilelogin/jsp/xdime 文件夹中的 MobileLoginPortletView.jsp。
  2. 编辑代码,如下所示:
    清单 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 和密码,并显示适当的消息。

  1. 在源代码编辑器中,打开 Java Resources 文件夹中的 MobileLoginPortlet.java
  2. 创建一个私有方法,如下所示:
    private boolean isValidUser(String userId, String password) {
      if("test".equals(userId) && "password".equals(password)) {
         return true;
      }
      return false;		
    }
  3. 在 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,可以遵循下列步骤:

  1. 为门户创建一个测试服务器,并为 Portlet 项目配置它。
  2. 启动该测试服务器。
  3. 打开 Firefox 浏览器。
  4. 通过选择 Tools => User Agent Switcher 来选择用户代理。
  5. 从 http://<HOST>:<PORT>/wps/myportal 访问门户,其中 <HOST> 是计算机的 IP 或名称,<PORT> 是配置测试服务器的端口。
  6. 图 12 显示了门户的登录窗口,其中启用了用户代理 Sanyo。
    图 12. 门户登录
    图 12. 门户登录
    图 12. 门户登录
  7. 使用有效的门户用户 ID 登录。
  8. 您将看到如图 13 所示的一些内容。
    图 13. 选择 Portlet
    图 13. 选择 Portlet
    图 13. 选择 Portlet
  9. 选择 MobileLogin portlet。如下所示:
    图 14. 移动登录
    图 14. 移动登录
    图 14. 移动登录
  10. 在 User ID 字段中输入 test,在 Password 字段中输入 password,然后单击 Submit
  11. 您将看到如图 15 所示的消息:
    图 15. 登录消息
    图 15. 登录消息
    图 15. 登录消息

    如果您使用任何其他的 ID 或密码登录,则会看到一条错误消息,如图 16 所示。
    图 16. 登录失败
    图 16. 登录失败
    图 16. 登录失败

使用 Nokia Browser Simulator 测试

要使用 Nokia Browser Simulator 测试,需要完成以下步骤:

  1. 确保应用程序的测试服务器启动并运行。
  2. 选择 Start => Programs => Nokia => Nokia WAP Gateway Simulator => WAP Gateway Simulator 4.0 - Console 启动 Nokia Gateway Simulator。
  3. 选择 Start => Programs => Nokia => Nokia => Nokia Mobile Browser Simulator => NMBS 4.0 启动 Nokia Browser Simulator。
  4. 选择 File => Load URL
  5. 输入 URL 访问门户。例如,http://<HOST>:<PORT>/wps/myportal,其中<HOST> 是计算机的 IP 或名称,<PORT> 是配置测试服务器的端口,如图 17 所示。
    图 17. Nokia 模拟器——输入门户 URL
    图 17. Nokia 模拟器——输入门户 URL
    图 17. Nokia 模拟器——输入门户 URL
  6. 单击 Load
  7. 显示门户登录窗口,如图 18 所示。
    图 18. Nokia 模拟器——门户登录
    图 18. Nokia 模拟器——门户登录
    图 18. Nokia 模拟器——门户登录

    请注意选择 Nokia Browser Simulator 左下方的 Options 和右下方的 Back。在底部居中位置,有一个用于从四个方向浏览屏幕的导航控件。导航控件中央是一个圆,您可以单击它,以将光标放在屏幕上所需的位置。有关如何使用 Nokia Browser Simulator 界面的进一步信息,请参阅 Nokia Browser Simulator 用户指南 中的“使用 NMB 界面”部分。用户指南包含在产品的下载部分。

  8. 要输入用户 ID,请单击向下箭头,直到突出显示 User ID 字段为止。当它突出显示时,单击导航控件中央的圆,将光标放在 User ID 字段中。在 User ID 字段中输入 test
  9. 在 Password 字段中输入 password,然后定位到 Log in 按钮并单击它。屏幕显示如图 19 所示:
    图 19. Nokia 模拟器——选择 Portlet
    图 19. Nokia 模拟器——选择 Portlet
    图 19. Nokia 模拟器——选择 Portlet
  10. 定位到 MobileLogin portlet 链接并单击它。屏幕显示如图 20 所示:
    图 20. Nokia 模拟器——移动登录
    图 20. Nokia 模拟器——移动登录
    图 20. Nokia 模拟器——移动登录
  11. 在 User ID 字段中输入 test,在 Password 字段中输入 password,并单击 Submit。 您将看到如图 21 所示的消息。
    图 21. Nokia 模拟器——登录消息
    图 21. Nokia 模拟器——登录消息
    图 21. Nokia 模拟器——登录消息

    如果您使用任何其他 ID 或密码登录,则应该看到一条错误消息,如图 22 所示。
    图 22. Nokia 模拟器——登录失败
    图 22. Nokia 模拟器——登录失败
    图 22. Nokia 模拟器——登录失败

结束语

通过学习本文,您已经了解了如何:

  1. 设置 Application Developer 测试环境来测试 XDIME Portlet。
  2. 创建 Portlet 项目,并通过设备布局配置它。
  3. 创建支持 XDIME 的 JSP 和 Portlet。
  4. 使用 Firefox 浏览器和 Nokia Browser Simulator 测试 XDIME Portlet。

相关主题


评论

添加或订阅评论,请先登录注册

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=WebSphere
ArticleID=93027
ArticleTitle=为 WebSphere Everyplace Mobile Portal 创建交互式 XDIME Portlet
publish-date=07272005