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:
- 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://download.oracle.com/docs/cd/E13226_01/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 (.gifand.jpgfiles), 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.
|
Where |
|
|
Where |
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
http://download.oracle.com/docs/cd/E13226_01/workshop/docs81/doc/en/portal/buildportals/ifLF.html
http://download.oracle.com/docs/cd/E13226_01/workshop/docs81/doc/en/portal/buildportals/ifLFArch.html
http://download.oracle.com/docs/cd/E13226_01/workshop/docs81/doc/en/portal/buildportals/fwPortal1.html
http://download.oracle.com/docs/cd/E13226_01/workshop/docs81/doc/en/portal/buildportals/fwPortal2.html
Cascading Style Sheets (.css Files)
http://download.oracle.com/docs/cd/E13226_01/workshop/docs81/doc/en/portal/buildportals/fwPortalStyleRef.html
Skins
http://download.oracle.com/docs/cd/E13226_01/workshop/docs81/doc/en/portal/buildportals/ifLFSkinsThemes.html
Skeletons
http://download.oracle.com/docs/cd/E13226_01/workshop/docs81/doc/en/portal/buildportals/ fwPortalStyleRef.html
http://download.oracle.com/docs/cd/E13226_01/workshop/docs81/doc/en/portal/buildportals/ifLFSkeletons.html
Themes
http://download.oracle.com/docs/cd/E13226_01/workshop/docs81/doc/en/portal/buildportals/ifLFSkinsThemes.html
http://download.oracle.com/docs/cd/E13226_01/workshop/docs81/doc/en/portal/buildportals/ifLFSkeletons.html
