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:
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.