JSF basics


Published on

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

Published in: Education, Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 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
    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

    1. 1. JavaServer Faces pFEW Team Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2011/121 The slides are licensed under a Creative Commons Attribution 3.0 License
    2. 2. Overview  Introduction to JSF  JSF architecture  JSF components  Developers Roles  JSF lifecycle  Code basics  Security  External libraries  Demo  Conclusion  Links Web Technologies2
    3. 3. Introduction What is JSF?  Component-oriented user interface (UI) framework  Client-server technology  Part of the standard Java EE platform Developed through: Web Technologies3
    4. 4. 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 Technologies4
    5. 5. 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 Technologies5
    6. 6. JSF Architecture MVC  Model: JavaBeans  View: JSF Pages  Controller: FacesServlet Web Technologies6
    7. 7. 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 Technologies7
    8. 8. JSF Architecture Web Technologies8 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
    9. 9. JSF components Main components of JSF  UI components  Render  Validator  Backing beans  Converter  Events and event listeners  Messages  Navigation Web Technologies9
    10. 10. Developer roles Web Technologies10
    11. 11. 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 Technologies11
    12. 12. Request Processing Life Cycle Scenarios Three possible life cycle scenarios for a JavaServer Faces application: Web Technologies12
    13. 13. Request Processing Lifecycle Web Technologies13
    14. 14. 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 Technologies14
    15. 15. JSF UI Component: textbox Web Technologies15
    16. 16. JSF Custom validator Enter your email : <h:inputText id="email" value="#{user.email}" size="20" required="true" label="Email Address"> <f:validator validatorId="com.mkyong.EmailValidator" /> </h:inputText> Web Technologies16
    17. 17. JSF Custom converter Web Technologies17 Enter your bookmark URL : <h:inputText id="bookmarkURL" value="#{user.bookmarkURL}" size="20" required="true" label="Bookmark URL"> <f:converter converterId="com.mkyong.URLConverter" /> </h:inputText>
    18. 18. JSF Logon backing bean Web Technologies18 <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>
    19. 19. JSF Event Handler Web Technologies19
    20. 20. JSF Messages  JSF page <h:panelGrid columns="3"> Enter your username : <h:inputText id="username„ value="#{user.username}" size="20" required="true" label="UserName" > <f:validateLength minimum="5" maximum="10" /> </h:inputText> <h:message for="username" style="color:red" /> Enter your age : <h:inputText id="age" value="#{user.age}" size="20" required="true" label="Age" > <f:validateLongRange for="age" minimum="1" maximum="200" /> </h:inputText> <h:message for="age" style="color:red" /> </h:panelGrid> Web Technologies20
    21. 21. JSF Navigation JSF Navigation Model  Rules are managed in faces-config.xml  Possible to put the navigation information directly in the page Web Technologies21 Example
    22. 22. Web Technologies22 $sql="SELECT id FROM admin WHERE username='$myusername' and passcode='$mypassword'"; $result=mysql_query($sql); $row=mysql_fetch_array($result); $active=$row['active']; $count=mysql_num_rows($result); Security  Access to source code <script type="text/javascript" src=" /brain/javax.faces.resource/jquery/ui/j "></script>
    23. 23. SessionScoped import javax.faces.bean.SessionScoped; ... @SessionScoped public class UserBean implements Serializable {...} RequestScoped ApplicationScoped @ManagedBean(eager=true) Web Technologies23 Bean’s Lifetime
    24. 24. 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("customer-admin-adv, root") public String delete() { System.out.println("I'm a protected method!"); return "delete-customer"; } Web Technologies24
    25. 25.  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="org.jboss.seam.security.NotLoggedInException" log="false"> <redirect view-id="/register.xhtml"> <message severity="warn">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> Web Technologies25 Authentication
    26. 26. Web Technologies26 External Libraries
    27. 27. Web Technologies27 JSF Usage
    28. 28. 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 Technologies28
    29. 29. Pros and cons of JSF 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 Web Technologies29
    30. 30. 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 Technologies30
    31. 31. ORM Web Technologies31  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
    32. 32. 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 Technologies32
    33. 33. Cinema management Web Technologies33
    34. 34. Movie management Web Technologies34
    35. 35. Reservation management Web Technologies35
    36. 36. JSF bean Web Technologies36 @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
    37. 37. 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 Technologies37
    38. 38. Reservation form Web Technologies38 <h:form id="book"> <h:panelGrid id="display" columns="2" cellpadding="4"> <h:outputText value="Cinema: *" /> <h:selectOneMenu value="#{reserveManagerBean.cinemaName}" update="display" onchange="submit()" valueChangeListener="#{reserveManagerBean.updateMovies}"> <f:selectItems value="#{reserveManagerBean.cinemaNames}”/> </h:selectOneMenu> <h:outputText value="Movie: *" /> <h:selectOneMenu value="#{reserveManagerBean.movieName}” update="display" onchange="submit()" valueChangeListener="#{reserveManagerBean.setupMovie}"> <f:selectItems value="#{reserveManagerBean.movieNames}" /> </h:selectOneMenu> <h:outputText value="Client Name:" /> <p:inputText value="#{reserveManagerBean.clientName}"/> <h:outputText value="Client Email: *" /> <p:inputText value="#{reserveManagerBean.clientEmail}" required="true"/> <h:outputText value="Time: *"/> <p:inputText value="#{reserveManagerBean.time}" required="true"/> <h:outputText value="Number of tickets: *" /> <p:inputText value="#{reserveManagerBean.numberOfTickets}" required="true"/> </h:panelGrid>
    39. 39. 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="Movie: *" /> <h:selectOneMenu value="#{reserveManagerBean.movieName}” update="display" onchange="submit()" valueChangeListener="#{reserveManagerBean.setupMovie}"> <f:selectItems value="#{reserveManagerBean.movieNames}" /> </h:selectOneMenu> Web Technologies39
    40. 40. Links to other pages Web Technologies40 <h:panelGrid id="navi" columns="5" cellpadding="4"> <p:commandButton value="Save reservation" update="book,display" actionListener="#{reserveManagerBean.save}“ oncomplete="confirmation.show()"/> <p:button value="Movie management" outcome="movie" /> <p:button value="Reservation management" outcome="reservation" /> <p:button value="Cinema management" outcome="cinema" /> </h:panelGrid>
    41. 41. Dialog window Web Technologies41 <p:confirmDialog message="Your booking Id is" width="500“ showEffect="explode" hideEffect="explode" header="Confirm" severity="alert“ widgetVar="confirmation"> <h:panelGrid id="navi" columns="1" cellpadding="4"> <h:outputText value="#{reserveManagerBean.id}"/> <p:commandButton value="Remembered" onclick="confirmation.hide()“ type="button" /> </h:panelGrid> </p:confirmDialog> public void save(ActionEvent event) { this.newReservation = this.facade.addReservation(movie, time, clientName, clientEmail, numberOfTickets); this.clientEmail = ""; this.clientName = ""; this.time = ""; this.numberOfTickets = 0; this.id = this.newReservation.getId(); }
    42. 42. 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 Technologies42
    43. 43. 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 Technologies43
    44. 44. 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 Technologies44
    45. 45. 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 Web Technologies45 Links
    46. 46. Questions Web Technologies46