• Save
Designing well known websites with ADF Rich Faces
Upcoming SlideShare
Loading in...5

Designing well known websites with ADF Rich Faces



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.

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.



Total Views
Views on SlideShare
Embed Views



21 Embeds 4,750

http://blogs.oracle.com 2535
https://blogs.oracle.com 1838
http://www.slideshare.net 167
http://prsync.com 106
http://redsalt.blogspot.in 45
http://redsalt.blogspot.com 16
http://www.developerit.com 11
http://translate.googleusercontent.com 6
http://redsalt.blogspot.com.es 4
http://redsalt.blogspot.ae 3
https://si0.twimg.com 3
http://redsalt.blogspot.it 3
http://static.slidesharecdn.com 3
http://webcache.googleusercontent.com 3
http://redsalt.blogspot.co.uk 1
http://www.docshut.com 1
http://erptechnews.com 1
http://labnol-proxy-server.appspot.com 1
http://www.docseek.net 1
http://grumpy.junta.com.au 1
http://www.google.de 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Me gusta esta diapositiva me la podrías pasar????.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Designing well known websites with ADF Rich Faces Designing well known websites with ADF Rich Faces Presentation Transcript

  • 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.
  • Agenda
    • A little introduction to ADF Faces
    • Stretching & flowing
    • Building Blocks
    • Use cases
    • Q & A, more info
  • 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
  • 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>
  • ADF Rich Faces Origins
    • Support Fusion Applications UI requirements
  • Stretching and Flowing
  • 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
  • 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)
  • 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
  • Building Blocks
  • 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.
  • 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
  • Layout building blocks
  • 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)
  • Headers
  • 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)
  • Tabs
  • 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
  • Organizing items
  • 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”
  • Popups
  • 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
  • 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 Scrollbar
  • Reconstructing Facebook - Components From Facebook… … to ADF Faces.
  • Reconstructing Facebook - Layout panelGroupLayout = vertical outer shell: template + panelStretchLayout inner shell: template + nested panelSplitters center area:panelGroupLayout = scroll
  • 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: 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)
  • <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)