Creating a Look-and-Feel

Download Docs

Site Map

Glossary

e-docs > WebLogic Platform > WebLogic Portal > Development Guide > Creating a Look-and-Feel

Development Guide

Creating a Look-and-Feel

WebLogic Portal provides two powerful mechanisms for managing the look and feel of your portals: skins and layouts. Skins are graphics and HTML style settings that define the visual style of a portal; for example color, fonts, and icons. Layouts are HTML-based matrixes into which portlets can be placed. The WebLogic Portal platform provides a ready-made structure for these components can be created, managed, and provided to users across applications.

This section shows you how to create skins and layouts for a portal. Some prerequisite knowledge about creating cascading style sheets (CSS), creating graphics, and defining HTML tables is required.

This section includes information on the following subjects:

Portal Look-and-Feel Structure

When you see a portal in a Web browser, you see a single, unified Web page. That portal is made up of many JSPs. For example, in addition to the page content, a portal may use separate JSPs for the header, footer, and vertical and horizontal navigation bars.

Each JSP used in a portal's structure contains the coding necessary to implement part of the portal's overall look and feel. For example, each JSP can contain references to the CSS and to graphics for determining a portal's skin; and the portal's main content page contains the logic necessary to implement which layout is chosen for the portal.

When you create a portal in the E-Business Control Center with the Portal Wizard, the portal template BEA provides is called baseportal. One of the functions of this template is to use a predefined set of JSPs that define the look-and-feel structure to create the new portal. In this section, the procedures for creating skins and layouts are presented in the context of the baseportal structure, which is also used for the Avitek Financial Portal Example provided with WebLogic Portal.

Using Skins

A skin is a collection of files that includes a cascading style sheet (.css file) and a directory of images that define the look and feel of a portal. Every button, banner, portlet header, background color, and font characteristic is determined by the CSS and the graphics. Skins also include a thumbnail graphic of the skin for preview purposes.

This section includes information on the following subjects:

Creating Skins

To enable seamless switching between skins in a portal, the CSS and graphics for one skin must be named identically to the CSS and graphics in the other skins, as shown in Figure 10-1.

Figure 10-1 Different Skins Applied to a Portal Created with the baseportal Template

Note: Any content graphics that appear on the page, such as ads and graphics in portlets, are stored either in a content management system or in images subdirectories beneath portlet directories. However, portlet title bar graphics and background colors are controlled by the skin, as shown in Figure 10-1.

Creating skins is simply a matter of creating or modifying CSS and graphics files, with the same names as those used in other skins, but under a different directory. Creating skins also involves creating a thumbnail graphic for preview purposes. Use your favorite graphics tool to create and modify skin and thumbnail graphics.

When creating graphics for a skin, be aware that larger graphics slow down page loading in a browser.

Skins Provided by BEA

WebLogic Portal includes a set of predefined skins that are used when you create a portal with the Portal Wizard. These skins are located in:

<BEA_HOME>\weblogic700\common\templates\webapps\portal\baseportal\
j2ee\framework\skins

These can be used as templates to create entirely new skins.

Storing Skins

The next section describes the directory structure in which you must store new skins. To make skins available to a portal, store the CSS and graphics in the directory structure that is referenced by the metadata in a portal. Table 10-1 shows where to store the necessary pieces that make up a skin.

The skin thumbnail graphic is the only part of the skin not stored on the server. The thumbnail is for previewing a selected skin in the E-Business Control Center.

Table 10-1 Where to Store Skins Resources

Resource	Location
Skin thumbnail graphic	<BEA_HOME>\user_projects\your_domain\beaApps\ portalApp-project\library\portal\skins\skin_folder
CSS file	<BEA_HOME>\user_projects\your_domain\beaApps\portalApp\ your_portal\framework\skins\skin_folder\css
Skin graphics	<BEA_HOME>\user_projects\your_domain\beaApps\portalApp\ your_portal\framework\skins\skin_folder\images

Making Skins Available

Making skins available in your portal involves using the E-Business Control Center to add the skins to a portal definition, synchronizing the updated portal definition to the server, and applying the skins to the portal with the WebLogic Portal Administration Tools.

Procedures for making skins available for administration are found in the WebLogic Portal Administration Guide. See "Administering Portal and Portlet Attributes" at http://download.oracle.com/docs/cd/E13218_01/wlp/docs70/admin/frmwork.htm.

Using Layouts

A layout is a JSP. It combines simple HTML formatting with simple JSP tags that define sections of a page where portlets are placed. A layout also includes a thumbnail graphic representation of itself for preview purposes. Figure 10-2 shows thumbnail representations of layouts that are provided with WebLogic Portal.

Figure 10-2 Thumbnails of Default Layouts Provided with WebLogic Portal

This section includes information on the following subjects:

Creating Layouts

This procedure shows you how to create a new layout for an existing portal.

To view an existing layout, open the following file in a text editor: your_portal\framework\layouts\threecolumn\template.jsp, as shown in Figure 10-3.

Figure 10-3 Source view of the "threecolumn" layout

To create a new layout:

Create a text file called template.jsp and store it in an appropriate layout folder. See Storing Layouts.

Note: The layout name is determined by the name of the folder in which template.jsp is stored.

On the first line, enter:

<%@ taglib uri='ren.tld' prefix='layout' %>

On the second line, insert the following tag and enter the names of the sections (placeholders) in which portlets will be placed in the layout. Put the placeholder names in a list of comma-separated values in the placeholders attribute, as shown in the following:
```
<layout:placePortletsinPlaceholder placeholders='<name1>,<name2>,<name3>,<name4>' />
```
where <name*> is a unique section name, as shown in Figure 10-4.

Figure 10-4 Adding new layout placeholder names
In the HTML body of the layout, insert the following tag for each placeholder you defined in the previous step. These tags determine where portlets will be placed in the layout.
```
<layout:render section='<name>'/>
```
where <name> is one of your placeholder names. You can insert these tags in any valid HTML (though frames are not supported); you are not restricted to putting them in tables. Figure 10-5 shows the tags placed in table cells.

Figure 10-5 Inserting placeholders into the HTML fragment

Note: The <layout:placePortletsinPlaceholder> and <layout:render> tags perform all the logic of retrieving and placing portlets in your layout and remembering which portlets are put in which placeholders.
Save the file.
Create a thumbnail graphic representation of your layout. This thumbnail provides the layout preview in the E-Business Control Center and in the WebLogic Portal Administration Tools when you select the layout name in the interface. Using a graphics editor, copy and modify an existing thumbnail graphic, as shown in Figure 10-6. Save the graphic as two separate files: one called thumbnail.gif and the other layout_name.gif, where layout_name is the name of the layout folder.
A set of predefined layouts and thumbnail graphics are located in subdirectories under the following directory:
<BEA_HOME>\weblogic700\common\templates\webapps\portal\
baseportal\j2ee\framework\layouts
Figure 10-6 Creating a layout thumbnail

The next section describes the directory structure in which you must store new layouts.

Storing Layouts

To make a layout available in a portal, store the new layout and the thumbnail graphic in a specific directory structure in two different locations. Also, use two different names for the thumbnail graphic, as described in the previous section. Table 10-2 shows the names and locations of the files.

Table 10-2 Where to Store Layout Resources

Resource	Location
Layout thumbnail graphic: layout_name.gif	<BEA_HOME>\user_projects\your_domain\beaApps\ portalApp-project\library\portal\layouts\layout_folder The layout_name must be the same as the layout_folder.
Layout thumbnail graphic: thumbnail.gif	<BEA_HOME>\user_projects\your_domain\beaApps\portalApp\ your_portal\framework\layouts\layout_folder
template.jsp	<BEA_HOME>\user_projects\your_domain\beaApps\ portalApp-project\library\portal\layouts\layout_folder and <BEA_HOME>\user_projects\your_domain\beaApps\portalApp\ your_portal\framework\layouts\layout_folder The name of the layout_folder is used as the name of the layout.

Making Layouts Available

Making layouts available in your portal involves using the E-Business Control Center to add the layout to a portal definition, synchronizing the updated portal definition to the server, and applying the layout to the portal with the WebLogic Portal Administration Tools.

Procedures for making layouts available are found in the WebLogic Portal Administration Guide. See "Administering Portal and Portlet Attributes" at http://download.oracle.com/docs/cd/E13218_01/wlp/docs70/admin/frmwork.htm.