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)