http://dev2dev.bea.com.cn/techdoc/wlportal/200408229.html
欢迎使用本教程,它是系列教程(共有6篇)中的第二篇,本教程的目的是示范如何用MobileAware Mobility Extension 来轻松地对您的WebLogic Workshop 应用程序进行移动化改造。
WebLogic Platform 8.1 的MobileAware Mobility Solutions (此处下载) 含有一个基于移动框架(mobility framework)所创建的多通道门户(Multi-Channel Portal)示例。本文描述此移动框架的主要组件以及与 BEA WebLogic Portal 8.1 的交互。
本文中的屏幕截图均来自该示例(参见下面的PC浏览器视图):
在本文的后面,我们将了解移动框架如何自动让门户适应于手持设备的外观。
概述
MobileAware 扩展了WebLogic Portal,开发人员利用它可以无缝地创建可运行在手持设备以及个人电脑上的移动应用程序。MobileAware的移动技术和WebLogic Portal 8.1的移动框架可确保在诸如智能电话、PDA等等设备上的最佳用户体验。
单击此处下载WebLogic Platform 8.1的MobileAware Mobility Solutions。门户一般都生活在二维的PC浏览器世界,那里有相对大的屏幕面积,可以同时显示复杂的布局和丰富的内容。这种格式的内容通常不适合直接传递给手持设备,如PDA和智能电话。多通道门户可以对内容进行自动重建,如果需要,还可以提供新的导航机制,目的是为了适应发出请求的设备。
多通道门户最主要的原则之一是portlet开发人员只需将全部精力用于门户内容(即portlet)的开发上,而无需去处理向手持设备传递以及在手持设备上导航等相关的问题。这是通过将处理这些问题的逻辑置于移动框架中来实现的。
移动框架
多通道门户利用MobileAware 的技术-移动交互服务器(Mobile Interaction Server,MIS)。该技术的主要核心包括:
一个 servlet 过滤器,负责处理JSP/HTML/XHTML 内容,并针对请求该内容的设备,将其转换成适当的格式和标记语言。
扩展到XHTML标记,并匹配JSP标签库(taglib)中的标签,目的是对此转换进行著者控制(author control)。
对输入请求(incoming requests)的设备进行自动识别。
一个设备信息和规范的范围广泛的数据库。
基于请求的设备,允许动态内容(如JSP、门户等)检索信息并按照信息执行相关动作的API。
该移动框架正是建立在这些核心技术之上,并增加了以下组件:
"菜单驱动"指的是那些具有小屏幕和/或输入功能有限的设备/浏览器,使层次菜单(hierachical menu)成为最合适的导航方法。
1. 移动骨架(Mobility skeleton) – 每一个门户的骨架都扩展了“menudriven” 和 “pda” 子目录。当门户分别从一台菜单驱动的设备(如智能电话)或一台PDA(如Palm、PocketPC)接收到请求时,这些“子骨架”被激活。
2. 类似地,门户中的每个皮肤(skin)都有“menudriven” 和 “pda”子皮肤(sub-skin)。
3. 第二个 servlet 过滤器-门户移动过滤器(Portal Mobility Filter)使用移动交互服务器 API 标识设备类别,并且通过“客户分类(client classifications)”机制,将BEA Portal 指向合适的骨架和皮肤。
4. 一个控件,它对移动框架 (骨架和皮肤)所使用的一些逻辑进行了封装。
5. 移动设备的资源如图像和CSS文件用短路径名保存在一个目录中,目的是向内容大小有限制的设备传递内容时降低URL的长度开销。
这些组件可重用于创建您自己的多通道门户或者对现有门户进行移动化改造。
门户移动过滤器和客户分类
门户移动过滤器负责确定请求设备的类型。当一个请求发出后,移动交互服务器将自动识别发出请求的设备并从MobileAware设备数据库中准备好相应的信息。然后门户移动过滤器使用MobileAware的表达式语言查询该信息以确定设备类型。它所使用的表达式以及对应的设备类型可以在WEB-INF/classes/everix.headers文件中进行配置:
User-Agent:Everix-Identified-PDA:IsPDA User-Agent:Everix-Identified-PC:IsFullBrowser User-Agent:Everix-Identified-WAP1:DeliveringWML User-Agent:Everix-Identified-WAP2:DeliveringXHTMLMP |
可以配置门户移动过滤器以在输入请求上设置任何的HTTP header。WebLogic Portal的客户分类机制特别依赖于User-Agent header,所以我们使用以上的(默认的)配置来修改该header。“Everix-Identified-PDA”、“Everix-Identified-PC”、 “Everix-Identified-WAP1” 或 “Everix-Identified-WAP2” 等字符串被附加到输入 User-Agent header中。
从这点来看,WebLogic Portal的 客户分类 机制接管了过滤,同时这些字符串与WEB-INF/client-classifications文件中的常规表达式所匹配。
<?xml version="1.0" encoding="UTF-8"?> <client-classifications is-complete="true" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.bea.com/servers/p13n/xsd/client/classifications/1.0.0 client-classifications-1_0_0.xsd" xmlns="http://www.bea.com/servers/p13n/xsd/client/classifications/1.0.0"> <classifications> <classification name="pda" description="Everix Identified PDA Device"> <useragent-regex value=".*Everix-Identified-PDA.*" priority="1"/> </classification> <classification name="menudriven" description="Everix Identified WAP device"> <useragent-regex value=".*Everix-Identified-WAP.*" priority="2"/> </classification> </classifications> </client-classifications> |
这种特殊配置导致客户分类为“menudriven”、“pda”或无分类(用于全部的PC型浏览器)。这些分类以后用于标识应该使用哪种皮肤和骨架。它们也可以用于将单个portlet限制为指定的设备类型。
随着新设备的不断出现,MobileAware不断地更新的设备数据库和智能设备识别技术,确保该门户将能够向这些设备传递合适的内容,而无需更改client-classifications.xml文件或门户框架(portal framework)。
移动骨架
多通道门户框架中的每个骨架都含有两个移动子骨架。这些子骨架驻留在主骨架目录的"menudriven" 和 "pda"子目录中。当多通道门户接收到请求时,发出请求的浏览器或设备就会被加以分类(参见 门户移动过滤器和客户分类 一节),并且如果合适的话,WebLogic Portal 使用其中的一个子骨架。
WebLogic Portal 允许骨架为jsp指定一个搜索路径(search path)。这使每个骨架只“覆盖”了实现移动功能所需的特定jsp,其余的在默认的骨架中定义。搜索路径是在骨架目录中的skeleton.properties文件中所指定的。以下是菜单驱动骨架的搜索路径的最简单的示例:
为菜单驱动设备组织门户内容所需的骨架 jsp 会覆盖主骨架中它们的对应项(equivalent)。任何无需覆盖的jsp都会被简单地忽略,同时WebLogic Portal使用搜索路径来查找默认的jsp。
如果主骨架是一个自定义骨架 ,则它可能已经含有了一个自己的搜索路径,例如包括默认骨架 。在这种情况下,菜单驱动的子骨架的搜索路径也可以包含来自默认骨架的合适的目录,例如
jsp.search.path: ., ../default/menudriven, .., ../default |
同样的原则适用于PDA 骨架。
菜单驱动骨架
在移动交互服务器的帮助之下,菜单驱动的骨架的作用是:
向设备传递内容(一次一个portlet)。这确保了在较小的屏幕上只显示适量的内容。
从门户中的book、page以及portlet创建一个层次菜单结构并将这些菜单提供给用户。
为单个book、page和portlet添加header和footer。每一级菜单都表示一个book、 page 或 portlet。在每种情况下,可以使用单独的header和footer。
添加酷似面包屑的“back to”导航链接。返回顶级菜单的快捷链接以及在显示portlet内容的情况下返回页面菜单的快捷链接都是自动添加的,这样可以提高导航效率。
“聚焦”于一个portlet。在一个标准的PC门户中,打开一个portlet内的页面流链接会在浏览器中重载整个门户桌面。在一台菜单驱动的设备上,这将导致整个菜单结构被再次传递,同时用户将不得不导航返回到正确的portlet。菜单驱动的骨架可识别出这种情况并自动直接导航到所述的portlet。
随意展开一个portlet,该portlet不是显示为菜单上的一个链接,而是完全显示其内容。有时候一个portlet可能含有重要的或者少量的内容,由于这些或者其他的原因,人们可能希望减少查看portlet所需“单击”的次数,这就可以通过这种机制来实现。
以下是在菜单驱动设备模拟器上通过示例门户进行导航的例子:
此示例菜单驱动骨架中的文件:
body.jsp book.jsp borderlayout.jsp buttondelete.jsp desktop.jsp |
flowlayout.jsp footer.jsp gridlayout.jsp head.jsp header.jsp |
layout_MenuDriven.jsp multilevelmenu.jsp page.jsp placeholder.jsp shell.jsp |
singlelevelmenu.jsp skeleton.properties titlebar.jsp togglebutton.jsp window.jsp |
注意,如果一个自定义布局或者菜单使用了非以上所列出的jsp,则需要为这些自定义jsp创建菜单驱动对等物(counterpart)。例如,如果您为您的PC门户创建了一个threecolumnspanninglayout.jsp,并在一个.layout 文件(在/framework/markup/layouts中)中引用它,则您需要在skeleton的menu-driven 子目录中创建一个对应的threecolumnspanninglayout.jsp文件。通常只需要拷贝一份菜单驱动的 singlelevelmenu.jsp文件并进行适当的重命名即可。
PDA 骨架
PDA 骨架(使用MobileAware 移动标记和移动交互服务器)的作用是:
向设备传递内容,一次一个portlet。这确保了在较小的屏幕上显示适量的内容。
在每个页面的顶部显示一个页面菜单。
在每个页面的底部显示一个portlet菜单,目的是让用户改变显示出的portlet。
向门户内容添加header和footer。
“聚焦”于一个portlet,和菜单驱动的情况类似。
下面的示例是PDA 骨架如何将该示例门户传递给一个PocketPC浏览器:
示例PDA 骨架中的文件:
buttonbar.jsp desktop.jsp flowlayout.jsp footer.jsp |
gridlayout.jsp head.jsp header.jsp layout_PDA.jsp |
page.jsp placeholder.jsp singlelevelmenu.jsp skeleton.properties |
titlebar.jsp window.jsp |
此外,就如在菜单驱动的情况下一样,如果一个自定义布局或者菜单使用了非以上所列出的jsp,则需要为这些自定义jsp创建PDA 对等物。
移动皮肤
与上述菜单驱动和PDA 骨架相类似,移动框架使用菜单驱动和PDA 皮肤。多通道门户中所定义的每一个皮肤都含有一个“menu-driven”和“pda”子目录。这些移动皮肤允许基于每一台设备进行图像和风格的选择。在上面的屏幕截图中,注意PocketPC 上的页面图标是如何被改变的以更好地适合该设备的外形。
每个皮肤(包括菜单驱动和PDA皮肤)都含有一个skin.properties文件,该文件定义由该门户框架所使用的属性,包括图像和CSS文件的搜索路径。以下一个菜单驱动skin.properties文件示例的摘录:
images.search.path: images, ../../../../mask/def, ../images link.homepage.href: wapcss.css link.homepage.rel: stylesheet link.homepage.type: text/css link.search.path: ../../../../mask/def, ../images |
在上面的示例中,搜索路径包含主皮肤的images目录。因此,如果一个门户页面的图标图像被指定为“sports.gif”,则WebLogic Portal 首先会在该移动皮肤自己的资源目录中搜寻该文件,然后如果找不到,则在主皮肤的目录下搜寻。
注意搜索路径中的/mask/def 项。通常在一个PC门户中,资源文件(如图像、CSS)包含在皮肤目录本身中。然而,最终的URL可能会很长(例如,对于一个菜单驱动的皮肤来说,一个典型的URL可能会是http://hostname:7001/webapp/framework/skins/default/menudriven/images/image.gif)。由于菜单驱动设备的“maximum deck size”(一次可以处理的内容的数量)通常较小,长的URL会减少可显示的有用内容的数量。为了解决这个问题,该示例门户为菜单驱动的皮肤资源使用了短路径的目录。
PDA 皮肤以类似的方式工作。主要的区别是,大多数PDA没有相同的内容大小限制。这说明如果需要可以采用将图像保存在皮肤目录中的一般做法。
移动属性
为了启用对移动设备的增强型自定义,多通道门户额外增加了一些可配置参数。这些移动属性可在三个地方进行配置:
Portal-wide 和 book/page-specific 属性是在位于web工程根(root)中的portals.maprops 文件中进行配置的。
与个别皮肤相关的属性是在位于该皮肤目录中的skin.maprops 文件中设置的。
单个portlet的移动属性是利用WebLogic Portal 的portlet引用机制来指定的。
各种属性示例:
Portal-wide 属性: "[portal_name.]menudriven.defaultheader" –当传递一个页面菜单或portlet内容且该页面或portlet没有指定其自己的 header jsp 时,为menudriven 设备定义用于生成header的默认jsp。
Page 属性: "[portal_name.]page.page_name.header" – 覆盖指定页面的上述属性。
Skin 属性: "menudriven.menu.display" –确定在此皮肤中每一个顶级菜单项是仅显示为一个图标,还是显示为带有page/book名称的图标。
Portlet 属性: "menuDrivenDisplay" – 当设置为“all”时,会导致移动框架完全呈现该portlet,而不是在页面菜单上用一个链接显示它。
移动框架组件 – 详细列表
本节将列出构成移动框架的所有组件。它可以用于从零开始构建一个移动框架或者向一个现有的门户框架中添加移动功能(mobility features)的清单。
第一组组件会自动安装到一个web工程中,只需要右键单击该工程并选择Enable multi-channel 即可(注意:必须安装了BEA Platform 8.1的MobileAware Mobility Solutions,此选项才可用,单击这里下载)。
移动过滤器:
WEB-INF/lib/mcpfilter.jar
WEB-INF/classes/mis.properties
WEB-INF/classes/mis.license
WEB-INF/classes/oscache.properties
(modifications to) WEB-INF/web.xml
Support libraries in WEB-INF/lib
移动标签库:
WEB-INF/lib/mmJSPtaglib.jar
WEB-INF/mobility.tld
WEB-INF/mobility.tldx
WEB-INF/mobility-wlp.tld
门户移动过滤器:
WEB-INF/lib/mobility-wlp.jar
WEB-INF/classes/everix.headers
(modifications to) WEB-INF/web.xml
移动框架的其余组件不能自动安装。可以从多通道门户示例中拷贝它们并进行自定义以满足您的门户需求:
移动骨架 (门户中的每个骨架):
skeleton_directory/menudriven/ 目录和上节列出的文件。在示例门户中, /framework/skeletons/default/menudriven。
skeleton_directory/pda/目录和上节列出的文件。在示例门户中, /framework/skeletons/default/menudriven.
移动皮肤 (门户中的每个皮肤):
skin_directory/menudriven/ 目录和文件。 在示例门户中, /framework/skins/default/menudriven 目录和内容。
skin_directory/pda/ 目录和文件。 在示例门户中, /framework/skins/default/pda 目录和内容。
skin_directory/skin.maprops
资源目录:
resources/controls/MobilityControl 和内容 resources/Header 和内容 resources/Footer 和内容 (可选) /mask 目录和内容。 见移动皮肤一节。
门户和 Web 工程级配置文件:
/portals.maprops
客户分类配置文件:
WEB-INF/client-classifications.xml
结束语
好了,到现在您应该对移动框架的主要组件以及与BEA WebLogic 8.1的交互有一个总体的了解了吧。
在许多情况下,一旦采用了移动框架,那么对portlet内容进行的任何修改都是没有必要的,只需将portlet嵌入多通道门户,它就会很好地工作于移动设备上,可以拿您自己的portlet试一下。要处理非常大的或者复杂的portlet,或者利用device-specific 功能来进一步增强移动体验,请查阅MobileAware的 WebLogic Workshop的Mobility Extension(可在此处下载)、提供的文档以及本系列中的其他文章。
如果对本教程有任何反馈,请写信到bea@mobileaware.com。
附加信息
BEA WebLogic Workshop 的MobileAware Mobility Extension
访问 MobileAware 网站 可以请求下载一个BEA WebLogic Workshop 的MobileAware Mobility Extension 的免费评估版。
文档
MobileAware Mobility Extension for BEA WebLogic Workshop 8.1: Mobilising the Sample Project (1.2 MB, 需要 Adobe Acrobat Reader)
Mobilizing a Sample Workshop Application (dev2dev Article One)