Extreme Faces Makeover –  Inject ADF Faces Rich Client Components into Your Old Wrinkled Applications Maiko Rocha, George ...
Agenda <ul><li>A little introduction to ADF Faces </li></ul><ul><li>Stretching & flowing </li></ul><ul><li>Building Blocks...
JSF Key Concepts <ul><li>UI Component  </li></ul><ul><ul><li>JSF is component based </li></ul></ul><ul><li>Managed Beans &...
How Oracle Improves JSF <ul><li>ADF Faces Components </li></ul><ul><ul><li>More components </li></ul></ul><ul><ul><li>Bett...
ADF Rich Faces Origins <ul><li>Support Fusion Applications UI requirements </li></ul>
Stretching and Flowing
ADF Faces likes to No browser vertical scrollbar!! <ul><li>Maximize usage of viewable area </li></ul><ul><ul><li>Use tabs,...
Stretching & flowing <ul><li>Browsers are unreliable; not robust: </li></ul><ul><ul><li>Some things can stretch others mus...
Stretching & flowing <ul><li>W3C CSS Box model makes it hard to combine margins, borders, and padding with width and heigh...
Building Blocks
Reusable content building blocks <ul><li>Page Templates </li></ul><ul><ul><li>Allow you to create entire page layouts usin...
Layout building blocks <ul><li>af:panelStretchLayout </li></ul><ul><ul><li>Stretched frame with top, start, center, end, b...
Layout building blocks
Headers <ul><li>af:panelBox </li></ul><ul><ul><li>Group box or side container </li></ul></ul><ul><li>af:panelHeader </li><...
Headers
Tabs <ul><li>af:navigationPane (hint=&quot;tabs&quot;) </li></ul><ul><ul><li>Gives only a tab bar </li></ul></ul><ul><ul><...
Tabs
Organizing items <ul><li>Organizing labels & fields: </li></ul><ul><ul><li>af:panelFormLayout </li></ul></ul><ul><ul><li>S...
Organizing items
Popups <ul><li>af:popup - wrapper for inline popping-up content </li></ul><ul><li>af:dialog - ask for something </li></ul>...
Popups
Menus & toolbars <ul><li>af:toolbox </li></ul><ul><ul><li>wrapper for menu bars and toolbars </li></ul></ul><ul><ul><li>af...
Menus & toolbars
<Insert Picture Here> Exploring layout use cases
Use case: series of boxes Variation 1 of 6 - Flowing
Use case: series of boxes Variation 2 of 6 - Stretch the 1st box
Use case: series of boxes Variation 3 of 6 - Stretch the 2nd box
Use case: series of boxes Variation 4 of 6 - Stretch the 3rd box
Use case: series of boxes Variation 5 of 6 - Stretch all evenly
Use case: series of boxes Variation 6 of 6 - Stretch 1st 2 evenly
Deconstructing Facebook Outer shell: three row layout Inner shell: three column layout Custom Components Warning! Browser ...
Reconstructing Facebook - Components From Facebook… … to ADF Faces.
Reconstructing Facebook - Layout panelGroupLayout = vertical outer shell: template + panelStretchLayout inner shell: templ...
Deconstructing Yahoo! Mail Outer shell: two column layout Inner shell: two row layout Custom Components
Deconstructing Yahoo! Mail Attention! We are NOT making any money with those ads.
Reconstructing Y! Mail - Components From Yahoo! Mail… … to ADF Faces.
Reconstructing Y! Mail - Layout outer shell: template + panelStretchLayout top content navigation center top content: pane...
<Insert Picture Here> <ul><li>Q & A </li></ul><ul><li>More info: </li></ul><ul><li>Rich Enterprise Applications Home Page:...
Upcoming SlideShare
Loading in...5
×

Designing well known websites with ADF Rich Faces

28,866

Published on

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.

Published in: Technology
1 Comment
36 Likes
Statistics
Notes
  • Me gusta esta diapositiva me la podrías pasar????.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
28,866
On Slideshare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
0
Comments
1
Likes
36
Embeds 0
No embeds

No notes for slide

Designing well known websites with ADF Rich Faces

  1. 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.
  2. 3. Agenda <ul><li>A little introduction to ADF Faces </li></ul><ul><li>Stretching & flowing </li></ul><ul><li>Building Blocks </li></ul><ul><li>Use cases </li></ul><ul><li>Q & A, more info </li></ul>
  3. 4. JSF Key Concepts <ul><li>UI Component </li></ul><ul><ul><li>JSF is component based </li></ul></ul><ul><li>Managed Beans & Backing Beans </li></ul><ul><ul><li>Encapsulates Application Logic, Data and Component Properties </li></ul></ul><ul><li>Expression Language </li></ul><ul><ul><li>Binding data to the UI </li></ul></ul><ul><li>Navigation Case </li></ul><ul><ul><li>The rules that govern page flow </li></ul></ul><ul><li>Lifecycle </li></ul><ul><ul><li>Cycle of creation, validation, data-binding and business service interactions of a page </li></ul></ul>
  4. 5. How Oracle Improves JSF <ul><li>ADF Faces Components </li></ul><ul><ul><li>More components </li></ul></ul><ul><ul><li>Better components </li></ul></ul><ul><li>Templating </li></ul><ul><li>ADF Task Flow </li></ul><ul><ul><li>Extended JSF controller </li></ul></ul><ul><li>Page fragments </li></ul><ul><li>Page regions </li></ul><ul><li>Reusable flows </li></ul><Insert Picture Here>
  5. 6. ADF Rich Faces Origins <ul><li>Support Fusion Applications UI requirements </li></ul>
  6. 7. Stretching and Flowing
  7. 8. ADF Faces likes to No browser vertical scrollbar!! <ul><li>Maximize usage of viewable area </li></ul><ul><ul><li>Use tabs, accordions, menus and popups to virtually expand your viewable area </li></ul></ul>stretch
  8. 9. Stretching & flowing <ul><li>Browsers are unreliable; not robust: </li></ul><ul><ul><li>Some things can stretch others must flow </li></ul></ul><ul><ul><li>% dimensions mean different things </li></ul></ul><ul><ul><li>Don’t be a slave to the browsers, avoid inlineStyle like the plague! </li></ul></ul><ul><li>Highly recommended that you build your layouts like this: </li></ul><ul><ul><li>Use a stretchable outer frame </li></ul></ul><ul><ul><li>Inside this frame, have flowing islands (e.g. scrollable areas) </li></ul></ul><ul><ul><li>Do not attempt to stretch something vertically in a flowing island! </li></ul></ul><ul><li>Need custom styling? </li></ul><ul><ul><li>Find a declarative approach (theme, hint, other attribute) </li></ul></ul><ul><ul><ul><li>e.g. make the page dark blue with af:document’s theme=&quot;dark&quot; </li></ul></ul></ul><ul><ul><li>Use the styleClass attribute ( global selectors ) </li></ul></ul><ul><ul><li>Organizations can use a custom skin (to change how a component looks or just to make custom global selectors) </li></ul></ul>http://www.oracle.com/technology/products/adf/patterns/layoutBestPractices.html
  9. 10. Stretching & flowing <ul><li>W3C CSS Box model makes it hard to combine margins, borders, and padding with width and height dimensions. </li></ul><ul><ul><li>Some browsers are experimenting with a proposed CSS3 “box-sizing” style to override how it works. </li></ul></ul><ul><li>Workarounds include nesting multiple components to achieve desired effect. </li></ul><ul><li>Problem is similar to an Internet Explorer 7 bogus horizontal scroll bar bug 6374088 </li></ul>
  10. 11. Building Blocks
  11. 12. Reusable content building blocks <ul><li>Page Templates </li></ul><ul><ul><li>Allow you to create entire page layouts using individual components. </li></ul></ul><ul><li>Declarative Components </li></ul><ul><ul><li>Allow you to assemble existing, individual UI components into one composite, reusable component. </li></ul></ul><ul><li>ADF Regions / Task Flows </li></ul><ul><ul><li>Encapsulate business logic, process flow, and UI components all in one package, which can then be reused throughout the application. </li></ul></ul><ul><li>All of them can be packaged as ADF Libraries. </li></ul>
  12. 13. Layout building blocks <ul><li>af:panelStretchLayout </li></ul><ul><ul><li>Stretched frame with top, start, center, end, bottom </li></ul></ul><ul><li>af:panelSplitter </li></ul><ul><ul><li>Stretched box divided into 2 user-modifiable sections </li></ul></ul><ul><li>af:panelDashboard </li></ul><ul><ul><li>Stretched tiled structure of boxes </li></ul></ul><ul><li>af:panelGroupLayout </li></ul><ul><ul><li>Series of components - default, horizontal, vertical, scroll structures </li></ul></ul><ul><li>af:panelBorderLayout </li></ul><ul><ul><li>Flowing frame with top, start, center, end, bottom, and more </li></ul></ul><ul><li>trh:tableLayout/trh:rowLayout/trh:cellFormat </li></ul><ul><ul><li>Flowing raw HTML table structure </li></ul></ul>
  13. 14. Layout building blocks
  14. 15. Headers <ul><li>af:panelBox </li></ul><ul><ul><li>Group box or side container </li></ul></ul><ul><li>af:panelHeader </li></ul><ul><ul><li>Fancy header structure (see facets) </li></ul></ul><ul><ul><li>Many levels (size attribute) </li></ul></ul><ul><li>af:showDetailHeader </li></ul><ul><ul><li>Just like af:panelHeader but collapsible </li></ul></ul><ul><li>af:showDetail </li></ul><ul><ul><li>Collapsible too but simpler structure </li></ul></ul><ul><li>af:panelAccordion </li></ul><ul><ul><li>Show one or many collapsible areas (af:showDetailItem) </li></ul></ul>
  15. 16. Headers
  16. 17. Tabs <ul><li>af:navigationPane (hint=&quot;tabs&quot;) </li></ul><ul><ul><li>Gives only a tab bar </li></ul></ul><ul><ul><li>Use af:commandNavigationItem for each tab </li></ul></ul><ul><ul><li>Use af:decorativeBox (with theme=&quot;…&quot;) to construct the body </li></ul></ul><ul><ul><li>Can use one page per tab selection or dynamically update what is shown in the browser (e.g. with af:switcher) </li></ul></ul><ul><li>af:panelTabbed </li></ul><ul><ul><li>Gives a tab bar and tab body </li></ul></ul><ul><ul><li>af:showDetailItem (also used in af:panelAccordion) </li></ul></ul>
  17. 18. Tabs
  18. 19. Organizing items <ul><li>Organizing labels & fields: </li></ul><ul><ul><li>af:panelFormLayout </li></ul></ul><ul><ul><li>Specify the # of columns and rows per column </li></ul></ul><ul><ul><li>Can configure labelWidth and fieldWidth </li></ul></ul><ul><ul><li>Typically contains af:input* and af:select* components </li></ul></ul><ul><ul><li>For other kinds of content, use af:panelLabelAndMessage if: </li></ul></ul><ul><ul><ul><li>There is no explicit label, or </li></ul></ul></ul><ul><ul><ul><li>Need multiple fields per label </li></ul></ul></ul><ul><ul><li>Use af:group if you need to separate sections </li></ul></ul><ul><li>Bulleted or ordered lists </li></ul><ul><ul><li>af:panelList </li></ul></ul>
  19. 20. Organizing items
  20. 21. Popups <ul><li>af:popup - wrapper for inline popping-up content </li></ul><ul><li>af:dialog - ask for something </li></ul><ul><li>af:panelWindow - show something </li></ul><ul><li>af:noteWindow - tooltip boxes </li></ul><ul><li>af:showPopupBehavior </li></ul><ul><ul><li>Declaratively show a popup </li></ul></ul><ul><li>JSF messaging framework </li></ul><ul><ul><li>Component or page-level alerts, e.g. validation </li></ul></ul><ul><li>External browser windows aka “dialog framework” </li></ul>
  21. 22. Popups
  22. 23. Menus & toolbars <ul><li>af:toolbox </li></ul><ul><ul><li>wrapper for menu bars and toolbars </li></ul></ul><ul><ul><li>af:group - use one per row </li></ul></ul><ul><li>af:toolbar </li></ul><ul><ul><li>af:commandToolbarButton </li></ul></ul><ul><ul><li>af:group - separators between groups of items </li></ul></ul><ul><li>af:menuBar </li></ul><ul><ul><li>af:menu - nest for submenus </li></ul></ul><ul><ul><ul><li>af:commandMenuItem </li></ul></ul></ul><ul><ul><ul><li>af:goMenuItem </li></ul></ul></ul><ul><ul><li>af:group - separators between groups of items </li></ul></ul>
  23. 24. Menus & toolbars
  24. 25. <Insert Picture Here> Exploring layout use cases
  25. 26. Use case: series of boxes Variation 1 of 6 - Flowing
  26. 27. Use case: series of boxes Variation 2 of 6 - Stretch the 1st box
  27. 28. Use case: series of boxes Variation 3 of 6 - Stretch the 2nd box
  28. 29. Use case: series of boxes Variation 4 of 6 - Stretch the 3rd box
  29. 30. Use case: series of boxes Variation 5 of 6 - Stretch all evenly
  30. 31. Use case: series of boxes Variation 6 of 6 - Stretch 1st 2 evenly
  31. 32. Deconstructing Facebook Outer shell: three row layout Inner shell: three column layout Custom Components Warning! Browser Scrollbar
  32. 33. Reconstructing Facebook - Components From Facebook… … to ADF Faces.
  33. 34. Reconstructing Facebook - Layout panelGroupLayout = vertical outer shell: template + panelStretchLayout inner shell: template + nested panelSplitters center area:panelGroupLayout = scroll
  34. 35. Deconstructing Yahoo! Mail Outer shell: two column layout Inner shell: two row layout Custom Components
  35. 36. Deconstructing Yahoo! Mail Attention! We are NOT making any money with those ads.
  36. 37. Reconstructing Y! Mail - Components From Yahoo! Mail… … to ADF Faces.
  37. 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)
  38. 39. <Insert Picture Here> <ul><li>Q & A </li></ul><ul><li>More info: </li></ul><ul><li>Rich Enterprise Applications Home Page: http:// rea .oracle.com/ </li></ul><ul><li>ADF Faces Online Demo (components, skins, layout): http:// jdevadf .oracle.com/ adf - richclient -demo/faces/index. jspx </li></ul><ul><li>ADF Faces Rich Client on OTN: http://www.oracle.com/technology/products/ adf / adffaces /index.html </li></ul><ul><li>ADF Functional Patterns and Best Practices: http://www.oracle.com/technology/products/ adf /patterns/index.html </li></ul><ul><li>Forum: http://forums.oracle.com/forums/forum. jspa ? forumID =83 </li></ul><ul><li>Gamertags: </li></ul><ul><ul><li>Maiko Rocha……...: toscomor (XBL,PSN) </li></ul></ul><ul><ul><li>George Magessy…: gmaggess (XBL,PSN) </li></ul></ul>

×