ADF Skining: Defining the style of the components inside af:query

Lately, there have been a couple of questions in Oracle JDeveloper & ADF Forums about changing the style of some components. Post 1, Post 2. In both post they had the need to change the style only of one of the buttons of af:query component. As you can see in Ashish’s post, using skinning it’s possible to change the look and feel of all the buttons, but using only the default selectors it is not possible to define the look and feel only of save button.
You can download this example from my Github repository.

You can also apply this solution to other components like af:panelCollection


In CSS3 there are some selectors that allow us to conditionally define the look and feel of the components.

  • The attribute of the element contains the value: [attribute*=value]
  • The attribute of the element starts with the value : [attribute^=value]
  • The attribute of the element ends with the value: [attribute$=value]

We can apply these selectors to ADF Skinning selectors to define the styles to components that we cannot normally edit.

Having this query panel in our page, we can find the components out that we have to use to define the style to save button by inspecting the code generated using your favorite browser.

If we search the save button we can see that this button is generated as a div with the id qryId1:_search. This id is generated with the id of the af:query component and the name fo the button’s action.

 

As we have now the attribute and the value to use we are going to use one of the CSS3 selectors I mentioned before.
The selector that fits better in our requirement is “end with” selector using the value ‘_search’.

If we run the application again we can see that save button now has red text.