Friday, March 19 - 2:10 p.m. Presented By: George Maggessy and Maiko Rocha Gain a solid understanding of JavaServer Faces (JSF) best practices and tips for better collaboration between web developers and designers with two Java solutions architects who will take a look at the building blocks of JSF and how they pushed the boundaries of the provided UI components and layout managers to rebuild two well-known websites from scratch: Yahoo! Mail and Facebook. JSF is the current Java standard for building web-based UIs, but its reception and adoption by the Java community has been mixed. This case study discusses the challenges, limitations, and advantages of using JSF that were found throughout the development process of Y! Mail and Facebook. George Maggessy and Maiko Rocha take you step-by-step through the development process to reveal JSF best practices and pitfalls to avoid.

1. Keep pushing: How we rebuilt Y! Mail and Facebook using JSF and survived. George Maggessy & Maiko Rocha Solutions Architects Oracle Corp.

4. These are the UIs we’re building

5. What we want you to know What are the challenges and lessons learned from rebuilding well known websites using JSF components. The good, the bad and the ugly.

9. QUICK DEMO! ADF Faces component set, “Orabook”, and “Oahoo! Mail”

12. UI Pattern Example

14. Stretchable Layout Managers af:panelStretchLayout af:panelSplitter af:panelGroupLayout af:panelDashboard

15. Demo ADF Faces Stretchable Layout Managers panelStrechLayout, panelGroupLayout, panelSplitter, panelDashboard

16. Deconstructing Facebook Outer shell: three row layout Inner shell: three column layout Custom Components

17. Reconstructing Facebook From Facebook… … to ADF Faces.

18. Declarative Component af:panelBorderLayout + af:panelGroupLayout + af:image + af:commandLink + af:outputText

19. Reconstructing Facebook af:facetRef = mainCenter af:facetRef = mainBottom Outer Template af:panelStretchLayout af:panelGroupLayout=vertical af:facetRef = topNavigationBarArea Inner Template: panelGoupLayout (scroll) af:panelGroupLayout = horizontal af:facetRef=newsFeedArea af:facetRef= highlightsArea af:facetRef= filtersArea af:panelGroupLayout=vertical

20. Deconstructing Yahoo! Mail Outer shell: two column layout Dynamic region Custom Components

21. Reconstructing Yahoo! Mail From Yahoo! Mail… … to ADF Faces.

22. Task Flows

23. Reconstructing Yahoo! Mail af:facetRef = navigation af:facetRef = top af:panelStretchLayout af:facetRef = content Main Template Header Template af:panelStretchLayout Dynamic Region Home or Inbox Task Flows center top Home Task Flow: panelStretchLayout bottom Calendar Template Panel Dashboard Panel Group Layout: Vertical Calendar Region af:region – Mail Task Flow af:region – Calendar Task Flow

24. Make JSF layout even easier

25. Demo! Orabook (JSF based Facebook) O! Mail (JSF based Yahoo! Mail)

27. Questions