Update af:table properties using Skin

Here is how default table looks like with Row Banding Interval set to 1.

Now, let's apply skin changes (shown later) and we can change layout as shown below.

Notice, few very visible changes. Here is skin code for each change.

Change Title to be centered.

af|column::column-header-cell-content {
    text-align: center;
}

Change Row banding color.

af|column::banded-data-cell {
    background-color: #DDD;
}

Change table row height.

af|table::data-row {
    height: 26px;
}

Dynamically applying Skin changes to ADF Application running in Weblogic Server

In my previous blog, i explained how to dynamically apply skin changes to JDeveloper's Embedded WebLogic server. If you try to perform same steps to apply skin changes to application deployed on your Middleware environment, it will not work. This is due to this Note in Skin User Guide.

This is necessary as deploy skin changes to Skin Managed Bean, updates skin file in File System. And in most cases you will deploy .ear file in your Middleware environment. If it is necessary to apply (mostly in Development environment) skin changes dynamically, deploy your ear file in exploded format.

For example, i have FusionHRDemo.ear file which has HRUI.war module. Before installing this application in WebLogic, i can explode this ear file using commands shown below.

Create folder with same name as your EAR file. And cd in that folder.

mkdir FusionHRDemo.ear
cd FusionHRDemo.ear

Now, explode ear file first.

jar -xvf D:\jdevws\jdev121200\blog\mywork\FusionHRDemo\deploy\FusionHRDemo.ear

Now, we need to explode HRUI.war module as well. First create dummy folder and cd in that folder. Then we will rename this folder to HRUI.war. As we are already in ear folder, this will be created under it. 

mkdir war
cd war

Now extract HRUI.war module, which is in parent folder, so use .. notation.

jar -xvf ../HRUI.war

Now go back to parent folder and remove HRUI.war file and rename war folder to HRUI.war.

cd ..
del HRUI.war
move war HRUI.war

If you are using Linux, you can use matching shell commands.

Now, you can install exploded ear folder using WebLogic Console or WLST. And running application will be able to accept dynamic skin changes using Skin Managed Bean.

Dynamically applying Skin changes to Application running in Embedded Weblogic

In my previous blog, i explained how to build a Skin for ADF application. It is not very productive to build skin, deploy as ADF Library JAR and test in ADF application. Fortunately there are features to dynamically update skin file changes to running application.

First prepare your ADF application to accept dynamic skin changes.

Go to your Web Project's properties. Select ADF View. Check Enable Runtime Skin Updates.

Go to Libraries and Classpath section of your Web project's properties. Add ADF Faces JMX Runtime 11 library.

Modify web.xml file of your Web project with following properties set to true (org.apache.myfaces.trinidad.CHECK_FILE_MODIFICATION, org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION). These both properties must be set to false for Production environment.

Now we are ready to work on Skin changes. Start your application by running jsf page, wait till application is started and accessible in web browser.

Now, start Skin editor. Open ADF Skin application previously created. (Note that we created ADF Skin application in previous blog and added ADF Library JAR from that project to our ADF application's web project).

Run Deployment Profile for Skin project in Skin Editor (right click on Project - Deploy and then select Deployment Profile name). Now select Deploy to ADF Skin Managed Bean as deployment action.

Click Next. Create connection to Embedded WebLogic server as shown below. You can click Test Connection to check if your connection information is valid or not.

Click Find Running Applications, you should see your application's context root in Application Name drop down.

Click Finish and watch logs in Deployment window.

Let's make change to button text color and deploy skin again.

af|button {
    color: Aqua;
}

Once skin is deployed with this change, you should see that button color has changed from Red to Aqua.

Create ADF Skin for styling your adf applications

For styling ADF applications, you need to create Skin CSS file and associated trinidad configuration files. In this blog post, i will explain steps necessary to get started with ADF Skin.

Download and install ADF Skin Editor from OTN.

Start Skin Editor (skineditor.exe).

Create new Skin Application.

 

Make sure to target for particular version of your ADF application's Runtime environment. (Target Application Release)

 

 Create New Skin using Wizard.

 

Select your base skin. You would start with skin provided by Oracle (Skyros, Fusion, Alta UI etc) and build styles specific to brand of your company. 

 

Now let's modify CSS file to update color of button. (It is not a good idea to change Layout of your ADF application using Skin, it will create issues).

Skin editor provides many features to control properties of various ADF components. For example, in this case we are changing color of Button text to Red. CSS code would look like below.

af|button {
    color: red;
}

This is not quite CSS syntax, ADF framework will modify this at runtime to generate CSS file with af_button class with properties inherited from base skin and color value set to red. Please refer to Skin Editor documentation for more details.

Now, let's deploy this Skin for use by ADF application. This is done by creating ADF Library Jar file. 

Go to Project Properties - Deployment for your Skin project. Create new Deployment Profile. Select ADF Library Jar File as Profile Type. 

Run Deployment Profile (right click on Project - Deploy and then select Deployment Profile name.)

This will create ADF Library JAR file. You can reference this file from your ADF application using Resources view. You can share ADF Library JAR file storing it on shared file system or by versioning it is SubVersion or other source control system. In my case, i have placed file in libraries sub-folder of my ADF Application and created File System connection to that folder.

Now, Select your Web Project in Applications explorer in JDeveloper, right click on ADF Library in Resources and select Add to Project... 

This skin file is now available to your ADF application, but it is not yet configured to use it. You must configure trinidad-config.xml file to reference specific skin, othewise it will default to skyros, fusion etc depending on your ADF version.

Create trinidad-config.xml, if it's not present in WEB-INF folder. And modify it to refer to Skin you have created and added to this project.

Now your application is ready with your custom skin file. Run and you will see button text color as Red.