Designing well known websites with ADF Rich Faces

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
stretch

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="dark"
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

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="tabs")
Gives only a tab bar
Use af:commandNavigationItem for each tab
Use af:decorativeBox (with theme="…") 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)

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)

http://blogs.oracle.com	2535
https://blogs.oracle.com	1474
http://www.slideshare.net	167
http://prsync.com	99
http://www.developerit.com	10
http://translate.googleusercontent.com	6
http://webcache.googleusercontent.com	3
https://si0.twimg.com	3
http://static.slidesharecdn.com	3
http://erptechnews.com	1
http://grumpy.junta.com.au	1
http://www.google.de	1
http://labnol-proxy-server.appspot.com	1

Designing well known websites with ADF Rich Faces

by maikorocha

Accessibility

Categories

Upload Details

Usage Rights

13 Embeds 4,304

Statistics

Designing well known websites with ADF Rich Faces Presentation Transcript