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.

Comments:

Nicely done, Shay. Of course you know what question will come next.... where can we get it? John

Posted by John Stegeman on July 03, 2009 at 12:48 AM PDT #

I totally agree with John. My boss got a copy of this one. Super! BTW, shouldn't that be "declaratively" rather than "decoratively"?

Posted by Michael Fons on July 08, 2009 at 02:22 AM PDT #

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.

Posted by shay on July 13, 2009 at 07:13 AM PDT #

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)

Posted by Hristo on July 16, 2009 at 06:24 AM PDT #

Hristo, as I mentioned I can't provide the full code - but for your specific question I used an image for the vertical separator and then put it inside an iterator so the code is something like this: <af:panelGroupLayout id="pgl3" layout="horizontal"> <af:iterator id="i2" var="prod" varStatus="status" value="#{bindings.ourItems.collectionModel}"> <af:panelGroupLayout layout="horizontal" id="pgl12"> <af:panelGroupLayout layout="vertical" id="pgl14" halign="center"> <af:outputText value="#{prod.name}" id="ot8"/> <af:image source="/Images/#{prod.image}" shortDesc="productImage" id="i3"> <af:showPopupBehavior triggerType="mouseOver" popupId="p1" align="endAfter"/> </af:image> <af:outputText value="#{prod.price}" id="ot5"> <af:convertNumber type="currency" currencySymbol="$"/> </af:outputText> </af:panelGroupLayout> <af:image source="./Images/homePage_divider.png" id="i1" rendered="#{(status.index &lt; 3) ? true : false}"/> </af:panelGroupLayout> </af:iterator> </af:panelGroupLayout>

Posted by shay on July 16, 2009 at 06:39 AM PDT #

Thanks Shay

Posted by Hristo on July 16, 2009 at 04:35 PM PDT #

Detail code explanation is requride

Posted by pradeep kumar on January 31, 2010 at 10:33 PM PST #

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

Posted by Vijay on February 03, 2010 at 08:42 PM PST #

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

Posted by shay on February 04, 2010 at 06:23 AM PST #

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.

Posted by Ashish Singh on March 20, 2010 at 02:07 AM PDT #

Ashish, I'm using an af:ShowDetail components with an af:separator between them there.

Posted by shay.shmeltzer on March 22, 2010 at 04:47 AM PDT #

Hi, I am from Oracle Fusion Financial team and one thing is sure that ADF will kill all other JAVA frameworks in short time................ This demo is stunning and cool..............

Posted by Kamleshwar on October 07, 2010 at 03:02 AM PDT #

Post a Comment:
  • HTML Syntax: NOT allowed
About

me
I'm a Director of Product Management for the Oracle Java Development Tools.
Follow me:
Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today