JSF basics

46
JavaServer Faces pFEW Team Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2011/12 1 The slides are licensed under Creative Commons Attribution 3.0 Licen

description

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

Transcript of JSF basics

Page 1: 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

Page 2: JSF basics

Overview Introduction to JSF JSF architecture JSF components Developers Roles JSF lifecycle Code basics Security External libraries Demo Conclusion Links

Web Technologies2

Page 3: JSF basics

IntroductionWhat is JSF?

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

Web Technologies3

Page 4: JSF basics

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

Page 5: JSF basics

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

Page 6: JSF basics

JSF ArchitectureMVC

Model: JavaBeans View: JSF Pages Controller: FacesServlet

Web Technologies6

Page 7: JSF basics

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

Page 8: JSF basics

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

Page 9: JSF basics

JSF componentsMain components of JSF

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

Web Technologies9

Page 10: JSF basics

Developer roles

Web Technologies10

Page 11: JSF basics

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

Page 12: JSF basics

Request Processing Life Cycle Scenarios

Three possible life cycle scenarios for a JavaServer Faces application:

Web Technologies12

Page 13: JSF basics

Request Processing Lifecycle

Web Technologies13

Page 14: JSF basics

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

Page 15: JSF basics

JSF UI Component: textbox

Web Technologies15

Page 16: JSF basics

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

Page 17: JSF basics

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>

Page 18: JSF basics

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>

Page 19: JSF basics

JSF Event Handler

Web Technologies19

Page 20: JSF basics

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

Page 21: JSF basics

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

directly in the page

Web Technologies21

Example

Page 22: JSF basics

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>

Page 23: JSF basics

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

@ManagedBean(eager=true)

Web Technologies23

Bean’s Lifetime

Page 24: JSF basics

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

Page 25: JSF basics

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

Page 26: JSF basics

Web Technologies26

External Libraries

Page 27: JSF basics

Web Technologies27

JSF Usage

Page 28: JSF basics

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

Page 29: JSF basics

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

Page 30: JSF basics

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

Page 31: JSF basics

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

Page 32: JSF basics

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

Page 33: JSF basics

Cinema management

Web Technologies33

Page 34: JSF basics

Movie management

Web Technologies34

Page 35: JSF basics

Reservation management

Web Technologies35

Page 36: JSF basics

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

Page 37: JSF basics

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

Page 38: JSF basics

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>

Page 39: JSF basics

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

Page 40: JSF basics

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>

Page 41: JSF basics

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

}

Page 42: JSF basics

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

Page 43: JSF basics

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

Page 44: JSF basics

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

Page 45: JSF basics

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

Page 46: JSF basics

Questions

Web Technologies46