Designing well known websites with ADF Rich Faces

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    3 Favorites

    Designing well known websites with ADF Rich Faces - Presentation Transcript

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

    + maikorochamaikorocha, 1 month ago

    custom

    691 views, 3 favs, 0 embeds more stats

    In this presentation we show some of the basics of more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 691
      • 691 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 3
    • Downloads 0
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories