IBMWebSpherePortal6.0的主題與皮膚開發(fā)-創(chuàng)新互聯(lián)

1.1  入門：Portal的主題與皮膚開發(fā)

要了解如何開發(fā)Portal的主題，首先要了解IBM WebSphere Portal的顯示流程。IBM WebSphere Portal 使用不同的 Java Server Page（JSP）、級(jí)聯(lián)樣式表（Cascading Style Sheet，CSS）和圖像來顯示門戶頁面。它使用位于X:\WebSphere\AppServer\installedApps\YourNodeName\ wps.ear\wps.war 目錄下 themes、skins 和 screens 目錄中的 JSP 來構(gòu)造門戶頁面，其中每一個(gè)目錄下都包含html、wml和chtml子目錄，WebSphere Portal用它們服務(wù)于不同的客戶機(jī)，例如桌面瀏覽器和移動(dòng)設(shè)備。這里我們以通常使用的HTML方式下的主題開發(fā)為例，介紹Portal的主題開發(fā)。

為企業(yè)提供網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、網(wǎng)站優(yōu)化、全網(wǎng)營(yíng)銷推廣、競(jìng)價(jià)托管、品牌運(yùn)營(yíng)等營(yíng)銷獲客服務(wù)。創(chuàng)新互聯(lián)擁有網(wǎng)絡(luò)營(yíng)銷運(yùn)營(yíng)團(tuán)隊(duì)，以豐富的互聯(lián)網(wǎng)營(yíng)銷經(jīng)驗(yàn)助力企業(yè)精準(zhǔn)獲客，真正落地解決中小企業(yè)營(yíng)銷獲客難題，做到“讓獲客更簡(jiǎn)單”。自創(chuàng)立至今，成功用技術(shù)實(shí)力解決了企業(yè)“網(wǎng)站建設(shè)、網(wǎng)絡(luò)品牌塑造、網(wǎng)絡(luò)營(yíng)銷”三大難題，同時(shí)降低了營(yíng)銷成本，提高了有效客戶轉(zhuǎn)化率，獲得了眾多企業(yè)客戶的高度認(rèn)可！

所謂Portal的主題，指的是系統(tǒng)的整體界面風(fēng)格與顯示方式，主要包括網(wǎng)站頁面初始化以前的調(diào)用、徽標(biāo)logo、一級(jí)菜單、二級(jí)菜單、網(wǎng)站下邊的版權(quán)信息，以及頁面初始化完成后的善后邏輯處理。我們要開發(fā)一套主題，可以直接復(fù)制themes/html下的一個(gè)包含有各個(gè)頁面文件的文件夾，重新命名并在管理界面中添加、指定給相關(guān)頁面就可以了。在這個(gè)文件夾中，默認(rèn)的初始調(diào)用文件是Default.jsp，這個(gè)文件繪制了一張表格，然后在各個(gè)單元格內(nèi)調(diào)用不同的文件。在IBM WebSphere Portal 6.0中調(diào)用的文件有：Head.jsp、AdminLinkBarInclude.jsp、 ToolBarInclude.jsp、PlaceBarInclude.jsp、PageBarInclude.js，以及延伸出來的PageBeginInclude.jsp、 PageEndInclude.jsp。下面進(jìn)行詳細(xì)介紹。

1.1.1   Default.jsp

Portal系統(tǒng)的主題與皮膚的始化是從Default.jsp開始的，用于默認(rèn)主題的Default.jsp位于wp_root\app\wps.ear\ wps.war\themes\html下。這個(gè)JSP包含了其他用于顯示標(biāo)題、公司徽標(biāo)、工具欄的JSP，以及用于向頁面中插入內(nèi)容的 JSP。在Default.jsp的末尾處，screenRender JSP指向被請(qǐng)求處理的頁面，例如login或forgotpassword。Default.jsp初始化一張表格，表格內(nèi)部劃分為單元格，每個(gè)單元格內(nèi)可以直接顯示內(nèi)容，也可以調(diào)用其他的JSP頁面。我們以從上到下、從左到右的順序來分別介紹開發(fā)主題所用到的頁面。下面介紹的JSP就是以這樣的順序先后調(diào)用的。

1.1.2  Head.jsp

Head.jsp 位于Default.jsp初始化表格的最上一行單元格內(nèi)，負(fù)責(zé)生成標(biāo)題并嵌入指向級(jí)聯(lián)樣式表文件的鏈接。它還定義了支持BiDi（雙向）文本所需的變量。這個(gè)頁面一般沒有實(shí)質(zhì)性的顯示內(nèi)容，例外的是，開發(fā)者喜歡在這里初始化網(wǎng)頁的標(biāo)題，通常是讀取屬性文件，比如位于web_inf/下的engine.properties。這樣安排比較靈活，后期維護(hù)可以直接在屬性文件里面進(jìn)行。當(dāng)然，如果用戶的網(wǎng)頁標(biāo)題是確定的而且不再更改，那么也可以通過<title></title>在這里定死，這比IBM公布的以標(biāo)簽方式寫容易，也更易使用。如果你開發(fā)了多套主題，而且這幾套主題的網(wǎng)頁標(biāo)題也一樣（除了虛擬門戶，一般是這樣），那么可以把這個(gè)文件放到themes/html的根目錄下，其他主題的Default.jsp都來調(diào)用這個(gè)文件就可以了。

1.1.3  AdminLinkBarInclude.jsp

AdminLinkBarInclude.jsp主要用來顯示“新建頁面”、“編輯頁面”和“分配頁面許可權(quán)”三個(gè)標(biāo)簽。該文件在Default.jsp初始化表格的第二行被調(diào)用。用戶使用這三個(gè)鏈接來創(chuàng)建、修改自己的個(gè)性化頁面，也可以由門戶網(wǎng)站管理員來布局整個(gè)網(wǎng)站的風(fēng)格，管理頁面資源的權(quán)限。不過，在開發(fā)實(shí)踐中你會(huì)發(fā)現(xiàn)，大部分客戶不喜歡這幾個(gè)標(biāo)簽，他們要求將這些標(biāo)簽放到管理頁面，取而代之的是一些歡迎信息，比如：“某某員工，歡迎您登錄！”。要實(shí)現(xiàn)這個(gè)也很容易，只要稍微修改一下這個(gè)頁面就可以了。實(shí)現(xiàn)方法是：我們?cè)谙到y(tǒng)中添加一個(gè)標(biāo)簽，這個(gè)標(biāo)簽對(duì)應(yīng)的Java文件負(fù)責(zé)讀出登錄用戶的姓名，并使用像JSP中添加JSTL一樣的方法，添加一個(gè)Label。在進(jìn)行主題與皮膚開發(fā)時(shí)，只要在顯示歡迎信息的地方應(yīng)用這個(gè)標(biāo)簽就可以了。

1.1.4  ToolBarInclude.jsp

ToolBarInclude.jsp用來顯示歡迎消息，以及為用戶提供的鏈接工具欄。門戶網(wǎng)站上顯示什么樣的鏈接工具欄取決于用戶上下文。例如，登錄的用戶會(huì)看到“我的門戶網(wǎng)站”、“管理”（僅管理員可見）、“編輯我的‘概要文件’”、“注銷”之類的工具；而注銷的用戶會(huì)看到“忘記密碼”、“登錄”、“幫助” 之類的工具。通常的做法是將“管理”鏈接放到一個(gè)Portlet中，只有當(dāng)?shù)卿浀挠脩羰荘ortal系統(tǒng)管理員時(shí)，才在該P(yáng)ortlet中顯示歡迎信息，或者其他的資源鏈接。

1.1.5  PlaceBarInclude.jsp

PlaceBarInclude.jsp用來顯示一級(jí)菜單，即“首頁”、“文檔管理器”、“公司概況”、“業(yè)務(wù)簡(jiǎn)介”等，屬于最高層的目錄。在任何一個(gè)一級(jí)菜單上都可以通過“新建頁面”來創(chuàng)建二級(jí)菜單，所創(chuàng)建的內(nèi)容將被存儲(chǔ)到數(shù)據(jù)庫（原始使用的是Cloundscape），也可以導(dǎo)入到DB2、Oracle等任何一個(gè)Portal所支持的數(shù)據(jù)庫中。

1.1.6  PageBarInclude.jsp

PageBarInclude.jsp用來顯示二級(jí)菜單，當(dāng)點(diǎn)擊一級(jí)菜單中的任何一個(gè)標(biāo)簽時(shí)，系統(tǒng)會(huì)調(diào)用該文件，并檢索出該菜單的所有子菜單，默認(rèn)顯示在PlaceBar的下面。該文件在Default.jsp初始化表格的第三行被調(diào)用，如果不調(diào)用該文件，那么包含子菜單的一級(jí)菜單被調(diào)用時(shí)，其子菜單將在屏幕的左側(cè)顯示。該文件位于皮膚文件夾下，具體的文件操作我們將在后面的皮膚開發(fā)中介紹。

1.1.7  Portal 6.0中的文件調(diào)用關(guān)系

現(xiàn)在介紹一下Portal 6.0中的文件調(diào)用關(guān)系及其作用。如圖1-1所示為Portal開發(fā)一套主題需要調(diào)用的頁面清單。

圖1-1  Portal開發(fā)一套主題需要調(diào)用的頁面清單

其中幾個(gè)主要文件的作用如圖1-2所示。

圖1-2  文件的作用

1.2  初級(jí)：如何更換Portal系統(tǒng)的logo圖標(biāo)1.2.1  Default.jsp的工作原理

門戶系統(tǒng)的初始化頁面是從Default.jsp開始的。Default.jsp文件調(diào)用其他不同的頁面分別顯示主頁上不同區(qū)域的內(nèi)容。例如：

1.2.2  換一個(gè)logo

打開Default.jsp，你會(huì)看到一個(gè)表格，在表格的左上角有這樣一段語句，用來顯示默認(rèn)主題的logo圖標(biāo)：

上面已經(jīng)介紹過，整個(gè)Portal系統(tǒng)的頁面是Default.jsp初始化的一個(gè)大表格，用來顯示或者調(diào)用不同的JSP。我們?cè)谶@個(gè)大表格的最左上角劃出一個(gè)<td>，用來顯示公司的徽標(biāo)。這段語句的作用就是在這個(gè)單元格內(nèi)插入一張圖片，名為L(zhǎng)ogo.gif。

你可以將這個(gè)文件名改為自己想插入的任意一張圖片的名字，只要將這張圖片放到.war/images/目錄下就可以了。這里支持幾乎所有的圖片格式，你可以任意擺放，大小、位置等都是你說了算。這時(shí)你可能會(huì)問：如何插入一個(gè)Flash呢？別著急，下面將會(huì)介紹。

1.2.3  用Flash動(dòng)畫作Logo

用Flash作徽標(biāo)是個(gè)不錯(cuò)的注意，它可以使門戶網(wǎng)站看起來更豐富、生動(dòng)一些。但是，F(xiàn)lash即.swf格式的文件，是不能直接通過這種方式來插入的，因?yàn)闉g覽器并不能識(shí)別它。要插入一個(gè)動(dòng)畫，必須為它指定相應(yīng)的驅(qū)動(dòng)，你可以通過如下這段代碼來生成。

這里插入了一個(gè)名為firstpagelogo.swf的影片作公司徽標(biāo)，它的大小是 510*81，請(qǐng)將這個(gè)影片文件放在.war/images目錄下，重啟服務(wù)器，看看首頁上是不是已經(jīng)出現(xiàn)了Flash。

細(xì)心的讀者可能已經(jīng)發(fā)現(xiàn)，在安裝了更新系統(tǒng)編號(hào)為KB912945的補(bǔ)丁后，凡是在一個(gè)頁面內(nèi)使用<object>、<embed>或<applet>標(biāo)簽的活動(dòng)內(nèi)容都不會(huì)被自動(dòng)激活，需要用戶手動(dòng)單擊，F(xiàn)lash控件也不例外。這是微軟為了避免與Eolas公司和加利福尼亞大學(xué)發(fā)生專利侵權(quán)糾紛，而發(fā)布的一個(gè)IE非安全更新，這不是Bug。但是安裝此更新后，在啟用ActiveX控件之前，無法在某些網(wǎng)頁與這些控件交互，要啟用 ActiveX 控件，請(qǐng)手動(dòng)單擊該控件。這使得我們的門戶網(wǎng)站看起來總有個(gè)虛框，好像一個(gè)疤痕。例如：

是不是很難看？沒關(guān)系，我們就在主題與皮膚開發(fā)中解決這個(gè)問題。

事實(shí)上，在head.jspf的<head></head>中我們已經(jīng)調(diào)用了該主題下的JS文件。你要確保沒有刪掉引用語句，否則其他的JS方法都不能使用，或者說，整個(gè)門戶網(wǎng)站就被你這樣輕松地破壞了。如果確實(shí)已經(jīng)刪除了，請(qǐng)確保加入以下語句。

然后打開flyout.js文件，加入如下函數(shù)。

最后在需要插入Flash文件的地方插入以下代碼。

重啟服務(wù)器，再檢查一下，是不是虛框已經(jīng)沒有了？

1.3  中級(jí)進(jìn)階：開發(fā)個(gè)性化的Portal主題1.3.1  理解各級(jí)菜單

Default.jsp調(diào)用PlaceBarInclude.jsp文件來顯示一級(jí)菜單，如果一級(jí)菜單下面還有二級(jí)菜單，那么當(dāng)點(diǎn)擊該一級(jí)菜單時(shí)，Default.jsp將調(diào)用PageBarInclude.jsp來顯示二級(jí)菜單。當(dāng)然，也可以不調(diào)用該文件，系統(tǒng)將默認(rèn)調(diào)用Portlet皮膚中的LayerContainer.jsp文件，用三級(jí)菜單代替二級(jí)菜單。這就是菜單的個(gè)性化，這個(gè)方法使得系統(tǒng)的三級(jí)及三級(jí)以下的菜單顯示在頁面的左側(cè)，就像Windows資源管理器一樣以樹形目錄顯示，用戶更容易接受。

打開LayerContainer.jsp文件，你會(huì)發(fā)現(xiàn)里面的內(nèi)容非常簡(jiǎn)單。

首先有這樣一個(gè)標(biāo)簽：

意思是說，如果菜單是可用的，那么當(dāng)?shù)卿涍M(jìn)去以后將執(zhí)行下面的操作。使用這句代碼，必須引入Portal的標(biāo)簽庫，具體的過程這里不再贅述。接下來繪制了一個(gè)表格，用來顯示里面的操作。

菜單的左右協(xié)調(diào)：如果一共定義了十幾個(gè)一級(jí)菜單，而一欄只能顯示8個(gè)，那么剩下的菜單怎么辦？我們?cè)谶@里放置了兩個(gè)三角形小圖標(biāo)，如果右邊還有更多的菜單，小圖標(biāo)會(huì)自動(dòng)出現(xiàn)，當(dāng)點(diǎn)擊時(shí)，就會(huì)顯示剩下的菜單。具體的代碼是通用的，這里不再贅述。需要強(qiáng)調(diào)的是，菜單條在這里只劃分為兩種情況：一是在選中的情況下，二是在未選中的情況下。

例如：

我們首先添加一張背景圖片，然后左側(cè)放一張圖片做前綴，中間打印該菜單條的名字，右側(cè)又放一張圖片做后綴，這樣整個(gè)菜單條看起來就非常漂亮了。

接下來是顯示工具欄的情況：

這里的操作將使具有權(quán)限的用戶通過點(diǎn)擊這張圖片，直接編輯相應(yīng)的Portal頁面。不過，根據(jù)我的開發(fā)經(jīng)驗(yàn)，大部分用戶會(huì)隱藏這個(gè)入口，以免引起管理上的混亂。

最后的代碼用來顯示系統(tǒng)收藏夾。登錄后，會(huì)發(fā)現(xiàn)在一級(jí)菜單的最右邊多出一個(gè)“我的最愛”，這是Portal系統(tǒng)自帶的收藏夾，可以通過這個(gè)入口將自己喜歡的頁面添加到收藏夾，然后就可以通過點(diǎn)擊這里直接進(jìn)入到所收藏的頁面了。

1.3.2  個(gè)性化工具欄

要獲得個(gè)性化的工具欄，可以修改ToolBarInclude.jsp文件，這個(gè)文件提供了Portal系統(tǒng)管理員進(jìn)到管理界面的入口。

在這里可以編輯自己的“概要文件”，針對(duì)個(gè)人的用戶信息，修改自己的姓名、密碼等。更進(jìn)一步，可以在這里顯示歡迎信息，例如，張三同志登錄后，會(huì)顯示出：“歡迎您，張三同志！”。要實(shí)現(xiàn)這個(gè)功能實(shí)際上非常簡(jiǎn)單，請(qǐng)看：

當(dāng)然，需要引入相應(yīng)的標(biāo)簽庫。具體的應(yīng)用屬于普通的JSP開發(fā)，你可以借鑒平常的開發(fā)經(jīng)驗(yàn)去實(shí)現(xiàn)。

1.3.3  個(gè)性化管理標(biāo)簽

所謂的個(gè)性化，指的是可以刪除一個(gè)或者多個(gè)管理標(biāo)簽，也可以根據(jù)自己的喜好添加標(biāo)簽。這需要修改AdminLinkBarInclude.jsp文件。例如：

這段代碼用來顯示“新建頁面”的管理標(biāo)簽，通過點(diǎn)擊這個(gè)標(biāo)簽，可以為當(dāng)前頁面創(chuàng)建一個(gè)子頁面。同理，可以個(gè)性化“編輯頁面”和“分配頁面權(quán)限”。當(dāng)然，也可以隱藏這個(gè)入口。

1.4  高級(jí)探索：開發(fā)自適應(yīng)分辨率下的主題與皮膚1.4.1  1024*768分辨率下的主題

剛安裝好Portal系統(tǒng)后，上面介紹的幾個(gè)JSP文件會(huì)在默認(rèn)的.war/theme目錄下，你可以新建一個(gè)文件夾，將這幾個(gè)JSP文件拷貝至該目錄下，然后在管理界面下添加該主題，該主題默認(rèn)是1024*768分辨率的。你可以開發(fā)多套主題。注意：請(qǐng)充分利用一些公共的資源，因?yàn)檫@些主題可能使用的是同樣的版權(quán)信息，這樣就可以將PageEnd.jsp放到themes/entention下，然后讓所有的主題調(diào)用這個(gè)文件。

當(dāng)然，為了保險(xiǎn)起見，可以在Default.jsp最外層的表格中這樣寫死：

1.4.2  800*600分辨率下的主題

開發(fā)800*600分辨率下的主題非常簡(jiǎn)單，代碼如下：

將這個(gè)表格覆蓋到原來Default.jsp文件中最外層的表格就可以了。注意：在Default.jsp調(diào)用的各個(gè)文件中，可能都有表格存在，如果這些表格中有的寬度超過了800，或者兩個(gè)并列的表格寬度超過了800，請(qǐng)適當(dāng)調(diào)??；否則里面的表格會(huì)將此表格向兩側(cè)撐開，從而導(dǎo)致表格不協(xié)調(diào)。

1.4.3  1024和800下自適應(yīng)主題

要開發(fā)自適應(yīng)主題就更簡(jiǎn)單了！請(qǐng)?jiān)O(shè)定一個(gè)變量w，先寫一個(gè)JavaScript腳本，用來讀取客戶端的瀏覽器分辨率，如果是800的，則給變量賦值w=800；如果是1024的，就賦值為w=1024。這樣Default.jsp初始化表格的寬度就以w來替代，對(duì)具體JSP文件調(diào)用的單元格的長(zhǎng)和寬都在原來的基礎(chǔ)上乘以1或者乘以0.78。

1.5  高手過招：更改Portal系統(tǒng)的登錄方式1.5.1  從首頁登錄

我們需要用WSAD開發(fā)一個(gè)Portlet，并在JSP中寫一個(gè)代理，將用戶憑證提交給系統(tǒng)自帶的認(rèn)證Action中。這個(gè)Portlet可以這樣來設(shè)計(jì)：

<wps:if loggedIn="no">  //在沒有登錄的情況下，提醒用戶輸入用戶名和密碼（見圖1-3）

</wps:if>

圖1-3  登錄界面

用戶單擊“登錄”按鈕后，將用戶名和密碼提交到系統(tǒng)自帶的Action中。

<wps:if loggedIn="yes">

//如果已經(jīng)登錄了，則可以顯示用戶的常用信息。比如，讀取用戶的Lotus郵箱，然后顯示有幾封郵件等（見圖1-4）

</wps:if>

圖1-4  顯示郵件信息

甚至可以利用url-mapping自定義幾個(gè)頁面，從首頁直接進(jìn)入業(yè)務(wù)系統(tǒng)，這樣就可以封死Portal頁面右上角自帶的“登錄”標(biāo)簽。也許你會(huì)問：我又想用系統(tǒng)自帶的頁面，怎么辦呢？沒關(guān)系，你也可以在瀏覽器中輸入http://hostname:9081/wps/myportal，或者，干脆直接輸入一個(gè)錯(cuò)誤的用戶名和密碼，系統(tǒng)自然會(huì)帶你回到系統(tǒng)自帶的頁面。

1.5.2  拒絕系統(tǒng)自帶的登錄頁面

但是采用上面介紹的方式，可能會(huì)出現(xiàn)這種情況：當(dāng)用戶名或者密碼錯(cuò)誤的時(shí)候，系統(tǒng)會(huì)返回到系統(tǒng)自帶的登錄框上面。為避免這種情況，可以封死這個(gè)開關(guān)。

系統(tǒng)自帶的登錄頁面是.war/screen/html下的login.jsp文件，可以刪除該文件里的所有內(nèi)容，然后加入這么一句：

這樣是不是帶你又回到了首頁呢？是的，確實(shí)如你所想，這樣就封死了系統(tǒng)自帶的登錄頁面。如果你的用戶名或者密碼錯(cuò)誤，或者你通過myportal直接調(diào)用，系統(tǒng)就會(huì)帶你回到首頁的登錄界面，重新輸入。從這里我們可以延伸開來，比如說Session過期、修改用戶的個(gè)人信息等，都可以通過這種方式封掉這個(gè)接口。

1.6  Portlet的皮膚開發(fā)1.6.1  更換標(biāo)題背景圖片

在.war/skin/html下，系統(tǒng)已經(jīng)存在了好幾套皮膚，打開其中任意一個(gè)文件夾，你都能發(fā)現(xiàn)Control.jsp這個(gè)文件。該文件初始化一個(gè)小表格，該表格有兩行：第一行用來顯示Portlet的標(biāo)題，后面是大化、最小化、編輯按鈕；第二行是Portlet的body，用來顯示Portlet的內(nèi)容。一般來說，用戶喜歡在Portlet名稱前面或者后面放個(gè)小圖標(biāo)等之類的裝飾，我們可以直接在這個(gè)單元格里面操作，這符合基本的HTML語法。當(dāng)然，如果Portlet的名稱是固定的，我們也可以像開發(fā)Portal主題的菜單一樣，用圖片來替代。其實(shí)只要判斷一下Portlet標(biāo)題，如果符合，就調(diào)用相應(yīng)的圖片，或者單獨(dú)為這個(gè)標(biāo)題的Portlet開發(fā)一個(gè)皮膚，用于調(diào)用專門的圖片，或者直接顯示，或者作為背景，都很容易。

要換掉Portlet標(biāo)題的背景圖片非常簡(jiǎn)單，在第一個(gè)<td>里面加上這么一句代碼：

就一切OK了。

下面這個(gè)頁面是皮膚開發(fā)結(jié)合比較好的例子（見圖1-5），大家可以思考一下如何實(shí)現(xiàn)。

圖1-5  皮膚開發(fā)結(jié)合比較好的頁面

1.6.2  隱藏工具圖標(biāo)

有些用戶不喜歡Portlet有太復(fù)雜的操作界面，要求去掉“大化”、“最小化”、“還原”等功能，當(dāng)然也就不顯示了。其實(shí)這非常容易，看如下一段代碼：

這段代碼是用來顯示“最小化”按鈕的，直接去掉就行了。而且，可以對(duì)此進(jìn)行編輯，包括添加什么顯示內(nèi)容，甚至添加什么新的事件等。同樣的道理，我們可以用相同的方法來操作“大化”和“還原”兩個(gè)圖標(biāo)。

1.6.3  個(gè)性化左側(cè)菜單

在項(xiàng)目實(shí)施中我發(fā)現(xiàn)這樣一個(gè)有趣的現(xiàn)象：IBM產(chǎn)品的忠實(shí)用戶，往往鐘情于IBM系列產(chǎn)品的一貫風(fēng)格。比如，某客戶幾年前實(shí)施的OA系統(tǒng)，“收件箱”、“發(fā)件箱”、“垃圾箱”等一系列菜單全部豎排在屏幕的左側(cè)，那么，客戶在實(shí)施Portal系統(tǒng)的時(shí)候，他就比較傾向于二級(jí)甚至一級(jí)菜單全在左側(cè)豎排的情況。其實(shí)實(shí)現(xiàn)很簡(jiǎn)單，只要我們不再調(diào)用原來用于顯示一級(jí)菜單和二級(jí)菜單的JSP頁面，一級(jí)菜單就會(huì)以豎排的方式自動(dòng)排列到屏幕的左側(cè)。那么我們要想美化這種菜單怎么辦呢？我們可以很容易地找到這個(gè)文件。

打開skin目錄，你會(huì)發(fā)現(xiàn)有這樣一個(gè)文件：LayeredContainer.jsp。不錯(cuò)，就是它，它首先初始化一個(gè)表格：

該表格左側(cè)就是三級(jí)菜單（如果在Default.jsp中不再調(diào)用PageBar的話，這就是二級(jí)菜單；如果連一級(jí)菜單PlaceBar都不調(diào)用了，那么它就是一級(jí)菜單了）。右邊則是整個(gè)Portal系統(tǒng)的body部分，顯示了所有的Portlet。不曉得IBM為什么要這樣安排，似乎有點(diǎn)不合理。不過，確實(shí)是在這里修改的，可能是把它看做一個(gè)容器了吧！在左側(cè)的表格部分，你可以像編輯普通的網(wǎng)頁一樣，只要稍微有些美工知識(shí)，就可以隨心所欲地制作出個(gè)性化的左側(cè)管理菜單了。

1.7  合理使用CSS樣式表 

看圖1-6所示的頁面效果，是不是非常漂亮。

圖1-6  頁面效果

其實(shí)實(shí)現(xiàn)很簡(jiǎn)單，看LayeredContainer.jsp文件，下面是它的表格代碼，稍微加一些CSS，就能實(shí)現(xiàn)這種效果了。比如皮膚右側(cè)漂亮的弧線，其實(shí)只要這么簡(jiǎn)單的一句話就OK了。

們?cè)賮砜纯茨畴娏镜氖醉摚ㄒ妶D1-7），這也是皮膚開發(fā)結(jié)合比較好的例子。請(qǐng)留意紅色框里面的內(nèi)容，里面的弧線、角度堪稱美工與主題皮膚開發(fā)人員黃金搭檔的一個(gè)好例子。

圖1-7  皮膚開發(fā)結(jié)合比較好的首頁

當(dāng)然，這需要素質(zhì)比較高的美工配合，也需要工程師在長(zhǎng)期的開發(fā)中仔細(xì)琢磨。

1.8  主題與皮膚的部署

假設(shè)我們現(xiàn)在已經(jīng)開發(fā)出一套主題和皮膚，那么如何將這套主題和皮膚部署到門戶系統(tǒng)呢？下面是詳細(xì)的方法。

1.8.1  皮膚的部署

 ①將皮膚文件傳送到這個(gè)路徑下（見圖1-8）：

/opt/IBM/WebSphere/AppServer/profiles/ installedApps\cell-name/wps.ear/wps.war/skins/html/

圖1-8  傳送皮膚文件

 ②以門戶超級(jí)管理員身份登錄，并依次單擊“Launch”（啟動(dòng)）→“Administration”（管理）→“WebSphere Portal”（Portal主門戶）→“Portal User Interface”（門戶界面）→“Themes and Skins”（主題和皮膚管理），如圖1-9所示。

圖1-9  設(shè)置主題和皮膚

 ③單擊“Add new theme”（添加新皮膚）按鈕，輸入皮膚的名稱和目錄名稱，如圖1-10所示。注意：目錄名稱必須與你上傳的目錄名稱一致，而且只填相對(duì)路徑。

圖1-10  添加新皮膚

 ④單擊“OK”按鈕，皮膚添加成功，如圖1-11所示。

圖1-11  皮膚添加成功

 ⑤如果需要將該皮膚設(shè)為系統(tǒng)的默認(rèn)皮膚，則可以選中該皮膚后，單擊右側(cè)的“Set as default portal skin”（設(shè)為默認(rèn)皮膚）按鈕，那么以后當(dāng)你沒有為主題或頁面上的Portlet指定皮膚時(shí)，系統(tǒng)將自動(dòng)調(diào)用該皮膚，如圖1-12所示。

圖1-12  設(shè)置默認(rèn)皮膚

1.8.2  主題的部署

 ①將主題文件上傳到這個(gè)目錄下（見圖1-13）：

/opt/IBM/WebSphere/AppServer/profiles/ installedApps\cell-name/wps.ear/wps.war/themes/html/

圖1-13  上傳主題文件

 ②單擊“Add new theme”（添加新主題）按鈕，并在接下來的界面中為主題指定名稱和所在目錄，如圖1-14所示。同皮膚的添加一樣，主題的目錄名稱也必須與主題的文件夾名稱一致。同時(shí)，還需要為該主題指定可能會(huì)用到的皮膚，如果希望使用默認(rèn)皮膚，則可以將已經(jīng)添加的皮膚設(shè)置為該主題的默認(rèn)皮膚，那么以后當(dāng)你沒有為該主題下的Portlet指定皮膚時(shí)，系統(tǒng)將默認(rèn)調(diào)用這套皮膚。

圖1-14  添加新主題并指定皮膚

 ③單擊“OK”按鈕，完成該主題的部署，如圖1-15所示。

圖1-15  完成主題的部署

 ④如果希望將該主題設(shè)置為系統(tǒng)默認(rèn)的主題，則可以選中該主題后，單擊右側(cè)的“Setas default portal theme”（設(shè)為默認(rèn)主題）按鈕，那么以后當(dāng)你沒有為門戶系統(tǒng)的頁面指定主題時(shí)，系統(tǒng)將自動(dòng)調(diào)用該主題，如圖1-16所示。

圖1-16  設(shè)置默認(rèn)主題

1.8.3  使用XmlAccess命令導(dǎo)入已經(jīng)創(chuàng)建好的頁面

 將主題與皮膚文件解壓到/opt/IBM/WebSphere/，如圖1-17所示。

 到/opt/IBM/WebSphere/主題目錄名/theme/目錄下確認(rèn)文件 updateJKThemePolicies.sh 具有正確的參數(shù)。

 在SSH命令行運(yùn)行命令 updateJKThemePolicies.sh，如圖1-18所示。

圖1-18  運(yùn)行命令

 為導(dǎo)入的頁面分配主題，選擇主題“JKEnterprises”，然后單擊“OK”按鈕，如圖1-19所示。

圖1-19  選擇主題

1.8.4  檢查新主題是否已經(jīng)起作用

 退出并重新以wpsadmin身份登錄Portal系統(tǒng)，單擊“管理”進(jìn)入管理界面，單擊“編輯頁面屬性”按鈕進(jìn)入頁面屬性頁，確認(rèn)該頁面的Theme（主題）所使用的主題是否為剛剛部署的新主題，如圖1-21所示。

圖1-20  應(yīng)用新主題與皮膚

確認(rèn)是否發(fā)生變化，如圖1-21所示。

圖1-21  應(yīng)用了新主題與皮膚的登錄界面

 登錄進(jìn)去后，發(fā)現(xiàn)主頁也已經(jīng)應(yīng)用了新主題與皮膚，如圖1-22所示。

圖1-22  應(yīng)用了新主題與皮膚的主頁

1.9  主題與皮膚的調(diào)試

調(diào)試主題與皮膚一般采用兩種方法：一是修改reload以便快速自動(dòng)裝載的方法，二是復(fù)制并添加主題與皮膚的方法。

1.9.1  自動(dòng)裝載法

我們知道，Portal系統(tǒng)的主題一切都是從Default.jsp文件開始初始化的，在通常的應(yīng)用服務(wù)器上都有一個(gè)reload開關(guān)，用來控制服務(wù)器是否自動(dòng)更新，IBM WebSphere Portal也不例外。如果打開這個(gè)開關(guān)（這個(gè)開關(guān)可以打開was，在管理控制臺(tái)里面設(shè)定，然后重啟機(jī)器），并設(shè)定了reload的時(shí)間，那么每隔一個(gè)時(shí)間段，系統(tǒng)會(huì)自動(dòng)讀取主題與皮膚文件。換言之，只要我們把這個(gè)時(shí)間差設(shè)得足夠小，就能立刻觀察到修改結(jié)果（注意：既然是從Default.jsp開始聚焦的，那么，如果修改了由Default.jsp調(diào)用的其他文件，比如BeginPage.jsp，而沒有修改Default.jsp，系統(tǒng)會(huì)默認(rèn)你沒有做任何修改，所以也就沒有任何改動(dòng)了）。同時(shí)我也想聲明一點(diǎn)，這種方法帶來的系統(tǒng)開銷特別大，只可用于開發(fā)環(huán)境，在生產(chǎn)環(huán)境中是萬萬不可用的！

1.9.2  復(fù)制法

復(fù)制法指的是從已經(jīng)有的主題文件夾里復(fù)制一份，然后在復(fù)制出的文件夾里修改相關(guān)的頁面代碼。這種方法適用于對(duì)已經(jīng)存在的主題僅做少量的修改，如果是做大量的修改，甚至對(duì)整個(gè)頁面結(jié)構(gòu)做大的改動(dòng)，那就沒必要使用這種方法了，因?yàn)樾薷捻撁婵蚣艿臅r(shí)間可能會(huì)遠(yuǎn)遠(yuǎn)大于重新開發(fā)的時(shí)間。復(fù)制出類似主題所在的文件夾后，重新命名新文件夾，然后將這個(gè)主題添加到系統(tǒng)，并指定給相應(yīng)的測(cè)試頁面。因?yàn)閺?fù)制出來的主題是第一次安裝，當(dāng)然會(huì)“重新編譯”了?？吹贸鰜?，這種方法比較不方便，只適用于特殊情況。

網(wǎng)站名稱：IBMWebSpherePortal6.0的主題與皮膚開發(fā)-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://bm7419.com/article42/iijhc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、服務(wù)器托管、ChatGPT、標(biāo)簽優(yōu)化、搜索引擎優(yōu)化、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)