jsf basics

JavaServer Faces

pFEW Team

Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2011/121The 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 Technologies2

IntroductionWhat is JSF?

Component-oriented user interface (UI) framework Client-server technology Part of the standard Java EE platformDeveloped through:

Web Technologies3

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

IntroductionWhy 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

JSF ArchitectureMVC

Model: JavaBeans View: JSF Pages Controller: FacesServlet

Web Technologies6

JSF ArchitectureJavaBeans

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

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

JSF componentsMain components of JSF

UI components Render Validator Backing beans Converter Events and event listeners Messages Navigation

Web Technologies9

Developer roles

Web Technologies10

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 responseA servlet response that was not created by the execution of the render response phase.

Faces requestA servlet request that was sent from a previously generated Faces response.

Non-Faces requestA 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

Request Processing Life Cycle Scenarios

Three possible life cycle scenarios for a JavaServer Faces application:

Web Technologies12

Request Processing Lifecycle

Web Technologies13

Code basicsDevelopment steps1. Develop model objects which hold the data2. Add model objects declarations to Application Configuration File faces-config.xml3. Create Pages using UI component and core tags4. Define Page Navigation in faces-config.xml5. Configure web.xml

Web Technologies14

JSF UI Component: textbox

Web Technologies15

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

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>

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>

JSF Event Handler

Web Technologies19

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

JSF NavigationJSF Navigation Model Rules are managed in faces-config.xml Possible to put the navigation information

directly in the page

Web Technologies21

Example

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/jquery-ui.js.jsf?ln=primefaces&amp;v=2.2.1"></script>

SessionScopedimport javax.faces.bean.SessionScoped;... @SessionScopedpublic class UserBean implements Serializable {...}RequestScopedApplicationScoped

@ManagedBean(eager=true)

Web Technologies23

Bean’s Lifetime

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

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

Web Technologies26

External Libraries

Web Technologies27

JSF Usage

Comparison of JSF and JavaScriptJavaScript: client side technologyJSF: client-server side technology

Using JSF takes more time, because it needs to have stable connection with server.

Web Technologies28

Pros and cons of JSFMany 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

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

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

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

Cinema management

Web Technologies33

Movie management

Web Technologies34

Reservation management

Web Technologies35

JSF bean

Web Technologies36

@ManagedBean // defines a bean for JSF@ApplicationScoped // scope of the beanpublic class ReserveManagerBean implements Serializable {…}

public ReserveManagerBean();// constructor for the bean, don’t mix up with page crating or accessingpublic void updateMovies(ValueChangeEvent event);//listener for the selectOneMenu, when cinema is selectedpublic void setupMovie(ValueChangeEvent event);// listener for the selectOneMenu, when movie is selectedpublic void save(ActionEvent event);//listener to the dialog button, to save new reservationprivate 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 Technologies37

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>

Set up movie methodJSF 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

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>

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();

}

ConclusionJSF

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

LinksGet 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

LinksLiterature 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 GAEhttp://www.oracle.com/technetwork/java/index-jsp-135919.html - JDO manualhttp://code.google.com/appengine/docs/ - GAE manualhttp://memo-ry.appspot.com – deployed example

Web Technologies44

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

Questions

Web Technologies46