0 
0 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…
Related posts:
Customizing BLAF for ADF Faces – easier than Skins for influencing colors and fonts Using the new JSF Components ShowDetailFrame and PanelCustomizable for structuring the User Interface in JDeveloper 10.1.3.2 JDeveloper 11g: Contextually Linking the Stacked Bar Chart to an ADF Data Table – synchronize data component when clicking on chart ADF 11g Rich Faces: using clientTriggers and JavaScript API to implement client side logic in ADF Faces pages (Client Side programming in ADF Faces Rich Client Components Part 3) ADF "Function Result Cache" – how to speed up calls to deterministic WebServices
Can we use input.x8 in jdeveloper 11g to avoid applying styles to label in inputText element. I tried but didn’t work.
Any suggestions… Pls help
Thanx
I wonder: how do you guys start implementing the GUI design of an ADF application? Is it bad practice to use the HTML Layout Tag Lib? (http://www.jsftutorials.net/htmLib/).
Wouldn’t it be much nicer to subclass the inputText component and have it write a style class when the required attribute is set to true so you don’t have to repeating code all over the place?