Skip to main content

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}" ...

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.


skully said…
Great article Jobinesh.

Do you have any tips on how to get a conditional statements to be called in the templates, as we would like to call in IE style sheets:

Cheers, Skully
Jobinesh said…
Could you please detail the use case here? an EL does not help?
Anonymous said…
Good one. It was really helpful.
Anonymous said…
Hey Jobinesh, Can I increase the font size of the selectItems in a SelectOneRadio component like this way or some other way?
Anonymous said…
For selectoneradio try with this pseudo code
styleclass ="if(component.selected) {} else { "none"}

you may be need autosubmit and partial trigger on same component.

Popular posts from this blog

How to set Bind Variable Values at runtime ?

In this post I'm sharing a couple of approaches for programmatically setting bind variables values at run time. This post is an attempt to explain 'When to use what ?'[ In case if you are familiar with 'Bind Variables' in ADF BC, please refer Section 5.10, Working with Bind Variables in Fusion Developer's Guide ]

1. Set the Bind Variable value using RowSet::setNamedWhereClauseParam(...)

You can use use the setNamedWhereClauseParam(...) method on the ViewObject interface (which extends oracle.jbo.RowSet) to set the value for bind variables. Please note this sets the value on default RowSet. In other words, this doesn't have any effect on the secondary RowSets that you/system generates.
ViewObject vo = am.findViewObject("EmployeesView1"); vo.setNamedWhereClauseParam("bindVarDeptId", new Number(10)); vo.executeQuery();
2. Set the Bind Variable value using ViewObject's VariableValueManager::setVariableValue(...)

VariableValueManager Ma…