深入WebLogic Portal UI編程

下一頁 1 2 3 

　　 
　　提要 本文重點討論如何利用BEA WebLogic portal所提供的新功能實現UI（titlebar）的定制開發。

　　一、 引言

　　也許，沒有什么比發行你的第一個portal產品更讓你激動的了。在經過長時間的努力后，你（和你的團隊）所傾力開發的應用程序終于與用戶見面了！然而，本文不是教給你如何進行基本的portal開發，而是探討如何為你的現有portal加入新的功能。

　　本文將描述有關BEA WebLogic portal的一些非常有用的新特征-你可以借助這些特征來擴展你的portal頁面功能。

　　二、 定制Titlebar

　　如果你已經使用過所有內置的titlebar功能，那么你可以很容易地實現titlebar的定制--你僅需要把一些新圖標放到其上即可。首先，讓我們看一下BEA為portal開發在titlebar所提供的內置功能（分別對應四個圖標）：

　　· Minimize：如果頁面上有相當多的portlet以至于用戶想最小化其中的某些以便看清其它portlet，那么在設計初期可能把它們分解成獨立的頁面更好些。

　　· Maximize：這在使用一種多列布局時非常有用，盡管通常情況下，許多用戶更喜歡單列布局。

　　· Delete：如果不進行編程，那么這個圖標不會作為用戶設置數據的一部分而存儲起來；因此這有可能惹惱你的用戶-每次必須返回。更不用提，如果他們真正想要返回的話，他們不得不開始一個新的會話。

　　· Help：這項功能幾乎是必須的。

　　因此，對大多數用戶來說，在titlebar中只放置一個圖標就夠了。然而，下面我們將詳細討論如何進一步定制titlebar-再添加兩個用戶常用圖標。

　　三、 加入打印圖標

　　我們知道，現在已經到了無紙辦公時代。盡管如此，portal用戶仍會使用打印圖標。而實際上，除了昂貴的報告和旅行計劃外，他們真正想要打印的其實只是該頁面的一部分：單個的portlet。作為開發者，只要用戶需要，我們就應該盡最大努力滿足他們的要求。因此，下面我將向你介紹怎樣打印單個的portlet。

　　注意，本文中的例程實現與命名慣例有一定聯系。但是，我們所使用的命名不會影響真正的實現機制。首先，讓我們來看一下window.jsp文件中的下面一行代碼：

clearcase/" target="_blank" >cccccc width="90%" align=center bgColor=#e3e3e3 border=1>

＜render:writeAttribute name="id" value="＜%= window.getPresentationId() %＞"/＞

　　在此，你僅需要把ID值改變為window.getDefinitionLabel()，因為它可由所有版本的portal從任何存在Window上下文的地方進行存取。

　　現在，既然你已經有一個該portlet的句柄，那么你可以創建一個能夠打開一個可打印頁面的小腳本。

function printPortlet(appPath， portletId， portletName){ 　var pageString = appPath+'/resources/jsp/ 　printPage.jsp?portletId='+portletId; 　var printWindow = window.open(pageString， 'PrintPage'，"location=no，scrollbars=no，resizable"); 　printWindow.focus(); }

　　上面的腳本應該駐留在一個.js文件中，這樣在每個頁面上就可以只加載單個副本。

　　然后，打開titlebar.jsp并且找到下面內容：

＜td class="bea-portal-window-titlebar-buttons" nowrap="nowrap"＞

　　在這個空的td（填充了BEA圖標）中，放入你的打印圖標和一個對你的腳本的調用。為了實現可移植性，你要動態地傳入參數：

＜img src="＜render:getSkinPath imageName="printerIcon.gif" /＞" style="cursor:pointer; position:relative; top:-2px" onclick="printPortlet('＜%=request.getContextPath()%＞'， '＜%=window.getDefinitionLabel()%＞')"＞

　　這樣就可以使你的新圖標出現在你的用戶titlebar中：


　　最后，你需要創建你自己的打印頁面以使該圖標做一些有用的事情。因為該頁面不是portal上下文的一部分，所以你需要硬編碼你的樣式參考（style reference）。另外，由于在標準框架中的嵌套DIV的繼承特點，所以你需要一些正式生成的HTML，后面再另上你的腳本生成和打印該portlet的部分代碼：

＜%@ page language="java" contentType="text/html;charset=UTF-8"%＞ ＜%@ taglib uri="netui-tags-html.tld" prefix="netui"%＞ ＜netui:html＞ ＜head＞ ＜title＞ Portlet Print Page ＜/title＞ ＜meta name="bea-portal-meta-skin" content="/framework/skins/default"/＞ ＜meta name="bea-portal-meta-skin-images" content="/framework/skins/default/images"/＞ ＜link href="/snelsondemo/framework/skins/default/ css/body.css" rel="stylesheet" type="text/css"/＞ ＜link href="/snelsondemo/framework/skins/default/ css/button.css" rel="stylesheet" type="text/css"/＞ ＜link href="/snelsondemo/framework/skins/default/ alert/css/window-alert.css" rel="stylesheet" type="text/css"/＞ ＜link href="/snelsondemo/framework/skins/default/ css/window.css" rel="stylesheet" type="text/css"/＞ ＜link href="/snelsondemo/framework/skins/default/ plain/css/window-plain.css" rel="stylesheet" type="text/css"/＞ ＜link href="/snelsondemo/framework/skins/default/ css/portlet.css" rel="stylesheet" type="text/css"/＞ ＜link href="/snelsondemo/framework/skins/default/ css/book.css" rel="stylesheet"/＞ ＜link href="/snelsondemo/framework/skins/default/ css/layout.css" rel="stylesheet" type="text/css"/＞ ＜link href="/snelsondemo/framework/skins/default/ css/form.css" rel="stylesheet" type="text/css"/＞ ＜script type="text/javascript" src="/snelsondemo/framework/skins/default/js/ menu.js"＞＜/script＞ ＜script type="text/javascript" src="/snelsondemo/framework/skins/default/js/ util.js"＞＜/script＞ ＜script type="text/javascript" src="/snelsondemo/framework/skins/default/js/ delete.js"＞＜/script＞ ＜script type="text/javascript" src="/snelsondemo/framework/skins/default/js/ float.js"＞＜/script＞ ＜script type="text/javascript" src="/snelsondemo/framework/skins/default/js/ menufx.js"＞＜/script＞ ＜script type="text/javascript" src="/snelsondemo/framework/skins/default/js/ skin.js"＞＜/script＞ ＜style type="text/css"＞ .bea-portal-window-titlebar-title{font-weight:bold} ＜/style＞ ＜/head＞ ＜body class="bea-portal-body"＞ ＜div class="bea-portal-book-primary"＞ ＜div class="bea-portal-book-primary-content"＞ ＜div class="bea-portal-book-primary-page" style="margin-right:10px"＞ ＜div id="portletHtml" class="bea-portal-window"＞ ＜/div＞ ＜/div＞ ＜/div＞ ＜/div＞ ＜script language="JavaScript"＞ var portletId = '＜%=request.getParameter("portletId")%＞'; document.getElementById('portletHtml').innerHTML = self.opener.document.getElementById(portletId). innerHTML; window.print(); ＜/script＞ ＜/body＞ ＜/netui:html＞

　　閱讀完上面的標注和代碼后，你就會看到，我們已定義的標簽現在可用于填充我們的彈出菜單-通過僅使用portlet實現，從而使該頁面的其它空間用于實現打印，如下圖所示：

　　當然，你還可以進一步修改這個打印頁面，例如停用鏈接或把頁面饋送到一個隱蔽的iFrame并且由用戶調用打印功能，等等。

原文轉自：http://www.anti-gravitydesign.com