深入WebLogic Portal UI編程

2019-11-18 11:53:27

字體：大中小

供稿：網(wǎng)友

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

　　一、引言

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

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

　　二、定制Titlebar

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

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

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

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

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

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

　　三、加入打印圖標

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

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

＜render:writeAttribute name="id"
value="＜%= window.getPResentationId() %＞"/＞
　　在此，你僅需要把ID值改變?yōu)閣indow.getDefinitionLabel()，因為它可由所有版本的portal從任何存在Window上下文的地方進行存取。

　　現(xiàn)在，既然你已經(jīng)有一個該portlet的句柄，那么你可以創(chuàng)建一個能夠打開一個可打印頁面的小腳本。

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并且找到下面內(nèi)容：

＜td class="bea-portal-window-titlebar-buttons"
nowrap="nowrap"＞
　　在這個空的td（填充了BEA圖標）中，放入你的打印圖標和一個對你的腳本的調(diào)用。為了實現(xiàn)可移植性，你要動態(tài)地傳入?yún)?shù)：

＜img src="＜render:getSKINPath
imageName="printerIcon.gif" /＞"
style="cursor:pointer; position:relative; top:-2px"
onclick="printPortlet('＜%=request.getContextPath()%＞'，
'＜%=window.getDefinitionLabel()%＞')"＞
　　這樣就可以使你的新圖標出現(xiàn)在你的用戶titlebar中：

　　最后，你需要創(chuàng)建你自己的打印頁面以使該圖標做一些有用的事情。因為該頁面不是portal上下文的一部分，所以你需要硬編碼你的樣式參考（style reference）。另外，由于在標準框架中的嵌套DIV的繼續(xù)特點，所以你需要一些正式生成的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＞
　　閱讀完上面的標注和代碼后，你就會看到，我們已定義的標簽現(xiàn)在可用于填充我們的彈出菜單-通過僅使用portlet實現(xiàn)，從而使該頁面的其它空間用于實現(xiàn)打印，如下圖所示：