ADF – Using CSS to change the appearance of mandatory items (dump the asterisk)

One of our ADF projects has a customer determined to develop an application with a modern, appealing user interface. To that end, they hired a User Interaction Designer, who did a great job of creating a consistent UI design with very attractive pages indeed. Now it is up to us to actually implement the design using ADF and a fair bit of Skinning and Styling.

One very specific requirement was that the application would not use the well known asterisk to indicate required items – like this:

but instead indicate mandatory items using a subtle red marker at the far right side of all required input items – like this:

Always an interesting challenge…

Removing the asterisk was fairly easy, as the recipe was provided by Luc Bors in a handy article on his excellent weblog: http://lucbors.blogspot.com/2007/04/how-to-hide-for-required-fields.html. Basically, we have to ensure that the asterisks generated by the ADF Framework are not displayed. Since these asterisks are neatly classified – through the CSS Class Selector xi – it is relatively simple to hide them:

.xi {
display: none;
}

We create a new CSS stylesheet – for example myStyles.css – and link it to our JSF pages:

 <link rel="stylesheet" href="${pageContext.request.contextPath}/css/mystyles2.css" type="text/css" id="myStyles"/>

The next step is displaying the red marker in all mandatory items. Let’s first get ourselves a red marker image:

Using another CSS property – the background-image – we can add the red marker to the inputText items:

{background-image: url(../images/mandatoryBarSmall.jpg); 
 background-repeat: no-repeat;
 background-position: top right; }

Note how we position the red marker at the right hand side of the element and ensure it is not repeated.

The class used for input text items is called x8, so we could try to redefine x8 using these css properties. However, it turns out that the`x8 class is used for both mandatory and non-required items. At this point, I see no other option but to define a style mandatoryItem in the CSS Stylesheet

.mandatoryItem {background-image: url(../images/mandatoryBarSmall.jpg); background-repeat: no-repeat;background-position: top right; 
}

and explicitly specify that for mandatory items:

<af:inputText label="Name" required="true" styleClass="x8 mandatoryItem"/>
<af:inputText label="Address" required="true" styleClass="x8 mandatoryItem"/>
<af:inputText label="Phone" />
<af:inputText label="Email" />

We have one final hurdle to overcome: it turns out that the style defined for the inputText element is applied to both the INPUT element as well as the LABEL element that holds the prompt. So we can use a type selector to only apply the style to elements of type INPUT:

input.x8 {background-image: url(../images/mandatoryBarSmall.jpg); background-repeat: no-repeat;background-position: top right; 

And this gives us the desired result.
Unfortunately, the User Interaction Designer only now realizes that such a red marker will work well for text fields, but not as well for checkboxes, radiogroups and dropdownlists. So this story is probably to be continued…