Thursday 8 May 2008

ADF Faces RC - the humble inputText control - it's all about the presentation baby!

On conception the JSF specification received lots of complaints for its simplistic component implementations. The original JSF controls such as <h:inputText> were no better than the vanilla HTML equivalents. Sun however didn't intend the core web component set to be used in JSF development, but rather as a showcase to vendors on how to create JSF components so they could write their own enhanced components.

Some years ago Oracle took this all on board when they developed their own JSF component set known as ADF Faces within JDeveloper 10.1.3, and created some pretty "whiz-bang" components. Yet in the contemporary world of web development the recent rage has been about AJAX-AJAX-AJAX, and more recently Rich Internet Applications (RIAs). When it comes down to it in-my-honest-opinion, both AJAX and RIA are about "s3x appeal", ah, I mean how "visually appealing" the web components are, or more specifically how "rich" they are

So Oracle (in their wisdom ;) took this all on board (again) and did some "sprucing" of their own JSF components. We now have ADF Faces Rich Components (commonly known as ADF Faces RC or I'll refer to as RC for short in this post).

So what's changed?

There are lots of new and exciting components, such as accordion controls, sliders, trees, graphs, pivot tables and more (no really, lots more). But what about the good ol' humble <af:inputText> control, has it changed? The answer is yes, but not in the way it functions which is mostly the same, but instead in the way it appears; it's presentation is much better. As the blog title says, it's all about the presentation baby!

Let's check out some of the presentation changes between ADF Faces and ADF Faces RC:

For required fields in both versions we would code the following tag:

<af:inputText value="#{myBean.someValue}" required="true"/>

In ADF Faces and ADF Faces RC they look similar with the label star implying the field is required. The ADF Faces component looked as follows:


And the RC component, which besides a font colour change really isn't that different (yawn):


However in RC if we clear down the field and move to another field, we get this extra red box on the original field highlighting that the field is required:


If we submit the form in ADF Faces while the required field is null we receive this pretty bland browser error box:


Yet in RC we get these sexy graphics:



What happens if in a date field we enter a date with the wrong format mask supplied through validation + converter sub-tags? ADF Faces:


Yuck, another horrible browser dialog box. And in RC:


What about in an inputText control with converters and validators based on a number datatype? In ADF Faces if we enter character data into the number field we get:


No change. Yet in RC we see the sexy format mask tooltip plus the error border:


How about errors raised from the Model layer. ADF Faces:


And errors in RC:


As you can see there are plenty of changes to this humble little component. I'd argue the changes are all subtle in functionality because essentially the component still does exactly the same thing. However the changes are not so subtle in their presentation.

You might ask why did I bother to focus on such a trivial thing? Sometimes in the avalanche of new features in a new release I feel a little overwhelmed. So I like to go back to the basics and see how they've subtly changed in the new release, because these are the features we're more likely to make use of regardless of the new whiz-bang in the later releases.

This article was written using JDev 10.1.3.3 and JDev 11g TP4. Your mileage may vary on later releases.

2 comments:

Sreedhar Reddy G said...

how i can increase the memory of inputfile coponent in ADF components

Chris Muir said...

I suggest you try the OTN JDev forums. It's a better place to seak adhoc advice.

CM.