Shulou(Shulou.com)06/03 Report--

1.1getting started: Portal theme and skin development

To understand the theme of how to develop Portal, you must first understand the display process of IBM WebSphere Portal. IBM WebSphere Portal uses different Java Server Page (JSP), cascading style sheets (Cascading Style Sheet,CSS), and images to display portal pages. It uses JSP located in the themes, skins, and screens directories in the X:\ WebSphere\ AppServer\ installedApps\ YourNodeName\ wps.ear\ wps.war directory to construct portal pages, each of which contains html, wml, and chtml subdirectories, which WebSphere Portal uses to serve different clients, such as desktop browsers and mobile devices. Here we take the commonly used HTML theme development as an example to introduce the theme development of Portal.

The so-called Portal theme refers to the overall interface style and display mode of the system, including the call before the page initialization of the website, the logo logo, the first-level menu, the second-level menu, the copyright information under the website, and the logical processing after the page initialization is completed. To develop a set of themes, we can directly copy a folder containing each page file under themes/html, rename it and add it to the management interface and assign it to the relevant pages. In this folder, the default initial invocation file is Default.jsp, which draws a table and then invokes different files in each cell. The files called in IBM WebSphere Portal 6.0are: Head.jsp, AdminLinkBarInclude.jsp, ToolBarInclude.jsp, PlaceBarInclude.jsp, PageBarInclude.js, and extended PageBeginInclude.jsp, PageEndInclude.jsp. The following is described in detail.

1.1.1 Default.jsp

The initialization of themes and skins for Portal systems starts with Default.jsp, and the Default.jsp for default themes is located under wp_root\ app\ wps.ear\ wps.war\ themes\ html. This JSP contains other JSP for displaying titles, company logos, toolbars, and JSP for inserting content into the page. At the end of the Default.jsp, the screenRender JSP points to the page being processed, such as login or forgotpassword. Default.jsp initializes a table, which is divided into cells, where the content can be displayed directly or other JSP pages can be called. We introduce the pages used to develop themes in top-to-bottom and left-to-right order. The JSP described below is called in this order.

1.1.2 Head.jsp

Head.jsp is located in the top cell of the Default.jsp initialization table and is responsible for generating the title and embedding a link to the cascading style sheet file. It also defines the variables required to support BiDi (bidirectional) text. There is generally no substantive content on this page, except that developers like to initialize the title of the page here, usually by reading properties files, such as engine.properties under web_inf/. This arrangement is more flexible, and post-maintenance can be carried out directly in the properties file. Of course, if the user's page title is determined and no longer changed, it can also be fixed here, which is easier and easier to use than the tagged version published by IBM. If you have developed multiple sets of themes, and the page titles of these themes are the same (except for virtual portals, this is usually the case), you can put this file in the root directory of themes/html, and the Default.jsp of other themes can call this file.

1.1.3 AdminLinkBarInclude.jsp

AdminLinkBarInclude.jsp is mainly used to display three tags: "New Page", "Edit Page" and "assign Page permission". This file is called in the second row of the Default.jsp initialization table. Users use these three links to create and modify their own personalized pages, and portal administrators can also layout the style of the entire site and manage the permissions of page resources. However, in the development practice, you will find that most customers do not like these tags, they ask to put these tags on the management page, replaced by some welcome messages, such as: "so-and-so employee, welcome to login!" . This is also easy to achieve, as long as you modify the page a little bit. The way to do this is to add a tag to the system, and the Java file corresponding to this tag is responsible for reading out the name of the logged-in user and adding a Label in the same way as adding JSTL in JSP. When developing themes and skins, just apply this tag where the welcome message is displayed.

1.1.4 ToolBarInclude.jsp

ToolBarInclude.jsp is used to display welcome messages, as well as a link toolbar for users. What kind of link toolbar is displayed on the portal site depends on the user context. For example, logged-in users will see tools such as "my Portal", "Administration" (visible only to administrators), "Edit my profile", "logout" and so on. Logged-out users will see tools such as "forgot password", "login", "help" and so on. It is common practice to put the "manage" link into a Portlet, where welcome messages, or links to other resources, are displayed only if the logged-in user is an Portal system administrator.

1.1.5 PlaceBarInclude.jsp

PlaceBarInclude.jsp is used to display first-level menus, namely, "Home", "document Manager", "Company profile", "Business profile", etc., which belong to the top-level directory. On any one of the first-level menus, you can create a secondary menu through "New Page", and the created content will be stored in the database (originally using Cloundscape), or can be imported into any database supported by DB2, Oracle, etc. Portal.

1.1.6 PageBarInclude.jsp

PageBarInclude.jsp is used to display secondary menus. When you click any of the tabs in the first-level menu, the system will call the file and retrieve all the submenus of the menu, which are displayed under PlaceBar by default. The file is called in the third line of the Default.jsp initialization table, and if the file is not called, the first-level menu containing the submenu will be displayed on the left side of the screen when the first-level menu containing the submenu is called. This file is located under the skin folder, and the specific file operations will be described later in skin development.

1.1.7 File invocation relationship in Portal 6. 0

Now let's introduce the file invocation relationship in Portal 6.0and its function. Figure 1-1 shows a list of pages that Portal needs to call to develop a theme.

Figure 1-1 list of pages that Portal needs to call to develop a theme

The role of several of the main files is shown in figure 1-2.

Figure 1-2 the role of the file

1.2beginner: how to change the logo icon on a Portal system 1.2.1 how Default.jsp works

The initialization page of the portal system starts with Default.jsp. The Default.jsp file calls other different pages to display the contents of different areas on the master page. For example:

1.2.2 change to a logo

Open Default.jsp and you will see a table with a statement in the upper-left corner of the table that displays the logo icon for the default theme:

As mentioned above, the page of the entire Portal system is a large table initialized by Default.jsp, which is used to display or call different JSP. We draw a line in the top left corner of the large table to show the company's logo. The purpose of this statement is to insert a picture called Logo.gif into this cell.

You can change the file name to the name of any image you want to insert, just put the image in the .war / images/ directory. Almost all picture formats are supported here, you can put them at will, size, location and so on are up to you. At this point, you may ask: how to insert a Flash? Don't worry, it will be introduced below.

1.2.3 creating Logo with Flash Animation

Using Flash as a logo is a good idea, it can make the portal look richer and more vivid. However, Flash, that is, files in .swf format, cannot be inserted directly in this way, because browsers do not recognize it. To insert an animation, you must specify the corresponding driver for it, which you can generate through the following code.

Here is a movie called firstpagelogo.swf to make the company logo, its size is 510081, please put this movie file in the .war / images directory, restart the server and see if Flash already appears on the home page.

Careful readers may have found that after installing the patch that updates the system number KB912945, any active content that is used within a page or tags is not automatically activated and requires the user to click manually, and the Flash control is no exception. This is an IE non-secure update released by Microsoft to avoid patent infringement disputes with Eolas and the University of California. This is not Bug. However, after you install this update, you cannot interact with ActiveX controls on some web pages until you enable them. To enable the ActiveX control, click the control manually. This makes our portal always look like a false frame, like a scar. For example:

Isn't it ugly? It doesn't matter, we'll solve this problem in theme and skin development.

In fact, we have already called the JS file under this topic in head.jspf. Make sure you don't delete the reference statement, otherwise no other JS methods can be used, or the entire portal will be destroyed so easily. If it has been deleted, be sure to add the following statement.

Then open the flyout.js file and add the following functions.

Finally, insert the following code where you need to insert the Flash file.

Restart the server and check again to see if the virtual box is gone.

1.3Intermediate Advanced: develop personalized Portal themes 1.3.1 understand menus at all levels

Default.jsp calls the PlaceBarInclude.jsp file to display the first-level menu, and if there is a second-level menu below the first-level menu, then when you click on that first-level menu, Default.jsp will call PageBarInclude.jsp to display the second-level menu. Of course, you can not call this file, the system will call the LayerContainer.jsp file in the Portlet skin by default, using a three-level menu instead of a second-level menu. This is the menu personalization, this method makes the system level 3 and below menu displayed on the left side of the page, just like Windows Explorer as a tree directory, it is easier for users to accept.

Open the LayerContainer.jsp file and you will find that the content is very simple.

First of all, there is a label:

This means that if the menu is available, the following actions will be performed when you log in. To use this code, you must introduce Portal's tag library, and the specific process will not be repeated here. Next, a table is drawn to show the operations in it.

Coordination between left and right menus: if a total of more than a dozen first-level menus are defined, and only 8 can be displayed in a column, what about the rest of the menus? We have placed two small triangular icons here. If there are more menus on the right, the small icons will appear automatically, and when clicked, the rest of the menus will be displayed. The specific code is generic, so I won't repeat it here. It should be emphasized that the menu bar is only divided into two cases here: one is when it is selected, and the other is when it is not selected.

For example:

We first add a background picture, then put a picture on the left as a prefix, print the name of the menu bar in the middle, and another picture on the right as a suffix, so that the whole menu bar looks very beautiful.

Here's what happens when the toolbar is displayed:

The action here will enable authorized users to directly edit the corresponding Portal page by clicking on the image. However, according to my development experience, most users will hide this entry so as not to cause administrative confusion.

The final code is used to display system favorites. After logging in, you will find that there is an "my favorite" on the far right of the first-level menu, which is the favorites of the Portal system. You can add your favorite pages to your favorites through this entry, and then you can click here to go directly to the favorites page.

1.3.2 Personalized Toolbar

To get a personalized toolbar, modify the ToolBarInclude.jsp file, which provides the Portal system administrator with access to the management interface.

Here you can edit your own "profile" and change your name, password, etc., according to your personal user information. Further, welcome messages can be displayed here. For example, after logging in, Comrade Zhang San will display: "Welcome, Comrade Zhang San!" . To implement this function is actually very simple, see:

Of course, the corresponding tag libraries need to be introduced. Specific applications belong to ordinary JSP development, you can learn from the usual development experience to achieve.

1.3.3 Personalized Management label

The so-called personalization means that you can delete one or more administrative tags or add tags according to your preferences. This requires modification of the AdminLinkBarInclude.jsp file. For example:

This code is used to display the administrative tab of "New Page". By clicking this tab, you can create a sub-page for the current page. Similarly, you can personalize Edit Page and assign Page permissions. Of course, you can also hide the entrance.

1.4 Advanced Exploration: developing themes at Adaptive Resolution and themes under skin 1.4.1 1024 themes 768 Resolution

Just after installing the Portal system, the JSP files described above will be in the default .war / theme directory, you can create a new folder, copy these JSP files to this directory, and then add the theme under the management interface. The theme defaults to 10240768 resolution. You can develop multiple sets of themes. Note: please make full use of some public resources, because these topics may use the same copyright information, so you can put PageEnd.jsp under themes/entention and let all topics call this file.

Of course, to be on the safe side, you can write death in the outermost table of Default.jsp like this:

1.4.2 themes at 800 '600 resolution

It is very simple to develop the theme at 800cm 600 resolution. The code is as follows:

Just overwrite this table to the outermost table in the original Default.jsp file. Note: in each file called by Default.jsp, there may be tables, if some of these tables are more than 800width, or if the width of two side-by-side tables is more than 800, please adjust it appropriately; otherwise, the table inside will support the table to both sides, resulting in table incoordination.

1.4.3 1024 and 800 adaptive themes

It's even easier to develop adaptive themes! Please set a variable w, first write a JavaScript script, which is used to read the browser resolution of the client. If it is 800, then assign the variable to walled 800; if it is 1024, it is assigned to walled 1024. In this way, the width of the Default.jsp initialization table is replaced by w, and the length and width of the cells called on the specific JSP file are multiplied by 1 or 0.78.

1.5 master tricks: change the login mode of the Portal system 1.5.1 login from the home page

We need to develop a Portlet with WSAD and write an agent in JSP to submit the user credentials to the authentication Action that comes with the system. This Portlet can be designed as follows:

/ / remind the user to enter a user name and password without login (see figure 1-3)

Figure 1-3 login interface

After the user clicks the Login button, the user name and password are submitted to the Action that comes with the system.

/ / if you are already logged in, you can display the user's common information. For example, read the user's Lotus mailbox and display several emails and so on (see figure 1-4)

Figure 1-4 shows the email message

You can even use url-mapping to customize several pages and enter the business system directly from the home page, so that you can block the "login" tag in the upper right corner of the Portal page. You may ask: what should I do if I want to use the page that comes with the system again? It doesn't matter, you can also type http://hostname:9081/wps/myportal in the browser, or simply enter a wrong user name and password, and the system will naturally take you back to the page that comes with the system.

1.5.2 reject the login page that comes with the system

However, in the way described above, this may happen: when the user name or password is wrong, the system will return to the login box that comes with the system. To avoid this, you can seal off the switch.

The login page that comes with the system is the login.jsp file under .war / screen/html. You can delete everything in this file and add this sentence:

Does this take you back to the home page? Yes, as you might think, this blocks the login page that comes with the system. If you have the wrong user name or password, or if you call directly through myportal, the system will take you back to the login screen on the home page and re-enter it. We can extend from here, for example, the expiration of Session, the modification of users' personal information, and so on, we can block this interface in this way.

1.6 Portlet skin development 1.6.1 change title background picture

There are already several skins in the system under .war / skin/html. Open any of these folders and you will find the Control.jsp file. This file initializes a small table with two rows: the first line displays the title of Portlet, followed by maximize, minimize, and edit buttons; the second line is Portlet's body, which displays the contents of Portlet. Generally speaking, users like to put decorations such as a small icon before or after the Portlet name, and we can operate directly in this cell, which conforms to the basic HTML syntax. Of course, if the name of Portlet is fixed, we can also replace it with pictures, just like developing menus with Portal themes. In fact, as long as you judge the Portlet title, if it matches, call the corresponding image, or separately develop a skin for the Portlet of this title, which can be used to call a special image, or directly display it, or serve as a background.

To change the background image of the Portlet title is very simple, add this line to the first one:

It's all OK.

The following page is an example of a good combination of skin development (see figure 1-5). You can think about how to implement it.

Figure 1-5 A page with better skin development

1.6.2 hide tool icon

Some users do not like that Portlet has too complex interface, asking for the removal of "maximize", "minimize", "restore" and other functions, of course, it will not be displayed. In fact, this is very easy, look at the following code:

This code is used to display the "minimize" button, just remove it. Also, you can edit this, including what display content to add, and even what new events to add. By the same token, we can manipulate the "maximize" and "restore" icons in the same way.

1.6.3 personalize the left menu

In the implementation of the project, I found such an interesting phenomenon: loyal users of IBM products often fall in love with the consistent style of IBM products. For example, in the OA system implemented by a customer a few years ago, a series of menus such as "inbox", "outbox" and "trash can" are all arranged vertically on the left side of the screen, so when the customer implements the Portal system, he is more inclined to have the second-level or even first-level menus all vertically arranged on the left side. In fact, the implementation is very simple, as long as we no longer call the JSP page that was originally used to display first-level menus and second-level menus, the first-level menus will be automatically arranged vertically to the left side of the screen. So what do we do if we want to beautify this menu? We can find this file easily.

Open the skin directory and you will find such a file: LayeredContainer.jsp. Yes, that's it. It initializes a table first:

On the left side of the table is the three-level menu (if you no longer call PageBar in Default.jsp, this is the second-level menu; if you don't even call the first-level menu PlaceBar, it's the first-level menu). On the right is the body section of the entire Portal system, showing all the Portlet. It seems a little unreasonable that I don't know why IBM made such an arrangement. However, it is true that it was modified here, maybe it is regarded as a container! In the table section on the left, you can create a personalized left management menu as long as you have a little art knowledge, just like editing an ordinary web page.

1.7 rational use of CSS stylesheets

Look at the page effect shown in figure 1-6 to see if it is very beautiful.

Figure 1-6 page effect

In fact, the implementation is very simple, look at the LayeredContainer.jsp file, the following is its table code, add a little bit CSS, you can achieve this effect. For example, the beautiful arc on the right side of the skin is actually OK with such a simple sentence.

Let's take a look at the home page of a power company (see figure 1-7), which is also an example of a better combination of skin development. Please pay attention to the contents of the red box, where the arcs and angles are a good example of a golden partnership between artists and theme skin developers.

Figure 1-7 skin development with better combination of the home page

Of course, this requires the cooperation of high-quality artists, and it also requires engineers to ponder it carefully in the long-term development.

1.8 deployment of themes and skins

Assuming we have now developed a set of themes and skins, how can we deploy this set of themes and skins to the portal system? Here are the detailed methods.

1.8.1 deployment of skin

① transfers the skin file to this path (see figure 1-8):

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

Figure 1-8 transfer skin files

② logs in as the Portal Super Admin and clicks "Launch" (launch) → "Administration" (→) "WebSphere Portal" (Portal main portal) → "Portal User Interface" (portal interface) → "Themes and Skins" (theme and skin management), as shown in figure 1-9.

Figure 1-9 sets the theme and skin

③ clicks the "Add new theme" button and enters the name and directory name of the skin, as shown in figure 1-10. Note: the directory name must be the same as the directory name you uploaded, and only fill in the relative path.

Figure 1-10 add new skin

④ clicks the "OK" button, and the skin is added successfully, as shown in figure 1-11.

Figure 1-11 skin added successfully

⑤ if you need to set the skin as the default skin of the system, you can select the skin and click the "Set as default portal skin" button on the right, then later when you do not specify a skin for the theme or Portlet on the page, the system will automatically call the skin, as shown in figure 1-12.

Figure 1-12 sets the default skin

1.8.2 deployment of the theme

① uploads the theme file to this directory (see figure 1-13):

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

Figure 1-13 upload theme file

② clicks the "Add new theme" button and specifies the name and directory for the theme in the next interface, as shown in figure 1-14. Like the addition of skins, the directory name of the theme must be the same as the folder name of the theme. At the same time, you also need to specify the skin that may be used for the theme, if you want to use the default skin, you can set the added skin as the default skin for the theme, then when you do not specify the skin for the Portlet under the theme, the system will call this set of skin by default.

Figure 1-14 add a new theme and specify the skin

③ clicks the "OK" button to complete the deployment of the theme, as shown in figure 1-15.

Figure 1-15 complete the deployment of the theme

④ if you want to set the theme as the default theme of the system, you can select the theme and click the "Setas default portal theme" (set as the default theme) button on the right, then when you do not specify a theme for the page of the portal system, the system will automatically call the theme, as shown in figure 1-16.

Figure 1-16 sets the default theme

1.8.3 use the XmlAccess command to import a page that has been created

Extract the theme and skin files to / opt/IBM/WebSphere/, as shown in figure 1-17.

Go to the / opt/IBM/WebSphere/ topic directory name / theme/ directory to verify that the file updateJKThemePolicies.sh has the correct parameters.

Run the command updateJKThemePolicies.sh from the SSH command line, as shown in figure 1-18.

Figure 1-18 run the command

Assign a theme to the imported page, select the theme "JKEnterprises", and then click the "OK" button, as shown in figure 1-19.

Figure 1-19 Select theme

1.8.4 check to see if the new theme has worked

Log out and log in to the Portal system as wpsadmin again, click "manage" to enter the management interface, click the "Edit Page Properties" button to enter the page property page, and confirm whether the theme used by the Theme (theme) of the page is the new theme just deployed, as shown in figure 1-21.

Figure 1-20 apply new themes and skins

Confirm that there is a change, as shown in figure 1-21.

Figure 1-21 applies the login interface of the new theme and skin

After logging in, it is found that the home page has also applied the new theme and skin, as shown in figure 1-22.

Figure 1-22 Home page with new themes and skins applied

1.9 theme and skin debugging

There are generally two ways to debug themes and skins: one is to modify reload for quick automatic loading, and the other is to copy and add themes and skins.

1.9.1 automatic loading method

As we know, the theme of Portal system is initialized from Default.jsp file. There is a reload switch on the usual application server to control whether the server is updated automatically, and IBM WebSphere Portal is no exception. If you turn on this switch (this switch can be turned on was, set in the administrative console, and then restart the machine), and set the reload time, then every other time period, the system will automatically read the theme and skin files. In other words, as long as we set this time difference small enough, we can immediately observe the result of the change (note: since the focus starts from Default.jsp, then if you modify other files called by Default.jsp, such as BeginPage.jsp, but not Default.jsp, the system will default that you have not made any changes, so there will be no changes). At the same time, I would also like to declare that this method brings a lot of system overhead, can only be used in the development environment, is absolutely not available in the production environment!

1.9.2 replication method

The copying method refers to making a copy from an existing theme folder and then modifying the relevant page code in the copied folder. This method is suitable for making only a small number of changes to an existing theme, and if you make a lot of changes, or even make major changes to the entire page structure, it is not necessary to use this method. because the time to modify the page frame may be much longer than the time to redevelop. After copying the folder where the similar theme is located, rename the new folder, then add the theme to the system and assign it to the appropriate test page. Because the copied theme is installed for the first time, it will of course be "recompiled". It can be seen that this method is relatively inconvenient and is only suitable for special cases.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.