Pretty Java Server Faces

1
Pretty Java Server Faces
Lucas Jellema ( ) Oracle Open World
2006 Tuesday 24th October
2
Agenda

• Java Server Faces Basic building blocks
• UI Components, Managed Beans, EL expressions
• Validators, Converters, ActionListeners
• Navigation
• JSF Implementations
• Introduction Oracle ADF Faces
• AJAX in ADF Faces
• ADF Faces and ADF Data Binding
• Mix Apache MyFaces Tomahawk ADF Faces
• ADF Faces on Rails with JHeadstart

3
Building Web Applications

• GUI - style
• Oracle WebForms
• Java Swing Applet

• HTML/JavaScript
• Oracle MOD_PLSQL
• Oracle Application Express (fka HTML DB)
• Java Servlet, JSP, Struts

Unproductive, complex, too bandwidth-greedy,
limited browser support
Unproductive, complex, poor tool-support, poor
UI,proprietary
Proprietary, costly and complex application
server infrastructure, unintuitive UI
Unproductive, complex, poor tool-support, poor UI
4
Historical Build up to Java Server Faces

• Java Based Web applications
• CGI
• Servlet
• JSP
• Struts
• Custom tag libraries
• JSTL
• Java Server Faces

• Decreasing
• Complexity
• Custom and Proprietary Approaches

• Increasing
• Productivity
• Structure Quality
• Maintainability

5
Key benefits from Java Server Faces

• Structure, Quality, Maintainability
• Productivity
• Component Libraries
• Standardized interfaces, easy to integrate
• Advanced IDE support
• Drag Drop, Wizards, Editors, Visualization
• Next generation technology compared to Struts,
  JSP and Custom Tag Libraries
• Through Java 1.4, EL, Standardization,
• FUN!!

6
Productive Development of User Interfaces

• Component Based
• Binding between Item properties and Model
• Programmatic access to and manipulation of Items
• Visual Layout Editor
• Drag Drop Development
• Wizard and Editor driven
• Events Triggers Infrastructure
• Run and Debug from within the IDE
• Integration with Java/J2EE Technologies

• Joyful
• Successor to
• Forms

7
Agenda

• Java Server Faces Basic building blocks
• UI Components, Managed Beans, EL expressions
• Validators, Converters, ActionListeners
• Navigation
• JSF Implementations
• Introduction Oracle ADF Faces
• AJAX in ADF Faces
• ADF Faces and ADF Data Binding
• Mix Apache MyFaces Tomahawk ADF Faces
• ADF Faces on Rails with JHeadstart

8
JSF UI ComponentsThey all have

• Properties
• For example id, value, rendered, disabled,
  required
• And also styleClass, onClick, onMouseOver,
  onBlur,...
• Events that listeners can be hooked into
• For example ValueChange and Action
• Note these are Server Side events!
• Validators that well validate their value
• Converters that transform from value to user
  friendly format and vv.
• One or more appearances
• For example one on HTML, one on PDA etc.

9
JSF UI Components

• Organized per page into a tree with a ltviewgt
  element as root
• This tree is kept in memory typically server
  side in the session scope and can be accessed
  programmatically
• VERY IMPORTANT we have server side, programmatic
  access to all UI elements, including all their
  properties
• Common Implementation use a JSP as container for
  a JSF page using JSF Tag Libraries HTML and Core
• Mix with normal HTML tags
• JSF Components JSP Custom Tags

10
JSF Page View tree and Implementation in JSP
11
Binding JSF Component properties

• All properties on JSF Components can be specified
  using JSF EL Expressions
• Including the HTML pass-through properties
• Similar to JSP EL
• EL Expressions can contain bean properties and
  methods
• Value binding and Method binding
• Standard available in a Web Application implicit
  variables applicationScope, cookie, facesContext,
  param, initParam, requestScope, sessionScope,
  view
• Example
• valueparam.title
• renderedparam.publicationYear gt 1999
• ActionbookSearch.doSearch

12
JSF Managed Beans

• JSF can Manage Beans for us
• IoC (Inversion of Control) Container Design
  Pattern
• Based on Bean (POJO) Configurations in the
  faces-config.xml file, JSF will
• Instantiate Beans
• Place them in the indicated scope (application,
  session,)
• Initialize properties with default values

13
Managed Beans in Faces Console and
faces-config.xml
14
JSF - Navigation

• JSF is also a Controller Framework that deals
  with inter-page navigation
• Submitting a form without navigation rule leads
  to post-back redisplay of the same page
• The faces-config.xml file contains the Navigation
  Rules
• from-view-id
• from-outcome
• to-view-id
• The outcome is set
• as the action propertyon the button or link
• by the action methodbound to the actionproperty
• Note action listeners do no set the outcome

15
JSF Navigation- in faces-config.xml, the Faces
console and the visual editor
16
JSF DataTable

• Most Advanced Standard UI Component
• Can be bound to JDBC ResultSets, Collections
  (Sets, Lists), Arrays
• Has built in support for
• Row-banding, column-banding, header, footer,
  pagination (start with, rows)
• Renders in HTML as a Table element
• Does multi-row edit as easy as multi-row
  read-only
• Use InputText instead of OutputText

17
The JSF Data Tableand the JDeveloper 10.1.3
Wizard

• Create a new JSF JSP page
• Drag Drop the HtmlDataTable component
• Specify the binding libraryManager.getBooks()
• Define the column headers and sequence
• Run the application

18
The JSF Data Tableand the JDeveloper 10.1.3
Wizard
19
Agenda

• Java Server Faces Basic building blocks
• UI Components, Managed Beans, EL expressions
• Validators, Converters, ActionListeners
• Navigation
• JSF Implementations
• Introduction Oracle ADF Faces
• AJAX in ADF Faces
• ADF Faces and ADF Data Binding
• Mix Apache MyFaces Tomahawk ADF Faces
• ADF Faces on Rails with JHeadstart

20
JSF is a Specification

• JSF is an API specification, part of JEE 5
• Supported by any JEE 5 compliant Application
  Server
• To develop an application with JSF you need to
  have an actual implementation
• Or mix components from various implementations!
• For example
• The SUN Reference Implementation
• Apache MyFaces Tomahawk
• Smile
• WebGalileo Faces
• ICEFaces
• Ecruiser
• Keel
• And.

21
ADF Faces

• Also free, non-proprietary and even Open Source
• Part of Apache MyFaces called Trinidad

22
Overview of ADF Faces

• Started life as Oracle UIX (User Interface XML)
• From internal projects at Oracle Applications
  (cabo baja) around 2000
• First made public in 2001/2002
• Used for the HTML User Interfaces in the Oracle
  E-Business Suite (Self Service Apps, CRM)
• Renamed ADF UIX late 2004
• Released as ADF Faces a JSF implementation in
  2005
• Announcement of donation to the Open Source
  Community during JavaPolis 2005 (december)
• Subproject under Apache MyFaces (as Trinidad,
  next to Tobago and Tomahawk)
• Note JDeveloper has been free since JavaOne 2005

23
ADF Faces Components

• Just like the JSF Components we have seen so far
• In different Tag Libraries
• With CSS stylesheets and support for skinning
• Based on the Oracle BLAF (browser look and feel
  guidelines) produced by the Usability Lab
• See http//www.oracle.com/technology/tech/blaf/in
  dex.html
• ADF Faces provides
• Much richer set of components (tree, calendar,
  list of values, shuttle, train, colorchooser,
  menu, table navigation, .)
• AJAX or partial page rendering
• Through IFrame/DOM Delta approach
• Client Side validation conversion
• Skinning
• Drag Drop and WYSIWYG support in JDeveloper

24
For example ADF Faces Table

• Table Component
• With built-in sort, navigation, editing, detail
  disclosure

25
Agenda

• Java Server Faces Basic building blocks
• UI Components, Managed Beans, EL expressions
• Validators, Converters, ActionListeners
• Navigation
• JSF Implementations
• Introduction Oracle ADF Faces
• AJAX in ADF Faces
• ADF Faces and ADF Data Binding
• Mix Apache MyFaces Tomahawk ADF Faces
• ADF Faces on Rails with JHeadstart

26
AJAX

• AJAX Asynchronous JavaScript and XML
• Thé Number One Hype!
• Basis for Rich Internet Applications and Web
  2.0
• Or more meaningfully
• Communication between browser and server
• Of which the user is unaware
• That is typically triggered by user activity or a
  timer
• That can result in the UI being partially updated
• Validation message is presented
• Calculation result is displayed
• List of Values is updated
• UI component is modified, for example
  enabled/disabled
• UI elements such as Images are synchronized with
  the users actions

27
Implementing AJAX Style functionality

• Typically with a lot of custom JavaScript and
  DHTML
• The JavaScript XMLHttpRequest Object is
  frequently used
• Using (hidden) IFRAMES is a less hyped
  alternative
• Increasingly using AJAX JavaScript Toolkits
• For example DOJO, Qooxdo, Google Web Toolkit,
  Backbase, ..
• Can be somewhat tricky to integrate with JSF
• ADF Faces has built-in AJAX style functionality
• Based on the IFRAME approach
• Fully declarative no code required!

MESSY!
28
AJAX in ADF Faces

• Box Office Application
• Order tickets for theater shows
• AJAX behavior
• Show List update
• Immediate Validation
• Image synchronization
• Seating Component Enable/Disable
• Total Price Calculation

29
AJAX-like functionality in Box Office Application

• When changed causes
• refresh of Thumbnail and Date Chooser
• validation of Date of performance and Number
  of Tickets
• enable/disable of Seating Arrangement
• recalculation of Price

When changed, will cause list of shows to be
refreshed
When changed causes recalculation of Price

• When changed, will cause
• validation of Date of Performance

• When changed
• validation of Number of Tickets
• recalculation of Price

30
Using AJAX in ADF Faces for on the fly UI
tailoring by the end user

• When the Apply Column Settings button is pressed
• an AJAX style request is sent (in the background)
  to a backing bean that manipulates the table
• when the request completes, the table component
  is (partially) refreshed to hide, display and
  reorder columns

31
ADF Faces Rich Client components early 2007?

• Client Side
• Drag drop
• Resizing, Reorderingof Columns
• Step-lessdata-scrolling
• Accordion Widget

32
Agenda

• Java Server Faces Basic building blocks
• UI Components, Managed Beans, EL expressions
• Validators, Converters, ActionListeners
• Navigation
• JSF Implementations
• Introduction Oracle ADF Faces
• AJAX in ADF Faces
• ADF Faces and ADF Data Binding
• Mix Apache MyFaces Tomahawk ADF Faces
• ADF Faces on Rails with JHeadstart

33
Overview of ADF (Application Development
Framework)

• ADF Model(binding framework)
• Provides data services
• In technologyagnostic way
• JSR-227
• Data Sources are registeredwith ADF Binding
  Layer
• Associated DataControls are published to
  applications

Database
34
Set of HrmService DataControls based on ADF BC
Business Service
HrmService
employees
raiseSalaries
name
job
Model
Business Service - POJO
Business Service ADF Business Components
HrmService
Employee
Application ModuleHrmService
ViewObjectEmployee
35
ADF Data Controls can be dragged into JSF Pages
in various shapes

• Generic managed bean bindings
• Maintained by ADF Servlet Filter
• Takes care of references to DataControls

36
Agenda

• Java Server Faces Basic building blocks
• UI Components, Managed Beans, EL expressions
• Validators, Converters, ActionListeners
• Navigation
• JSF Implementations
• Introduction Oracle ADF Faces
• AJAX in ADF Faces
• ADF Faces and ADF Data Binding
• Mix Apache MyFaces Tomahawk ADF Faces
• ADF Faces on Rails with JHeadstart

37
One of the promises of Java Server Faces Mixing
components from many implementations

• You can develop your JSF applications using ADF
  Faces
• .. and complement them with specific components
  from Apache MyFaces TomaHawk
• Pulldown menu, Popup DIV, Calendar DIV, HTMLInput
  WYSIWYG Editor etc.
• Steps
• Download the Tomahawk binaries and copy tomahawk
  jar to the WEB-INF/lib directory
• Specify the Library and Taglib Library for
  Tomahawk in the JDeveloper project
• Update the web.xml file - configure Tomahawk
  Extension Filter 
• Add the tomahawk namespace to your JSPX page
• Include the Tomahawk elements in the page

38
Table Column Manipulator in floating popup
39
Agenda

• Java Server Faces Basic building blocks
• UI Components, Managed Beans, EL expressions
• Validators, Converters, ActionListeners
• Navigation
• JSF Implementations
• Introduction Oracle ADF Faces
• AJAX in ADF Faces
• ADF Faces and ADF Data Binding
• Mix Apache MyFaces Tomahawk ADF Faces
• ADF Faces on Rails with JHeadstart

40
Challenges (still) in JSF Application Development

• Keep Look Feel Consistent
• Labor Intensive
• Set all properties over and over again for every
  item
• Maintenance hardship
• Propagate changes manually in all pages
• Application Definition is all over the place
• Every developer needs to know the entire
  technology stack
• HTML/JavaScript, JSF/ADF Faces and Java
• Creating a menu by hand
• Implementing (Advanced) Query Facilities
• Develop according to best practices

41
One answerGenerate your application using
JHeadstart

• Declarative Application Definition
• Complemented with simple code-templates
• Based on ADF Business Components
• Edited with JDeveloper plugin
• Rapid Page Generation
• ADF Binding Models
• ADF Faces pages
• JSF Configuration files
• Quick Prototyping
• Very easy introduction for non-Java developers
• Productivity gains of 300

42
OTN Homepage on 11th October 2006
43
And JHeadstart on the JDeveloper homepage
44
JHeadstart Generator features functionality

• Domains and Dropdown Lists LOV popups
• (Stacked) Regions (item groups)
• Side by Side tables
• Table Overflow styles
• in-line (detail disclosure), right, below
• Master-Detail(-Detail-Detail.)
• Stacked (tabbed) Detail Groups Regions
• Prompts, Titles, (all i18n/NLS boilerplate text)
  
• Multi-record Editable Table
• with Delete and Insert
• Ajax style pagination, sorting
• Tree, Shuttle, Wizard,

45
JHeadstart Whats the deal?

• Developed by Oracle Consulting in The Netherlands
• Same team that created CDM, Headstart, Oracle
  Designer Web Assistant (ROB) and CDM Rule Frame
• First release in 2002 (UIX, MVC Framework)
• Major follow ups in 2003 (Struts, Toplink, JSP)
  and 2005 (ADF)
• 10.1.3 since Summer 2006
• Trial on OTN http//www.oracle.com/technology/con
  sulting/9iServices/JHeadstart.html
• Support via very active OTN Discussion Forum
  http//forums.oracle.com/forums/forum.jspa?forumID
  38
• 1750 per developer
• Primarily Design-Time tool
• Small run-time library for which you get the
  sources

46
Primary Resource for learning Java Server Faces

• Java Server Faces in Action
• Pro JSF and AJAX
• For developing JSF Components with AJAX
  functionality by John Fallows and Jonas Jacobi

47
Conclusions

• JSF allows for a very 4GL style development of
  Java Web Applications
• ADF Faces provides a pretty powerful
  implementation of Java Server Faces
• ADF Model or Binding Layer enables rapid
  development of pages based on DataControls
• JHeadstart 10.1.3 offers quick prototyping,
  consistent look feel, easy intro for non-Java
  developers, high productivity
• through generation based on declarative
  definitions

48
More Information.

• http//technology.amis.nl/blog