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

0

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.

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

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

<code>af|column::column-header-cell{display: none;} </code>

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.

<code>.TableNoHeader af|column::column-header-cell{display: none;} </code>

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

<code>&lt;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"&gt; </code>

Only one table has no columnheaders now.


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.

<code>&lt;?xml version="1.0" encoding="ISO-8859-1"?&gt; &lt;skins xmlns="http://myfaces.apache.org/trinidad/skin"&gt; &lt;skin&gt; &lt;id&gt;mySkin.desktop&lt;/id&gt; &lt;family&gt;MySkin&lt;/family&gt; &lt;extends&gt;blafplus-rich.desktop&lt;/extends&gt; &lt;render-kit-id&gt;org.apache.myfaces.trinidad.desktop&lt;/render-kit-id&gt; &lt;style-sheet-name&gt;skins/MySkin.css&lt;/style-sheet-name&gt; &lt;bundle-name&gt;nl.amis.technology.view.bundles &lt;/bundle-name&gt; &lt;/skin&gt; &lt;/skins&gt; </code>

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.

<code>package nl.amis.technology.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"}" }; } </code>

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

Resources
Online overview with all skin selectors can be found here;
Other posts on this subject on this blog:

The workspace for this blogpost can be downloaded here.

Share.

About Author

Luc Bors is Expertise Lead ADF and technical specialist/architect at AMIS, Nieuwegein (The Netherlands). He developed several Workshops and training on ADF and also is an ADF and JHeadstart instructor. Luc is a member of the ADF Methodology group and publishes articles on ADF in oracle technology related magazines, on the AMIS technology blog, (http://technology.amis.nl/blog).

Comments are closed.