Platinum Partner
java,sql,frameworks,server-side

Introduction to Oracle's ADF Faces Rich Client Framework

Web 2.0 and Ajax become more and more important when searching for a JavaServer Faces component suite for the next generation application project.This article gives a quick introduction to Oracle’s ADF Faces Rich Client, the next generation of ADF Faces, by exploring some of its components.

About Matthias Wessendorf. Matthias Wessendorf is a software developer at Oracle. He currently works on ADF Faces, which is an AJAX-based JSF component suite. Matthias also contributes to the OpenSource community, mainly Apache MyFaces and Apache Trinidad. Before joining Oracle, he worked as a CMS-Developer at Pironet, where he was building a next-generation CMS, using UI technologies like XUL and AJAX. His blog is located here (->http://matthiaswessendorf.wordpress.com/) and you can follow him on twitter (http://twitter.com/mwessendorf).

 

The development of ADF Faces goes back to the year 2001, as it started as UIX and became later, when JSF arrived, the ADF Faces library. In 2006 Oracle donated the first generation of ADF Faces to the Apache Software Foundation and the project is now maintained there under the name Apache MyFaces Trinidad. ADF Faces Rich Client (see [adfRich]) is the next generation of ADF Faces and it is part of the JDeveloper 11g offerings. You can download the current version of JDeveloper 11g from [jdev11g].

RIA – Rich Internet Applications

The ADF Faces Rich Client Framework (RCF) contains more than 150 AJAX-enabled JSF components ([adfComps]), therefore the realization of RIA, by using JSF, is pretty simple. Figure 1 shows an example of a very rich user interface, based on RCF:

The library does not contain only UI centric components it also ships various helpers, such as JSF validators and several listeners to export data to Excel, for instance. It contains a complete JavaScript API as well. RCF requires a JSF runtime implementation of the 1.2 version of the specification and it uses internally some of the APIs, offered by Apache MyFaces Trinidad 1.2.x ([Trinidad]).

Getting started with RCF

After downloading and installing JDeveloper 11g ([jdev11g]) launch it to create your first ADF Faces project. To do that, click on the “New Application...” button as seen in figure 2:

This opens the wizard of figure 3:

In this wizard we give the application a name (here “DZONE”) and we choose the “Fusion Web Application (ADF)” template for our new project. After done this, click FINISH to generate the project. What you got is a ready-to-go project, where no extra configuration work is needed. No need to add the FacesServlet from JSF or the required RenderKit for ADF. The wizard in JDeveloper does all the work for your convenience. Figure4 shows the structure of the generated project:

Now we are close to our first ADF Faces based JSF page. To create page select the “Web Content” folder, click the right mouse button and select the “New...” item. This gives you the dialog of figure5...

...where you go to the “Web Tier” category to “JSF”. After picking the “JSF Page” item on the right side you click OK.  In the dialog of figure 6...

...you provide the name of the JSF Page and you select the the “Create as XML Document (*.jspx)” checkbox. This ensures we are getting the JSPX syntax, which is a XML-based JSP dialect. To physically create the page, just click OK. You now get an almost empty JSF Page, (see figure 7):

...which contains two key components the <af:document>, which renders tags like <html>, <head> or <body> and the <af:form> component, since a lot of ADF Faces components require a form to work as expected. This page has all you need and is ready to take more components. Just drag a component from the “component palette” on the right to the main page, for instance take the “Input Date” component. Now let’s save and run the page. To run the page click with the right mouse on the page and select the “Run” item, as you can see in figure8:

Now JDeveloper is launching the Weblogic server to deploy your application, when ready you will see a new browser (window) that is poiting to your previously created JSF page. You now see a very simple page, which contains one component, the <af:inputDate> component. By clicking on the icon a popup is visible, where you can select a date (figure 9):

This page does not have much functionality, but remember how easy and fast it was to get to this point! With a very few clicks you created a project with a common project structure and were able to launch the page in the Weblogic container.

Ajax as Part of the Library

When the original development of ADF Faces started, there was no name for AJAX, but the requirements where already there. In ADF Faces (and in Trinidad) the same technology is called there PPR (Partial Page Rendering). In almost all case RCF uses XHR (XmlHttpRequest) object for its communication channel, when doing AJAX. The only exception is the file upload scenario, because of XHR limitation. However, the framework knows about this and the application developer doesn’t need to treat fileuploads as a special case, in terms of Ajax. Since the PPR-feature is available to all components, some of it use it internally like the <af:table> component. When a user is scrolling through a large set of data, the <af:table> uses PPR to load the requested data.

The usage of AJAX (or PPR) is bound to three important attributes of the RCF components: autoSubmit, partialSubmit and partialTriggers. If the value of the autoSubmit attribute, which is available on all implementations of the JSF EditableValueHolder interface, is true the component sends a PPR request down to the server, whenever there was a value change:

<af:selectOneRadio
value="#{bean.value}"
label="Select One:"
autoSubmit="true"
id="select1">
<af:selectItem label="First" value="one"/>
<af:selectItem label="Second" value="two"/>
<af:selectItem label="Third" value="three"/>
</af:selectOneRadio>

<af:outputText
partialTriggers="select1"
value="You've selected: #{bean.value}"/>
Once one of the rendered radio buttons is selected, a PPR postback is send down to the server and the value of the <af:outputText> component is magically updated. The magic works, because the partialTriggers attribute contains the component-id of the <af:selectOneRadio> component, which caused the PPR postback. The partialTriggers attributes can be compared with a listener. In case one of the listed components does trigger an AJAX request, the component is automatically updated when the response returns from the server. The attribute partialSubmit is similar to the autoSubmit attribute, however it is only available on ActionSource-implementations, such as <af:commandButton> or <af:commandLink>.

To create a page, that contains some simple Ajax content, as shown above, we use again the wizard to create a new JSPX file. However, as you can see in figure 10:

...we choose the default layout that comes along with JDeveloper 11g. The Design Time rendering after the page has been created looks like the screenshot of figure 11:

This template file will be deployed with your web-application and you can use this template as your starting point, when creating a common layout that fits your company’s needs. In this article we will continue to use the offered default template. This template has already some nice components in there, for instance the <af:statusIndicator/> component. This component is rotating the image, when an Ajax request is currently processed, or in other word the server is busy in handling the Ajax request (see figure 12):

Components – Choice is Good

As already mentioned the RCF project has lots of components, which leverage Ajax or have already Ajax build-in, like the table component. The table component can be used to display structure data. The usage of the <af:table> component is similar to the usage of the standard JSF <h:dataTable> component, but it has much more features and does not need that much code to create the declarative view. Let’s take a look at some table code:

<af:table value="#{table.articles}" var="article"
summary="table that contains some articles">
<af:column headerText="title" width="140">
<af:outputText value="#{article.title}" />
</af:column>
<af:column headerText="tags" width="140">
<af:outputText value="#{article.tags}" />
</af:column>
<af:column headerText="Writen by" width="140">
<af:outputText value="#{article.writer.lastname}, #{article.writer.firstname}" />
</af:column>
</af:table>
This is a very simple version of the table component. However, when you are already familiar with JSF you see that you don’t need to add a <f:facet/> for the header. In RCF this is archived through an attribute. Under the hood, the component does that for you. This is just one examples how the RCF component help you to build your applications in a more nature and fast way.

One of the other features of the RCF <af:table> component is, that is using Ajax to load more data from the server while scrolling to the end of the table (see figure 13):

 

You, as the application developer, get this for free and there is no extra code required. In the vanilla JSF standard table component you need to write a special scroller-component to archive this. You also have to be an Ajax expert in order to create a similar solution. This is another area where RCF helps you to get your application done in a short amount of time.

Another component to display a different kind of structured data is the <af:tree> component, as shown in figure 14 or the <af:treeTable>:


Creating Fancy Layouts

When it comes to the action of actually designing an (interactive) user interface, there are more things an architect needs to have in mind, than “just” showing the desired data or a form to edit the data, which is the layout of the page. Oracle’s ADF Face has several layout-oriented components. A simple and nice way to group some useful links is the combination of the <af:panelHeader> and the <af:paneList> components:

<af:panelHeader text="Good Links">
<af:panelList>
<af:goLink text="Oracle" destination="http://www.oracle.com"/>
<af:goLink text="Apache MyFaces" destination="http://myfaces.apache.org"/>
<af:goLink text="DZONE" destination="http://www.dzone.com"/>
</af:panelList>
</af:panelHeader>
The result is visible in figure 15:


Another more advanced layout component is the <af:panelAccordion> component, as shown in figure 16:

This component allows you to group different elements in a similar fashion like you eventually know from the Window Explorer, where you can expand one or more of these groupings. To build such a rich layout, which is very close to the user experience you know from native applications, you need something like:

<af:panelAccordion id="sampleAccordion">
<af:showDetailItem id="firstPane" disclosed="true" inflexibleHeight="50"
textAndAccessKey="&First Pane" >
<af:panelList>
<af:goLink text="Oracle" destination="http://www.oracle.com"/>
<af:goLink text="Apache MyFaces" destination="http://myfaces.apache.org"/>
<af:goLink text="DZONE" destination="http://www.dzone.com"/>
</af:panelList>
</af:showDetailItem>

<af:showDetailItem ... />
<af:showDetailItem ... />
...
</af:panelAccordion>
Inside the <af:panelAccordion> you nest some <af:showDetailItem> components. The attributes on the <af:panelAccordion> allow you to fine-tune setting, like if you want to allow multiple “groups” to be opened at the same time. One more thing to note is that the nested <af:showDetailItem> component can be used inside of different components, like the <af:panelTabbed> (see figure 17):


Advanced Layouts with the Menu components

You saw already that the RCF project has several components that help you to build web-applications that have a rich user experience, like regular desktop applications do. Moving forward to very rich (web-based) user interfaces something like a “real” menu, like on Windows Explorer, shouldn’t be missing in a Web 2.0 library. In RCF there are three components that help you to build cool menus as you can see in figure 18:

The <af:menuBar> is a container that allows several <af:menu> components as its children. Typically you would put a <af:menu> or <af:group> component in a <af:menuBar>. The <af:menu> itself is, as the name suggests, the menu. It is useful to put some <af:menu> components in, to create a hierarchy of menus (see figure 18). It also allow the <af:commandMenuItem>, which is an implementation of the JSF ActionSource interface. This component can be use to wire some action to the invocation, just like you know from the <af:commandButton> component. The nice thing about the <af:commandMenuItem> component is, that you can invoke it with accelerator keys, e.g. CTRL-N (see figure 18). Isn’t that cool ?

A simple example of a complete <af;menubar> with <af:menus> and <af:commandMenuItem> components is here:

<af:menuBar>
<af:menu textAndAccessKey="&File">

<af:menu textAndAccessKey="&New" >
<af:commandMenuItem textAndAccessKey="Navigator &Window" accelerator="ctrl N" action=”#{someBean.someActionMethod}”/>
<af:commandMenuItem textAndAccessKey="Navigator &Tab" disabled="true" accelerator="control T"/>
<af:menu textAndAccessKey="Subway">
<af:commandMenuItem textAndAccessKey="Veggie delight"/>
<af:commandMenuItem textAndAccessKey="Froggadile special"/>
</af:menu>
</af:menu>
<af:menu text="File2" />
...
</af:menuBar>
As you see in figure 18, the <af:menu> component “File”, in that <af:menuBar> container, contains a <af:menu> (“New”) that contains two <af:commandMenuItem> components (“New Window” and “New Tab”) and also another <af:menu> component (“Subway”). This little demo gives already a pretty good overview of what you can do with the three menu-related components, build fairly rich and complex menus.

Summary

This article gave a small overview on the rich user experience you can get when using Oracle’s ADF Faces Rich Client Framework. When using RCF, your web-applications afterwards feel much more like a “real” application, instead of a “plain” web-application.

Of course, there is much more stuff in the RCF component library, but to cover each of the components in a reasonably detailed way, would take a pretty complete book to do right. In fact, there are two books coming out on JDeveloper11g and ADF Faces. One is written by Duncan Mills, Paul Dorsey, Peter Koletzke and Avrom Roy-Faderman (see [mills] for more). Another one is written by Frank Nimphius and Lynn Munsinger, and it will be called “Oracle Fusion Development - Building Rich Internet Applications (RIA) with Oracle ADF and ADF Faces by Example”.

But in the meantime, you can always take a look at the description of all the components of RCF here [taglib]).

References

[adfRich] - http://www.oracle.com/technology/products/adf/adffaces/index.html

[jdev11g] - http://www.oracle.com/technology/products/jdev/index.html

[adfComps] - http://www.oracle.com/technology/products/adf/adffaces/11/doc/adf-richclient-api/enhanced-tagdoc.html

[taglib] http://www.oracle.com/technology/products/adf/adffaces/11/doc/adf-richclient-api/enhanced-tagdoc.html

[Trinidad] – http://myfaces.apache.org/trinidad

[mills] - http://www.amazon.com/Oracle-JDeveloper-11g-Handbook-Development/dp/0071602380

http://www.oracle.com/technology/obe/obe11jdev/11/rich_client/adfrichclient.htm

 

 

{{ tag }}, {{tag}},

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}
{{ parent.authors[0].realName || parent.author}}

{{ parent.authors[0].tagline || parent.tagline }}

{{ parent.views }} ViewsClicks
Tweet

{{parent.nComments}}