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


Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

JSF basics



Introduction lecture to JSF given on the web technologies course, as student talk in RWTH Aachen/

Introduction lecture to JSF given on the web technologies course, as student talk in RWTH Aachen/



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds


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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • Framework for building user interfaces for web applications. It simplifies the development of user interface (often it is one of the most diff. parts of web appli development) Was developed through Java Community Process (JCP) by a group of technology leaders (Sun Microsystems, Oracle, Borland, IBM, etc.) and well-known Java and Web experts.
  • . Faceletes as the official view technology
  • Events-based interaction model (as opposed to the old “request/response” model) Reader kits that provide device independence Extendable component and rendering architecture can use different View technologies (ie. Facelets, JSP, Velocity, etc.) A  JSF  application can save the state of its components in the  client  response or on the  server   The state of UI components (and some other objects) is saved at the end of each request (called  stateSaving (note:  transient   true )), and restored upon next creation of that view. Several types of state-saving are available, including Client-side and Server-side state saving.  easy and user-friendly process for creating web applications
  • JSF was created to adhere precisely to MVC design methodology. MVC:  Facelet is the XHTML view, and the model is a bean.   You typically never deal with servlets directly in a JSF app. Instead you have configuration in faces-config.xml as well as annotations on various classes, which control what the FacesServlet does
  • Facelets: View handler technology Property updates/invoking of new methods are handled automatically by JSF request processing lifecycle
  • Dispatch them to appropriate View component Provided by implementation – you should not implement it by itself
  • Different requests and responses result in three possible life cycle scenarios that can exist for a JavaServer Faces application:
  • Request Processing Lifecycle Phases 1.Reconstitute component tree phase 2.Apply request values phase 3.Process validations phase 4.Update model values phase 5.Invoke application phase 6.Render response phase The six lifecycle phases, according to  JavaServer Faces 2.0 , are defined as follows: Create or Restore View:  Restores or creates a server-side component tree (View) in memory to represent the UI information from a client. Apply Request Values:  Updates the server-side components with fresh data from the client. Process Validations:  Performs validation and data type conversion on the new data. Update Model Values:  Updates any server-side Model objects with new data. Invoke Application:  Invokes any application logic needed to fulfill the request and navigate to a new page if needed. Render Response:  Saves state and renders a response to the requesting client. [2]
  • A "Managed Bean" is a bean constructed/initialized via injection in the faces-config.xml file. A "Backing Bean" is a bean referenced by JSF pages and is defined in the faces-config.xml file
  • If you want, from JSF 2.0 you can put the navigation information directly in the page. In this case no extrenal navigation rules are needed. This code specifies that view /pages/inputname.jsp has two outputs, sayHello and sayGoodbye, associated with particular pages.
  • And now finally we are going to show you smth working and what can help you to start with your own applications. As all of you are familiar with JSP and Java we are gonna skip some part of coding to be in time. Project is about running JSF on Google App Engine, it is not so easy and somehow tricky. What actually façade gives for us? How much people do you have in your team, 3,4, 5? How do work separately and paralelise work, make it more independent and allow developer concentrate on work, instead of numerous discussion about how to stick to other interfaces. In our project for instance I and Iurii are developing server part, which is hidden under façade. Firstly we introduce façade with it’s all needed functions for web pages and return dummy objects to have possibility to work on the interface. And then all our team is working further, guys finishing server part and exchanging dummy functions on real onces, and girls are implementing each one JSF page with beans.

JSF basics JSF basics Presentation Transcript

  • JavaServer Faces pFEW Team Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2011/12 The slides are licensed under a Creative Commons Attribution 3.0 License
  • Overview
    • Introduction to JSF
    • JSF architecture
    • JSF components
    • Developers Roles
    • JSF lifecycle
    • Code basics
    • Security
    • External libraries
    • Demo
    • Conclusion
    • Links
    Web Technologies
  • Introduction
    • What is JSF?
      • Component-oriented user interface (UI) framework
      • Client-server technology
      • Part of the standard Java EE platform
    • Developed through:
    Web Technologies
  • Introduction
    • JSF versions
      • JSF 1.0 (2004-03-11): initial release
      • JSF 1.1 (2004-05-27): bug fix release
      • JSF 1.2 (2006-05-11): improvements to core systems and APIs. Coincides with Java EE 5.
      • JSF 2.0 (2009-06-28): major release for ease of use, enhanced functionality, and performance. Coincides with Java EE 6. Faceletes as the official view technology
      • JSF 2.1 (2010-10-22): current version
    Web Technologies
  • Introduction
    • Why JSF?
      • Based on MVC pattern
      • Clean separation of developer roles
      • Built-in UI component model (unlike JSP and Servlet)
      • Events-based interaction model (as opposed to the old “request/response” model)
      • Safe state of ist components
      • Device independence
      • Large industry support
    Web Technologies
  • JSF Architecture
    • MVC
      • Model: JavaBeans
      • View: JSF Pages
      • Controller: FacesServlet
    Web Technologies
  • JSF Architecture
    • JavaBeans
      • Declaration in faces-config.xml or via annotations
      • Coupled to user interface with Expression Language
      • Property updates/invoking of new methods are handled automatically
    • FacesServlet
      • Provided by implementation
      • Handles all Faces requests
      • Uses rules for routing the requests (faces-config.xml)
    Web Technologies
  • JSF Architecture Web Technologies
    • JSF Pages
    • Faceletes
      • Easy component/tag creation using XML markup
      • Page templating
      • Reduces time and effort for
      • development and deployment
      • .xhtml
    • JSP
      • Easy component/tag creation using XML markup
      • JSP page is processed in one pass from top to bottom
      • .jsp
  • JSF components
    • Main components of JSF
      • UI components
      • Render
      • Validator
      • Backing beans
      • Converter
      • Events and event listeners
      • Messages
      • Navigation
    Web Technologies
  • Developer roles Web Technologies
  • Request Processing Life Cycle Scenarios
    • Faces response
        • A servlet response that was created by the execution of the Render Response Phase of the request processing life cycle.
    • Non-Faces response
        • A servlet response that was not created by the execution of the render response phase.
    • Faces request
        • A servlet request that was sent from a previously generated Faces response.
    • Non-Faces request
      • A servlet request that was sent to an application component, such as a servlet or JSP page, rather than directed to a JavaServer Faces component tree .
    Web Technologies
  • Request Processing Life Cycle Scenarios
    • Three possible life cycle scenarios for a JavaServer Faces application:
    Web Technologies
  • Request Processing Lifecycle Web Technologies
  • Code basics
    • Development steps
    • 1. Develop model objects which hold the data
    • 2. Add model objects 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
    Web Technologies
  • JSF UI Component: textbox Web Technologies
  • JSF Custom v alidator
      • Enter your email :
      • <h:inputText id = &quot;email&quot; value = &quot;#{user.email}&quot; size = &quot;20&quot; required = &quot;true&quot; label = &quot;Email Address&quot; >
      • <f:validator validatorId = &quot;com.mkyong.EmailValidator&quot; / >
      • < / h:inputText>
    Web Technologies
  • JSF Custom converter Web Technologies
      • Enter your bookmark URL :
      • <h:inputText id = &quot;bookmarkURL&quot; value = &quot;#{user.bookmarkURL}&quot; size = &quot;20&quot; required = &quot;true&quot; label = &quot;Bookmark URL&quot; >
      • <f:converter converterId = &quot;com.mkyong.URLConverter&quot; / >
      • < / h:inputText>
  • JSF Logon backing bean Web Technologies <managed-bean>      <managed-bean-name>Logon</managed-bean-name>      <managed-bean-class>pagecode.Logon</managed-bean-class>      <managed-bean-scope>request</managed-bean-scope> </managed-bean>
  • JSF Event Handler Web Technologies
  • JSF Messages
    • JSF page
      • <h:panelGrid columns = &quot;3&quot; >
      • Enter your username :
      • <h:inputText id = &quot;username„
      • value = &quot;#{user.username}&quot;
      • size = &quot;20&quot; required = &quot;true&quot;
      • label = &quot;UserName&quot; >
      • <f:validateLength minimum = &quot;5&quot; maximum = &quot;10&quot; / >
      • < / h:inputText>
      • <h:message for = &quot;username&quot; style = &quot;color:red&quot; / >
      • Enter your age :
      • <h:inputText id = &quot;age&quot; value = &quot;#{user.age}&quot; size = &quot;20&quot; required = &quot;true&quot; label = &quot;Age&quot; >
      • <f:validateLongRange for = &quot;age&quot; minimum = &quot;1&quot; maximum = &quot;200&quot; / >
      • < / h:inputText>
      • <h:message for = &quot;age&quot; style = &quot;color:red&quot; / >
      • < / h:panelGrid>
    Web Technologies
  • JSF Navigation
    • JSF Navigation Model
    • Rules are managed in faces-config.xml
    • Possible to put the navigation information directly in the page
    Web Technologies Example
    • Access to source code
    Web Technologies $sql=&quot; SELECT id FROM admin WHERE username='$myusername' and passcode='$mypassword' &quot;; $result= mysql_query ($sql); $row= mysql_fetch_array ($result); $active=$row['active']; $count= mysql_num_rows ($result); Security < script type=&quot;text/javascript&quot; src=&quot; /brain/javax.faces.resource/jquery/ui/jquery-ui.js.jsf?ln=primefaces&amp;v=2.2.1 &quot;></ script >
    • SessionScoped
          • import javax.faces.bean.SessionScoped;
          • ... @SessionScoped
          • public class UserBean implements Serializable {...}
          • RequestScoped
          • ApplicationScoped
          • @ManagedBean (eager= true )
    Bean’s Lifetime Web Technologies
  • Authentication
    • Declarative security
    • <auth-constraint> </auth-constraint>
    • Extended security
      • < application>      <action-listener>        br.com.globalcode.jsf.security.SecureActionListener      </action-listener>      <navigation-handler>        br.com.globalcode.jsf.security.SecureNavigationHandler      </navigation-handler>
      • </application>
      • @SecurityRoles ( &quot;customer-admin-adv, root&quot; )
      • public String delete() {
      • System.out.println( &quot;I'm a protected method!&quot; );
      • return &quot;delete-customer&quot; ;
      • }
    Web Technologies
    • Acegi (Spring)
      • <filter> <filter-name> Acegi Filter Chain Proxy </filter-name>
      • <filter-class> org.acegisecurity.util.FilterToBeanProxy </filter-class>
      • <init-param> <param-name> targetClass </param-name>
      • <param-value> org.acegisecurity.util.FilterChainProxy </param-value> </init-param></filter>
    • JBoss Seam
      • <exception  class =&quot; org.jboss.seam.security.NotLoggedInException &quot;  log =&quot; false &quot; >          <redirect  view-id =&quot;/ register.xhtml &quot; >              <message  severity =&quot; warn &quot; > You must be a member to use this feature </message>         </redirect>   </exception>
    • Java Server Faces Security Extensions
      • <application>
      • <property-resolver> com.groundside.jsf.securityresolver.SecurityPropertyResolver </property-resolver>
      • <variable-resolver> com.groundside.jsf.securityresolver.SecurityVariableResolver </variable-resolver>
      • </application>
    Authentication Web Technologies
  • External Libraries Web Technologies
  • JSF Usage Web Technologies
  • Comparison of JSF and JavaScript
    • JavaScript: client side technology
    • JSF: client-server side technology
    • Using JSF takes more time, because it needs to have stable connection with server.
    Web Technologies
  • Pros and cons of JSF Web Technologies Many implementation providers ( Oracle, IBM, JBoss ) Lack of client-side validation JSF allows you to create reusable components, thereby increasing productivity Undeveloped tool support (NetBeans and Eclipse 3.6.) Many ready to use components from major developers: Apache, Richfaces, Infragistics, Oracle, etc. JSF only comes with validators for missing values, length of input, and numbers in a given range Excellent implementation of the validators and converters concepts. Unlike Struts, JSF stores the validation logic in close proximity of the component description Different JavaScript implementation of Ajax in every browser with different bugs and different proprietary extensions A well-designed action listeners concept Overloaded client-server communication Injected into the components of JavaScript code and excellent support for Ajax Hard to develop efficient application, has to change standard components
  • Demo
    • Cinema project with JSF and GAE technologies
    • Contain of server part – dealing with database
    • Facade class is used to access server
    • JSF beans provide client functionality on java
    • Full version: http://memo-ry.appspot.com
    Web Technologies
  • ORM Web Technologies
    • Object-relational mapping: a programming technique for converting data between incompatible type systems in OOP languages.
    • Java Data Objects (JDO): specification of Java object persistence. One of its features is a transparency of the persistent services to the domain model. JDO persistent objects are ordinary Java programming language classes (POJOs).
    • Java Persistence API (JPA): Java programming language framework managing relational data in applications using Java SE and Java EE.
    Taken from Wiki
  • UI
    • App engine is not working with java 1.7
    • Be aware when you are deploying it
    • Database uses data nucleolus enhancer, which is not present
    • in 1.7
    Web Technologies
  • Cinema management Web Technologies
  • Movie management Web Technologies
  • Reservation management Web Technologies
  • JSF bean Web Technologies @ManagedBean // defines a bean for JSF @ApplicationScoped // scope of the bean public class ReserveManagerBean implements Serializable {…} public ReserveManagerBean () ; // constructor for the bean, don’t mix up with page crating or accessing public void updateMovies ( ValueChangeEvent event ) ; //listener for the selectOneMenu , when cinema is selected public void setupMovie ( ValueChangeEvent event ) ; // listener for the selectOneMenu , when movie is selected public void save ( ActionEvent event ) ; //listener to the dialog button, to save new reservation private void refreshNames (); //internal function, reshreshing data from the DB, as it can be changes by //another user in any time, also on the web page Methods
  • Bean attributes
    • private Facade façade; // access to the server part
    • private Key id; // reservation key, will be show in the dialog window
    • private String time; // reservation time
    • private int numberOfTickets; //reservation time
    • private String clientName; // client name for reservation
    • private String clientEmail; // client email for reservation
    • private String cinemaName; // cinema name for reservation
    • private String movieName; // movie name for reservation
    • private Cinema cinema; // respective cinema object, to the selected cinema name by user
    • private Movie movie; // respective movie object, to the selected movie name by user
    • private String[] cinemaNames; // array of accessible cinema names, shown in the select box
    • private List<Cinema> cinemas; // list of all cinemas objects
    • private String[] movieNames; // array of accessible movie names, shown in the select box
    • private List<Movie> movies; // list of all movie objects in selected cinema
    • private Reservation newReservation // saves created reservation
    Web Technologies
  • Reservation form Web Technologies < h:form id = &quot;book&quot; > < h:panelGrid id = &quot;display&quot; columns = &quot;2&quot; cellpadding = &quot;4&quot; > < h:outputText value = &quot;Cinema: *&quot; /> < h:selectOneMenu value = &quot;#{reserveManagerBean.cinemaName}&quot; update = &quot;display&quot; onchange = &quot;submit()&quot; valueChangeListener = &quot;#{reserveManagerBean.updateMovies}&quot; > < f:selectItems value = &quot;#{reserveManagerBean.cinemaNames}” /> </ h:selectOneMenu > < h:outputText value = &quot;Movie: *&quot; /> < h:selectOneMenu value = &quot;#{reserveManagerBean.movieName}” update = &quot;display&quot; onchange = &quot;submit()&quot; valueChangeListener = &quot;#{reserveManagerBean.setupMovie}&quot; > < f:selectItems value = &quot;#{reserveManagerBean.movieNames}&quot; /> </ h:selectOneMenu > < h:outputText value = &quot;Client Name:&quot; /> < p:inputText value = &quot;#{reserveManagerBean.clientName}&quot; /> < h:outputText value = &quot;Client Email: *&quot; /> < p:inputText value = &quot;#{reserveManagerBean.clientEmail}&quot; required = &quot;true&quot; /> < h:outputText value = &quot;Time: *&quot; /> < p:inputText value = &quot;#{reserveManagerBean.time}&quot; required = &quot;true&quot; /> < h:outputText value = &quot;Number of tickets: *&quot; /> < p:inputText value = &quot;#{reserveManagerBean.numberOfTickets}&quot; required = &quot;true&quot; /> </ h:panelGrid >
  • Set up movie method
    • JSF bean method
    • public void setupMovie(ValueChangeEvent event) {
    • this .movieName = (String) event.getNewValue();
    • for ( int i = 0; i < this .movieNames.length; i++)
    • if ( this .movieName.equals(movieNames[i])) {
    • this .movie = this .movies.get(i);
    • }
    • }
    • JSF page
    • < h:outputText value = &quot;Movie: *&quot; />
    • < h:selectOneMenu value = &quot;#{reserveManagerBean.movieName}” update = &quot;display&quot;
    • onchange = &quot;submit()&quot;
    • valueChangeListener = &quot;#{reserveManagerBean.setupMovie}&quot; >
    • < f:selectItems value = &quot;#{reserveManagerBean.movieNames}&quot; />
    • </ h:selectOneMenu >
    Web Technologies
  • Links to other pages Web Technologies < h:panelGrid id = &quot;navi&quot; columns = &quot;5&quot; cellpadding = &quot;4&quot; > < p:commandButton value = &quot;Save reservation&quot; update = &quot;book,display&quot; actionListener = &quot;#{reserveManagerBean.save}“ oncomplete = &quot;confirmation.show()&quot; /> < p:button value = &quot;Movie management&quot; outcome = &quot;movie&quot; /> < p:button value = &quot;Reservation management&quot; outcome = &quot;reservation&quot; /> < p:button value = &quot;Cinema management&quot; outcome = &quot;cinema&quot; /> </ h:panelGrid >
  • Dialog window Web Technologies < p:confirmDialog message = &quot;Your booking Id is&quot; width = &quot;500“ showEffect = &quot;explode&quot; hideEffect = &quot;explode&quot; header = &quot;Confirm&quot; severity = &quot;alert“ widgetVar = &quot;confirmation&quot; > < h:panelGrid id = &quot;navi&quot; columns = &quot;1&quot; cellpadding = &quot;4&quot; > < h:outputText value = &quot;#{reserveManagerBean.id}&quot; /> < p:commandButton value = &quot;Remembered&quot; onclick = &quot;confirmation.hide()“ type = &quot;button&quot; /> </ h:panelGrid > </ p:confirmDialog > public void save ( ActionEvent event ) { this .newReservation = this .facade.addReservation ( movie, time, clientName, clientEmail, numberOfTickets ) ; this .clientEmail = &quot;&quot; ; this .clientName = &quot;&quot; ; this .time = &quot;&quot; ; this .numberOfTickets = 0 ; this .id = this .newReservation.getId () ; }
  • Conclusion
    • JSF
      • Standard Java component-oriented UI framework
      • Clien-server technology
      • Current version: JSF 2.1 ( 2010)
      • MVC architecture
      • Allows different View technologies (Facelets, JSP, …)
      • Event-based
      • Suggest developer roles
      • Device independent
      • Easy to use
    Web Technologies
  • Links
    • Get Started Links
    • http://www.mkyong.com/tutorials/jsf-2-0-tutorials/
    • http://www.coreservlets.com/JSF-Tutorial/jsf2/
    • http://www.jsftutorials.net/
    • http://www.infosun.fim.uni-passau.de/cb/Kurse/sep_ss11/download/jsp-2.2-mr-spec.pdf
    • http://www.javaserverfaces.org/
    Web Technologies
  • Links
    • Literature for demo
    • https://sites.google.com/a/wildstartech.com/adventures-in-java/Java-Platform-Enterprise-Edition/JavaServer-Faces/javaserver-faces-20/configuring-javaserver-faces-20-to-run-on-the-google-appengine/javaserverfaces-20-and-google-app-engine-compatibility-issues
    • http://primefaces-rocks.appspot.com/ui/home.jsf - Primefaces on GAE
    • http://www.oracle.com/technetwork/java/index-jsp-135919.html - JDO manual
    • http://code.google.com/appengine/docs/ - GAE manual
    • http://memo-ry.appspot.com – deployed example
    Web Technologies
    • External Libraries
    • PrimeFaces; http://www.primefaces.org/
    • MyFaces; http://myfaces.apache.org/
    • Tomahawk; http://myfaces.apache.org/tomahawk/
    • Trinidad; http://myfaces.apache.org/trinidad/
    • Tobago; http://myfaces.apache.org/tobago/
    • Orchestra;http://myfaces.apache.org/orchestra/
    • ICEFaces; http://www.icefaces.org/main/home/
    • OpenFaces; http://openfaces.org/
    • RichFaces; http://www.jboss.org/richfaces
    Links Web Technologies
  • Questions Web Technologies