This chapter provides information about customizing the WebCenter Content user interface with a custom Oracle Application Development Framework (Oracle ADF) skin and with Oracle Metadata Services (MDS) seeded customizations.
This chapter includes the following sections:
Section 6.1, "About Customizing the WebCenter Content User Interface"
Section 6.2, "Installing and Configuring Oracle JDeveloper 11.1.2.4.0 Studio Edition"
Section 6.3, "Setting up the WccAdfCustomization Application"
Section 6.4, "Defining a Custom Skin and Generating WccAdfCustomSkin.jar"
Section 6.5, "Defining MDS Seeded Customizations and Generating WccAdfCustomization.mar"
Section 6.6, "Applying Customizations to the Installed Environment"
You can customize the WebCenter Content user interface in two areas:
Custom Oracle ADF skin
MDS seeded customizations
To customize the WebCenter Content user interface, you need to know how to use Oracle JDeveloper to define a skin and to define seeded customizations. To create a custom Oracle ADF skin, you should be familiar with the JDeveloper skin editor, HTML, and cascading style sheets.
Note:
You must be an administrator for the domain in which you want to implement the custom skin.The overall steps to customize the WebCenter Content user interface follow:
Install and configure Oracle JDeveloper 11.1.2.4.0 Studio Edition.
Set up the WccAdfCustomization application.
Define a custom skin and generate WccAdfCustomSkin.jar
.
Define seeded customizations and generate WccAdfCustomization.mar
.
Apply customizations to the installed environment.
You can use Oracle JDeveloper 11.1.2.4.0 Studio Edition to customize the Oracle WebCenter Content user interface. After you download and install JDeveloper, you can configure it to support defining seeded customizations.
Installing and configuring JDeveloper for customizing the WebCenter Content user interface includes these tasks:
For more information about these tasks, see Chapter 2, "Installing and Configuring Oracle JDeveloper."
You can use the prebuilt WccAdfCustomization application to define and package your WebCenter Content user interface customizations.
To set up the WccAdfCustomization application:
Copy the following file from the installed environment to the machine where you run JDeveloper:
WCCUI_MW_HOME/oracle_common/webcenter/wccadf/WccAdfCustomization.zip
Unzip WccAdfCustomization.zip
.
This creates a WccAdfCustomization
folder that contains the WccAdfCustomization application.
Open the WccAdfCustomization application in JDeveloper:
Select Open Application….
In the Open Application(s) dialog box, navigate to the WccAdfCustomization
folder created in a step 2.
Select WccAdfCustomization.jws.
Click Open.
Configure the RIDC connection URL and the administrator user name:
In the Application Navigator, under the Application Resources panel, expand Descriptors and then ADF META-INF.
Open the connections.xml
file in the editor.
Replace wccadmin
with the real administrator user name. For example:
<Contents>weblogic</Contents>
Replace example-cs
with the real host name where your Oracle WebCenter Content Server instance is running.
Update the IDC port number, 4444
, if your Content Server listens on a different IDC port. For example:
<Contents>idc://cshost.example.com:4444</Contents>
Click Save.
Run the WccAdfCustomization application:
In the Application Navigator, expand ViewController and then Web Content.
Right-click index.html and choose Run.
This starts the JDeveloper integrated Weblogic Server and deploys the WccAdfCustomization application to the server.
When the browser displays the index.html page, click the link on that page to navigate to the WebCenter Content user interface.
Log in as the weblogic
user
Verify that the WebCenter Content user interface works as expected.
Stop the WccAdfCustomization application:
Click the red Terminate button to stop the WccAdfCustomization application.
(Optional) You can stop the IntegratedWebLogicServer application as well.
In the WccAdfCustomization application, there is a prebuilt custom skin called wcc-custom-skin
. You can define your CSS customizations for the WebCenter Content user interface in this custom skin. The skin is located in JDeveloper at ViewController > Web Content > skins > wcc-custom-skin > wcc-custom-skin.css
or, in the file system, at ViewController/public_html/skins/wcc-custom-skin/wcc-custom-skin.css
.
The application also includes an images
folder in which you can place your custom images. This folder is located at ViewController > Web Content > images
or, in a file system, at ViewController/public_html/images/
.
For universal changes, such as changing the logo and the title in the branding bar, you do not have to create a custom skin. Instead, you can update the application configuration directly and modify the values for customBrandingLogo
and customBrandingTitle
. For more information, see "User Interface Commands" in the WebLogic Scripting Tool Command Reference.
When you save a change you made to the skin, you must refresh the user interface to see the results.
Note:
You may need to clear the browser's cache to see changes in the user interface, particularly when the change relates to images.You can design and test customizations for the following items within the custom skin:
Branding bar logo
Default font size
wcc-skin
selectors
The following sections provide instructions and examples for customizing skins. For details about how to use the JDeveloper skin editor, see the Skin Editor User Guide.
You can customize the branding bar logo in the WebCenter Content user interface with your own images.
To customize the branding bar logo with your own images:
Create a local directory to hold any images for your customization.
Under the wccadf project, right-click Web Content and choose New.
In the New Gallery window under Categories, click General, and under Item, click Folder. Click OK.
In the Folder Name field, specify a name, such as images
, and then click OK.
From the file system, locate the newly created folder, and copy any custom images you want to use into the folder:
WccAdf/public_html/images
On the Skin Editor Design tab, select the following:
Style Classes/Miscellaneous/.AFBrandingBarLogo
In the Property Inspector under Common, click the menu (far right) for Background Image and choose Edit.
Locate and select the new logo image in the folder you created in step 1, and click OK.
Adjust the width and height properties as necessary to accommodate the image (by default, .AFBrandingBarLogo
has a height of 2.5 em and a width of 119 px).
From the File menu, choose Save.
To see the generated selectors and rules, switch to the Source tab. For example:
.AFBrandingBarLogo { background-image: url("../../images/my-company-logo.png"); height: 3.2em; width: 128px; }
You can specify your own default font size for the WebCenter Content user interface.
To customize the default font size:
On the Skin Editor Design tab, select the following:
Global Selector Aliases/Font/.AFDefaultFont:alias
In the Property Inspector under Font/Text, enter a new value for Font Size.
From the File menu, choose Save.
To see the generated selectors and rules, switch to the Source tab. For example:
.AFDefaultFont:alias { font-size: 14px; }
If you want to customize selectors, you must add and modify their rules directly on the Source tab for the .css
file for the custom skin.
You can find selector information on which to base your customizations in the following files:
wcc-styles.css
: This file contains all of the WebCenter Content selectors and aliases (those with prefix 'Wcc
'). In addition, this file has a section near the top that lists selectors, global aliases, and tips on skin customizations related to the branding bar and color scheme.
wcc-skin.css
: This file contains WebCenter Content extensions that override base ADF definitions. No new selectors are defined in this file.
It is easiest to copy the rule where you find it in one of these files, paste it into the Source tab for the .css
file for your custom skin, and then modify the rule there.
Note:
You cannot modify selector rules directly in thewcc-styles.css
and wcc-skin.css
files.
The .css
file for your custom skin is an extension to the wcc-styles.css and wcc-skin.css
files. The rules you specify override the associated rules in those files.
To customize the small logo on the Document Properties page:
In the upper left corner of the Skin Editor, click the Extended Skins menu and choose wcc-styles.css.
On the Source tab, use the Search bar to find WccSmallBrandingBarLogo. If necessary, use the down arrow to the right of the search bar to search for subsequent instances.
Select the lines containing the name and the associated definition, right-click the selection, and choose Copy:
.WccSmallBrandingBarLogo { display: block; width: 19px; height: 1.3em; background-image: url("/adf/resources/wcc/images/company-small-logo.png"); background-position: center; background-repeat: no-repeat; }
If the wcc-custom-skin.css
file is open in the editor, click its tab to switch to that file. If it is not open, locate it on the Application Navigator tab, and double-click it to open it in the editor:
ViewController > Web Content > skins > wcc-custom-skin > wcc-custom-skin.css
Click the Source tab, position the cursor in the file where you want the definition, and right-click and choose Paste to paste the rule.
Specify the path to the logo image file, and adjust the width and height properties as necessary to accommodate the image. Delete any line whose definition you do not want to override as part of the custom extension. For example:
.WccSmallBrandingBarLogo { width: 24px; height: 1.25em; background-image: url("../../images/my-company-small-logo.png"); }
From the File menu, choose Save.
When you are done customizing the skin, stop the application. From the Run menu, choose Terminate, and then choose WccAdf (Running on IntegratedWebLogicServer).
In JDeveloper, you can deploy the custom skin for the WebCenter Content user interface to package it in the WccAdfCustomSkin.jar
file.
On the Application Navigator tab, right-click the ViewController project, and from the Deploy menu, choose WccAdfCustomSkin.
Click Finish. This generates the WccAdfCustomSkin.jar
file under ViewController/deploy/
.
The WebCenter Content user interface has defined a seeded customization layer, called customer
, for customers to define seeded customizations for the user interface. Customers can define one or multiple layer values for this customer
layer. In most cases, one layer value would be sufficient. However, if multiple layer values are defined, the customizations for those values are applied in the order in which they are defined.
You can define values for the customer
layer in the adf-config.xml
and CustomizationLayerValues.xml
files.
In the Application Navigator, under the Application Resources panel, expand Descriptors and then ADF META-INF.
Open the adf-config.xml
file in the editor.
On the Source tab, find the <customerCustomizationLayerValues>
tag and edit its value. For example:
<customerCustomizationLayerValues>demo</customerCustomizationLayerValues>
On the Overview tab, choose MDS in the left panel.
Click the link Configure Design Time Customization Layer Values on the right side.
This opens the CustomizationLayerValues.xml
file in a new editor window. Locate the customer
layer, and define the same layer value or values for the layer. For example:
<cust-layer name="customer" id-prefix="c"> <cust-layer-value value="demo" display-name="Demo" id-prefix="d"/> </cust-layer>
Click Save All.
In the customer
layer, you can define multiple seeded customizations for each layer value.
To define seeded customizations for each layer value:
Start JDeveloper with the Customization Developer role.
The first time the WccAdfCustomization application is opened in JDeveloper with the Customization Developer role, the following error message might be reported in the Messages log window:
Error applying Customization Context changes for the application WccAdfCustomization. Please close and re-open the application
If you see this error message, click Save All, exit JDeveloper, and start it again with the Customization Developer role.
For each layer value of the customer
layer, do the following steps:
Go to WccAdfCustomization - Customization Context window, select a specific layer value in the customer
tip layer, and then click Save All.
Under the ViewController
project, locate WccAdfLibrary.jar (usually the last library), expand it, and then expand wcc.
All the WebCenter Content user interface pages (.jsf
) and page fragments (.jsff
) are listed there.
For each page or page fragment that you want to define seeded customizations, take the following actions, in order:
Open it in the editor.
Define seeded customizations on the page or page fragment, including but not limited to these customizations:
Hide or remove certain UI components.
Move UI components around.
Add new UI components.
Modify properties of UI components.
Change resource strings.
Click Save All.
Run the WccAdfCustomization application to test the seeded customizations:
Right-click index.html and choose Run.
After the test is done, stop the WccAdfCustomization application.
You can define MDS seeded customizations in JDeveloper to modify the WebCenter Content user interface. For example, the following procedure shows how to modify the Document Properties page with these customizations:
Rename the Summary tab to Overview
Hide the System Metadata section on the Metadata tab
To define MDS seeded customizations for the Document Properties page:
In JDeveloper, open docInfoTabs.jsff
in the editor.
Select the af:showDetailItem component with the ID summtab.
In the Property Inspector window, pull down the menu for the Text property and choose Select Text Source . . . .
In the Select Text Resource dialog box, do these steps:
Click the choice list for Resource Bundle, and choose the entry wcc.custom.view.DummyBundle (ViewController.jpr). Then choose the entry oracle.wcc.adf.vc.resource.CustomizationBundle (ViewController.jpr).
In the input box for Display Value, enter Overview
.
Click Save and Select.
If prompted by a Confirm override popup, click Yes to dismiss it. If you do not want to see this confirmation popup again, you can select Skip This Message Next Time.
Wait until JDeveloper becomes responsive again. This may take several seconds.
Select the same af:showDetailItem
component again.
In the Property Inspector window, pull down the menu for the ShortDesc property, and choose Select Text Source . . . .
In the Select Text Resource dialog box, do these steps:
Click the choice list for Resource Bundle, and choose the entry wcc.custom.view.DummyBundle (ViewController.jpr). Then select the entry oracle.wcc.adf.vc.resource.CustomizationBundle (ViewController.jpr).
In the table for Matching Text Resources, select the row whose Display Value is Overview
.
Click Select.
After these changes, the beginning of the af:showDetailItem component looks like this:
<af:showDetailItem text="#{viewcontrollerBundle.OVERVIEW}" id="summtab" shortDesc="#{viewcontrollerBundle.OVERVIEW}
Select the af:showDetailHeader component whose Text property has the value #{diBundle.MTAB_SYSTEM_METADATA}
.
In the Property Inspector window, click the choice list for the Rendered property, and choose False.
Click Save All.
After you finish specifying and testing your seeded customizations, you package them for deployment in the WccAdfCustomization.mar
file.
To package seeded customizations:
Right-click the WccAdfCustomization application and choose Deploy, then WccAdfCustomization….
In the Deploy WccAdfCustomization dialog box, leave the deployment action with the default selection, which is Deploy to MAR, and click Finish.
This will generate a WccAdfCustomization.mar
file in the deploy/
directory.
To apply customizations to the installed Oracle WebCenter user interface environment, you can apply the custom skin and the seeded customizations.
To apply a custom skin defined by the new WccAdfCustomSkin.jar
file to WebCenter Content user interface in an installed environment, update the application configuration for the user interface to point to the new skin and to replace the WccAdfCustomSkin.jar
file under the WebCenter Content user interface domain with the new one.
Run a WLST command to update the configuration of the WebCenter Content user interface application to point to the new skin:
Set the environment variable WL_HOME to be WCCUI_MW_HOME
/wlserver_10.3
. For example, on a Linux machines:
export WL_HOME=/Oracle/WccUI/wlserver_10.3
Go to WCCUI_MW_HOME
/oracle_common/webcenter/wccadf/WlstResources/common/bin
, and run wlst.sh
or wlst.cmd
.
Connect to the port of WCCADF_server1, which by default is 16225
. For example:
wls:/offline> connect() Please enter your username :weblogic Please enter your password : Please enter your server URL [t3://localhost:7001] :t3://localhost:16225
Run the updateWccAdfConfig
command to update the skinFamily
property to point to the custom skin. For example:
wls:/wccadf_domain/serverConfig> updateWccAdfConfig(appName='Oracle WebCenter Content - Web UI', skinFamily='wcc-custom-skin')
Stop WCCADF_server1 in the WebCenter Content user interface domain.
Replace the WccAdfCustomSkin.jar
file under WCCUI_MW_HOME
/oracle_common/webcenter/wccadf
with the generated one.
Start WCCADF_server1 again in the WebCenter Content user interface domain.
The custom skin defined by the new WccAdfCustomSkin.jar
file will take effect immediately. Clear your browser's cache and log in to the WebCenter Content user interface to see the customizations.
To apply the seeded customizations defined by the WccAdfCustomization.mar
file to the WebCenter Content user interface in an installed environment, update the configuration of the WebCenter Content user interface application to define values for the customer
customization layer and to import the WccAdfCustomization.mar
file to the MDS repository of the WebCenter Content user interface domain.
To apply the seeded customizations to the WebCenter Content user interface:
Copy the WccAdfCustomization.mar
file to a stage location; for example, /tmp/WccAdfCustomization.mar
.
Run a WLST command to update the configuration of the WebCenter Content user interface application configuration to define the value(s) for the customer
customization layer.
Set the environment variable WL_HOME to be WCCUI_MW_HOME
/wlserver_10.3
. For example, on a Linux machine:
export WL_HOME=/Oracle/WccUI/wlserver_10.3
Go to WCCUI_MW_HOME
/oracle_common/webcenter/wccadf/WlstResources/common/bin
, and run wlst.sh
or wlst.cmd
.
Connect to the port of WCCADF_server1, which by default is 16225
. For example:
wls:/offline> connect() Please enter your username :weblogic Please enter your password : Please enter your server URL [t3://localhost:7001] :t3://localhost:16225
Run the updateWccAdfConfig
command to update the customerCustomizationLayerValues
property to the values of the customer
layer. For example:
wls:/wccadf_domain/serverConfig> updateWccAdfConfig(appName='Oracle WebCenter Content - Web UI', customerCustomizationLayerValues='demo')
Run a WLST command to import the WccAdfCustomization.mar
file to the MDS repository of the WCCUI domain:
Go to WCCUI_MW_HOME
/oracle_common/common/bin
, run wlst.sh
or wlst.cmd
.
Connect to the port of the Administration Server, which is 7001
by default. For example:
wls:/offline> connect() Please enter your username :weblogic Please enter your password : Please enter your server URL [t3://localhost:7001] :
Run the importMetadata
command to import the metadata defined by the WccAdfCustomization.mar
file to the MDS repository. For example:
wls:/wccadf_domain/serverConfig> importMetadata('Oracle WebCenter Content - Web UI', 'WCCADF_server1', '/tmp/WccAdfCustomization.mar')
Stop WCCADF_server1 in the WebCenter Content user interface domain.
Start WCCADF_server1 again in the WebCenter Content user interface domain.
The seeded customizations defined by the WccAdfCustomization.mar
file will take effect immediately. Clear your browser's cache and login to the WebCenter Content user interface to see the customizations.