Keep pushing: How we rebuilt Y! Mail and Facebook using JSF and survived.

George Maggessy & Maiko RochaSolutions ArchitectsOracle Corp.

Why are we speaking here?

30+ years of combined experience in TI.

Productivity freaks.

Part of Fusion Middleware Solutions Architect Team –

“The A-Team”.

Outbound: PoCs, prototypes, escalations,

presentations. Inbound: Bootcamps, E2E scenarios,

product roadmap, developer whipping.

Yes, we work with other stuff too: Eclipse, Python,

Grails, JQuery, etc.

Maiko & George strange world

+2,000 JEE Developers around the world

+11,000 UI Flows

+5,000 Tables

+6,000 Business Objects

+18,000 Queries (Projections)

+2,500 Business Modules (Facades)

+1,200 Services

+20Gb Codebase

… and growing fast.

These are the UIs we’re building

What we want you to know

What are the challenges and lessons learned from rebuilding well known websites using JSF components.

The good, the bad and the ugly.

Agenda

JSF UI layout sucks. Yes, we are going there.

How to make JSF better.

UI layout with JSF.

Deconstructing and reconstructing Facebook

and Yahoo! Mail.

Why JSF UI layout sucks

I’m not a web designer!

Lack of a templating mechanism.

Lack of higher level layout managers to

abstract underlying representation (HTML).

Restricted component set.

Creating a new component is somewhat

painful.

How to make JSF better?

Create a better component set!

Oracle ADF Faces

• More (+150), better components.

• Declarative component creation.

• Advanced, component-level skinning.

• Specialized layout managers.

• Declarative templating engine.

• Facelets support.

QUICK DEMO!

ADF Faces component set, “Orabook”, and “Oahoo! Mail”

JSF UI Layout Challenges

Cross browser support is still tough.

% dimensions mean different things.

W3C CSS Box model makes it hard to

combine margins, borders and

padding with width and height

dimensions.

Workarounds include nesting multiple

components to achieve desired effect.

Developers are not web designers.

Web Designers are not developers.

UI Layout with JSF – General Tips

Thou shall not embed raw HTML in your pages.

Avoid inlineStyle like the plague. Use skinning instead.

Mockups are still valid, but let the web designer know

the JSF component set.

Learn to see beyond the UI itself and break it down to

match the component set.

Establish a set of patterns to your most common

scenarios so developers can refer to them. Improves

productivity, reusability, and standardization.

UI Pattern Example

Working with Layout Managers

To stretch or to flow?

• Stretching maximizes browser’s viewport

usage (geometry management).

• It can also stretch it’s children

automatically.

• Flowing isolates components that should not

stretch.

Where to start?

• Start with a stretchable outer frame.

• Inside this frame, have flowing islands (i.e., scrollable areas).

Stretchable Layout Managers

af:panelStretchLayout af:panelSplitter

af:panelGroupLayout af:panelDashboard

DemoADF Faces Stretchable Layout Managers

panelStrechLayout, panelGroupLayout, panelSplitter, panelDashboard

Deconstructing Facebook

Outer shell: three row

layout

Inner shell: three column layout

Custom Components

Reconstructing FacebookFrom Facebook… …to ADF Faces.

Declarative Component

af:panelBorderLayout+

af:panelGroupLayout+

af:image+

af:commandLink+

af:outputText

af:panelBorderLayout+

af:panelGroupLayout+

af:image+

af:commandLink+

af:outputText

Reconstructing Facebook

af:facetRef = mainCenter

af:facetRef = mainBottom

Outer Templateaf:panelStretchLayout

af:panelGroupLayout=vertical

af:facetRef = topNavigationBarArea

Inner Template: panelGoupLayout

(scroll)

Inner Template: panelGoupLayout

(scroll)

af:panelGroupLayout = horizontalaf:facetRef=newsFeedArea

af:facetRef=highlightsArea

af:facetRef=filtersArea

af:panelGroupLayout=verticalaf:panelGroupLayout=vertical

Deconstructing Yahoo! Mail

Outer shell: two column layout

Dynamic region

Custom Components

Reconstructing Yahoo! Mail

From Yahoo! Mail… …to ADF Faces.

Task Flows

Reconstructing Yahoo! Mailaf:

face

tRef

=

navig

ati

on

af:

face

tRef

=

navig

ati

on

af:facetRef = topaf:facetRef = top

af:panelStretchLayoutaf:panelStretchLayout

af:facetRef = contentaf:facetRef = content

Main TemplateMain Template

Header TemplateHeader Template

af:panelStretchLayout

Dynamic RegionHome or Inbox Task Flows

center

top

Home Task Flow: panelStretchLayout

bottom Calendar Template

Panel Dashboard

Panel Group Layout: Vertical

Calendar Region

af:region – Mail Task Flow

af:region – Calendar Task Flow

Make JSF layout even easier

Demo!Orabook (JSF based Facebook)O! Mail (JSF based Yahoo! Mail)

Summary

JSF is a system of components. Learn how to put them

together.

Work in a tandem with a web designer.

Learn how to map Uis to existing components.

Find a JSF compatible templating mechanism.

Forget HTML. CSS is your best friend.

Questions

Thanks for your attention!Where to find more stuff?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

Blogs:

Maiko - http://adfgarage.blogspot.com

George - http://georgemaggessy.blogspot.com/