introduction to java server faces(jsf) -...
TRANSCRIPT
![Page 1: Introduction to Java Server Faces(JSF) - unipi.itmedialab.di.unipi.it/web/AP/Slides.08/JavaServerFaces.pdf · Introduction to Java Server Faces(JSF) ... JSP and Servlet ... JSF Architecture](https://reader034.vdocuments.site/reader034/viewer/2022050918/5b8579b87f8b9ae5498e731c/html5/thumbnails/1.jpg)
Introduction to Java Server Faces(JSF)
Deepak Goyal
Vikas Varma
Sun Microsystems
![Page 2: Introduction to Java Server Faces(JSF) - unipi.itmedialab.di.unipi.it/web/AP/Slides.08/JavaServerFaces.pdf · Introduction to Java Server Faces(JSF) ... JSP and Servlet ... JSF Architecture](https://reader034.vdocuments.site/reader034/viewer/2022050918/5b8579b87f8b9ae5498e731c/html5/thumbnails/2.jpg)
2
Objective
Understand the basic concepts of Java Server™ Faces[JSF]
Technology.
![Page 3: Introduction to Java Server Faces(JSF) - unipi.itmedialab.di.unipi.it/web/AP/Slides.08/JavaServerFaces.pdf · Introduction to Java Server Faces(JSF) ... JSP and Servlet ... JSF Architecture](https://reader034.vdocuments.site/reader034/viewer/2022050918/5b8579b87f8b9ae5498e731c/html5/thumbnails/3.jpg)
What is and why JSF? Architecture Overview UI Component Model Development Steps
Agenda
![Page 4: Introduction to Java Server Faces(JSF) - unipi.itmedialab.di.unipi.it/web/AP/Slides.08/JavaServerFaces.pdf · Introduction to Java Server Faces(JSF) ... JSP and Servlet ... JSF Architecture](https://reader034.vdocuments.site/reader034/viewer/2022050918/5b8579b87f8b9ae5498e731c/html5/thumbnails/4.jpg)
4
JavaServer™ Faces (JSF) Framework Is…
A server side user interface component framework for Java™ technology-based web applications
![Page 5: Introduction to Java Server Faces(JSF) - unipi.itmedialab.di.unipi.it/web/AP/Slides.08/JavaServerFaces.pdf · Introduction to Java Server Faces(JSF) ... JSP and Servlet ... JSF Architecture](https://reader034.vdocuments.site/reader034/viewer/2022050918/5b8579b87f8b9ae5498e731c/html5/thumbnails/5.jpg)
5
What is JSF?● A specification and reference
implementation for a web application development framework– Components– Events– Validators & converters– Navigation– Back-end-data integration
![Page 6: Introduction to Java Server Faces(JSF) - unipi.itmedialab.di.unipi.it/web/AP/Slides.08/JavaServerFaces.pdf · Introduction to Java Server Faces(JSF) ... JSP and Servlet ... JSF Architecture](https://reader034.vdocuments.site/reader034/viewer/2022050918/5b8579b87f8b9ae5498e731c/html5/thumbnails/6.jpg)
6
Why JSF? (page 1)● MVC for web applications● Clean separation of roles● Easy to use● Extendable Component and Rendering
architecture● Support for client device independence● Standard● Huge vendor and industry support
![Page 7: Introduction to Java Server Faces(JSF) - unipi.itmedialab.di.unipi.it/web/AP/Slides.08/JavaServerFaces.pdf · Introduction to Java Server Faces(JSF) ... JSP and Servlet ... JSF Architecture](https://reader034.vdocuments.site/reader034/viewer/2022050918/5b8579b87f8b9ae5498e731c/html5/thumbnails/7.jpg)
7
Why JSF? (page 2)● JSP and Servlet– No built-in UI component model
● Struts (I am not saying you should not use Struts)– No built-in UI component model– No built-in event model for UI components– No built-in state management for UI components– No built-in support of multiple renderers – Not a standard (despite its popularity)
● Struts and JSF can be used together
![Page 8: Introduction to Java Server Faces(JSF) - unipi.itmedialab.di.unipi.it/web/AP/Slides.08/JavaServerFaces.pdf · Introduction to Java Server Faces(JSF) ... JSP and Servlet ... JSF Architecture](https://reader034.vdocuments.site/reader034/viewer/2022050918/5b8579b87f8b9ae5498e731c/html5/thumbnails/8.jpg)
8
How the JSF Specification Fits In
JSF App
Servlets (2.3)
JSP (1.2) JSF API
JSF Tags
JSF App
![Page 9: Introduction to Java Server Faces(JSF) - unipi.itmedialab.di.unipi.it/web/AP/Slides.08/JavaServerFaces.pdf · Introduction to Java Server Faces(JSF) ... JSP and Servlet ... JSF Architecture](https://reader034.vdocuments.site/reader034/viewer/2022050918/5b8579b87f8b9ae5498e731c/html5/thumbnails/9.jpg)
What is and why JSF? Architecture Overview UI Component Model Development Steps
Agenda
![Page 10: Introduction to Java Server Faces(JSF) - unipi.itmedialab.di.unipi.it/web/AP/Slides.08/JavaServerFaces.pdf · Introduction to Java Server Faces(JSF) ... JSP and Servlet ... JSF Architecture](https://reader034.vdocuments.site/reader034/viewer/2022050918/5b8579b87f8b9ae5498e731c/html5/thumbnails/10.jpg)
10
JSF Architecture [MVC]
HTML RenderKit
AppBackend
DesktopBrowser
Phone
Frontctrl
JSF Page
JSF Page
WML
HTML
Server
WML RenderKit
![Page 11: Introduction to Java Server Faces(JSF) - unipi.itmedialab.di.unipi.it/web/AP/Slides.08/JavaServerFaces.pdf · Introduction to Java Server Faces(JSF) ... JSP and Servlet ... JSF Architecture](https://reader034.vdocuments.site/reader034/viewer/2022050918/5b8579b87f8b9ae5498e731c/html5/thumbnails/11.jpg)
Request processing Lifecycle
FacesServlet
FacesContext
1.Creates FacesContext
Lifecycle
2.Passes controls to Lifecycle
3. Process FacesContext in various phase
![Page 12: Introduction to Java Server Faces(JSF) - unipi.itmedialab.di.unipi.it/web/AP/Slides.08/JavaServerFaces.pdf · Introduction to Java Server Faces(JSF) ... JSP and Servlet ... JSF Architecture](https://reader034.vdocuments.site/reader034/viewer/2022050918/5b8579b87f8b9ae5498e731c/html5/thumbnails/12.jpg)
12
Request Processing Lifecycle Phases
FacesRequest Reconstitute
ComponentTree
ApplyRequestValues
ProcessValidations
FacesResponse Render
ResponseInvoke
Application
UpdateModelValues
![Page 13: Introduction to Java Server Faces(JSF) - unipi.itmedialab.di.unipi.it/web/AP/Slides.08/JavaServerFaces.pdf · Introduction to Java Server Faces(JSF) ... JSP and Servlet ... JSF Architecture](https://reader034.vdocuments.site/reader034/viewer/2022050918/5b8579b87f8b9ae5498e731c/html5/thumbnails/13.jpg)
13
Request Processing Lifecycle
FacesRequest Reconstitute
ComponentTree
ApplyRequestValues
ProcessEvents
ProcessValidations
ProcessEvents
ResponseComplete
ResponseComplete
Render Response
ResponseComplete
ResponseComplete
FacesResponse Render
ResponderInvoke
Application
UpdateModelValues
ProcessEvents
ProcessEvents
Conversion Errors /Render Response
Validation / ConversionErrors / Render Response
![Page 14: Introduction to Java Server Faces(JSF) - unipi.itmedialab.di.unipi.it/web/AP/Slides.08/JavaServerFaces.pdf · Introduction to Java Server Faces(JSF) ... JSP and Servlet ... JSF Architecture](https://reader034.vdocuments.site/reader034/viewer/2022050918/5b8579b87f8b9ae5498e731c/html5/thumbnails/14.jpg)
14
Request Processing LifecyclePhases1.Reconstitute component tree phase2.Apply request values phase3.Process validations phase4.Update model values phase5.Invoke application phase6.Render response phase
![Page 15: Introduction to Java Server Faces(JSF) - unipi.itmedialab.di.unipi.it/web/AP/Slides.08/JavaServerFaces.pdf · Introduction to Java Server Faces(JSF) ... JSP and Servlet ... JSF Architecture](https://reader034.vdocuments.site/reader034/viewer/2022050918/5b8579b87f8b9ae5498e731c/html5/thumbnails/15.jpg)
What is and why JSF? Architecture Overview UI Component Model Development Steps
Agenda
![Page 16: Introduction to Java Server Faces(JSF) - unipi.itmedialab.di.unipi.it/web/AP/Slides.08/JavaServerFaces.pdf · Introduction to Java Server Faces(JSF) ... JSP and Servlet ... JSF Architecture](https://reader034.vdocuments.site/reader034/viewer/2022050918/5b8579b87f8b9ae5498e731c/html5/thumbnails/16.jpg)
16
User Interface Component Model● UI components● Event handling model● Conversion and Validation model● Rendering model● Page navigation support
![Page 17: Introduction to Java Server Faces(JSF) - unipi.itmedialab.di.unipi.it/web/AP/Slides.08/JavaServerFaces.pdf · Introduction to Java Server Faces(JSF) ... JSP and Servlet ... JSF Architecture](https://reader034.vdocuments.site/reader034/viewer/2022050918/5b8579b87f8b9ae5498e731c/html5/thumbnails/17.jpg)
UI Components UIComponent/UIComponentBase Base class for all user interface components
Standard UIComponent Subclasses UICommand, UIForm, UIOutput
UIGraphic, UIInput, UIPanel, UIParameter
UISelectBoolean, UISelectMany, UISelectOne
Example:
<h:inputText id="userNo" value="#{UserNumberBean.userNumber}"/>
![Page 18: Introduction to Java Server Faces(JSF) - unipi.itmedialab.di.unipi.it/web/AP/Slides.08/JavaServerFaces.pdf · Introduction to Java Server Faces(JSF) ... JSP and Servlet ... JSF Architecture](https://reader034.vdocuments.site/reader034/viewer/2022050918/5b8579b87f8b9ae5498e731c/html5/thumbnails/18.jpg)
Validators and Converters
Validators—Perform correctness checks on UIInput values Register one or more per component Enqueue one or more messages on errors Standard implementations for common cases
Converters—Plug-in for conversions: Output: Object to String Input: String to Object Standard implementations for common cases
![Page 19: Introduction to Java Server Faces(JSF) - unipi.itmedialab.di.unipi.it/web/AP/Slides.08/JavaServerFaces.pdf · Introduction to Java Server Faces(JSF) ... JSP and Servlet ... JSF Architecture](https://reader034.vdocuments.site/reader034/viewer/2022050918/5b8579b87f8b9ae5498e731c/html5/thumbnails/19.jpg)
Converters and Validators
Example:
Converters:<h:input_text valueRef=”testingBean.today”
convertor=”DateTime”/>
Validators:<h:input_text valueRef=”testingBean.today” <f:validator_length minimum=”6” maximum='10” />
![Page 20: Introduction to Java Server Faces(JSF) - unipi.itmedialab.di.unipi.it/web/AP/Slides.08/JavaServerFaces.pdf · Introduction to Java Server Faces(JSF) ... JSP and Servlet ... JSF Architecture](https://reader034.vdocuments.site/reader034/viewer/2022050918/5b8579b87f8b9ae5498e731c/html5/thumbnails/20.jpg)
Rendering Model Renderers-Adapt components to a specific markup
language Decoding Encoding
RenderKits—Library of Renderers Map component classes to component tags Is a custom tag library Basic HTML RenderKit
![Page 21: Introduction to Java Server Faces(JSF) - unipi.itmedialab.di.unipi.it/web/AP/Slides.08/JavaServerFaces.pdf · Introduction to Java Server Faces(JSF) ... JSP and Servlet ... JSF Architecture](https://reader034.vdocuments.site/reader034/viewer/2022050918/5b8579b87f8b9ae5498e731c/html5/thumbnails/21.jpg)
Events and Listeners Follows JavaBeans™ Specification design and
naming patterns Standard events and listeners ActionEvent—UICommand component activated
by the user ValueChangedEvent—UIInput component whose
value was just changed
![Page 22: Introduction to Java Server Faces(JSF) - unipi.itmedialab.di.unipi.it/web/AP/Slides.08/JavaServerFaces.pdf · Introduction to Java Server Faces(JSF) ... JSP and Servlet ... JSF Architecture](https://reader034.vdocuments.site/reader034/viewer/2022050918/5b8579b87f8b9ae5498e731c/html5/thumbnails/22.jpg)
Navigation Model
Application developer responsibility Defined in Application configuration file
(Facesconfig.xml)
Navigation rules Determine which page to go. Navigation case
![Page 23: Introduction to Java Server Faces(JSF) - unipi.itmedialab.di.unipi.it/web/AP/Slides.08/JavaServerFaces.pdf · Introduction to Java Server Faces(JSF) ... JSP and Servlet ... JSF Architecture](https://reader034.vdocuments.site/reader034/viewer/2022050918/5b8579b87f8b9ae5498e731c/html5/thumbnails/23.jpg)
Navigation Model<navigation-rule> <from-tree-id>/login.jsp</from-tree-id> <navigation-case> <from-outcome>success</from-outcome> <to-tree-id>/menu.jsp</to-tree-id></navigation-case>
<navigation-case> <from-outcome>failed</from-outcome> <to-tree-id>/error.jsp</to-tree-id> </navigation-case>
</navigation-rule>
![Page 24: Introduction to Java Server Faces(JSF) - unipi.itmedialab.di.unipi.it/web/AP/Slides.08/JavaServerFaces.pdf · Introduction to Java Server Faces(JSF) ... JSP and Servlet ... JSF Architecture](https://reader034.vdocuments.site/reader034/viewer/2022050918/5b8579b87f8b9ae5498e731c/html5/thumbnails/24.jpg)
What is and why JSF? Architecture Overview UI Component Model Development Steps
Agenda
![Page 25: Introduction to Java Server Faces(JSF) - unipi.itmedialab.di.unipi.it/web/AP/Slides.08/JavaServerFaces.pdf · Introduction to Java Server Faces(JSF) ... JSP and Servlet ... JSF Architecture](https://reader034.vdocuments.site/reader034/viewer/2022050918/5b8579b87f8b9ae5498e731c/html5/thumbnails/25.jpg)
Steps in Development Process1. Develop model objects which hold the data
2. Add model objects (managed bean) declarations to
Application Configuration File faces-config.xml
3. Create Pages using UI component and core tags
4. Define Page Navigation in faces-config.xml
5. Configure web.xml
![Page 26: Introduction to Java Server Faces(JSF) - unipi.itmedialab.di.unipi.it/web/AP/Slides.08/JavaServerFaces.pdf · Introduction to Java Server Faces(JSF) ... JSP and Servlet ... JSF Architecture](https://reader034.vdocuments.site/reader034/viewer/2022050918/5b8579b87f8b9ae5498e731c/html5/thumbnails/26.jpg)
Step1: Develop model Objects (Managed Bean)
The model (M) in MVC A regular JavaBeans with read/write properties May contain application methods and event handlers Use to hold data from a UI (page) Creation and lifetime is managed by JSF runtime application, session, request
JSF keeps the bean's data in sync with the UI
![Page 27: Introduction to Java Server Faces(JSF) - unipi.itmedialab.di.unipi.it/web/AP/Slides.08/JavaServerFaces.pdf · Introduction to Java Server Faces(JSF) ... JSP and Servlet ... JSF Architecture](https://reader034.vdocuments.site/reader034/viewer/2022050918/5b8579b87f8b9ae5498e731c/html5/thumbnails/27.jpg)
Step 2. Managed Bean Declaration(Faces-config.xml)
01 <managed-bean> 02 <managed-bean-name> 03 LoginFormBean 04 </managed-bean-name> 05 <managed-bean-class> 06 myapp.LoginFormBean 07 </managed-bean-class> 08 <managed-bean-scope> 09 request 10 </managed-bean-scope> 11 </managed-bean>
![Page 28: Introduction to Java Server Faces(JSF) - unipi.itmedialab.di.unipi.it/web/AP/Slides.08/JavaServerFaces.pdf · Introduction to Java Server Faces(JSF) ... JSP and Servlet ... JSF Architecture](https://reader034.vdocuments.site/reader034/viewer/2022050918/5b8579b87f8b9ae5498e731c/html5/thumbnails/28.jpg)
Step 3: Create JSF Pages
Must include JSF tag library HTML and core tags
All JSF tags must enclosed between a set of view tag Use JSF form and form component tags <h:input_text> not <input type=”text”> <h:command_button> not <input type=”submit”>
May include validators and event listeners on any form components
![Page 29: Introduction to Java Server Faces(JSF) - unipi.itmedialab.di.unipi.it/web/AP/Slides.08/JavaServerFaces.pdf · Introduction to Java Server Faces(JSF) ... JSP and Servlet ... JSF Architecture](https://reader034.vdocuments.site/reader034/viewer/2022050918/5b8579b87f8b9ae5498e731c/html5/thumbnails/29.jpg)
Sample JSF™ Page (login.jsp)
01 <f:view> 02 <f:form formName=”logonForm”> 03 <h:panel_grid columns=”2”> 04 <h:output_text value=”Username:”/> 05 <h:input_text id=”username” length=”16” 06 valueRef=”logonBean.username”/> 07 <h:output_text value=”Password:”/> 08 <h:input_secret id=”password” length=”16” 09 valueRef=”logonBean.password”/> 10 <h:command_button type=”submit” 11 label=”Log On” 12 actionRef=”logonBean.logon”/> 13 <h:command_button type=”reset” 14 label=”Reset”/> 15 </h:panel_grid> 16 </f:form> 17 </f:view>
![Page 30: Introduction to Java Server Faces(JSF) - unipi.itmedialab.di.unipi.it/web/AP/Slides.08/JavaServerFaces.pdf · Introduction to Java Server Faces(JSF) ... JSP and Servlet ... JSF Architecture](https://reader034.vdocuments.site/reader034/viewer/2022050918/5b8579b87f8b9ae5498e731c/html5/thumbnails/30.jpg)
Binding UI to Managed Bean
<h:input_text id=”userName”valueRef=”LoginFormBean.userName”/>
<managed-bean><managed-bean-name>
LoginFormBean</managed-bean-name><managed-bean-class>
myapp.LoginFormBean</managed-bean-class>
public class LoginFormBean...public void
setUserName(...) {public String
getUserName(...) {
faces-config.xml
login.jsp
LoginFormBean.java
![Page 31: Introduction to Java Server Faces(JSF) - unipi.itmedialab.di.unipi.it/web/AP/Slides.08/JavaServerFaces.pdf · Introduction to Java Server Faces(JSF) ... JSP and Servlet ... JSF Architecture](https://reader034.vdocuments.site/reader034/viewer/2022050918/5b8579b87f8b9ae5498e731c/html5/thumbnails/31.jpg)
Step 4: Define Page Navigation Rules(Faces-config.xml)
01 <navigation-rule> 02 <from-tree-id>/login.jsp</from-tree-id> 03 <navigation-case> 04 <from-outcome>success</from-outcome> 05 <to-tree-id>/menu.jsp</to-tree-id> 06 </navigation-case> 07 </navigation-rule> 08 09 <navigation-rule> 010 <from-tree-id>/login.jsp</from-tree-id> 011 <navigation-case> 012 <from-outcome>failure</from-outcome> 013 <to-tree-id>/error.jsp</to-tree-id> 014 </navigation-case> 015 </navigation-rule>
![Page 32: Introduction to Java Server Faces(JSF) - unipi.itmedialab.di.unipi.it/web/AP/Slides.08/JavaServerFaces.pdf · Introduction to Java Server Faces(JSF) ... JSP and Servlet ... JSF Architecture](https://reader034.vdocuments.site/reader034/viewer/2022050918/5b8579b87f8b9ae5498e731c/html5/thumbnails/32.jpg)
Step 5: Configure (web.xml) 01 <context-param> 02 <param-name> 03 javax.faces.application.CONFIG_FILES 04 </param-name> 05 <param-value>/WEB-INF/faces-config.xml 06 </param-value> 07 </context-param> 08 <servlet> 09 <servlet-name>Faces Servlet</servlet-name> 10 <servlet-class> 11 javax.faces.webapp.FacesServlet</servlet-class> 12 <load-on-startup> 1 </load-on-startup> 13 </servlet> 14 <!-- Faces Servlet Mapping --> 15 <servlet-mapping> 16 <servlet-name>Faces Servlet</servlet-name> 17 <url-pattern>/faces/*</url-pattern> 18 </servlet-mapping>
![Page 33: Introduction to Java Server Faces(JSF) - unipi.itmedialab.di.unipi.it/web/AP/Slides.08/JavaServerFaces.pdf · Introduction to Java Server Faces(JSF) ... JSP and Servlet ... JSF Architecture](https://reader034.vdocuments.site/reader034/viewer/2022050918/5b8579b87f8b9ae5498e731c/html5/thumbnails/33.jpg)
JSF Application directory structureWEB-INF/web.xmlWEB-INF/faces-config.xmlWEB-INF/classes/LoginFormBean.classlogin.jsp
Required Jars:
WEB-INF/lib/jsf-api.jarWEB-INF/lib/jsf-ri.jarWEB-INF/lib/jstl.jarWEB-INF/lib/jsf-el.jarWEB-INF/lib/standard.jarWEB-INF/lib/commons-beanutils.jarWEB-INF/lib/commons-digester.jarWEB-INF/lib/commons-collections.jarWEB-INF/lib/commons-logging.jar
![Page 34: Introduction to Java Server Faces(JSF) - unipi.itmedialab.di.unipi.it/web/AP/Slides.08/JavaServerFaces.pdf · Introduction to Java Server Faces(JSF) ... JSP and Servlet ... JSF Architecture](https://reader034.vdocuments.site/reader034/viewer/2022050918/5b8579b87f8b9ae5498e731c/html5/thumbnails/34.jpg)
JSF: Server side UI component framework MVC Developing application in JSF
Summary
![Page 35: Introduction to Java Server Faces(JSF) - unipi.itmedialab.di.unipi.it/web/AP/Slides.08/JavaServerFaces.pdf · Introduction to Java Server Faces(JSF) ... JSP and Servlet ... JSF Architecture](https://reader034.vdocuments.site/reader034/viewer/2022050918/5b8579b87f8b9ae5498e731c/html5/thumbnails/35.jpg)
Reference
http://www.jsfcentral.com/reading/index.html http://java.sun.com/j2ee/javaserverfaces/ http://www.jcp.org/en/jsr/detail?id=127