X

Shay Shmeltzer's Oracle Development Tools Tips

  • July 2, 2009

A Better Looking ADF Faces Application Sample

Shay Shmeltzer
Director of Product Management - Oracle

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.

Join the discussion

Comments ( 12 )
  • John Stegeman Friday, July 3, 2009
    Nicely done, Shay.
    Of course you know what question will come next.... where can we get it?
    John
  • Michael Fons Wednesday, July 8, 2009
    I totally agree with John. My boss got a copy of this one. Super!
    BTW, shouldn't that be "declaratively" rather than "decoratively"?
  • shay Monday, July 13, 2009
    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.
  • Hristo Thursday, July 16, 2009
    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)
  • shay Thursday, July 16, 2009
    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>
  • Hristo Thursday, July 16, 2009
    Thanks Shay
  • pradeep kumar Monday, February 1, 2010
    Detail code explanation is requride
  • Vijay Thursday, February 4, 2010
    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
  • shay Thursday, February 4, 2010
    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
  • Ashish Singh Saturday, March 20, 2010
    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.
  • shay.shmeltzer Monday, March 22, 2010
    Ashish, I'm using an af:ShowDetail components with an af:separator between them there.
  • Kamleshwar Thursday, October 7, 2010
    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..............
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.