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

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)

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)