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 (6)
Nicely done, Shay.
Of course you know what question will come next.... where can we get it?
John
Posted by John Stegeman | July 3, 2009 7:48 AM
Posted on July 3, 2009 07:48
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 | July 8, 2009 9:22 AM
Posted on July 8, 2009 09:22
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 | July 13, 2009 2:13 PM
Posted on July 13, 2009 14:13
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 | July 16, 2009 1:24 PM
Posted on July 16, 2009 13:24
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 < 3) ? true : false}"/>
</af:panelGroupLayout>
</af:iterator>
</af:panelGroupLayout>
Posted by shay | July 16, 2009 1:39 PM
Posted on July 16, 2009 13:39
Thanks Shay
Posted by Hristo | July 16, 2009 11:35 PM
Posted on July 16, 2009 23:35