1. JSF road map (NI) Clientside validation Show problems
State example (search page don’t show back results)
Event Model (swing example , now tags data need to be parsed)
Validation model
We are doing a lot of low work ourselves (e.g. request.getParameter etc). Need a framework

2. Client Side validation Example

3. (NI) Provide no direct GUI component support
Discuss problems here
Problems with servlets and JSPs
Servlet and JSP
Provide no direct GUI component support
No mechanism to manipulate stateful objects at the server
No way to auto-connect client events to server methods
Requires programming skill
Low level details of HTTP and session
Undefined programming model – lots of tedious code
State example (search page don’t show back results)
Event Model (swing example , now tags data need to be parsed)
Validation model
We are doing a lot of low work ourselves (e.g. request.getParameter etc). Need a framework

4. Intro to Framework Framework vs. API Different existing framewroks
Struts
Helps define a structured programming model (MVC), a validation framework and reduces tedious coding But…
Adds complexity and doesn’t provide UI tags
Very Java programmer centric
Tapestry
JSF

5. A new face on application development in Java
JavaServer Faces
A new face on application development in Java

6. JSF Architecture & Technology (NI)
Internationalization
Navigation
Type Conversion & Validation
Server Side UI Event Handling
Rendering Model
Model Object Integration
UI Component Model
A Set Of UI Components
APIs And Programming
Model
A JSF Custom Tags

7. Java Server Faces – Major Features (NI)
Components
Allows creation of user interfaces from a set of standard, reusable server-side components
Provides JSP tags to access those components
Allows component rendering to support multiple markups and device types
Provides a framework for implementing custom components
Easier Programming Model
Transparently saves state information and repopulates forms when they redisplay
Provides a mechanism for tying client side events to server side logic / processing
Components available to scripts on server
Contains mechanisms for validation and conversion
Separates presentation from logic
Enables more functional “RAD” Tooling
Components:
Rich components: Data Grid, tree controls and media players
Provides a framework for creating tags that work together. Often times rich custom tags from vendors require a special controller.
JSF standardizes the controller and the base UI and runtime frameworks so that tags can easily work together.

8. JSF – Web Application Infrastructure (NI)
HTTP Request & Response Handling
Java, Session Mgmt, Lifecycle Mgmt, Security
Deployment and Packaging
Extensible Template Mechanism
Template Reuse, Management And Layout
Resource Mgmt, Enhanced Error Handling
Pluggable Initialization Architecture
Layer Separation
Form Handling & Validation
Server Side UI Events & Data Conversion
Stateful UI Component Model
Automatic markup generation
JSF
High
Struts
Abstraction
JSP & Servlet
Low

9. What is JSF? A framework which provides solutions for
representing UI components
managing their state
handling events
input validation
Data binding 
Automatic conversion 
defining page navigation
supporting internationalization and accessibility.

10. Enhanced Productivity for UI design (NI)
Page level RAD
Allows building web pages in a manner very similar to Visual Basic, PowerBuilder, or Domino Designer
Provides a component model
Allows users to think about components, events and scripting instead of the details of HTTP requests / responses
Competes directly with MS .Net WebForms

11. UI Components (Standard)
Some of the standard JavaServer Faces Components

12. UI Components (Custom)
Some custom JavaServer Faces Components

13. UI Components (Open Source)
Some open source JavaServer Faces Components

14. UI Components (Third Party)
Some third-party JavaServer Faces Components

15. JSF Events (NI)
Event notification and listener based on JavaBean 1.0.1
Events are fired by each UI component
Event handlers are registered with each component
Three standard events
Value Change Event – generates by UIInput component
Action Event – generates by UICommand component
Phase Event – fire by JSF life cycle
Custom events can easily be created and integrated into JSF

16. JSF Events – Action Event
Action Listener:
<h:commandButton value="Login“ actionListener=“#{customer.loginActionListener}”
action=“#{customer.login}” />
public void loginActionListener(ActionEvent e) { }
public String login() {
return “OK”;
// return “FAI”;

17. Lets do it
Hello user example

18. JSF Events – Listener vs Action (NI personal)
Listener Handlers
Implement UI logic
Have access to event source
Do not participate in navigation handling
Action Handlers
Implement business logic
Don’t have access to action source
Returned outcome affects the navigation handling

19. JSF – Multiple Event Handlers (NI)
<h:selectOneMenu value=“#{customer.country}”
<f:valueChangeListener type=“com.comp.CntrListener”
<f:valueChangeListener type=“com.comp.CCListener”
</h:selectionOneMenu>
<h:commandButton action=“#{search.doSearch()}”>
<f:actionListener type=“com.comp.AAciontListener” />
<f:actionListener type=“com.comp.BActionListener” />
</h:commandButton>

20. Example Hello User

21. JSF Validators (NI)
For validating user input. (You can use client side validation as well we are telling server side process – delete it)
0 or more validators can be registered with an UIInput component
Standard validators and custom validator

22. JSF Validators DoubleRangeValidator LongRangeValidator LengthValidator
Any numeric type, between specified maximum and minimum values
LongRangeValidator
Any numeric type convertible to long, between specified maximum and minimum values
LengthValidator
String type, between specified maximum and minimum values

23. JSF Validators (NI) Required Validation Example:
<h:inputText value=“#{user.id}” required=“true” />
Length Validation Example:
<h:inputText value=“#{user.password}” >
<f:validateLength minimum=“6” />
</h:inputText>

24. Validation (NI) If validation or conversion fails nothing happens
Action method bindings do not execute
Page just comes back
Most common JSF forum post
Use h:message or h:messages

25. Example Hello User with required + six character validation

26. What is JSF? A framework which provides solutions for
representing UI components
managing their state
handling events
input validation
Data binding 
Automatic conversion 
defining page navigation
supporting internationalization and accessibility.

27. JSF – Managed Bean-Intro
Use to separate presentation from business logic
Based on JavaBeans
Use the declarative model
Entry point into the model and event handlers
Can have beans with various states

28. JSF – Value Binding (NI)
Bind component value and attribute to model objects
Literal:
<h:outputText rendered=”true” value=”$ ”/>
Value Binding:
<h:outputText rendered=”#{user.manager}” value=”#{employee.salary}”/>

29. JSF – Value Binding Value binding expression Bean properties List
Array
Map
Predefine objects- header, header values, request parameters, cookie, request/session/application scope attributes, initial parameters

30. JSF – Method Binding Binding an event handler to a method
<h:commandMethod action=“#{user.login}” />
Four component attributes:
Action
Action listener
Value change listener
Validator

31. JSF Converters
Type conversion between server-side objects and their representation in markup language
Standard converter implementations
DateTime
Number
Custom convert – implements Converter interface
Object getAsObject(….)
String getAsString(….)

32. JSF Converters Number converter example:
<h:inputText value=“#{rent.amt}” converter=“Number”>
<f:attribute name=“numberStyle” value=“currency” />
</h:inputText>
Date convert example:
<h:inputText value=“#{rent.dueDate}” converter=“DateFormat”>
<f:attribute name=“formatPattern” value=“MM/DD” />

33. JSF Navigation JSF provides a default navigational handler
Behavior is configured in configuration file (faces-config.xml)
You can do it visually in most tools

34. JSF Navigation - Example
<navigation-rule>
<description>LOGIN PAGE NAVIGATION HANDLING</description>
<from-view-id> /login.jsp </from-view-id>
<navigation-case>
<description>Handle case where login succeeded.</description>
<display-name>Successful Login</display-name>
<from-action>#{userBean.login}</from-action>
<from-outcome>success</from-outcome>
<to-view-id>/home.jsp</to-view-id>
</navigation-case>
<description>User registration for a new user succeeded.</description>
<display-name>Successful New User Registration</display-name>
<from-action>#{userBean.register}</from-action>
<to-view-id>/welcome.jsp</to-view-id>
</navigation-rule>

35. Example Here of two numbers

36. EXAMPLE HERE
After that “to pta yai chala”

37. JSF Component Model Event Handling Render binds has has Validators Id
Local Value
Attribute Map
UIComponent
has
has
has
has
Child
UIComponent
Converters

38. JSF MVC Model
Model
Model
View
Controller
Component
Listener
Renderer

39. JSF Application Servlet Container JSF Application Phone Application DB
Client
Devices
JSF Application
JSF Framework
Application
Logic DB
Phone
PDA
Model Objects
Laptop
EJB
Container

40. JSF - HTML & CSS Integration
HTML Integration
Pass-through attributes
<h:inputText size=“5” onblur=“checkValue();” />
HTML within JSF tags does not work without f:verbatim
<h:panelGroup>
<f:verbatim>html</f:verbatim>
</h:panelGroup>
Stylesheets Integration
Most HTML tags have one or more attributes (style, styleClass) for passing style information
<h:outputText styleClass=“header” value=“#{bundle.welcome}” />
For data table
<h:dataTable rowClasses=“odd, even”, columnClasses=“columnOne, columnTwo” ..

41. JSF - Summary
Powerful framework based on reusable UI components for building web-based applications in Java
Make it easy to develop web-based application using WYSIWYG tool
No file upload support, client side validation for standard components
Will find out in the next 12 months

42. Support

43. Support Technical Political (Sun, IBM, Oracle)
Political (Sun, IBM, Oracle)
Most IDEs have limited JSF support
Eclipse*
IntelliJ*
JBuilder (WYSIWYG)
Netbeans*
IBM WSAD
(WYSIWYG)
Studio Creator
JDeveloper
Notepad**
* Requires a free plugin

44. Resources Become a member of SDN (sun developer network)

45. Recommended Reading
(the end)

46. Books (NI) Books I can recommend: Other books
Core JavaServer Faces by David Geary, Cay Horstmann
JavaServer Faces in Action by Kito D. Mann
Other books
JavaServer Faces by Hans Bergsten
Mastering JavaServer Faces by Bill Dudney, Jonathan Lehr, Bill Willis, LeRoy Mattingly
JavaServer Faces Programming by Budi Kurniawan
Javaserver Faces Kick Start (Kick Start) by James Turner, Craig McClanahan, Kunal Mittal