Skip navigation.
Downloads | Product Documentation | Support

Using WSRP with WebLogic Portal

# Applying a Look-and-Feel to a Remote Portlet

The look and feel of a remote portlet is what determines such aspects as the portlet's physical boundaries, color, font type and size, images. The look-and-feel of a remote portlet is not linked to a Producer. Therefore, you have the option of modifying the portlet to best suit your needs; for example, to match the appearance of the portal in which the portlet resides.

This section briefly describes the basics of remote portlet look-and-feel and directs you to more detailed information in the WebLogic Workshop online help system. This section contains information on the following subjects:

- The Portlet Look-and-Feel Components
- The Look-and-Feel File
- Skins and Skeletons
- Themes
- Where to Find Look-and-Feel Components
- Look-and-Feel Reference

# The Portlet Look-and-Feel Components

Portlet look-and-feel architecture primarily involves the following resources:

- The look-and-feel file
- Skins and Skeletons, which contain:

- `.css` Files
- Image files
- JavaScripts
- JSPs

- Themes, which are subsets of skins and skeletons

In addition to these portlet-level components, at the portal level, additional components include layouts, navigation menus, and shells. All of these components are described in greater detail in Look & Feel Architecture in the WebLogic Workshop online help system, at:

>     http://edocs.bea.com/workshop/docs81/doc/en/portal/buildportals/ifLFArch.html

This section will be concerned only with the look-and-feel file, skins, skeletons, and themes.

# The Look-and-Feel File

A portal look-and-feel stems from a single `XML` file (that has a `.laf` extension). This file determines the name of the look-and-feel and points to the skeleton and skin that the look-and-feel will use. This simple, extensible framework makes it easy for portal administrators and end users to completely change the appearance of a portal by selecting a different look-and-feel.

# Skins and Skeletons

The look and feel of a portlet is determined by that portlet's skins and skeletons, which contain the information needed to render the desired appearance.

- Skins determine the "look" portion of look-and-feel. They are comprised of the cascading style sheet (`.css`) files, images (`.gif` and `.jpg` files), and JavaScripts.
- Skeletons represent the "feel" of a portlet. They are comprised of JSP files that determine the physical boundaries of portal components such as header, footer, book, page, portlet, and portlet title bar.

Skins and skeletons used by a portlet are determined by the `.laf` selected for a portal desktop.

## The .css File (Skins)

`.css` files are part of a portlet's skin. These files contain formatting instructions for such visual portlet components as background colors, font size, style, and type, border style, and so on. WebLogic Workshop comes with a number of `.css` files already available. You can use these as is or modify them as you deem necessary. You can also or create your own `.css` files. If you create your own `.css` file, you will need to store it in the appropriate location, which is in the `/css` directory under the `framework/` directory for a specific project; for example:

>     wsrpMonitortest/framework/skins/mySkin/css

Where `mySkin` is the individual skin name.

To make a `.css` available to a skin, simply include the `.css` file in the `/css` directory under that skin's folder; for example, if you want to make the file `portlet.css` available to the skin "classic", you would ensure that it is stored in the directory `skins/classic/css`, as shown in Figure 4-1.

Figure 4-1 .css File in the File Tree

Once you've added the file to the /css directory, you need to register it in the `skins.properties` file, which you can find in root directory of the specific skin; for example, `myProject``/framework/skins/classic/skin.properties` (where `myProject` represents the project name).

## Image Files (Skins)

Image files contain the graphic elements that will appear on your portlet. These images are for the portlet interface and include buttons, arrows, logos, and so on. These are not images used in the portlet content. Image files are usually `.gif` or `.jpg`/`.jpeg` format as the compressed size of these files makes rendering them a relatively painless process. To make an image file available to a skin, simply include the image file in the `/images` directory under that skin's folder; for example, if you want to make the file `arrow.gif` available to the skin "classic", you would ensure that it is stored in the directory `skins/classic/images.`

## JavaScripts (Skins)

The JavaScript (`.js`) files regulate such portlet activity as mouse rollovers, button actions, and menu behavior. You can use the JavaScripts included with WebLogic Workshop or you can create your own. If you create your own, you will need to store it in the appropriate directory (see Where to Find Look-and-Feel Components) and register it in the `skins.properties` file, which you can find in root directory of the specific skin; for example, `myProject``/framework/skins/classic/skin.properties` (where `myProject` represents the project name).

## JavaServer Pages (Skeletons)

In portlets, JSPs determine the portlet's physical boundaries and those of their title bar. At the portal level, when a portal desktop is rendered, the skeleton JSPs for each portal component (in conjunction with any related classes) perform their logic and insert the resulting HTML into the correct hierarchical locations of the HTML file.

You can use the JSPs included with WebLogic Workshop or you can create your own. If you create your own, you will need to store it in the appropriate directory (see Where to Find Look-and-Feel Components) and register it in the `skeleton.properties` file, which you can find in root directory of the specific skin; for example, `myProject``/framework/skeletons/classic/skeleton.properties` (where `myProject` represents the project name).

## Skin and Skeleton Reference

For more information on creating and using skins and skeletons, please refer to Look-and-Feel Reference. This section contains a complete reference to the documents in the WebLogic Workshop online help system that will guide you through the process of creating and implementing skins and skeletons.

# Themes

Skins and skeletons can be applied to portlets in subsets called themes. Themes let you give your portlets (as well as books and pages) a different look-and-feel than the rest of the portal desktop. Themes are identified by a `.theme` file. This XML file identifies the theme and populates a drop-down menu from which portlet developers can select a theme to use (Figure 4-2).

Figure 4-2 Theme Menu in WebLogic Workshop

At its most granular, a theme is a collection of files that contain look-and-feel instructions for a portal component, such as a portlet. You must store these files in a subdirectory, which resides under the skin to which you want to make the theme available. You must give the subdirectory the same `name` XML attribute as the `.theme` file that will be used to identify the theme to a portlet user.

When you select a theme for a portlet, the portal framework looks for theme subdirectories under the main skin and skeleton directories used by the selected look-and-feel. If it finds the theme subdirectory specified, it will render the portlet based upon the instructions within that subdirectory. If it cannot find the specific subdirectory, values for the parent skin and skeleton will be used.

## Themes Reference

For more information on creating and using themes, please refer to Look-and-Feel Reference. This section contains a complete reference to the documents in the WebLogic Workshop online help system that will guide you through the process of creating and implementing themes.

# Where to Find Look-and-Feel Components

The files used to set the look-and-feel of a remote portlet reside under the project directory under which that portlet resides; for example:

>     <Application_Home>/myProject/

Where `myProject/` is the specific project directory

Table 4-1 lists the actual folder names.

Table 4-1 Look-and-Feel Component File Locations

Component | Located in
Look-and-feel file | `framework/markup/lookandfeel`
Skins | `framework/skins`
Skeletons | framework/skeletons
Themes | `framework/themes` (XML definition file)
`.css` Files | framework/skins/`mySkins`/css Where `mySkin` is the specific skin that will use the `.css` file.
Image files | framework/skins/`mySkins`/images Where `mySkin` is the specific skin that will use the image.
JavaScripts | framework/skins/`mySkins`/js Where `mySkin` is the specific skin that will use the JavaScript.

# Look-and-Feel Reference

All aspects of portal and portlet look-and-feel are documented in the WebLogic Workshop online help system. Use the following links to locate this documentation.

## General Information on Look-and-Feel

- Creating Look & Feels

>     http://edocs.bea.com/workshop/docs81/doc/en/portal/buildportals/ifLF.html

- Look & Feel Architecture

>     http://edocs.bea.com/workshop/docs81/doc/en/portal/buildportals/ifLFArch.html

- The Portal User Interface Framework

>     http://edocs.bea.com/workshop/docs81/doc/en/portal/buildportals/fwPortal1.html

- How Look & Feel Determines Rendering

>     http://edocs.bea.com/workshop/docs81/doc/en/portal/buildportals/fwPortal2.html

## Cascading Style Sheets (.css Files)

- Style Sheet Class Reference

>     http://edocs.bea.com/workshop/docs81/doc/en/portal/buildportals/fwPortalStyleRef.html

## Skins

- Creating Skins and Skin Themes

>     http://edocs.bea.com/workshop/docs81/doc/en/portal/buildportals/ifLFSkinsThemes.html

## Skeletons

- Skeleton Reference

>     http://edocs.bea.com/workshop/docs81/doc/en/portal/buildportals/   fwPortalStyleRef.html

- Creating Skeletons and Skeleton Themes

>     http://edocs.bea.com/workshop/docs81/doc/en/portal/buildportals/ifLFSkeletons.html

## Themes

- Creating Skins and Skin Themes

>     http://edocs.bea.com/workshop/docs81/doc/en/portal/buildportals/ifLFSkinsThemes.html

- Creating Skeletons and Skeleton Themes

>     http://edocs.bea.com/workshop/docs81/doc/en/portal/buildportals/ifLFSkeletons.html