| 實現AJAX風格的Portal | ||||
| 作者：皮振華 文章來源：BEA dev2dev 點擊數：274 更新時間：2006-6-15 | ||||
| 【字體：小 大】 | ||||
|
|
||||
| 如果您有任何疑問，請到開發(fā)論壇上提問。 | ||||
|
|
||||
前言本文的是寫給有BEA WebLogic Portal使用經驗的開發(fā)人員。幫助他們把AJAX技術應用到BEA WebLogic Portal中，讓用戶可以得到更好的體驗。 希望筆者在Portal方面的經驗能對大家有所幫助和啟發(fā)。限制于篇幅和主題所以不深入技術細節(jié)，有興趣的讀者請參考后面的文獻，或者寫信與我共同研究。本文不是Portal，Portlet，JSR168 ,AJAX入門開發(fā)文章，這些本章請查閱:http://dev2dev.bea.com.cn 在技術和概念部分不是非常詳細，因為網上資料太多，也不會詳細講解但還是為了不影響閱讀，還是會給予簡單的說明一下。 文本沒有特殊的說明對Portal的解說都是基于BEA WebLogic Portal 8.1 SP4 。 什么是AJAX風格的Portal?對于客戶來說，AJAX風格的Portal就是大部分操作都是不會刷新頁面的，包括最基本的Portlet的最大化，最小化，刪除等操作，瀏覽器和服務器的交互不是通過url，或者是表單的post完成的，而是通過XMLHttpRequest完成的。 讓我們先看看現實中的例子：實際上我們已經看到很多實際的支持AJAX風格的Portal， 例如微軟和google的門戶： 申請一個賬號，然后進入操作一下，例如添加，刪除，最大化，最小化Portlet試試看，頁面根本不會像傳統(tǒng)的Portal那樣引發(fā)頁面的刷新，整個操作非常順暢。 AJAX風格Portal的優(yōu)點提高效率:門戶中有多個應用，用戶如果只是為了更新單獨的頁面而刷新，會導致整個門戶頁面的刷新從而導致多個應用同時刷新，降低訪問速度和增加了額外的軟硬件開銷。我們認為作為用戶訪問入口，用戶不會經常反復的切換和刷新頁面，所以我們希望服務器端數據更改后能自動更新客戶端頁面數據而不用用戶隨時的去刷新頁面。由于經典的web模型 request －refresh。用戶的每一個交互都會導致瀏覽器的刷新，對于傳統(tǒng)的web應用，這個并不是什么大的問題，但是對于門戶來說，每個porltet的一次交互都會導致其它portlet的重新渲染，如果門戶上有許多portlet，而且某些portlet調用了某些消費時間和服務器資源的操作，那么這是非?？膳碌摹＿@時經常會遇到的問題是：用戶隨便點擊portlet上的一個按鈕，門戶的響應時間 = 最長響應portelt的時間。這就是為什么經常有Portal開發(fā)人員抱怨，一般的Portal太慢了的原因之一。當然你也可以使用某些緩存技術，但是這都只是治標不治本，沒有根本的改變。我們希望改變?yōu)椋洪T戶的響應時間 = 服務器對本次操作運行的時間。 要做的這點，就不得不提到AJAX。 更好的用戶體驗:門戶對我們的客戶是一個新的體驗，我們一定要盡量使他們有跟完美的體驗，畢竟一個Portal平臺是非常貴的，一定要讓客戶第一感覺：嗯，不錯，跟我們以前看到的產品完全不一樣，太有趣了。Oh，如果你第一次和客戶交流能有這樣的結果的話，能做到這就有趣了，你可以繼續(xù)介紹你的基于門戶的產品了，思想多么先進，如何如何。。 否則，“天啦，跟我們以前的產品沒什么不同，不就是多了最大化和關閉幾個按鈕，我們卻要多那么多錢。”那就慘了。。。 AJAX框架為什么要使用AJAX框架使用AJAX必須要對各種前臺技術非常了解，包括javascript，DHTML等，對于普通的Java程序員來說，這種要求是有點過分了，如何使普通的java程序員快速進行AJAX的開發(fā)呢，那么就要求我們使用一些AJAX框架，來屏蔽各種前臺技術。 為什么選擇DWRDWR(直接Web遠程控制)項目是在Apache許可下的一個開源的解決方案，它供給那些想要以一種簡單的方式使用Ajax和XMLHttpRequest的開發(fā)者。它具有一套Javascript功能集，它們把從HTML頁面調用應用服務器上的Java對象的方法簡化了。它操控不同類型的參數，并同時保持了HTML代碼的可讀性。 DWR不是對一個設計的插入，也不強迫對象使用任何種類的繼承結構。它和servlet框架內的應用配合的很好。對缺少DHTML編程經驗的開發(fā)者來說，DWR也提供了一個JavaScript庫包含了經常使用的DHTML任務，如組裝表，用item填充select下拉框，改變HTML元素的內容，如<div>和<span> DWR網站是詳盡的并且有大量的文檔，這也是這篇文章的基礎。一些例子用來展示DWR如何使用和用它的庫可以完成什么樣的工作。 簡單的使用例子互聯(lián)網上已經有很多這方面資料，請查閱：http://searchwebservices.techtarget.com.cn/tips/261/2183761.shtml 企業(yè)桌面的功能Portlet是Portal的基本單位它提供：最小化，最大化，關閉三個基本窗口功能，來模擬傳統(tǒng)的桌面程序。 下面以BEA WebLogic Portal 8.1 SP4中文版為例：  ?。ㄟ@樣是不是和傳統(tǒng)桌面程序相似呢？） 各個廠商的Portal產品除了實現了這三種桌面程序所必須的功能以外，往往為了方便用戶和擴充功能，而提供了編輯，窗體漂浮等功能。 你會發(fā)現Portal的很多操作例如Portlet最大化，最小化，Portlet定位都是通過AJAX技術完成的，不需要刷新頁面。 AJAX風格的Portal基礎實現個人認為BEA應該在產品的下個版本中大力增強對AJAX的支持。臨淵羨魚不如退而結網，我們完全可以創(chuàng)建一個新的AJAX的外觀和感覺，也可以實現跟微軟，google的門戶有相當的功能。 我們新建一個外觀和感覺，  然后在重新建立一套骨架，接著，我們把這些功能的js代碼寫入到相應的骨架文件中即可。你可以看到在skeletons文件夾中，也就是BEA文檔中所說的骨架文件，整個Portal都是由這些骨架文件生成的。 各個模塊都是根據名稱命名的，你可以根據名稱就能判斷他們的功能。例如： header.jsp對應門戶中的<header></header>標簽中內容。 Body.jsp 對于于門戶中<body></body>之間的內容。 Titlebar.jsp對應門戶中的portlet 標題內容。 實現門戶的基本功能首先，我們利用實現AJAX風格的Portlet最大化，最小化，刪除操作。 最大化，最小化 操作：最小化操作可以通過隱藏portlet內容來實現。在bea portal中Portlet的內容都是放在下面這個div中的。請打開windows.jsp: <div
<render:writeAttribute name="id" value="<%= window.getPresentationId() %>"/>
你可以通過javascript顯示，隱藏該div來的完成：
var div=document.getDocumentById(“<%= window.getPresentationId() %>”);
//顯示
div. style. displayed=””;
//隱藏
div. style. displayed=”none”;
最大化操作可以通過放大該portlet的div，隱藏頁面上其它所有的div來實現。 刪除操作可以通過刪除包含portlet的div來實現,代碼如下： var div=document.getDocumentById(“<%= window.getPresentationId() %>”); //刪除 document. removeChild(div); 在服務器端可以通過調用這個EJB完成：PortalCustomizationManager的如下方法 removePlaceable(CustomizationContext customizationContext, DesktopDefinitionId desktopDefinitionId, PlaceableInstance placeableInstance) 其中desktopDefinitionId是桌面定義的ID號placeableInstance是portlet的實例ID。 注意：PortalCustomizationManager中同時包含了很多有用的操作，例如移動Portlet的位置，添加Portlet到Page上等等。 實現更多的功能相信使用過msn，google門戶的用戶都會對它們能夠直接通過頁面來定位portlet的位置，和自由調整portlet大小的功能感到非常的有用。原理和上面一樣，使用AJAX可以在Bea Portal中完成所有的功能。 我們在實際Portal項目中已經實現了這些功能，發(fā)現這些功能都是非常實用的，客戶可以很直觀的直接在頁面調整portlet的大小和定位。 但是有用涉及到非常多的javascript知識，所以不在這一一敘述了，有興趣的讀者可以發(fā)email和我探討。 Portlet 之間的交互和通訊下面我將用一個詳細的例子演示如何將AJAX技術應用到Portlet交互與通訊中。 整個例子有三個Portlet構成：
下過如下圖所示：  用戶通過單擊添加Portlet的添加按鈕，一項RSS記錄就會添加到第二個Portlet RSS管理中，如果用戶點擊預覽按鈕，那么RSS信息就會出現在第三個Portlet RSS 預覽中。 通過這三個Porltet，用戶可以很方便的預覽管理他訂閱的RSS內容。 這個小小的例子不僅僅包含了演示AJAX應用在Portlet通訊和交互上，通過修改您也可以用在您的門戶項目中。 示例程序請點擊此處下載示例文件。 后記感謝BEA 北京PS部門高級顧問劉斌在Portal項目實施中對我們的技術支持，才會有了這篇文章。 
|
||||
