Lotusphere Comes to You 輕鬆打造 Web 2.0 入口網站 IBM Corporation

Transcription

1 輕鬆打造 Web 2.0 入口網站 2007 IBM Corporation

2 議程 Web 2.0 新特性一覽 Web 2.0 入口網站主題開發 用戶端聚合技術 PortalWeb2 主題 開發 AJAX portlets 程式 總結 JSR 286 及 WSRP 2.0 對 AJAX 的支援 AJAX 代理 用戶端 portlet 編程模型

3 Web 2.0 特性一覽 WP 6.1 提供的 Web 2.0 功能 複合應用 - 受管理的 mashups 內容發布管理 - Web Content Management 對門戶頁面控制和定製 - 面板 Google Gadget 集成 - 聚合多個外部內容及應用程式 AJAX s - 營運在 WebSphere Portal 之上 AJAX 頁面聚合/導航/定製 - CSA (Web 2.0 主題) 支援 Mashups 的 Services AJAX 編程模型擴展 - Dojo + IBM Extensions + Semantic Tags (請看右下角示例) AJAX Feed Live Text - 例如 具備線上感知能力的姓名/名片 Lotus Quickr MyPlaces (從 catalog 下載 ) Lotus Connections Multi Function (從 catalog 下載) 場景應用開發 - Composite Applications 和 WebSphere Factory Google Gadget 集成 未來 提供更多支援 在 WebSphere Portal 中 營運 iwidgets 和 Mashups 2009 Corporation IBMIBM Corporation

4 Web 2.0 門戶主題開發 客戶端聚合技術 PortalWeb2 主題 2007 IBM Corporation

5 客戶端聚合 (Client Side Aggregation) REST-accessible Markup Fragments s or other Atom / RSS Feeds Gadgets WSRP Services 許多已經開發好的 s 無需任何修改便可借助於 Web 2.0 渲染模型為客戶提供更好的操控體驗 提供給用戶類似於桌面應用的操作體驗 快速附應, 直觀的操作界面 許多操作無需返回到伺服器處理 避免不必要的頁面刷新 Improved performance and scalability 減少伺服器端的處理 降低了對帶寬的要求 減少了客戶端的工作量 Improved cachability 瀏覽器負責聚合 導航和定製 透過瀏覽器渲染來自於伺服器端的 XML AJAX XML, Dojo 和 JavaScript 透過 REST* 服務訪問和處理 Portal 5

6 CSA 客戶端主題 主題 導航 REST 服務 基於訪問控制以及個性化的導航樹 頁面 REST 服務 Portal 頁面 訪問 REST 服務 s 設定 REST 服務 設定 Client and Server Side aggregation 用戶概要訊息 REST /Web Service 用戶概要訊息 6

7 架構 伺服器 瀏覽器 DOM UI Events DOM Update CSA Framework Browser Cache Application Interactions HTML, XML REST Requests XML Proxy Cache Portal Servlet REST Servlet Engine Content Model Navig. Model Layout Model Model Container Operations... CSA 框架負責訪問伺服器端的 REST 服務 (Remote Model API) 返回 ATOM (application/atom+xml) 格式的模型 Feeds URL 模式 /wps/mycontenthandler/...?uri=nm:oid:wps.content.root&levels=2... 應用之間的交互 * 由 portal servlet 處理 ( 有狀態的請求 ) URL 模式 /wps/myportal/!ut/p/c5/04_sb8k8xllm9msszpy8xbz9cp 中間緩存 *) also *) applies 適用於刷新頁面的請求 to full page refresh requests *) also applies to full page refresh requests 7

8 開箱即用的 PortalWeb2 主題 IBM 提供的主題 - 支援客戶端聚合技術 樣本 在此基礎之上進行定製 同時支援 CSA 和 SSA 兩種模式 原因 : 有些 portlet 可能在 CSA 模式下無法正常營運 強製 SSA 模式 ( SSA fallback ) 與 CSA 模式相關的主題元素 包含占位符的 HTML 文檔框架 頁面裝載完成後, 調用 JS 引導程式 調用 CSA 框架初始化程式 渲染過程中, 占位符會被 Markup 所取代 SSA 模式, 按照道統的 JSP 模式處理 <div id="wptheme-topnav"> <c:if test="${!renderplaceholdersonly}"> <%@ include file="./topnav.jspf" %> </c:if> </div> 8

9 客戶端渲染 Server Client JSP-based Rendering DOM /HTML HTML skeleton + JavaScript onload DOM update 4 1 REST Framework Layout Model 3 CSA JS Framework TopNav SideNav Navigation Model Bootstrap (onload) Page Aggregator XSL XSL Page... Load navigation model feed render 2 XSL XSL 引導程式營運期間初始化 JS widgets ( 引導程式基於主題策略 ) Widgets 訪問伺服器端的 REST 服務 Widgets 採用 XSL 模板渲染伺服器返回的模型 XML, 生成標記語言 (MVC) Widget 把標記語言注入 DOM 中占位符所在的位置 Widget 中的標記語言中可以再定義占位符, 可以容納其它 widget 產生的標記語言 9

10 引導程式 引導程式定義在 head_extras.jspf 檔案中 透過 onload 處理程式執行 依據主題策略, 初始化 Portal Aggregator 並註冊 widgets NavigationalStateController 記錄當前導航狀態, 初始化 widgets 渲染 onload com/ibm/portal/aggregation.js com.ibm.portal.aggregation.portalaggregator Set current state that should be rendered Bootstrap (onload handler) Register widgets according to theme policy Navigational State Controller Portal Aggregator Invoke render() function of registered widgets Widget Widget Widget fire statechanged event Event Broker Invoke callback functions registered for statechanged event com/ibm/portal/navigation/controller.js com.ibm.portal.navigation.controller.navigationalstatecontroller 10

11 XSL 模板 SSA 模式, 頁面的標記語言由 JSPs 產生 每個主題元素會由專門的 JSP 處理 CSA 模式, 使用 JavaScript widgets Widgets 使用 XSL 模板渲染相應的模型 XML 生成標記語言 PortalWeb2 主題提供了一套標準的 XSL 檔案 Top Navigation Side Navigation Page Layout Decoration /Skins 伺服器端渲染 topnav.jspf sidenav.jspf Home.jsp / UnlayeredContainer*.jsp Control.jsp Client-side rendering xsl/topnavrender.xsl xsl/sidenavrender.xsl xsl/maincontentrenderlayout.xsl xsl/ibm.xsl, xsl/noskin.xsl 11

12 如何定製 PortalWeb2 主題 修改 widget 標記 調整相應的 XSL 檔案 重新排列主題元素 編輯 Default.jsp, 重新排列 widget 占位符的位置 添加新的主題元素 在主題 JSP 中添加占位符, 透過定義 DIV 標記以及 id 屬性 定義 Javascript 控制對象 (=the widget), 擴展基礎的 widget com/ibm/portal/aggregation/theme.js com.ibm.portal.aggregation.theme.navigationelement 定義 XSL 模板, 進行展現 ( 可選 ) 編輯 head_extras.jspf 向 portal aggregator 註冊新的 widget function bootstrap() {... var portalaggregator = com.ibm.portal.aggregation.portal_aggregator;... portalaggregator.navigation.addnavigationelement(new com.ibm.portal.aggregation.theme.crumbtrail() );... 12

13 皮膚 Actions toggles Mode and Delete actions Note that view mode is still displayed Selecting a mode will render that mode inline 皮膚也是在引導程式營運期間註冊 JavaScript widgets XSL 產生標記語言 每個皮膚生成一個占位符 (DIV) 容納 portlet 標記語言 com/ibm/portal/aggregation/skin.js com.ibm.portal.aggregation.skin com.ibm.portal.aggregation.ibmskin 13

14 交互 CSA 模式,portlet 交互不會引起頁面刷新 取而代之, 只有被觸發的 portlets 刷新 DOM 事件 ( 如..點擊鏈接 ) 由 CSA 截獲, 發出異步的 AJAX 請求 返回的請求中含了 標記語言 (+ 元數據 ),CSA 框架把標記語言注入到貯存於瀏覽器的 DOM CSA 自動檢測 portlets 之間的依存關係 導航狀態發生改變, 特別是當存在共享 render params 的情況 s 之間伺服器端的通訊 JSR 286 事件 Property broker 共享 portlet session Click event 14

15 強制 SSA 模式 (SSA Fallback) 有些 portlets 可能與 CSA 模式不兼容 Javascript 衝突 不規範的代碼實現 瀏覽器處理能力 強製 SSA 模式 初始化參數 (portlet.xml) com.ibm.wps.web2.rendermode=force_ssa Page 參數 / 元數據 ( 編輯頁面屬性 ) RenderMode = force_ssa 預設情況下, 管理,Web 內容和 Personalization 頁面採取的是 SSA 模式 黑名單 (PortalWeb2/js/portletsForServerSideOnly.js) 在名單中加入 portlet definition UID ( 定義在 portlet.xml) 建議首選初始化參數方法, 已經為開箱即用 portlets 創建好了黑名單 15

16 小結 CSA 實現了 portlets 作為頁面片段獨立刷新 對 portlet 編碼沒有額外的要求和工作量 在 portlet 內部, 有可能會出現 JavaScript 衝突的情況 如..動態產生 HTML FORMs, onload handlers Portal 進行 AJAX 處理 跟蹤和更新所有 portlets 的狀態 之間通訊時, 更新多個 portlets ( 必要情況下, 刷新頁面 ) 與伺服器端緊密聯繫, 獲知請求涉及了哪些 portlets 更好的性能表現 吞吐量增加了 40%, 減少了 10% 不必要的工作量以及每筆交易減少了 45% 的 CPU 使用率 但是.. CSA /PortalWeb2 主題不是一個放之四海皆準的解決方案! 根據以下情況進行評估 Portal 頁面和 portlets 緩存特徵 (markup) 用戶行為 s 實現技術和框架 16

17 開發 AJAX s JSR 286 和 WSRP 2.0 對 AJAX 的支援 AJAX 代理客戶端 portlet 編程模型 2007 IBM Corporation

18 s 應用 AJAX 場景 數據提取 客戶端裝載數據, 界面不發生改變 例子 錄入提示功能 : 用戶輸入查詢文本, 錄入框智能顯示提示訊息或者幫用戶自動完成剩下的部分 股票報價刷新..每五分鐘, 顯示最新的股票價格 標記語言提取 客戶端裝載標記語言, 用於更新數據或顯示新的界面 例子 訪問 servlet /portlet, 返回標記語言, 更新 DOM 中的視圖 REST 服務返回 ATOM feed, 使用 XSLT 對其進行轉換 18

19 使用 Servlet 連接外部數據源 包含一個 portlet 和 servlet Servlet 扮演代理的角色, 負責連接外部數據源 Servlet 也需要克服 SOP 規則 (Same Origin Policy) 按照原有模式營運 透過 Javascript 對 Servlet 進行訪問 透過 session (app. scope) 與 servlet 進行數據傳遞 WP 6.0 已經支援 Portal Server Browser Click JS e.g. XML /HTML Servlet Portal Servlet HTTP Session External Server (e.g. Mail Server) 19

20 Servlet 模式 : 小結 Servlet 負責 AJAX 處理 配合標準的門戶平台 通常需要 AJAX Javascript 程式庫 - 防止衝突! 用於數據提取和更新 特別適用於,portlet 顯示來自於不同數據源的數據 ( 如..郵件伺服器 ) 更新後台數據, 在必要的情況下需要清除伺服器端的緩存 AJAX 調用不能使用 portlet APIs 或者影響 portlet 狀態 在刷新頁面的情況下, 視圖的狀態會丟失 Servlet 實現需要一定的技巧 特別是當需要連接多個不同的數據源 Servlet 實際上扮演著 HTTP 代理的角色 處理 cookies redirects request /response headers 等 連接池的實現避免性能瓶頸 安全性... 20

21 AJAX 代理連接外部數據源 Portal Server Browser Portal Click JS e.g. XML Servlet 類似於 servlet 模式 AJAX 代理 管理對其它 domains 的訪問 指定訪問策略 HTTP 代理負責處理 cookies headers redirects 等. WP 6.1 提供支援 AJAX Proxy Access Policy Access Policy Access Policy External Server (e.g. Mail Server) 21

22 AJAX 代理 背景 : SOP 規則 (Same Origin Policy) 防止客戶端腳本裝載來自於其它 domain 的數據 約束跨站點的腳本程式 例子..服務於 myportal.com 站點的 試圖透過 XHR 加載來自於 cnn.com 的 feed AJAX 應用程式的 HTTP 代理 基於 Servlet 的 HTTP 代理, 負責把請求發送至授信的目標 domains 負責 cookie 重寫 內容類型過濾 連接管理等 允許管理員控制對其他 domains 的訪問 白名單 - 授信站點被明確地解除鎖定 Browser Portal server in domain A Server in domain B Portal page from domain A HTTP GET AJAX proxy filter chain HTTP GET Java Script Access Policy 22

23 JSR Resource Requests 新 portlet 標準中定義的回調界面, 由所謂的 resource URLs 觸發 serveresource(resourcerequest, ResourceResponse) 允許 portlets 作為獨立的內容被渲染 沒有 portal 頁面聚合, 沒有主題內容 完全掌控輸出的內容, 訪問 APIs 和狀態訊息 ( 如.. portlet session) 生成二進製內容 (PDF, SVG 等.) 彈出視窗 s 自身提供的對 AJAX 的支援 ( 受限 ) s 提供方法返回 XML JSON HTML 片段或者其它的內容 相比在同一個 檔案中打包一個 servlet, 是更理想的編程模型 23

24 Resource Request 模式實現 AJAX 啟用了 AJAX 的 portlet 透過 resource request 重新加載內容 在 portlet 內部處理 AJAX 調用 依據 JSR 286 規範實現 WebSphere Portal 6.1 提供支援 Portal Server Browser Click XHR + resource URL Portal serveresource JS XML /HTML etc. Servlet 24

25 JSR 286 Resource Request 模式實現 AJAX 小結 重申!只有 portlet 負責 AJAX 操作 Portal 不清楚發生了什麼以及誰被影響 AJAX 調用在 portlet 內部實現 可以調用 Portal APIs 可以獲得當前狀態 ( 導航狀態, 首選項訊息,portlet session) 在 POST 請求過程中, 可以更新首選項訊息和 portlet session 受限的功能支援 不能更新導航狀態和發送事件等操作. 25

26 客戶端 編程模型 對 AJAX 進行全面支援 便捷的 JavaScript APIs, 簡化 AJAX portlet 開發 和 portal 負責 AJAX 調用 提供了完善的方案, 處理導航狀態和 portlet 通訊 WebSphere Portal 6.1 支援 Portal Server Click Browser JS XML Request Preferences Nav. State Request XML /HTML Request Servlet Portal Client-side portal framework User Profile API Pref. feed Request User Prof. feed REST Preferences User Profile Other DB 26

27 s 對 AJAX 的全面支援 需要在 portal 和 portlet 之間協調 Portal 提供給 portlets 調用 AJAX 的應用程式庫 更新客戶端導航狀態 即使用戶在當前 portlet 以外操作, 狀態的改變也可以被保留 完全支援伺服器端的功能 處理首選項訊息, 發送事件等 AJAX 調用期間, 需要在伺服器端處於 action 和 render 階段 為什麼在 JSR 286 規範中沒有包含 XMLRequest? 短時間內難以達成統一的設計方案, 等待廠商提供更好的解決方案 一些主要的廠商 ( 包括 IBM) 最終會提出一個公共的 Javascript extension API 27

28 XMLRequest ibm.portal.portlet.xmlrequest 提供 XMLHTTPRequest 功能給 portlets dojoportal.declare("ibm.portal.portlet.xmlrequest", null, { // Properties to read the ready state as well as register callback functions readystate: 0, /* int */ onreadystatechange: null, /*Function*/ onportletstateready: null, /* Function(ibm.portal.portlet.State) */ // Properties to access the response body (either text or XML) responsetext: null, /* String */ responsexml: null, /* Document */ // Properties to read the response status status: null, /* int */ statustext: null, /* String */ // Functions to open, send, and abort a synchronous or asynchronous request open: function( /*String*/ method, /*String*/ uri ) {...}, open: function( /*String*/ method, /*String*/ uri, /*boolean*/ async ) {...}, send: function( /*String or Document*/ data ) {...}, abort: function( ) {...}, // Functions to set request headers and read response headers setrequestheader: function( /*String*/ header, /*String*/ value ) {...}, getallresponseheaders: function( ) {...}, getresponseheader: function( /*String*/ header ) {...} }); 28

29 總結 AJAX portlet 開發成為可能 比較單純 servlet 的情況 ( 如.. Google mail) 要複雜得多, 源於多個應用需要在一個頁面中聚合 對於數據提取的需求,WP 6.1 提供了兩種方法 連接本地數據源, 採用 JSR 286 resource requests 連接外部數據源, 使用 AJAX 代理 AJAX 代理提供了對其它 domains 訪問進行管理的機製 白名單..只有解除鎖定的頁面可以訪問 處理 cookie 重寫 header forwarding 和連接管理 利用客戶端 portlet 編程模型實現的 AJAX portlet 其操作行為與伺服器端的 portelt 保持一致 可以處理導航狀態發生改變的情況 客戶端 APIs 允許在客戶端方便地使用標準 portlet 的概念 (portlet preferences, render parameters, portlet mode, window state 等.) 29

30 Demo 2007 IBM Corporation