Style your application in your own way !

Look and feel of your application can be further improved/customized using the Oracle ADF Faces skins and component style attributes. To learn more about this, please refer Chapter 20 Customizing the Appearance Using Styles and Skins from Web User Interface Developer's Guide

Customizing the Style Properties of a Component

Sometimes you may need to customize display 'style' of a specific set of UI components based on various business conditions. Conventional approach is to add 'inlineStyle' to decorate the components of choice. However this approach has it's own drawbacks like high maintenance cost, increased page size, highly error prone(if the same style needs to repeat across multiple pages) etc.

A better approach is to extend the skin that you want to customize and override the style properties as per the use case requirement. Advantage with this approach is that skinning information is specified in one place for an entire application.

A Simple Case Study

Let me take you through a very simple example. Here, the use case requirement is to display the mandatory field labels in 'bold' on a data capture form. Apparently, solution is to customize the css style properties of the UI components. 'Skinning' framework let you to do this job without much effort. Steps are detailed in the Web User Interface Developer's Guide.

In a nutshell, here we are extending the existing skin family by overriding 'Component Selectors' of choice. The below style in the custom css file overrides the 'Label'(Pseudo-element) for an inputText component. As stated earlier,there are set of 'Style Selectors' available for each component which you can override on need basis using a custom css file.

af|inputText::label {
font-weight: bold;
}

Next step is to configure the 'custom skin' in trinidad-skins.xml and wire the css file to this custom skin. Steps are well detailed in Web User Interface Developer's Guide

In our above css sample, property specified for label gets applied to all instances of inputText component. This may not be the desired behavior in all cases. If you need to apply this style only for a specific instances of inputText, then define a style class with standard selector(s) as shown below

.CriticalInputLabelStyle af|inputText::label {
font-weight: bold;
}

Next step is wiring this style class with UI component. This is done by setting the styleClass attribute of the component to the desired style class.
For e.g: the below sample applies CriticalInputLabelStyle to a inputText component. Please note that you can use EL expressions for the styleClass attribute to conditionally set style attributes

<af:inputText value="#{bindings.EmployeeId.inputValue}"
label="#{bindings.EmployeeId.hints.label}" ...
styleClass="#{bindings.EmployeeId.hints.mandatory?'CriticalInputLabelStyle':''}/>

A glance at Run-time Coordination

Below diagram illustrates how the css style definition, skinning meta files and the Renderer coordinates to render the UI components. [Click on the diagram to zoom in]

You can download the sample workspace from here.
[Runs with Oracle JDeveloper 11g R1 PS2 + HR Schema]
This sample illustrates the above example. Run test.jspx, you may notice that the labels for all mandatory fields are displayed in 'bold' on the form.