Portal theme and skin development tell the truth or common jsp development, but heavy use ibm's own tag library, develop them seem too much trouble. However, if you deep insight with the theme, skin-related calls this relationship between the number of documents, to use a can with ease. Here is the author of the item from the experience of a large number of points summed up experience and contribute in the hope that with a large share.
Tired to read meaning excellent break under, QQ space, the U.S. text, non-mainstream, online diary, Funny SMS, SMS wishes, popular text messaging, fun ah
In this article I would like to introduce the following aspects websphere portal theme and skin development:
1, Basic Introduction: What is the Portal theme and skin development?
2, intermediate development: how to replace the Portal system, logo icon;
3, intermediate, Advanced: Developing the theme of personalization;
4, Advanced Exploration: Development of adaptive resolution of the theme and skin;
5, master blows: Change the login Portal system;
6, Portal development profile of the skin.
First, the primary entry: Portal theme and skin development:
To learn how to develop portal theme, we must first understand the websphere portal display process. IBM WebSphere Portal to use a different Java Server Page (JSP), Cascading Style Sheets (Cascading Style Sheet, CSS) and images to display the portal page. It is used in the X: \ WebSphere \ AppServer \ installedApps \ YourComputerName \ wps.ear \ wps.war directory themes, skins, and screens directory to construct the portal JSP page. Each of these directories contains html, wml and chtml subdirectories, WebSphere Portal will use them for different services to clients, such as desktop browsers and mobile devices. We here in the usual way to use the html under the theme of development, for example, introduced the theme of Portal development.
JSP used to display the portal page flow: This article describes the default theme defined Default.jsp, Head.jsp, AdminLinkBarInclude.jsp, ToolBarInclude.jsp, PlaceBarInclude.jsp, PageBarInclude.js and extending out PageBeginInclude.jsp, PageEndInclude. jsp content and process. The following brief these jsp. Note: This section is the most junior of the development, you have to make sense of these presentations, you must have a certain basic jsp, css base and tag base is best done with development.
All screens are from the Default.jsp start gathering. For the default theme Default.jsp in wp_root \ app \ wps.ear \ wps.war \ themes \ html. The JSP contains the other is used to display title, company logo, JSP, and the toolbar can be used to implant position and page content JSP. At the end of the Default.jsp, screenRender JSP tag select the requested screen (such as login or forgotpassword). The following description of the jsp is called in this order respectively.
Head.jsp generate title and embedded links pointing to style sheet files. It also defines support for BIDI (bidirectional) text required variables. The contents of JSP will be described here. You can also <title> </ title> will die here, the title of portal sites, which IBM announced more than a way to label written to the easier and easier to use. If you have developed sets of themes, and this sets the theme of the page title, if the same words (except for virtual portals, the general is like this), you can put several files into the themes / html root directory, other topics The default.jsp have to call the file on it.
AdminLinkBarInclude.jsp mainly used to display the "New Page", "Edit Page", "distribution license page" three tab
ToolBarInclude.jsp displays a welcome message and provides users with links to the toolbar. Portal What links displayed on the toolbar depending on user context. For example, the logged in user to see the "My Portal", "management" (to make the administrator can see), "Edit my 'profile'," "off" and other like links; the cancellation of the users to see " Forgot your password "," login "," help "like the link.
PlaceBarInclude.jsp used to display a menu, that is, "Home," "Document Manager", "Company Overview", "Business Profile", etc., are top-level directory, you at any level, are available through the menu " New Page "to create a secondary menu, you create the content will be stored in the database (the original use of the cloundscape), you can put it into the db2, oracle, etc. to any database supported by a portal, this content In my next article in detail, I will not mention one by one.
Used to display two menu when you click a menu in any of the tags, the system will call the file, and retrieve all the sub-menu of the menu, the default display in PlaceBar below.
Second, intermediate development: how to replace the Portal system, logo icon;
1, Default.jsp works:
We look at this example, Default.jsp Portal system will probably be the default page into a table:
Table -1: Default.jsp overall effect is called
PageBegin: page generation ago used to display the prompt text, such as: Portal system is loading, please wait ... ...
Portal system main components: the Portal page to display the details;
PageEnd.jsp used to show what the page is produced. For example, companies and other copyright information.
Table -2: Portal system calls the body of relationship:
Logo part, in default call
My portal menu, call in the ToolBar
Personalized menu, call in AdminLink
Portal of the Body part of each portlet to display and high-level 3 menu.
The end of the page, to display the company's copyright information.
2, for a logo:
Open Default.jsp, you will open to a table, in the form of the upper-left corner, there is such a statement, the default theme to display the Logo logo:
<Td width = "100%" valign = "top" align ="<%= bidiAlignLeft%> "nowrap>
<Img align = "absmiddle" alt = '<wps:text key="title" bundle="nls.engine"> Portal Title </ wps: text>' title = '<wps: text key = "title" bundle = "nls.engine" /> 'src =' <wps:urlFindInTheme file="logo.gif"/> '>
<a href="#wpsMainContent"> <img width = "1" height = "1" border = "0" src ='<%= wpsBaseURL%> / images / dot.gif 'alt =' <wps: text key = "link.skiptocontent" bundle = "nls.engine" /> 'title =' <wps:text key="link.skiptocontent" bundle="nls.engine"/> '>
As already introduced, the Portal system is divided into pages by the Default.jsp a large table, to display or call a different jsp. We are in the most upper left corner of this great form of a <td>, to display the company logo. This statement is that within the cell to insert a picture, called Logo.gif.
Understand? You can name this file renamed any of you want to insert a picture of the name, just this picture into .war / images / directory on it. Here to support virtually all image formats, you can put any size, location, etc. You have the final say. Here, you may have thought: Well, I insert a Flash support it? Do not worry, the following will be referred.
3, using flash as logo:
Using Flash for the logo is a good note, it can make your portal look rich, lively number. However, Flash, that is. Swf file format is not directly inserted through this way, because our browsers can not recognize it. To insert an animation, we must develop the appropriate drive location. You can use the following code for it and generate:
<td width="510" border="0" cellpadding="0" cellspacing="0" height="81" valign="middle" align="left">
<Object classid = "clsid: D27CDB6E-AE6D-11cf-96B8-444553540000" codebase = "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab # version = 5,0,0, 0 "width =" 510 "height =" 81 ">
<Param name = movie value ="<%= wpsBaseURL%> / images / firstpagelogo.swf ">
<param name=quality value=high>
<Embed src = "firstpagelogo.swf" quality = high pluginspage = "http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type = "application / x-shockwave-flash" width = "510" height = "81">
Insert name here in a video made for the firstpagelogo.swf company logo, his size is 510 * 81, set the movie file on .war / images directory, restart the server to see if your home page, is not already there?
3, intermediate, Advanced: development of personalized Portal Theme
1, understanding, development at all levels of the menu;
Default.jsp call PlaceBarInclude.jsp file to display a menu, if a menu, there are two menu below, then when you click the one menu is, Default will call PageBarInclude.jsp to display the secondary menu. Of course, you can no longer call the file, then the system will default skin called Portlet inside LayerContainer.jsp file, used to replace the 2 menu 3 menu, this is the personalized management of the menu to the left.
Open both files, you will find that the content is very simple. Consider the following list:
l First of all, by such a tag:
<wps:if navigationAvailable="yes" screen="Home,LoggedIn,LoggedOut">
I mean, the menu is available, then when you log into the future will do the following. Use this code, must introduce Portal tag library, the specific process will not go into here. Next, draw a table to display inside the operation. Form the content presented below.
l coordination around the menu: If you define a total of a dozen a menu, and a bar can only display 8, how do the rest of the menu? Here we placed a small icon of two triangles, if the right side there are more menu, small icons will automatically appear when you click, they will show the remaining menu. Specific code is generic, not repeat them here. We need to emphasize: the menu bar where support is divided into two situations: First, the case is selected, one for the selected case, namely:
<table> here to select the menu to display the menu bar under the display. </ Table>
</ Wps: if>
<table> here to display the menu is not selected under the menu bar is displayed. </ Table>
</ Wps: if>
<Td Background ="<%= wpsBaseURL%> / images/title_back01.jpg "height =" 30 ">
<Img border = "0" src ='<%= wpsBaseURL%> / images/b01.jpg 'alt = "">
<A href ='<%= wpsNavModelUtil.createSelectionChangeURL (wpsNavNode )%>'>
<% = Com.ibm.wps.model.LocaleHelper.getTitle ((com.ibm.portal.Localized) wpsNavNode, com.ibm.wps.engine.RunData.from (pageContext.getRequest ()). GetLocale ())% >
<Img border = "0" src ='<%= wpsBaseURL%> / images/b01.jpg 'alt = "">
We preferred to add a background image, and then put a prefix on the left, middle to print the name of the menu bar, then put a picture behind the make suffix, so the whole menu bar looks very beautiful.