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

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. Overview
 Introduction to JSF
 JSF architecture
 JSF components
 Developers Roles
 JSF lifecycle
 Code basics
 Security
 External libraries
 Demo
 Conclusion
 Links
Web Technologies2

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. 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. 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. JSF Architecture
MVC
 Model: JavaBeans
 View: JSF Pages
 Controller: FacesServlet
Web Technologies6

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. 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. JSF components
Main components of JSF
 UI components
 Render
 Validator
 Backing beans
 Converter
 Events and event listeners
 Messages
 Navigation
Web Technologies9

10. Developer roles
Web Technologies10

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. Request Processing Life Cycle Scenarios
Three possible life cycle scenarios for a JavaServer Faces
application:
Web Technologies12

13. Request Processing Lifecycle
Web Technologies13

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. JSF UI Component: textbox
Web Technologies15

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. 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. 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. JSF Event Handler
Web Technologies19

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. 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. 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. SessionScoped
import javax.faces.bean.SessionScoped;
... @SessionScoped
public class UserBean implements Serializable {...}
RequestScoped
ApplicationScoped
@ManagedBean(eager=true)
Web Technologies23
Bean’s Lifetime

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.  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. Web Technologies26
External Libraries

27. Web Technologies27
JSF Usage

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. 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. 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. 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. 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. Cinema management
Web Technologies33

34. Movie management
Web Technologies34

35. Reservation management
Web Technologies35

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Questions
Web Technologies46