Download - 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&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