Creating and Developing Custom Styles, Skins, and Messages in Oracle BI EE 11g This tutorial contains the following sections: Purpose Time to Complete Overview Scenario Software Requirements Prerequisites Deploying analyticsRes and Developing a Custom Skin Deploying a Custom Style Deploying Custom Messages Summary Resources Purpose In this tutorial, you learn how to deploy analyticsRes, and customize and develop skins, styles, and messages to change the overall appearance of Oracle Business Intelligence 11g (Oracle BI EE 11g). Time to Complete Approximately 1 hour. Overview Oracle BI EE 11g's UI is generated by using scripts and is therefore highly customizable. The "look and feel" is controlled by skins, styles, and messages. Skins define the UI chrome (visible graphic features) outside the home and dashboard area. A prime example of chrome or skins is a toolbar. Styles control the appearance of a dashboard and its various views, such as the font style and font color within a pivot table view. Messages store the text for various UI elements (for example, brand name). Oracle BI EE 11g is shipped with two default styles: blafp (browser look-and-feel plus) and fusion (FusionFX)—both found in the <ORACLE_HOME>/bifoundation/web/app/res directory. This tutorial uses these default styles to provide a starting point to build the custom style and skin that you want to deploy. Scenario In this tutorial, you use common customization examples. These examples are packaged with the name Eden (available from the link below). Software Requirements The following is a list of software requirements: Oracle BI EE 11.1 or later must be installed along with the default samples, Sample Sales Lite. Oracle WebLogic Server (WLS) 11.1 or later must be the default application server to work in tandem with Oracle BI EE. The eden zip file must be downloaded from this link. The testfile.zip must be downloaded from this link. A text editor (such as WordPad or Notepad) must be installed. Mozilla Firefox 3.6 or higher is the preferred browser. Caution: If you use Internet Explorer, you may not be able to see some of your style sheet changes. Prerequisites Before starting this tutorial, you should: Have the proper permissions for installing and configuring Oracle BI EE and WLS on your company's system Have downloaded the testfile.zip file to your local hard drive, unzipped, and copied the test.txt file to <ORACLE_INSTANCE>/bifoundation/OracleBIPresentationServicesComponent /coreappplication_obips1/analyticsRes on your local hard drive Creating and Developing Custom Styles, Skins, and Messages in Oracle... http://www.oracle.com/webfolder/technetwork/tutorials/obe/fmw/bi/b... 1 de 32 22/11/2011 19:50
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Creating and Developing Custom Styles, Skins, and Messages in Oracle BI
EE 11g
This tutorial contains the following sections:
Purpose
Time to Complete
Overview
Scenario
Software Requirements
Prerequisites
Deploying analyticsRes and Developing a Custom Skin
Deploying a Custom Style
Deploying Custom Messages
Summary
Resources
Purpose
In this tutorial, you learn how to deploy analyticsRes, and customize and develop skins, styles, and messages to change the
overall appearance of Oracle Business Intelligence 11g (Oracle BI EE 11g).
Time to Complete
Approximately 1 hour.
Overview
Oracle BI EE 11g's UI is generated by using scripts and is therefore highly customizable. The "look and feel" is controlled by
skins, styles, and messages. Skins define the UI chrome (visible graphic features) outside the home and dashboard area. A
prime example of chrome or skins is a toolbar. Styles control the appearance of a dashboard and its various views, such as
the font style and font color within a pivot table view. Messages store the text for various UI elements (for example, brand
name).
Oracle BI EE 11g is shipped with two default styles: blafp (browser look-and-feel plus) and fusion (FusionFX)—both
found in the <ORACLE_HOME>/bifoundation/web/app/res directory. This tutorial uses these default styles to provide
a starting point to build the custom style and skin that you want to deploy.
Scenario
In this tutorial, you use common customization examples. These examples are packaged with the name Eden (available from
the link below).
Software Requirements
The following is a list of software requirements:
Oracle BI EE 11.1 or later must be installed along with the default samples, Sample Sales Lite.
Oracle WebLogic Server (WLS) 11.1 or later must be the default application server to work in tandem with Oracle BI EE.
The eden zip file must be downloaded from this link.
The testfile.zip must be downloaded from this link.
A text editor (such as WordPad or Notepad) must be installed.
Mozilla Firefox 3.6 or higher is the preferred browser. Caution: If you use Internet Explorer, you may not be able to see
some of your style sheet changes.
Prerequisites
Before starting this tutorial, you should:
Have the proper permissions for installing and configuring Oracle BI EE and WLS on your company's system
Have downloaded the testfile.zip file to your local hard drive, unzipped, and copied the test.txt file to<ORACLE_INSTANCE>/bifoundation/OracleBIPresentationServicesComponent
/coreappplication_obips1/analyticsRes on your local hard drive
Creating and Developing Custom Styles, Skins, and Messages in Oracle... http://www.oracle.com/webfolder/technetwork/tutorials/obe/fmw/bi/b...
1 de 32 22/11/2011 19:50
Have downloaded the sample eden.zip file to your local hard drive, unzipped, and copied the Eden subordinate
directories to <ORACLE_INSTANCE>/bifoundation/OracleBIPresentationServicesComponent
/coreappplication_obips1/analyticsRes
Have the Home page as your starting page in Oracle BI EE. Depending on what has been configured as your starting
page, you might be presented with the Home page or My Dashboard page when you sign in to Oracle BI EE. If your
starting page is My Dashbaord, you can always navigate to the Home page by clicking the Home page link on the global
header.
Have some familiarity with creating analyses and dashboard pages by using Oracle BI EE
Note: Screen captures for this tutorial were taken in a Windows XP Professional environment; therefore, Start menu options
will vary.
Deploying analyticsRes and Developing a Custom Skin
Before you can begin to customize the appearance of Oracle BI EE, you must create a directory to house the customizations,
which can then be accessed by Oracle Business Intelligence Presentation Services (Presentation Services). Presentation
Services generates the UI for the Analysis Editor and dashboards, which visualize data from Oracle BI Server, the core
server behind Oracle BI. Various application servers have their own ways of exposing static directories. The steps below
allow you to expose the static directory within WLS by deploying it as a J2EE application.
Note: Default styles and skins located in the <ORACLE_HOME>/OracleBI1/bifoundation/web/app/res directory
should not be modified because potentially it can be overwritten with any upgrade or new installation.
Exposing a Static Directory in WebLogic Server
Deploying a Custom Skin
Exposing a Static Directory in WebLogic Server
1 . The default installation for Oracle BI EE 11g creates a default directory that can be used for customization. This
directory is <ORACLE_INSTANCE>/bifoundation/OracleBIPresentationServicesComponent/coreappplication_obips1/analyticsRes.
To expose this directory, you must open the WebLogic Administration Console. Open a browser window and in the
address bar, enter http://<hostname>:7001/console/login/LoginForm.jsp (for example, http://localhost:7001
/console/login/LoginForm.jsp). The WLS Login window appears.
Creating and Developing Custom Styles, Skins, and Messages in Oracle... http://www.oracle.com/webfolder/technetwork/tutorials/obe/fmw/bi/b...
2 de 32 22/11/2011 19:50
2 . Enter your username and password (for example, weblogic/welcome1) and click Login. The WLS Administration
Console appears.
Creating and Developing Custom Styles, Skins, and Messages in Oracle... http://www.oracle.com/webfolder/technetwork/tutorials/obe/fmw/bi/b...
3 de 32 22/11/2011 19:50
3 . Select Deployments from the Domain Structure pane on the left.
The "Summary of Deployments" pane appears on the right.
Creating and Developing Custom Styles, Skins, and Messages in Oracle... http://www.oracle.com/webfolder/technetwork/tutorials/obe/fmw/bi/b...
4 de 32 22/11/2011 19:50
4 . In the Change Center pane on the left (directly above the Domain Structure pane), click Lock & Edit.
All applications are made available for update within the table and the Install button is enabled. Note that the "Lock &
Edit" button is now disabled.
Creating and Developing Custom Styles, Skins, and Messages in Oracle... http://www.oracle.com/webfolder/technetwork/tutorials/obe/fmw/bi/b...
5 de 32 22/11/2011 19:50
5 . In the "Summary of Deployments" pane on the right, click the Control tab and then click Install, enabling you to
install a new web application. The Install Application Assistant pane appears.
Deploying a Custom Skin
After exposing the analyticsRes file to WLS successfully, you can now use this directory to develop custom skins.
To customize the skin for Oracle BI EE, perform the following steps:
1 . a. Log in to Oracle BI EE. Open a browser window and in the address bar, enter http://<hostname>:7001/analytics
(for example, http://localhost:7001/analytics).
b. Enter your username and password (for example, weblogic/welcome1) and click Sign In.
The image below displays the default skin associated with Oracle BI EE:
The image below displays the default skin associated with Eden:
Creating and Developing Custom Styles, Skins, and Messages in Oracle... http://www.oracle.com/webfolder/technetwork/tutorials/obe/fmw/bi/b...
6 de 32 22/11/2011 19:50
In your normal business environment, you would:
Navigate to <ORACLE_HOME>/OracleBI1/bifoundation/web/app/res.1.
Copy sk_blafp or sk_FusionFX to <ORACLE_INSTANCE>/bifoundation
Rename the copied skin file before performing any edits.3.
For this topic, you use the sk_Eden skin directory that you previously copied to<ORACLE_INSTANCE>/bifoundation/OracleBIPresentationServicesComponent
/coreappplication_obips1/analyticsRes and make modifications to cascading style sheets.
Creating and Developing Custom Styles, Skins, and Messages in Oracle... http://www.oracle.com/webfolder/technetwork/tutorials/obe/fmw/bi/b...
7 de 32 22/11/2011 19:50
c. Close the browser window.
2 . a. Navigate to <ORACLE_INSTANCE>/config/OracleBIPresentationServicesComponent
/coreappliation_obips1 and open instanceconfig.xml. At the bottom of the file but within the
<ServerInstance> grouping, enter the following code:
<UI><DefaultSkin>Eden</DefaultSkin></UI>
The file should look similar to this:
b. Save the file.
Note: This option directs Oracle BI Presentation Services (Presentation Services) to look for the customized (Eden)
skin rather than the default, Oracle BI EE skin.
3 . In the next few steps, you modify your skin and view the changes.
Navigate to <ORACLE_INSTANCE>\bifoundation\OracleBIPresentationServicesComponent
\coreapplication_obips1\analyticsRes\sk_Eden\b_mozilla_4. Because the instanceconfig.xml
file is now pointing to the Eden skin, the Oracle logo will be replaced with oracle_logo.png. If you review this
image file, you will notice that it is actually an Eden logo.
4 . Edit the sk_Eden skin and change the banner color. Open common.css (a cascading style sheet for common
elements found within Oracle BI EE) located in <ORACLE_INSTANCE>\bifoundation\OracleBIPresentationServicesComponent\coreapplication_obips1\analyticsRes\sk_Eden
\b_mozilla_4.
Search within the style sheet and locate the .HeaderBrandName class. Carefully change the font color from
#007700 (dark green) to #660066 (bright pink). Hint: Use the search feature to locate the class.
Creating and Developing Custom Styles, Skins, and Messages in Oracle... http://www.oracle.com/webfolder/technetwork/tutorials/obe/fmw/bi/b...
8 de 32 22/11/2011 19:50
5 . With the style sheet still open, locate the .HeaderBarSeparator class and change the color from #005500 (green)
to #660066 (bright pink).
Creating and Developing Custom Styles, Skins, and Messages in Oracle... http://www.oracle.com/webfolder/technetwork/tutorials/obe/fmw/bi/b...
9 de 32 22/11/2011 19:50
6 . To see the change, you must restart Presentation Services. Open a new browser window and in the address bar,
enter http://<hostname>:7001/em (for example, http://localhost:7001/em). The Oracle Enterprise Manager Fusion
Middleware Control Login window appears.
Creating and Developing Custom Styles, Skins, and Messages in Oracle... http://www.oracle.com/webfolder/technetwork/tutorials/obe/fmw/bi/b...
10 de 32 22/11/2011 19:50
b. Enter your username and password (for example, weblogic/welcome1) and click Login.
7 . a. In the Farm_bifoundation_domain pane on the left, expand Business Intelligence.
b. The Business Intelligence pane appears on the right. Select coreapplication in the Business Intelligence pane.
Creating and Developing Custom Styles, Skins, and Messages in Oracle... http://www.oracle.com/webfolder/technetwork/tutorials/obe/fmw/bi/b...
11 de 32 22/11/2011 19:50
8 . a. Click the Capacity Management and Availability tabs in the Change Center and then expand Presentation
Services.
b. Select coreapplication_obips1 and click Stop Selected.
9 . Click Yes in the confirmation window to stop Presentation Services.
Creating and Developing Custom Styles, Skins, and Messages in Oracle... http://www.oracle.com/webfolder/technetwork/tutorials/obe/fmw/bi/b...
12 de 32 22/11/2011 19:50
When the second confirmation window appears, click Close.
10 . Restart the Presentation Services. Select coreapplication_obips1 and click Start Selected.
Creating and Developing Custom Styles, Skins, and Messages in Oracle... http://www.oracle.com/webfolder/technetwork/tutorials/obe/fmw/bi/b...
13 de 32 22/11/2011 19:50
Note: Notice that a red downward-pointing arrow indicates that the service is stopped, whereas a green upward-
pointing arrow indicates the service is running.
11 . Click Yes in the confirmation window. Click Close when the confirmation window appears.
12 . To test your recent changes, log in to Oracle BI EE.
a. Open a browser window. If you do not immediately notice that the logo has changed from Oracle to Eden, refresh
your browser's cache.
Creating and Developing Custom Styles, Skins, and Messages in Oracle... http://www.oracle.com/webfolder/technetwork/tutorials/obe/fmw/bi/b...
14 de 32 22/11/2011 19:50
b. Log in as you did above—for example, enter your username and password as weblogic/welcome1.
13 . Click Sign In. Note the changes to the dashboard.
Note: If you do not see the changes to your dashboard, press Shift and Refresh ( ) to clear and refresh your
browser.
14 . Next, make changes to the Home page cascading style sheet. Open home.css located in<ORACLE_INSTANCE>\bifoundation\OracleBIPresentationServicesComponent
At the top of the style sheet, change the BODY class. Change the color from #006600 (dark green) to #ffff66
(yellow).
Creating and Developing Custom Styles, Skins, and Messages in Oracle... http://www.oracle.com/webfolder/technetwork/tutorials/obe/fmw/bi/b...
15 de 32 22/11/2011 19:50
15 . Next, make changes to the left pane of the Home page cascading style sheet. Locate the .BIEEHomeLeft class.
Change the right border color from #BFBFBF (gray) to #FF0033 (red).
Creating and Developing Custom Styles, Skins, and Messages in Oracle... http://www.oracle.com/webfolder/technetwork/tutorials/obe/fmw/bi/b...
16 de 32 22/11/2011 19:50
Save your changes and log out of Oracle BI EE (close your browser window or tab).
16 . To see the changes take effect, you must restart Presentation Services just as you practiced above.
a. Within Oracle Enterprise Manager Fusion Middleware Control, you navigate to coreapplication and select the
Capacity Management and Availability tabs in the Change Center, expand Presentation Services, select
coreapplication_obips1, and click Stop Selected.
Creating and Developing Custom Styles, Skins, and Messages in Oracle... http://www.oracle.com/webfolder/technetwork/tutorials/obe/fmw/bi/b...
17 de 32 22/11/2011 19:50
b. Restart Presentation Services. Select coreapplication_obips1, and click Start Selected.
17 . Open a browser window and log in to Oracle BI EE Analytics once again. Your dashboard, Home page, appears.
Review the modifications to your Home page.
As you continue to explore the changes that you can make to the skin by using the sk_Eden skin directory, note
that images for objects such as menu bars, can also be modified. Some of these images are located in<ORACLE_INSTANCE>/bifoundation/OracleBIPresentationServicesComponent