SQL Zone is brought to you in partnership with:

Matthias has posted 1 posts at DZone. View Full User Profile

Introduction to Oracle's ADF Faces Rich Client Framework

01.22.2009
| 115453 views |
  • submit to reddit
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

 

 

AttachmentSize
figure3.PNG70.88 KB
figure4.PNG19.87 KB
figure5.PNG42.74 KB
figure1.PNG35.5 KB
figure2.PNG51.51 KB
figure6.PNG16.45 KB
figure7.PNG81.35 KB
figure8.PNG85.61 KB
figure9.PNG4.29 KB
figure10.PNG17.57 KB
figure11.PNG24.25 KB
figure12.PNG6.75 KB
figure13.PNG12.57 KB
figure14.PNG12.6 KB
figure15.PNG7.06 KB
figure16.PNG4.01 KB
figure17.PNG5.35 KB
figure18.PNG7.28 KB
Published at DZone with permission of its author, Matthias Wessendorf.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Rick Hightower replied on Thu, 2009/01/22 - 10:55pm

Matthias,

I have a lot of respect for you and for Oracle.

My boss at Intel once told me the great thing about standards is this: "There is a lot of them to choose from".

You could say the same about Ajax enabled JSF component suites. RichFaces, ADF, Tomahawk, ICEfaces, and about a 1/2 dozen more. How do you pick?

A while back I started using RichFaces. I evaluated Oracle ADF several years ago and it just did not work out for us, and at the time we decided to use RichFaces + Tomahawk instead.....We have been using RichFaces ever since, and with the publication of a recent RichFaces book; we finally learned how to use it well.

So questions come to my mind...  How does Oracle ADF compare to RichFaces, ICEfaces, Tobago, Trinidad (where does Trinidad start and Oracle ADF continue)?

Also there is a pretty steep learning curve to learning some of these frameworks and getting around their many quirks. Which makes it difficult to switch as the investment in learning is high... How do you convince someone like myself to give Oracle ADF a try (or another try) who might be using one of the 8 other flavors of JSF Ajax enabled components?

Also how do the Ajax features in Oracle ADF align with the upcoming Ajax features included in JSF 2.0?

Always good to hear from you and this is a good tutorial. 

To learn more about some of the other frameworks try this site:
http://www.jsfmatrix.net/

Peter Thomas replied on Fri, 2009/01/23 - 8:50am

I keep hearing about various products from Oracle branded "Fusion" and it is getting a little confusing.

Can you help me understand what exactly a "Fusion Web Application" means?  How does it relate to JSF?

Shay Shmeltzer replied on Fri, 2009/01/23 - 12:24pm in response to: Rick Hightower

Rick,

 If the last time you looked at ADF Faces was more than a year ago - you really need to take a new look at it - the type of UI it lets you build now is much richer then before with a lot more components , about 150 of them, and a lot more built in Ajax in the components themselfs, and also a collection of data visualization components (Graphs,gantt, Maps, Gauges etc).

 As far as why you would choose one set over the other I think you can look at some factors:

One of them would be the number and functionality of the components themselfs - unfortunattly mixing JSF components from different vendors in the same project can be challenging and the Ajax functionality just adds more complexity with a risk of different framework handling the Ajax interaction and client side life cycle in different ways - so a clear conclusion is to look for a framework that include as many components as possible - so the need to step out of it would be minimized if not eliminated. As far as I know ADF Faces with over a 150 components has the richest set out there.

Another aspect to evaluate is the functionality that the framework provides beyond components and that it let you add to your application. This would be things like drag and drop support, pop-up and dialog windows, menus, templating, skinning, accessibility, internalization etc.

Yet another criteria for choosing might be the actual underlying architecture used for achieving the Ajax behavior. Some components for example use client side manipulation, some use server side and some use a hybrid approach. These aspect can influence the end result in terms of performance.

I guess other factors can be IDE support and development experience, framework integration, price, support and training, community etc.

I hope this helps a bit to understand what to look for.

I would encourage you to start by just looking at the set of components offered and compare it to what you have today and see if you are missing anything or if you actually going to get a better UI with ADF Faces.

The two online demos are a good place to start:

http://jdevadf.oracle.com/adf-richclient-demo/faces/components/index.jspx

and

http://jdevadf.oracle.com/dvtdemo-dvt-faces-demo-context-root/faces/dvtFeatureDemo/index.jspx

Shay

 

Shay Shmeltzer replied on Fri, 2009/01/23 - 12:34pm in response to: Peter Thomas

Peter

Fusion is the "tag word" for Oracle similar to .NET for MS and WebSphere to IBM or WebLogic to ex BEA.

But at the end of the day Fusion means two major things:

Oracle Fusion Middleware - that's Oracle's application server with WebLogic as the core Java EE engine and SOA, Portal, BI, Security and other layers on top.

Oracle Fusion Applications - that's that next generation of Oracle's enterprise applications (HR, CRM, Financials etc). Those are applications that Oracle builds and sells to organizations - basically competing with SAP, SalesForce etc...

The interesting thing is that the Fusion Applications are built using JSF and the ADF Faces set of components to create the front end. This mean that Oracle has a lot riding on the functionality and success of the ADF Faces componetns - basically Oracle is eating its own dog food and actually uses its own technology to build their next generation of applications.

So to answer your question - a Fusion Web Application is an application that uses ADF Faces as the front end to the application and the rest of the ADF framework stack as the back-end.

You can see some screen shots from the upcoming Fusion applications that leverage ADF Faces here.

 Shay

 

Rick Hightower replied on Fri, 2009/01/23 - 1:52pm

Thank you for your comments Shay. Do you think with JSF 2.0 defining standards for Ajax interactions that it will be easier to combine components from multiple vendors? How well and how soon will Faces ADF align with JSF 2.0 (which of course is not even out yet)?

Hernando Barake replied on Sat, 2009/01/24 - 11:16am

Rick,

Aonther consideration is pricing.  See http://www.oracle.com/technology/products/jdev/htdocs/jdevpricefaq.html.

 Hernando

Surya De replied on Sat, 2009/01/24 - 1:27pm

Thanks Hernando for the link. I have been using Oracle's stack on and off...for example I have played with the 10g SOA suite and while it does have its really really impressive, it has its share of problems, I am looking forward to the 11g release. The 10g vs 11g JDeveloper, the changes are quite impressive.

 

However am I to understand that for production purposes, the JDeveloper stack is free and the only thing you will have to pay for is the Weblogic license?

 Thanks in advance for clarifying. :) 

 

Cheers!

Shay Shmeltzer replied on Sat, 2009/01/24 - 3:03pm

Just to answer some of the above questions:

 

JSF 2.0 - as you probably know Oracle is very active in this standard and we keep our finger on the pulse there. The spec is still not out and we are still working on seeing how this is going to effect the components we have and future development. I'm guessing this is something that every other JSF set of components out there is looking at.

 

License/Pricing - JDeveloper is free no matter what platform you deploy to. The ADF Faces components are part of the ADF framework which comes free with new WebLogic server licenses (or old Oracle Application Server licenses) - and has a license cost if you want to deploy it to other servers ($5k per CPU).

By the way if you are looking for a free set of JSF components with Ajax capabilities you might want to take a look at Apache Trinidad - on top of which ADF Faces is based. While ADF Faces add a lot more interactive behavior - the Trinidad component are still quite good. (And you can get the visual development experience for them for free in JDeveloper). 

Shay Shmeltzer replied on Mon, 2009/01/26 - 7:00pm

By the way, for those looking for a good tutorial that shows some of the key capabilities have a look at this one.

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

Scot Mcphee replied on Fri, 2009/02/13 - 8:53pm

The rich client framework looks very interesting, but can you show me how to develop clients with this technology using Maven or Ant to drive the build on a continuous integration server, and with Test-Driven principles in mind, and using the IDE of my choice?

I might want to deploy your rich client framework on an Oracle fusion middleware deployment environment, but using modern development methods like TDD, and not a crappy IDE that I don't know the keystrokes for, and which probably doesn't run on development operating system of choice, which is Mac OSX. Anyway, I don't want "wizards", I want code that's designed from the tests first. Also, in my development environment, on my workstation, I would like to use a lightweight server environment like Tomcat. Not something that eats half a gigabyte of memory just to start up - whatever the heavyweight production environment that is the eventual target.

Until you can decouple your server and presentation technologies from your IDE and the 20th century development thinking it embodies, I just won't be choosing it or recommending to my clients.

super pan replied on Tue, 2009/07/28 - 12:49am

Oracle's ADF is certainly a powerful tool. I support it. New Balance

serena lin replied on Sun, 2009/08/09 - 10:09pm

rather useful informations that i have to learned, thank you anyway, good job! by Nike air max 90 sneakers on unque styles released 2009, welcome Link Text

Michael Je replied on Fri, 2013/04/05 - 7:38am

  Anyway, I don't want "wizards", I want code that's designed from the tests first. Also, in my development environment, on my workstation, I

view source http://www.babul-ilm.com/ print? 1. 

would like to use a lightweight server environment like Tomcat. Not something that eats half a gigabyte of memory just to start up - whatever the heavyweight production environment that is the eventual target.

Sumit Narayan replied on Wed, 2013/04/17 - 7:23am

 Well I didnt have much knowledge about about AJAX and rich content related stuff in Java. You have enlighten me with this new concept and helped me to clear my concept

http://www.ifeel.edu.in

John Brown replied on Wed, 2013/07/24 - 1:28am

 I finding this framework for years, just try it today, it very wonderful.

Oud oil

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.