• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Introduction toJSF
 

Introduction to JSF

on

  • 1,973 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
1,973
Views on SlideShare
1,755
Embed Views
218

Actions

Likes
3
Downloads
95
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

11 of 1 previous next

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

    Introduction toJSF Introduction to JSF Presentation Transcript

    • Introduction toJSF
    • Objective
      Understand the basic concepts of Java Server Faces (JSF) Technology.
    • Agenda
      What is JSF and why JSF?
      Architecture Overview
      UI Component Model
      Summary of new features in JSF 2
      Development Steps
    • JSF (JavaServer Faces) Framework Is…
      A server side user interface component framework for Java technology-based web applications
      F-35 JSF
      Joint Strike Fighter
    • 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
    • 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
    • Agenda
      What is JSF and why JSF?
      Architecture Overview
      UI Component Model
      Summary of new features in JSF 2
      Development Steps
    • JSF Architecture
      Server
      Desktop
      Browser
      HTML
      Renderer kit
      HTML
      App
      Backend
      Front
      Ctrl
      JSF Page
      JSF Page
      Phone
      WML
      Renderer kit
      WML
    • 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
    • Request Processing Lifecycle Phases
      • Submitted form values stored in component
      • 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
      • Methods invoked
      • Navigation calculated
      Update
      Model Values
      Invoke
      Application
      Render
      Response
      Response
      Component values are updated from backing bean properties
      System-level phase
      Application-level phase
    • Agenda
      What is JSF and why JSF?
      Architecture Overview
      UI Component Model
      Summary of new features in JSF 2
      Development Steps
    • User Interface Component Model
      UI components
      Event handling model
      Conversion and Validation model
      Rendering model
      Page navigation support
    • 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
      • 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.)
      • Easy to create custom converters
      Implement interface and
      • Output: Object to String
      • Input: String to Object
      Example
      • <h:inputTextid="Key"value="#{testBean.today}" converter=“CustomDateConverter"/>
    • 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
    • Events and Listeners
      Standard events and listeners
      • ActionEvent—UICommand component activated by the user
      • ValueChangedEvent—UIInput component whose value was just changed
      System events
      • Possibility to work with PhaseEvents and PhaseListeners
      • Global and component system events - UIComponent.subscribeToEvent() or <f:event> tag.
    • Navigation Model
      Application developer responsibility
      • Defined in Application configuration file (faces-config.xml)
      • Or implicitly (since JSF 2.0)
      Navigation rules
      • Determine which page to go
      • 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>
    • Agenda
      What is JSF and why JSF?
      Architecture Overview
      UI Component Model
      Summary of new features in JSF 2
      Development Steps
    • 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)
    • 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).
      • Conversation and Flash.
      • Custom
    • Standardized Ajax
      Two ways to use
      • JavaScript API - jsf.ajax.request()
      • 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;"/>
    • 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>
    • 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
    • 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
    • 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
    • Step 3: Create JSF Page
    • 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) {

      }
    • 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
    • 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
    • Questions?