This chapter includes the following sections:
You can customize the WebCenter Content user interface in two areas:
Custom Oracle ADF skin
MDS seeded customizations
Prerequisites
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:
WccAdfCustomSkin.jar
.WccAdfCustomization.mar
.You can use Oracle JDeveloper 12.2.1 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 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:
WCC_MW_HOME/wccontent/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
. See User Interface Commands in Oracle Fusion Middleware WebCenter WLST 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 and copy custom images for your customization.
From the file system, create or copy any custom images you want to use into the folder:
WccAdfCustomization/ViewController/public-html/images
On the Skin Editor Selectors 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:
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
').
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 the wcc-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.
For example, to customize Web UI Branding Bar Title Selector:
In JDeveloper, you can deploy the custom skin for the WebCenter Content user interface to package it in the WccAdfCustomSkin.jar
file.
To package the custom skin:
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 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, its application file is modified by JDeveloper. So click Save All.
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 near the end of library list), 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:
Make sure the entry oracle.wcc.adf.vc.resource.CustomizationBundle (ViewController.jpr) is selected.
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:
Make sure the entry oracle.wcc.adf.vc.resource.CustomizationBundle (ViewController.jpr) is selected.
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, edit the value of the Rendered property, and choose False. Click Enter to save the change.
Click Save All.
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.
WCC_MW_HOME
/oracle_common/common/bin
, and run wlst.sh
or wlst.cmd
.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
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')
WccAdfCustomSkin.jar
file under WCC_MW_HOME
wccontent/wccadf
with the generated one.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 domain.
To apply the seeded customizations to the WebCenter Content user interface:
WccAdfCustomization.mar
file to a stage location; for example, /tmp/WccAdfCustomization.mar
.customer
customization layer.
WCC_MW_HOME
oracle_common/common/bin
, and run wlst.sh
or wlst.cmd
.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
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')
WccAdfCustomization.mar
file to the MDS repository of the WCCUI domain:
WCC_MW_HOME
oracle_common/common/bin
, run wlst.sh
or wlst.cmd
.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] :
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')
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.