Introduction toJSF
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Introduction to JSF

on

  • 2,155 views

Understand the basic concepts of Java Server Faces (JSF) Technology.

Understand the basic concepts of Java Server Faces (JSF) Technology.

by Serhiy Veryovka

Statistics

Views

Total Views
2,155
Views on SlideShare
1,937
Embed Views
218

Actions

Likes
3
Downloads
97
Comments
1

9 Embeds 218

http://indijava.in 78
http://www.indijava.in 65
http://softserve.ua 47
http://www.rozrobka.com 18
http://softserve.qubstudio.com 3
http://ssua.devqub.com 3
http://translate.googleusercontent.com 2
http://lj-toys.com 1
http://l.lj-toys.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Introduction to JSF Presentation Transcript

  • 1. Introduction toJSF
  • 2. Objective
    Understand the basic concepts of Java Server Faces (JSF) Technology.
  • 3. Agenda
    What is JSF and why JSF?
    Architecture Overview
    UI Component Model
    Summary of new features in JSF 2
    Development Steps
  • 4. JSF (JavaServer Faces) Framework Is…
    A server side user interface component framework for Java technology-based web applications
    F-35 JSF
    Joint Strike Fighter
  • 5. Ok, but what JSF really is?
    A specification and reference implementation for a web application development framework
    Components
    Events
    Validators & converters
    Navigation
    Back-end-data integration
    Localization
    Error Handling
  • 6. But why JSF?
    Standard
    Huge vendor and industry support
    MVC for web applications
    Clean separation of roles
    Easy to use
    Extendable Component and Rendering architecture
    Support for client device independence
  • 7. Agenda
    What is JSF and why JSF?
    Architecture Overview
    UI Component Model
    Summary of new features in JSF 2
    Development Steps
  • 8. JSF Architecture
    Server
    Desktop
    Browser
    HTML
    Renderer kit
    HTML
    App
    Backend
    Front
    Ctrl
    JSF Page
    JSF Page
    Phone
    WML
    Renderer kit
    WML
  • 9. Request Processing Lifecycle Phases
    Restore component tree phase
    Apply request values phase
    Process validations phase
    Update model values phase
    Invoke application phase
    Render response phase
  • 10. Request Processing Lifecycle Phases
    • Submitted form values stored in component
    • 11. Component values are converted
    Component tree retrieved
    Restore
    View
    Request
    Component values
    validated
    Component values
    bound to backing bean
    Apply
    Request
    Values
    Process
    Validations
    • Events handled
    • 12. Methods invoked
    • 13. Navigation calculated
    Update
    Model Values
    Invoke
    Application
    Render
    Response
    Response
    Component values are updated from backing bean properties
    System-level phase
    Application-level phase
  • 14. Agenda
    What is JSF and why JSF?
    Architecture Overview
    UI Component Model
    Summary of new features in JSF 2
    Development Steps
  • 15. User Interface Component Model
    UI components
    Event handling model
    Conversion and Validation model
    Rendering model
    Page navigation support
  • 16. 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:inputTextid="Key"value="#{message.key}" required="true"rendered="#{resBean.editModeRow}"/>
  • Validators
    Validators – pluggable validation on UIInput values
    JSF provides implementation for common classes (String reg. exp. validator, decimal range validator etc.)
    Can apply one or more per component
    Easy to create custom validators
    • Implement interface and
    • 17. public void validate(FacesContext context, UIComponent component, Object value) throws ValidatorException;
    Example
    • <h:inputTextvalue="#{message.key}" required="true"rendered="#{resBean.editModeRow}“> <f:validateLengthmaximum="15"minimum="6"/></h:inputText>
  • Converters
    Converters – pluggable conversion mechanism
    • JSF provides implementation for common classes (Integer, Date etc.)
    • 18. Easy to create custom converters
    Implement interface and
    • Output: Object to String
    • 19. Input: String to Object
    Example
    • <h:inputTextid="Key"value="#{testBean.today}" converter=“CustomDateConverter"/>
  • Rendering Model
    Renderers-Adapt components to a specific markup language
    • Decoding
    • 20. Encoding
    RenderKits—Library of Renderers
    • Map component classes to component tags
    • 21. Is a custom tag library
    • 22. Basic HTML RenderKit
  • Events and Listeners
    Standard events and listeners
    • ActionEvent—UICommand component activated by the user
    • 23. ValueChangedEvent—UIInput component whose value was just changed
    System events
    • Possibility to work with PhaseEvents and PhaseListeners
    • 24. Global and component system events - UIComponent.subscribeToEvent() or <f:event> tag.
  • Navigation Model
    Application developer responsibility
    • Defined in Application configuration file (faces-config.xml)
    • 25. Or implicitly (since JSF 2.0)
    Navigation rules
    • Determine which page to go
    • 26. Navigation case
  • Navigation Model Sample
    <navigation-rule>
    <from-view-id>/wizard/item.jsp</from-view-id>
    <navigation-case>
    <from-outcome>wizardIndex
    </from-outcome>
    <to-view-id>/wizerd/start.jsp</to-view-id>
    </navigation-case>
    <navigation-case>
    <from-outcome>goBack</from-outcome>
    <to-view-id>/wizard/cat3.jsp</to-view-id>
    </navigation-case>
    </navigation-rule>
  • 27. Agenda
    What is JSF and why JSF?
    Architecture Overview
    UI Component Model
    Summary of new features in JSF 2
    Development Steps
  • 28. What’s new?
    FaceletsView Declaration Language
    Annotation based configuration
    Standardized Ajax
    Implicit Navigation
    Scopes (conversation, view, flash, custom)
    Composite Components
    Bean Validation Support
    Error Handling
    more - resource loading, improved GET support, behaviors, tree visiting, system events and many more (out of scope)
  • 29. Facelets, Annotations, Scopes
    Facelets are used by default instead of JSP.
    Annotation based configuration
    • @ManagedBean, @...Scoped, @FacesConverter, @FacesValidator etc.
    New scopes
    • View – state is preserved for the view (URL).
    • 30. Conversation and Flash.
    • 31. Custom
  • Standardized Ajax
    Two ways to use
    • JavaScript API - jsf.ajax.request()
    • 32. f:ajax tag
    Examples
    <h:selectOneMenuvalue="#{dynamicProperties.targetClass}">
    <f:ajaxevent="change"execute="@form"render="@form"/>
    <f:selectItemsvalue="#{dynamicProperties.targetClasses}"/>
    </h:selectOneMenu>
    <h:commandButtonvalue="Count"
    onclick="jsf.ajax.request(this.id, event, {execute: this.id, render: 'out1'}); return false;"/>
  • 33. Composite Components
    Define
    <html xmlns="http://www.w3.org/1999/xhtml"xmlns:h="http://java.sun.com/jsf/html" xmlns:composite="http://java.sun.com/jsf/composite">
    <h:head></h:head>
    <h:body>
    <composite:interface>
    <composite:attributename="who"/>
    </composite:interface>
    <composite:implementation>
    <h:outputTextvalue="Hello, #{cc.attrs.who}!"/>
    </composite:implementation>
    </h:body></html>
    Use
    <html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"xmlns:greet="http://java.sun.com/jsf/composite/greet">
    <greet:hellowho="World"/>
    </html>
  • 34. Navigation, Bean Validation Support, Error Handling
    Implicit Navigation.
    check for explicit navigation rules
    checks to whether the action outcome corresponds to a view id. If yes navigate to view.
    Bean Validation Support
    • OOTB JSR 303 support (@NotNull, @Length, etc.)
    Error Handling
    • ExceptionHandler API for “global” or “central” exception handling activities
  • Agenda
    What is JSF and why JSF?
    Architecture Overview
    UI Component Model
    Summary of new features in JSF 2
    Development Steps
  • 35. Steps in Development Process
    Develop model objects which hold the data
    Register model objects (managed bean) in faces-config.xml or use annotations
    Create Pages using UI component and core tags
    Define Page Navigation in faces-config.xml or use implicit navigation
    Configure web.xml
  • 36. Step 1: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
    • data binding by means of EL
  • Step 2:Register model objects
    @ManagedBean(name = "appPreferences")
    @RequestScoped
    publicclassAppPreferences {
    @ManagedProperty("#{persistenceThemeManager}")
    privateThemeManagerthemeManager;
    private String theme;
    // getters and setters
    publicList<SelectItem> getThemesSelectItems() …
    publicvoidsaveTheme() {
    themeManager.saveTenantTheme(selectedTheme);
    }
    }
    Register this class as a request scoped managed bean
    Model’s data
    Action handler
  • 37. Step 3: Create JSF Page
  • 38. Binding UI to Managed Bean
    editUser.xhtml
    <h:inputTextvalue="#{userEditBean.firstName}" required="true"/>
    EditUserBean.java
    @ManagedBean(name = "userEditBean")
    @SessionScoped
    publicclassEditUserBean {
    public String getFirstName() {

    }
    public void setFirstName(String firstName) {

    }
  • 39. Step 4: Define Page Navigation Rules
    <h:commandButtonaction="goBack" image="../images/back-arrow-small.png"/>
    <h:commandButtonvalue="LookupPrices"action="#{multiCategorySelectBackingBean.lookupPrices}"/>
    Web Page
    Backing Bean
    public String lookupPrices() {
    ...
    return "showPriceRecs";
    }
    <navigation-rule>
    <from-view-id>/wizard/item.jsp</from-view-id>
    <navigation-case>
    <from-outcome>showPriceRecs
    </from-outcome>
    <to-view-id>/wizard/pricesResult.jsp</to-view-id>
    </navigation-case>
    <navigation-case>
    <from-outcome>goBack</from-outcome>
    <to-view-id>/wizard/start.jsp</to-view-id>
    </navigation-case>
    </navigation-rule>
    faces-config.xml
  • 40. Step 5: Configure (web.xml)
    Add
    <servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
    <servlet-name>FacesServlet</servlet-name>
    <url-pattern>*.jsf</url-pattern>
    </servlet-mapping>
    May be not necessary with Servlets 3.0 compliant container
  • 41. Questions?