Using ADF Faces 11g Skinning for setting the styles of specific component instances or groups of instances

Skinning in ADF Faces is used to define user defined customizations with respect to one of the standard ADF skins. A skin is by and large a CSS document (CSS 3.0) that is interpreted at run time to generate the ‘real’ CSS documents (3.0 if that is what the browser can handle, 2.0 in most current cases) that will be sent to the browser. The real CSS document is influenced primarily by the server side Skin CSS (CSS 3.0 is converted to 2.0 if that is required) and also by factors like: browser (IE, Firefox, Safari, something else), version (5.5, 6.0, 7.0, 8.0; 2.x, 3.x;…), operating system, locale, etc. The skin is created as an extension of one of three standard skins shipped with ADF Faces.

n this article I would point at an feature of skinning I was not aware of before: skin styles need not apply to all instances of a component (sort of my previous understanding) but can be directed at specific occurrences of components:

– all component instances that have a specific styleClass set
– all component instances under a specific ancestor element (that may or may not have a specific styleClass set)

Let us discuss an example of these characteristics of skinning I was not aware of – and had explained to me last week at ODTUG by Maiko and George.

The objective: I would like to have some of the inputText fields in my form to use blue for the text color. Then I would like to have purple as the color for all the labels in a specific form.

Creating and Configuring a custom skin

Let us first create custom skin and configure it in the application; later on we can add special style definitions to this skin.

1. create a new file; call it CustomSkin.css, save it to public_html\skins\custom.

2. create a new file in WEB-INF, called trinidad-skins.xml

add the following content in this new file:

<!--?xml version="1.0" encoding="ISO-8859-1"?-->

customSkin.desktop
CustomSkin
blafplus-rich.desktop
org.apache.myfaces.trinidad.desktop

skins/custom/CustomSkin.css

3. Create a new file in WEB-INF: trinidad-config.xml; note: most likely it already exists, and you only need to edit the file.

Ensure that this file contains the line:

 CustomSkin

This lines makes sure that the custom skin – empty as it is at this point – is used as starting point for skinning/styling the application.

Inspecting ADF Skinning effects on page styling

To clearly see what styles have been ‘calculated’ for the components in a page, you can configure the following parameter in the web.xml to have the dynamically generated CSS stylesheet contain readable (and interpretable) names:

No obfuscation of CSS.

org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSIONtrue

After we apply this setting, it become quite easy to find out what skin settings need to be applied to style a specific type of component:

– run the application in Firefox with Firebug installed
– locate the component in the page
– switch to Inspect mode in Firebug
– toggle the right hand Firebug window to Style
– now you see the Skin Style names used by ADF, as well as the CSS styling properties
– apply changes right there in the Firebug window and see the immediate effect in the page
– once you are satisified with your changes, you can configure them in the Skin, under the Skin Style Selector that you can see listed in the Firebug window

For example:

– an ADF page with a PanelFormLayout that contains a dozen input components
– we want to use blue as the font color in the inputText components
– run the page
– open firebug, click on Inspect, locate an inputText component; the Firebug window displays the Styles that apply to the inputText component
– in the Styles window, change the color to blue in the af_inputText_content style; note that the effect is immediate:

when we now enter a value in one of the inputText components, the text is shown in blue. You could try other style changes as well (alignment, backgroundcolor, background image, border etc.).

Add custom styling to custom skin

– now that we know the name of the Skin Style Selector (af|inputText::content) as well as the CSS style change we want to apply {color:blue}, we can go to the custom skin and add this style change:

af|inputText::content {color:Blue;}

Note how the CSS editor helps with code completion:

However, we realize we do not want to have all inputText component have a blue background: it should only apply to selected components that represent contact and communication related information. There is no automated way to identify such components, the developer will have to make it clear which components qualify. He or she will do so using a styleclass.

for example, we identify the fields for telehone number, email, instant messaging, Skype Id as communication related:

The style selector in the custom skin can now be changed, made more selective, using a reference to communication style class:

af|inputText.communication::content {color:blue}

When we next run the page, not all inputText items have the blue color style applied, only the ones that were marked as communication fields by the developer.

Check in FireBug what the changes are in CSS classes and styles: there is a new style definition generated in the CSS sent to the browser:

Use of custom ALIASes in skin

Note that we have only changed the color for inputText items. Suppose that we want to define a common styling for various types of input components. What we can do is define a custom alias, define the desired CSS styling characteristics to this alias and then include the alias in the component styles that require it.

For example:

// definition of the alias
.CommunicationInputStyle:alias {color: blue; background-color: Silver;}

// referencing the alias in the inputText.communication
af|inputText.communication::content

{
-tr-rule-ref:selector(".CommunicationInputStyle:alias");
}

// and also in the selectOneChoice

af|selectOneChoice.communication::content

{
-tr-rule-ref:selector(".CommunicationInputStyle:alias");
}

Note: the attribute styleClass of the ADF Faces components may contain more than one class name, so a component can qualify as more than one special component and hence be styled in multiple ways (that may conflict)

If we change the alias definition, pick gold over silver as the background-color for example, the change in style is applied to all components whose skin-style refer to the alias:

Skinning Selectors in context of ancestor

Suppose I would like to style all the labels in a form – do I have to label each one of them with a special styleClass? Fortunately, that is not necessary. We can specify a (marker) styleclass at the panelFormLayout, specify a skin style selector for the input component within the panelFormLayout and specify the style for the labels of those input components.

In the skin stylesheet we express our special design: pretty large, somewhat purplish prompts, to be applied to the label of inputText components in any PanelFormLayout that is marked with the entryForm styleclass:

af|panelFormLayout.entryForm af|inputText::label
{
font-size:large; color: rgb(198,0,198);
}

In the page, specify the style class on the panelFormLayout:

and run the page, to everyone’s delight:

You see we have missed some components. Let’s remedy that situation:

 af|panelFormLayout.entryForm af|inputText::label
, af|panelFormLayout.entryForm af|inputDate::label
, af|panelFormLayout.entryForm af|selectOneChoice::label
{
font-size:large; color: rgb(198,0,198);
}

Resources

JDeveloper 11g Application with sources for this article: SkinWithStyleClassSelectorDemo.zip.

Documentation on ADF Skinning (11g)

and ADF Skinning (11g PS1)