Tips and information about Oracle JDeveloper and Oracle ADF

A Better Looking ADF Faces Application Sample

One of my tasks for the Fusion Middleware 11g launch event was to build the JDeveloper/ADF part of the demo (along with Juan).
One key thing that made a difference in the resulting demo was that we got help in the design of the pages from a professional UI designer - Soraya looked at the pages we designed initially and then gave us tips on how to make the application look cleaner. She also gave us the images that were used in the application. We then worked on layouting the page according to her recommendations and on skinning some of them.

One tip for better looking UI is to try and eliminate as much clutter from your UI as possible - the application we got at the end used far less components on each page.

While you can see the result in the recorded webcast of the launch event - I thought that for JSF developers out there I would give a full screen view and skip the 40 minutes talk that come before Duncan gets to actually run through the demo.
So here is a recording of the demo running on my machine - with some explanation about the specific components used in each place.
One key point - everything in this demo's UI was done declaratively with no Javascript coding.

Glad you liked the demo, but I would rather not post the code for the application - it simply is not up to the code sample standards we have.
As many demos are, this one also contains some parts that are just quick hacks to get things done - I didn't had time to clean all of them up - so while the front end is 100% real the backend in some cases is a bit hacked.
I wouldn't want people to adopt this as a guideline on how to do things.
That said - If there is any specific item in the demo that you would like to know more about how it was done - just leave me a comment and I'll try and blog about it.

Great Job Shay :)
Could you please share us the source. I'll very thankful to you :)
I would like to know some ui design approaches as how did you create the vertical seperators for the four products (the printer, the laptop, the scanner and the web camera)

Hi Shay,
We tried to implement Spin Controller and Gauge.
We have considered a Text Box with Ware House Qty
One more variable GaugeValue = TextBox1.Value - Spin1.Value
We are not getting Value to Gauge.
Warehouse Qty Value is 500 and Spin Count Value is 10 . Considering above EL Expression we are getting 500 - 10 , instead of 490.
Appreciate if you can provide us logic you have used to synchronize Spin and Gauge?
Regards
Vijay

Vijay,
You probably need to access the numeric values of the fields instead of the strings to get it working. Something along the lines of
#{backing_checkout.quantity * bindings.ListPrice.inputValue.value}
If you aren't able to get the calculation done with EL - just do it in the backing bean for your page.
Shay

Hi, Great demo.
We are building an ADF application which uses almost all components as this demo does. Though I am still struggling to provide it a good look and feel. As u mentioned, key is to use lesser components to make the final page clutter free and css.
I am particularly interested in the right hand side of your product info page, where several graphs are shown. Which component is it? I am using panel accordian for such show hide scenario. But it has a very boxy feel. Yours is neat with just horizontal line and expand icon.