Dia 1 - Parleys

streakgrowlInternet και Εφαρμογές Web

12 Νοε 2013 (πριν από 3 χρόνια και 11 μήνες)

96 εμφανίσεις

Keep  pushing:  How  we  rebuilt  Y!  
Mail  and  Facebook  using  JSF.  And  
survived.
Maiko  Rocha  &  George  Maggessy
Solu4on  Architects  -­‐  Oracle  Corp.
#jsflayout
What we want you to know
What  are  the  challenges  and  lessons  learned
 from  rebuilding  well  known  websites
using  JSF  components.  
Agenda
JSF  UI  layout  sucks.  Yes,  we  are  going  there.
How  to  make  JSF  beJer.    
UI  layout  with  JSF.
Deconstruc4ng  and  reconstruc4ng  Facebook  
and  Yahoo!  Mail.
Why are we speaking here?
30+  years  of  combined  experience  in  TI.
Produc9vity  freaks.
Part  of  Fusion  Middleware  Solu9ons  Architect  Team  –  
“The  A-­‐Team”.
Outbound:  PoCs,  prototypes,  escala9ons,  
presenta9ons.  Inbound:  bootcamps,  E2E  scenarios,  
product  architecture.
Yes,  we  work  with  other  stuff  too:  Grails,  JQuery,  
Scala,  Python...
Maiko & George strange world
+2,500  JEE  Developers  around  the  world
+11,000  UI  Flows
+5,000  Tables
+6,000  Business  Objects
+18,000  Queries  (Projec9ons)
+2,500  Business  Modules  (Façades)
+1,200  Web  Services
...  and  growing.
These are the UIs we’re building
Why JSF UI layout sucks
I’m  not  a  web  designer!
Lack  of  a  templa4ng  mechanism.
Lack  of  higher  level  layout  managers  to  
abstract  underlying  representa4on  (HTML).
Restricted  component  set.
Crea4ng  a  new  component  is  somewhat  
painful.
How to make JSF better?
Create  a  beJer  component  set!
Oracle  ADF  Faces
More  (150+),  beJer  components.
Declara4ve  component  crea4on.
Advanced,  component-­‐level  skinning.
Specialized  layout  managers.
Declara4ve  templa4ng  engine.
Facelets  support.
JSF  layout  challenges
JSF UI layout challenges
Cross  browser  support  is  s9ll  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  nes9ng  mutliple  
components  to  achieve  desired  effect
Developers  are  not  web  designers
Web  designers  are  not  developers.
What  are  the  dynamics  of  the  UI?
UI layout with JSF – general tips
Thou  shall  not  embed  raw  HTML  in  your  pages.
Avoid  inlineStyle  like  the  plague.  Use  skinning  instead.
Mock  ups  are  s9ll  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  paeerns  to  your  most  common  
scenarios  so  developers  can  refer  to  them.  Improves  
produc9vity,  reusability  and  standardisa9on.
UI pattern example
Working with layout managers
To  stretch  or  to  flow?  
Start  with  a  stretchable  outer  frame
Inside  this  frame,  have  flowing  islands  (ie,  scrollable  areas)
Stretching  maximizes  browser’s  viewport  
usage  (geometry  management)
It  can  also  stretch  its  children  automa4cally  
Flowing  isolates  components  that  should  
not  stretch
Where  to  start?
Stretchable layout managers
af:panelStretchLayout
af:panelSplitter
af:panelGroupLayout
af:panelDashboard
UI layout made easy
Demo
ADF  Faces  Layout  Managers
panelStretchLayout,  panelGroupLayout,
panelSpliJer,  panelDashboard
Orabook
Deconstructing Facebook
Outer shell
main area,toolbar
Scrollable area
Inner Shell
Nav bar,content
Three-column layout
Filter,Feeds,Highlights
Declarative
Components
Reconstructing Facebook
From Facebook…
…to ADF Faces.
Declarative Component
af:panelBorderLayout
+
af:panelGroupLayout
+
af:image
+
af:commandLink
+
af:outputText
Reconstructing Facebook
af:facetRef = mainCenter
af:facetRef = mainBottom
Outer Template
af:panelStretchLayout
Inner Template
af:panelGroupLayout = scroll
af:facetRef = topNavigationBarArea
af:panelGroupLayout = vertical
af:facetRef = innerContentArea
af:panelGroupLayout = horizontal
af:facetRef=newsFeedArea
af:facetRef=
highlightsArea
af:facetRef=
filtersArea
af:panelGroupLayout=vertical
Oahoo!  Mail
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! Mail
top
Panel Group Layout: Vertical
af:facetRef = navigation
af:facetRef = top
af:panelStretchLayout
af:facetRef = content
Main Template
Header Template
af:panelStretchLayout
Dynamic Region
Home or Inbox
Task Flows
Calendar Region
af:region – Mail Task Flow
af:region – Calendar Task Flow
DEMO!!
Orabook  (JSF  based  Facebook)
Oahoo!  Mail  (JSF  based  Y!  Mail)
Summary
JSF  is  a  system  of  components.  Learn  how  to  
put  them  together.
Work  in  tandem  with  a  web  designer.
Learn  how  map  UIs  to  exis4ng  components.
Find  a  JSF  compa4ble  templa4ng  
mechanism.
Forget  HTML.  CSS  is  your  best  friend.
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/