This section describes how to create a WebLogic Portal Look and Feel and deploy it as an Administration Console extension. A Look and Feel extension enables you to replace some or all of Oracle's logos, colors, and styles in the Administration Console.
The following types of files are used to create the look and feel of a console extension:
Cascading stylesheets (CSS). Most of the changes (and the easiest changes) are done by changing CSS.
Images. These may be referenced from CSS files or by the HTML generated by skeleton JSPs or content JSPs. If you change an image but keep it the same size and use the same name, you do not have to change the CSS or JSPs that reference it.
Skeleton Java Server (JSP) files.
JavaScript files. Client side behaviors come from JavaScript files. Oracle recommends that you do not change these files.
All of the Look and Feel files (CSS, skeleton, JavaScript and images) are subject to change with each release. Therefore, when you upgrade to a new release of WebLogic server, you may have to update your custom Look and Feel.
Figure 5-1 illustrates the process. The steps in the process and the results of each are described in Table 5-1
. Subsequent sections detail each step in the process.
Figure 5-1 Administration Console Extension Development Overview
Table 5-1 Rebrand the Administration Console: Tasks and Results
Step | Description | Result |
---|---|---|
WebLogic Server includes a Look and Feel template that you can use as a starting point. Expand the template to access the files. |
A set of Look and Feel files you can modify. |
|
Replace images and styles with your own to create a custom Look and Feel for the console. |
A Look and Feel that contains your logos and styles. |
|
3. (Optional) Use a Message Bundle for Your Look and Feel |
If you want to change the text messages displayed in the banner, login, and login error pages, create your own message bundle and modify the pages to use messages from your bundle. |
Localized properties files that contain your messages. |
The NetUI Extension file describes the locations of files and directories in your Look and Feel. |
|
|
Archive the Look and Feel extension in a WAR file and copy it to your domain's See Chapter 9, "Archiving and Deploying Console Extensions." |
When the Administration Console starts in your domain, it uses the Look and Feel extension that is in the domain's |
Your WebLogic Server installation includes a Look and Feel template that you can use as a starting point. Expand the template, and replace the images and styles with your own. There are two files:
build-new-laf.xml
This file is an ant script that creates the initial set of Look and Feel files for an extension. This script expands the Look and Feel files from laftemplate.zip
(see below) and renames directories to correspond to the name of your extension.
laftemplate.zip
This template contains the initial set of Look and Feel files that build-new-laf.xml
expands.
If you do not already have Apache Ant installed (or available in an IDE), install and configure it. See The Apache Ant Project at http://ant.apache.org/
.
From a command prompt, change to the following directory:
WL_HOME/server/lib/console-ext/templates
where WL_HOME
is the directory in which you installed WebLogic Server.
Run Ant on build-new-laf.xml
using the following syntax:
ant -f build-new-laf.xml -Dname=ext-name -Ddir=root-dir
where ext-name
is the name of your extension and root-dir
is your console extension development directory, for example:
ant -f build-new-laf.xml -Dname=myLAF -Ddir=c:\src\laf-ext
The files from laftemplate.zip
are extracted into root-dir
.
Once the template is expanded, you can modify or replace the files to create your own Look and Feel. See the following:
Making more complex changes to the WebLogic Server Look and Feel, such as changing the layout of portal components and navigation menus, requires a more advanced knowledge of WebLogic Portal Look and Feels. For more information, see "User Interface Development with Look & Feel Features" in Portal Development Guide for Oracle WebLogic Portal.
To overwrite the sample Look and Feel's image files with your image files, do the following
To replace the logo in the Administration Console banner, save your own logo file as root-dir
/framework/skins/
ext-name
/images/Branding_WeblogicConsole.gif
.
To prevent the need to resize the banner frame, do not change the size of the image.
To change the background color of the banner, replace the following image file with one of the same size but that contains a different color: root-dir
/framework/skins/
ext-name
/images/titlebar_bg.png
To replace the ALT text for the logo, change the value of the login.wlsident
key in the global.properties
file (and any bundle_
locale
.properties
files). See Use a Message Bundle for Your Look and Feel.
To make more complex modifications, you can change the JSP and styles that render the banner. The root-dir
/framework/skeletons/
ext-name
/header.jsp
file determines the contents of the Administration Console banner. Within header.jsp
, the style console-header-logo
specifies the name and location of an image file that is used as the banner background. The style console-title
specifies the name and location of the logo file. Both of these styles are defined in root-dir
/framework/skins/
ext-name
/css/console.css
.
Note:
You must precompile JSPs before deploying the extension.The login page asks users to enter a user ID and password. Table 5-2 summarizes the files that determine the appearance of the login page.
Table 5-2 Files for the Login and Login Error Page Appearance
File Name and Path (Under root-dir/ ) |
Description |
---|---|
css/login.css |
Defines fonts and spacing for the login page. |
framework/skins/ext-name/images/Branding_Login_WeblogicConsole.gif
framework/skins/ext-name/images/Login_GC_LoginPage_Bg.gif
framework/skins/ext-name/images/Loginarea_Background.png
|
Images for the login page. See Table 5-4 |
login/LoginForm.jsp |
Render the login page. If you want to change the text that these pages display, modify the |
The Administration Console uses several cascading style sheets (CSS) to specify its fonts and colors, as well as other properties such as spacing. To change these styles, open the style sheet and change the style's definition.
Table 5-3 summarizes the Look and Feel styles defined in the style sheets. The styles themselves are not described in the table, because the style names in the style sheets are adequately descriptive, for example,
background-color
.
Table 5-3 CSS Style Sheets Used for Look and Feel Extensions
File Name and Path (Under root-dir/ ) |
Styles |
---|---|
css/changemgt.css |
Styles for the Change Center ("Lock and Edit") panel. |
css/content.css |
The following styles:
|
css/forms.css |
Styles for defining forms, such as configuration and monitoring page content areas. |
css/jndinavtree.css |
Styles to define the navigation tree in the JNDI browser. |
css/login.css |
Styles for the login page. |
css/navtree.css |
Styles to define the navigation tree in the Domain Structure panel. |
css/quicklinks.css |
Styles for the How Do I... panel. |
css/systemstatus.css |
Styles for the System Status panel. |
framework/skeletons/ext-name/css/layout.css
|
Default styles for the grid on which the other user-interface items are arranged. |
framework/skins/ext-name/css/console.css
|
The following styles:
|
framework/skins/ext-name/css/general.css
|
The following styles:
|
framework/skins/ext-name/css/menu.css.css
|
Styles to define menu margins, padding, backgrounds, colors, etc. |
framework/skins/ext-name/css/window.css
|
The following styles:
|
Several images are used in conjunction with the style sheets to create effects such as rounded and shaded corners on tabs and buttons. These are summarized in Table 5-4 and Table 5-5
. To change any of these effects, you can substitute your image for the default image, using the same file name; or you can reference a different image file from the style sheet.
Note:
Two tables show the association of the style sheets and the images. Table 5-4root-dir
/
and Table 5-5root-dir
/framework/skins/
ext-name
. There is no special significance that the files are grouped this way except to improve the readability of the tables.Other images than the ones listed in the tables are also used in the console, and some are referenced in the style sheets. However, these tables only show those that are used to create formatting effects, as mentioned above. Browse root-dir
/framework/skins/
ext-name
images/
and root-dir
/images/
to see the other images.
Table 5-4 Images Used With Style Sheets (Under root-dir/
)
Effect | CSS File | Image file |
---|---|---|
The surface of a button. See also use of this image with |
css/forms.css |
images/button_bg_n.png |
The surface of a button when the mouse pointer rolls over it. See also use of this image with |
css/forms.css |
images/button_bg_mo.png |
The surface of a button when it is pressed down. See also use of this image with |
css/forms.css |
images/button_bg_md.png |
The background of the Welcome box that prompts for Username and Password when first starting WebLogic Server. |
css/login.css |
framework/skins/ext-name/images/
Loginarea_Background.png
|
The surface of the Log In button in the Welcome box. See also use of this image in |
css/login.css |
images/button_bg_n.png |
The surface of a button when the mouse pointer rolls over it. See also use of this image in |
css/login.css |
images/button_bg_mo.png |
The surface of a button when it is pressed down. See also use of this image in |
css/login.css |
images/button_bg_md.png |
The background of the Login page. |
css/login.css |
framework/skins/ext-name/images/
Login_GC_LoginPage_Bg.gif
|
Table 5-5 Images Used With Style Sheets (Under root-dir
/framework/skins/
ext-name/
)
Effect | CSS File | Image file |
---|---|---|
Title bar at top of panels |
css/window.css |
images/titlebar_bg.png |
Background for entire console. Visible at top of console behind logo. |
css/console.css |
images/r_bg_global.png |
The left edge of a tab. The top half of the image is used for unselected tabs and the bottom half is used for selected tabs. |
css/menu.css |
images/tab_left.gif |
The main surface of a tab. The top half of the image is used for unselected tabs and the bottom half is used for selected tabs. |
css/console.css |
images/tab_right.gif |
The corner of a shadow behind a panel. With default settings, it is at the top and bottom right corners. |
css/window.css |
images/shadow-corners |
The right side of a shadow behind a panel. |
css/window.css |
images/shadow-right.gif |
The bottom of a shadow behind a panel. |
css/window.css |
images/shadow-bottom.gif |
In the banner and login pages, the Administration Console uses JSTL tags to load text messages from localized properties files. For example, to display the window title in LoginForm.jsp
:
The <fmt:setBundle basename="global" var="current_bundle" scope="page"/>
tag in LoginForm.jsp
sets the current message bundle to global
.
This JSP tag looks in WEB-INF/classes
for files with the following name pattern:
bundle[_locale].properties.
The default properties file for this bundle is global.properties
in WL_HOME
/server/lib/consoleapp/webapp/WEB-INF/classes/console.jar
. If the Web browser or operating system specifies a different locale, then the JSP tag would load global_locale.properties
.
The <fmt:message key="window.title" bundle="${current_bundle}" />
tag opens the global.properties
file and renders the text that is identified by the window.title
key:
window.title=Oracle WebLogic Server Administration Console
If you want to change these messages, you can create your own properties files and modify the JSP tags to use your bundle. See Chapter 4, "Creating a Message Bundle."
Table 5-6 describes the text messages that the banner, login, and login error pages display.
Table 5-6 Messages in Banner and Login Pages
File (Under root-dir/ ) |
Message Key and Value |
---|---|
login/LoginForm.jsp |
window.title=Oracle WebLogic Server Administration Console login.wlsident=Oracle WebLogic Server Administration Console login.welcome2=Log in to work with the WebLogic Server domain login.username=Username: login.password=Password: login.submit=Log In |
framework/skeleton/mycompany/header.jsp |
window.title=Oracle WebLogic Server Administration Console |
A NetUI Extension file, named netuix-extension.xml
, is the deployment descriptor for your Look and Feel. It contains the names and locations of the files in your Look and Feel, and it causes the Administration Console to replace its Look and Feel with yours. See netuix-extension.xml.. For more information about this file, see the NetUI Extensions Schema Reference
.
Example 5-1 netuix-extension.xml
<?xml version="1.0" encoding="UTF-8"?> <weblogic-portal-extension xmlns="http://www.bea.com/servers/portal/weblogic-portal/8.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.bea.com/servers/portal/weblogic-portal/8.0 netuix-extension-1_0_0.xsd"> <provider-info> <title>My LAF</title> <version>1.0</version> <description>My LAF.</description> <author>Me</author> <support-url>My URL</support-url> </provider-info> <portal-file>/console.portal</portal-file> <desktop-extension> <look-and-feel-content title="myLAF" definitionLabel="myLAF" markupName="myLookAndFeel" skin="myLAF" skin-path="/framework/skins" skeleton="myLAF" skeleton-path="/framework/skeletons" default-window-icon="window-icon.gif" default-window-icon-path="images/"/> </weblogic-portal-extension>
To modify this file:
Open the file in a validating XML editor (recommended) or a text editor.
In the <provider-info>
element, change the information to describe your Look and Feel, developer contact and support URL.
The information in this element has no programmatic significance. It is intended to help your technical support team keep track of your software modifications.
In the <look-and-feel-content>
element:
In the title
, skin
, and skeleton
attributes, replace the myLAF
value with the name of the directory you chose in step 3 in Expand the Look and Feel Template.
In the definitionLabel
and markupName
attributes, replace the myLAF
value with the name of the directory you chose in step 2 or use some other string. These attributes are required by the portal framework, but are not used in a Look and Feel extension.
For instructions on how to archive and deploy the extension, see Chapter 9, "Archiving and Deploying Console Extensions.".