In this presentation we show some of the basics of ADF Rich Faces in terms of page layout, components, and skinning and how can you rebuild two well-known website layouts with those components.

2. Extreme Faces Makeover – Inject ADF Faces Rich Client Components into Your Old Wrinkled Applications Maiko Rocha, George Maggessy Fusion Middleware Architecture Team Oracle OpenWorld 2009 Unconference Sessions, ADF Track * (*)TM & 2008 Warner Bros. Entertainment Inc. All Rights Reserved.

7. Stretching and Flowing

11. Building Blocks

14. Layout building blocks

16. Headers

18. Tabs

20. Organizing items

22. Popups

24. Menus & toolbars

25. <Insert Picture Here> Exploring layout use cases

26. Use case: series of boxes Variation 1 of 6 - Flowing

27. Use case: series of boxes Variation 2 of 6 - Stretch the 1st box

28. Use case: series of boxes Variation 3 of 6 - Stretch the 2nd box

29. Use case: series of boxes Variation 4 of 6 - Stretch the 3rd box

30. Use case: series of boxes Variation 5 of 6 - Stretch all evenly

31. Use case: series of boxes Variation 6 of 6 - Stretch 1st 2 evenly

32. Deconstructing Facebook Outer shell: three row layout Inner shell: three column layout Custom Components Warning! Browser Scrollbar

33. Reconstructing Facebook - Components From Facebook… … to ADF Faces.

34. Reconstructing Facebook - Layout panelGroupLayout = vertical outer shell: template + panelStretchLayout inner shell: template + nested panelSplitters center area:panelGroupLayout = scroll

35. Deconstructing Yahoo! Mail Outer shell: two column layout Inner shell: two row layout Custom Components

36. Deconstructing Yahoo! Mail Attention! We are NOT making any money with those ads.

37. Reconstructing Y! Mail - Components From Yahoo! Mail… … to ADF Faces.

38. Reconstructing Y! Mail - Layout outer shell: template + panelStretchLayout top content navigation center top content: panelStretchLayout center top Home Task Flow: panelStretchLayout bottom Calendar Template Panel Dashboard Panel Group Layout: Vertical center Inbox Task Flow: panelStretchLayout bottom Calendar Template Panel Splitter: Horizontal (Ad on the right) Panel Splitter: Vertical (Emails)