ADF 11g Skinning: Three ways to change look and feel

On the JDeveloper ADF forum there are many questions on how to change the look and feel of components. In this post I'll explain three ways to do that.

Setting skin Selector property

For this we need to define a custom skin.

<?xml version="1.0" encoding="ISO-8859-1"?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
  <skin>
    <id>mySkin.desktop</id>
    <family>MySkin</family>
    <extends>blafplus-rich.desktop</extends>
    <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
    <style-sheet-name>skins/MySkin.css</style-sheet-name>
   </skin>
 </skins>

In the style sheet we will add an entry that will hide the columnheaders.

af|column::column-header-cell{display: none;}

This entry in the styleSheet will apply to ALL columns in your application.


Using and appending styleClasses

Now we create a StyleClass that is exactly the same as the style in the previous example.

.TableNoHeader af|column::column-header-cell{display: none;}

When we apply this styleClass to only one of the tables in our application, we will see the effect.

<af:table value="#{bindings.Departments1.collectionModel}" 
                  var="row"
                  rows="#{bindings.Departments1.rangeSize}" 
                  styleClass="TableNoHeader"
                  emptyText="#{bindings.Departments1.viewable ? 'No data to display.' : 'Access Denied.'}"
                  fetchSize="#{bindings.Departments1.rangeSize}"
                  rowBandingInterval="0"
                  filterModel="#{bindings.Departments1Query.queryDescriptor}"
                  queryListener="#{bindings.Departments1Query.processQuery}"
                  filterVisible="true" 
                  varStatus="vs"
                  selectedRowKeys="#{bindings.Departments1.collectionModel.selectedRow}"
                  selectionListener="#{bindings.Departments1.collectionModel.makeCurrent}"
                  rowSelection="single" 
                  id="t1">

Only one table has no columnheaders now.


Use Skins to change labels.

Using styleClasses you can adjust a lot of the components look and feel. However, you cannot change the labels and hint texts that are shown in the application. To do that you will have to use a skin resource bundle. See in the example below the bundle-name tag.

<?xml version="1.0" encoding="ISO-8859-1"?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
  <skin>
    <id>mySkin.desktop</id>
    <family>MySkin</family>
    <extends>blafplus-rich.desktop</extends>
    <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
    <style-sheet-name>skins/MySkin.css</style-sheet-name>
    <bundle-name>com.blogspot.lucbors.view.bundles.MySkinBundle </bundle-name>
  </skin>
 </skins>

Create the class that will hold the entries for the bundle.

Lets asume that we want a different text for the pannelsplitter.

Add entries for all labels and hints that you need to change.

package com.blogspot.lucbors.view.bundles;

import java.util.ListResourceBundle;

public class MySkinBundle extends ListResourceBundle {
  public MySkinBundle() {
    super();
  }
 @Override
  public Object[][] getContents() {
    return _CONTENTS;
  }
 
 static private final Object[][] _CONTENTS = {
     {"af_column.TIP_SORT_ASCENDING","first things first"}
    ,{"af_panelCollection.LABEL_MENUITEM_QBE","the text that you want"}
    ,{"af_panelSplitter.TIP_COLLAPSE", "hide all of this this"}
    ,{"af_panelSplitter.TIP_RESTORE", show all again"}"
   };
}

When you run the application now, you will see changed texts.


Online overview with all skin selectors can be found here;
The workspace for this blogpost can be downloaded here.