Title: Pretty Java Server Faces
1Pretty Java Server Faces
- Lucas Jellema
- AMIS, The Netherlands
- ODTUG 2006
2Agenda
- Block 1 JSF Basics
- Basic JSF components in JSP pages
- Backing Beans (Model)
- Events and Listeners
- Block 2 Validation Navigation
- Validation, Conversion
- Navigation
- Block 3 HtmlDataTable ADF Faces
- Advanced UI
- Pretty and Productive
- IDE integration
310 minute Break for Refreshments
4Agenda
- Block 4 ADF Faces and AJAX
- Declarative AJAX zero-programming
- Validation, List Refresh, Component
Enable/Disable and Calculation - Block 5 Building Database(d) ADF Faces pages
- ADF Business Components and ADF Binding Framework
- ADF Faces pages based on alternative Data
Controls such as Web Services and POJO Business
Services - Block 6 Generating ADF Faces Applications
- Using Oracle JHeadstart 10.1.3
5Building 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
6Historical 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
7Java Server Faces Overview
8Key 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!!
9Productive 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
10Block 1
- JSF Basics
- Basic JSF components in JSP pages
- Backing Beans (Model)
- Events and Listeners
11JSF UI Components
- Specific functionality for interacting with the
end user - Examples button, calendar, input field
- May have multiple, different appearances
- UI Components are associated with Renderers
markup generators for a specific technology
(HTML, XUL, Flash, WML, Telnet, SVG, ) - 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 - 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
12JSF Page View tree and Implementation in JSP
13Common properties on JSF UI Components
- Id
- Value
- Rendered
- Binding
- StyleClassInput Components
- Required
- Value Change Listener
- ReadOnly
- Validator
- Converter
- Action Components
- (Button, CommandLink)
- Action
- Action Listener
- Pass Through HTML 4.01 properties like
- Title
- Name
- JavaScript events onChange, onBlur, onClick,
onKeyDown, - AccessKey
- Size
14Demo 1 MyFirst JSF Project
- Using JDeveloper 10.1.3
- Create new Application
- Create new Project
- Create JSF JSP page
- Drag Drop UI Components
- Run
15Binding 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 Main differences
- two-way (read/write), methods and properties, no
page scope, binding can be created and evaluated
in Java code, instead of - 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
16JSF 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
17Managed Beans in Faces Console and
faces-config.xml
18JSF Managed BeansSet references to beans on
managed property
- Using EL Expressions to initialize Managed
Properties, we can also refer to Managed Beans
19JSF Events and Listeners Action
- Action Events
- Triggered by clicking on CommandButton or
CommandLink - Can have multiple action listeners
- Action Method
- set through action property
- invoked when event is fired
- returns a result (see discussion of navigation)
- Action Listener
- set through actionListener property and/or
actionListener child elements - invoked when event is fired
- does not return a result
20JSF Events and Listeners Value Change
- Value Change Events
- Triggered by change in the value of an Input
component - Fired Server Side when validations are
successfully completed - Components can have multiple value change
listeners - Value Change Listener
- set through valueChangeListener property and/or
valueChangeListener child elements - invoked when event is fired
- does not return a result
21Demo 2 Binding Properties and Managing Beans
- Configure ManagedBean bookSearch based on class
nl.amis.als.Book - Value Bind value property in InputText components
to properties on bookSearch - Method Bind action property CommandButton to
doSearch() method on bookSearch bean - Define Value Change Listener for Author
- Add Messages component to display messages
- Run the page FindBooks
22Block 2
- Validation, Conversion Navigation
23JSF - Conversion
- When the user presses a button, the form is
submitted with all the values entered - Each value is sent as a . STRING!
- Backing Bean properties are typically strongly
typed Date, Integer, Long or even PostalCode - JSF has the concept of Converters
- Strings in the HttpRequest are converted to their
strongly typed counterparts - And vice versa for generating the display, the
strongly typed values are converted to nicely
formatted strings - JSF has built-in converters for common types
- With format-patterns for Dates, Numbers etc.
- You can add your own converters for custom types
- If you do not specify a converter, JSF will pick
one itself
24JSF - Validation
- Values entered by the user in the front-end may
not always be acceptable to the (Domain) Model of
our application - Too long, too short, wrong format-pattern, too
high, too low, not one of the allowable values,
etc. - JSF has a built-in validation mechanism
- We can associate Validations with Input
Components by - Method-binding a ValidationMethod
- Adding Validator-child-elements
- JSF has standard Validators like LongRange and
Length - JSF allows us to define our own custom Validators
- Note JSF validation is server side only
(specification)! - Failed Validations produce Error Messages
- Those can be customized in Resource Bundles
25Demo 3 - Validation
- In the FindBooks page
- Add a range-validation to PublicationYear
- Between 1998 and 2006
- Add a length-validation to Title
- At least 5 characters (or empty)
- Add a method-bound validation to Subjects
- No more than three subjects may be selected
- Add a Messages component to display validation
error messages
26JSF - 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
27JSF Navigation- in faces-config.xml, the Faces
console and the visual editor
28Demo 4 - Navigation
- Project contains AlsHomePage.jspx and
BooksTable.jspx - Implement navigation from AlsHome to FindBooks
when button Enter is pressed - Implement navigation from FindBooks to BooksTable
when buttons Show All or Search Books are pressed - This navigation has to go through doSearch() and
doShowAll() methods on managed bean
29JSF Request Cycle
30What is also in JSF(though not in todays
presentation)
- Resource Bundles and i18n
- Integration with frameworks such as Struts
(Shale) and Spring (JSF-Spring) - File Upload/Download functionality in JSF
- Programmatically manipulating pages
- Adding, removing and changing components through
Java code - Using JSF outside the HTML scope
- For protocols like WML, PDA, Telnet, XUL, HTC
etc. - Customizing and Extending existing UI Components
or Renderers - Or even developing new ones
- Other JSF Implementations such as (MyFaces),
smile, WebGalileo Faces, ICEFaces, ECruiser, Keel
31JSF 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
32Demo 5 the JSF Data Tableand the JDeveloper
10.1.3 Wizard
- Open the almost empty BooksTable.jspx
- Drag Drop the HtmlDataTable component
- Specify the binding libraryManager.getBooks()
- Define the column headers and sequence
- Run the application
33Demo 5 the JSF Data Tableand the JDeveloper
10.1.3 Wizard
34Demo 6 Making the DataTable sortable
- Create clickable column headers
- Bound to an action method sortBy, passing the
name of the column as a parameter - Display or v or Ascending and Descending
sorting - Only if the column is the one currently sorted by
- Method sortBy() reads the parameters and informs
the LibraryManager on how it should sort - When the getBooks() method is invoked on the
LibraryManager, it applies the specified sorting
35Block 3
- Advanced UI
- Pretty and Productive
- IDE integration
36LICENSE FREE
- So far we have worked only with standard,
non-proprietary freely available software - JDeveloper 10.1.3, JSF RI, Tomcat
37ADF Faces
- Also free, non-proprietary and even Open Source
- Part of Apache MyFaces called Trinidad
38Overview 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 is free as of JavaOne 2005 (july)
39ADF 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
40ADF Faces compared to JSF
- Provide more efficient implementations of
client-side state saving (reduced per-component
size) - Rich set of components, validators, and
converters - ADF Faces tags often offer more features than the
standard tags for example, all input components
offer built-in label and message display support
( For more information on the differences between
the ADF Faces tags and the standard Faces tags,
please see the following document ). - Client-side converters/validators - JavaScript
enabled converters and validators that attempt to
catch and display errors on the client - ADF Faces tags can be used inside of the lt
afforEach gt tag (it is, unfortunately, not
possible to support standard tags inside lt
afforEach gt ). - Accessibility - support similar to ADF UIX
Accessibility - Bidirectional language support - ADF Faces
components automatically render themselves
appropriately for bidirectional languages. Users
can also use the "start" and "end" constants
described in ADF UIX Bidirectional Language
Support - Partial Page Rendering (PPR) - support similar to
ADF UIX PPR overview - Skinning - support similar to ADF UIX Look and
Feel - ADF integration - including support for JSR227
(Data binding) - Rich Client - upcoming rich DHTML client-side
renderers
41Demo 7 ADF Faces Table
- Table Component
- With built-in sort, navigation, editing, detail
disclosure
4210 minute Break for Refreshments
43Block 4 ADF Faces and 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
44Implementing 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!
45AJAX 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
46Class Model for Box Office application
47AJAX-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
48Partial Page Refresh in ADF Faces
- Any ADF Faces Component can trigger an AJAX
request ( Partial Page Refresh) when their
value changes - Set attribute autoSubmit"true"
- Any ADF Faces Component can specify it needs to
be partially refreshed upon specific events - Set attribute partialTriggers"f1pc f1ab
- This refers to components with autoSubmit"true"
- When the background, asynchronuous response is
received, the components are refreshed - using DHTML JavaScript DOM manipulation
ltafinputText value"bookingBean.partyCount"
autoSubmit"true id"pc gt
6
ltafoutputText value"bookingBean.totalPrice"p
artialTriggers"f1pc f1show f1seating "/gt
268
49Calculation of Ticket Order Price
- Recalculate when
- Show is changed
- Seating arrangement is changed
- Number of tickets is changed
ltafselectOneListbox value"bookingBean.show"
autoSubmit"true" id"show"
partialTriggers"f1cat"gt
ltafselectOneRadio value"bookingBean.seating"
autoSubmit"true" id"seating"gt
ltafinputText value"bookingBean.partyCount"
autoSubmit"true" id"pc" gt
ltafoutputText value"bookingBean.totalPrice"p
artialTriggers"f1pc f1show f1seating "/gt
50Validation Client Side and Near-Client Side
- ADF Faces has standard Validators
- That do client side validation as well as server
side
ltafinputText id"pc" value"bookingBean.partyCo
unt" autoSubmit"true" validator"boxOfficeBean
.validatePartyCount"gt ltfvalidateLongRange
maximum"8" minimum"1"/gtlt/afinputTextgt
51Validation Client Side and Near-Client Side
- ADF Faces can do server side validation that
appears instantly on the client side - With autoSubmit, value change triggers AJAX
request - The validator is invoked and its result added to
the response
ltafinputText id"pc" value"bookingBean.partyCo
unt" autoSubmit"true" validator"boxOfficeBean
.validatePartyCount"gt ltfvalidateLongRange
maximum"8" minimum"1"/gtlt/afinputTextgt
- Messages component needsa partial trigger for
the partyCount component!
52Server Side Validator
public void validatePartyCount(FacesContext
facesContext,
UIComponent uiComponent,
Object object) Object submittedShow
getSelectOneShowList().getValue() if
(submittedShow!null) Short maxParty
((Show)submittedShow).getMaxParty() if
((Integer)objectgt maxParty )
((CoreInputText)uiComponent).setValid(false)
FacesMessage message new FacesMessage("The
maximum of tickets for this show is
unfortunately limited to "maxParty"!")
facesContext.addMessage(uiComponent.getClientId
(facesContext) ,
message)
53Refreshing the List of values
- When Category Checkboxes are checked or
unchecked, the list of shows should respond - autoSubmit on Categorycomponent
- partialTrigger on Show component
- Backing method thatevaluates current
Categoryselection
54Refreshing the List of values
55Refreshing the List of values
56Synchronizing the Thumbnail Image
- When Show Selection ischanged, so should
thethumbnail - Show autoSubmittrue
- Thumbnail partialTriggershow
57Dynamic Disabling/Enabling of Seating Component
- Some shows do not have a seating arrangement
- With one of those selectedthe seating component
should be disabled - Again
- autoSubmit on Show
- Partial trigger for Show on Seating component
- Bind the disabled attribute
58Block 5
- Building Database(d) ADF Faces pages
- ADF Business Components and ADF Binding Framework
- ADF Faces pages based on alternative Data
Controls such as Web Services and POJO Business
Services
59Overview 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
60ADF Binding FrameworkRegistering DataControls
for a Business Service
HrmService
employees
raiseSalaries
name
job
Model
Business Service - POJO
Business Service
Employee
ADF BC op Oracle RDBMS
61Applications register DataControl Bindings
- Applications are consumers of DataControls
- Application components register Usage of
DataControls (aka DataControl Bindings) - In the UI Model (aka Binding Container)
- A bit similar to Oracle Designers Module
Component with table-usages and column-usages - Depending on Application Technology, we will have
one UI Model per - Struts Action ( JSP or UIX page)
- JSF JSP (ADF Faces) Page
- JClient Frame
- Java Class
62ADF 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
63Set 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
64Applications running against ADF BC based
Business Service set of HRM DataControls
HrmService
employees
raiseSalaries
name
job
Business Service ADF Business Components
Model
Application ModuleHrmService
ViewObjectEmployee
Pretty Java Server Faces ODTUG 2006
65Demo of Database(d) ADF Faces Application
- Starting from existing Database
- Tables, Views, Constraints etc.
- Create ADF Business Components
- Default Application Module with wizard
- Refine manually
- ADF DataControls are automatically created!
- Create new ADF Faces Page
- Drag Drop DataControls to page
- Table with pagination, sort, edit, delete
- Form Navigate buttons
- Create
66Block 6
- Generating ADF Faces ADF Business Components
applications - Using JHeadstart 10.1.3
67Comparing JDeveloper ADF Faces with Oracle Forms
- JDeveloper
- Page Structure Window
- JSF JSP Editor
- Java Code Editor
- Faces-Config Console
- Wizards
- Property Editors
- Compile Run Debug
- Forms Builder
- Component Tree Navigator
- Layout Editor
- PL/SQL Code Editor
- Layout Wizard
- Block Wizard
- Compile Run Debug
- Actions
- Drag Drop UI widgets
- Refine UI Model
- Create LOV and poplist for Domains and Lookup
- Code event triggers
- Maintain Stylesheet/ Object Library
- Boilerplate elements
68Challenges in Manual Page Refinement
- 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 - Either Forms and PL/SQL
- Or HTML/JavaScript, JSF/ADF Faces and Java
- Creating a menu by hand
- Implementing (Advanced) Query Facilities
69Introducing JHeadstart compared to Oracle
Designer
- Oracle Designer
- Repository Object Navigator Design Editor
- Module Components
- Layout, Item Groups, CRUD
- Application Logic
- Domains
- Generate Oracle Forms application
- Actions
- Meta-data for Module Definition
- CRUD, layout, prompt, boiler-plate text
- Templates
- Generate!
- JHeadstart
- JDeveloper plugin
- Application Definition
- Layout, lookup, master/detail, domains, regions,
CRUD - Generate ADF Faces application
- Actions
- Manual Page Refinement using Editors, Wizards and
Property Palettes
- JDeveloper
- Manual Page Refinement
- Forms Builder
- Manual Page Refinement
70Developing ADF Faces Applications with
JHeadstart 10.1.3
- Based on ADF BC
- Single Application Definition file (XML)
- Edited with JDeveloper plugin
- Rapid Page Generation
- UI Models
- Consistent Layout
- Page structure
- Master-detail(-detail), tree, in-line table,
detail disclosure, search - Regions ( item groups)
- Lookups Domains
- Display properties
- Quick Prototyping
- Very easy introduction for non-Java developers
71Demonstration of JHeadstart in actionCode Free
Application Development
- Create default ADF BC Application Module
- Run wizard, accept all defaults
- Enable JHeadstart on Project
- Generate default Application Definition
- Generate ADF Faces application
- Run Application
- Refine Application Meta-Data
- Re-Generate and Re-run the application
72Generating a default Library Application
- Books have
- one ormore authors
- one Publisher
- zero or more physical copiesin our library
73Quick Generated Refinements
- Domains and Dropdown Lists
- (Stacked) Regions (item groups)
- Side by Side tables
- Table Overflow styles
- in-line (detail disclosure), right, below
- Prompts, Titles,
- Multi-record Editable Table
- with Delete and Insert
- Tree, Shuttle,
74Generating with JHeadstart Stand-Alone or Migrate
Oracle Designer Forms
- Actions
- Meta-data for Module Definition
- Templates
- Generate!
Oracle Designer
JHeadstart Designer Generator
Design Capture
- Actions
- Manual Page Refinement
Forms Builder
75JHeadstart 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 (ADF Faces) late Summer 2006
- Beta on OTN
- 1750 per developer
- Primarily Design-Time tool
- Small run-time library for which you get the
sources
76Presentation on JHeadstartTuesday, 11.00 AM
(session 7)Washington 5
77Primary 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
78Conclusions
- JSF allows for a very 4GL style development of
Java Web Applications - UI Components
- Events
- Declarative Validations and Conversions
- ADF Faces provides a pretty powerful
implementation of Java Server Faces - Built-in AJAX functionality (validation, refresh)
- Rich UI widgets (tree, shuttle, panels, date
chooser) - Advanced layout system (stylesheets, skinning)
- Smooth integration in IDE (JDeveloper 10.1.3)
- Note ADF Faces is part of Apache MyFaces (OSS)
79Conclusions
- ADF Model or Binding Layer enables rapid
development of pages based on DataControls - Drag drop page creation
- Reuse of generic UI properties
- Wrapping specific DataService technology in
generic ADF DataControl interfaces - JHeadstart 10.1.3 does for ADF what Oracle
Designer does for Forms - When it comes to meta-data (or model) driven
generation of applications - Quick prototyping, consistent look feel, easy
intro for non-Java developers, high productivity - Available late Summer 2006 - 1750 per developer