12/10/2016

ASimpleCRUDExamplewithJSFCodeProject

12,530,443 members 60,129 online

articles

Q&A

Sign in

forums

lounge

Searchforarticles,questions,tips

A Simple CRUD Example with JSF

Dr. Song Li, 16 Sep 2015

CPOL

Rate this:

5.00 2 votes
This is a simple CRUD example with JSF.

Download JSFExample.zip 10.5 KB

Introduction
This is a simple CRUD example with JSF.

Background
JSF is an MVC framework, but it is very different from the Spring MVC and ASP.NET MVC. It actually has a strong ASP.NET Web
Form"POSTBACK" flavor. This example is based on astack overflow example.

http://www.codeproject.com/Articles/1030872/ASimpleCRUDExamplewithJSF

1/12

12/10/2016

ASimpleCRUDExamplewithJSFCodeProject

The attached is a Maven project. I have tested it with Maven 3.2.1, Java 1.8.0_45, Tomcat 7, and Eclipse Java EE IDE for Web Developers
Luna Service Release 2. It actually has two examples.
The "simplecrud.xhtml" is the simple CRUD example;
The "freshsafecrud.xhtml" is to address the problems due to the JSF "POSTBACK" nature.
The "welcome.xhtml" is the index page of the two examples.

If you are not familiar with how to import Maven projects into Eclipse, you can check out this link. When I tried to import the project, I
noticed that Eclipse showed me some error message telling me some validation errors. You can simply ignore these messages and delete
the markers from Eclipse.

The pom.xml and the web.xml

The "pom.xml" declared the dependencies needed to create a JSF application.
Hide Shrink
http://www.codeproject.com/Articles/1030872/ASimpleCRUDExamplewithJSF

Copy Code
2/12

12/10/2016

ASimpleCRUDExamplewithJSFCodeProject

<projectxmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchemainstance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
http://maven.apache.org/xsd/maven4.0.0.xsd">

<modelVersion>4.0.0</modelVersion>
<groupId>com.song.example</groupId>
<artifactId>JSFExample</artifactId>
<version>0.0.1SNAPSHOT</version>
<packaging>war</packaging>

<properties>
<tomcat.version>7.0.55</tomcat.version>
<jsf.version>2.1.7</jsf.version>
</properties>

<dependencies>
<!Sevletjarsforcompilation,providedbyTomcat>
<dependency>
<groupId>org.apache.tomcat</groupId>
<artifactId>tomcatservletapi</artifactId>
<version>${tomcat.version}</version>
<scope>provided</scope>
</dependency>

<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsfapi</artifactId>
<version>${jsf.version}</version>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsfimpl</artifactId>
<version>${jsf.version}</version>
</dependency>

<dependency>
<groupId>javax.validation</groupId>
<artifactId>validationapi</artifactId>
<version>1.1.0.Final</version>
</dependency>

</dependencies>

<build>
<finalName>${project.artifactId}</finalName>
<plugins>
<plugin>
<artifactId>mavencompilerplugin</artifactId>
<version>3.1</version>
<configuration>
<source>1.8</source>
<target>1.8</target>
</configuration>
</plugin>

<plugin>
<artifactId>mavenwarplugin</artifactId>
<version>2.4</version>
<configuration>
<warSourceDirectory>WebContent</warSourceDirectory>
<failOnMissingWebXml>true</failOnMissingWebXml>
</configuration>
</plugin>
</plugins>
</build>

</project>
http://www.codeproject.com/Articles/1030872/ASimpleCRUDExamplewithJSF

3/12

12/10/2016

ASimpleCRUDExamplewithJSFCodeProject

The "web.xml" of the example application is the following.

Hide Shrink

Copy Code

<?xmlversion="1.0"encoding="UTF8"?>
<webappxmlns:xsi="http://www.w3.org/2001/XMLSchemainstance"
xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/webapp_3_0.xsd"
id="WebApp_ID"version="3.0">

<displayname>JSFExample</displayname>
<welcomefilelist>
<welcomefile>welcome.xhtml</welcomefile>
</welcomefilelist>

<filter>
<filtername>nocachefilter</filtername>
<filterclass>
com.song.web.filter.NocacheFilter
</filterclass>
</filter>
<filtermapping>
<filtername>nocachefilter</filtername>
<urlpattern>/*</urlpattern>
</filtermapping>

<servlet>
<servletname>jsfservlet</servletname>
<servletclass>javax.faces.webapp.FacesServlet</servletclass>
<loadonstartup>1</loadonstartup>
</servlet>
<servletmapping>
<servletname>jsfservlet</servletname>
<urlpattern>*.xhtml</urlpattern>
</servletmapping>

<sessionconfig>
<sessiontimeout>20</sessiontimeout>
<trackingmode>COOKIE</trackingmode>
</sessionconfig>

<contextparam>
<paramname>BaseUrl</paramname>
<paramvalue>
http://localhost:8080/JSFExample/
</paramvalue>
</contextparam>
</webapp>
From a servlet container point of view, all the JSF pages will be mapped to the single servlet implemented by the
"javax.faces.webapp.FacesServlet" class;
In this example application, we mapped all the requests to all the "xhtml" pages to the "javax.faces.webapp.FacesServlet".

The Simple CRUD Example

The manage bean of the simple example is implemented in the "SimpleCrudBean" class.
Hide Shrink

Copy Code

packagecom.song.jsf.example;

importjava.io.IOException;
importjava.io.Serializable;
importjava.util.ArrayList;
importjava.util.List;

http://www.codeproject.com/Articles/1030872/ASimpleCRUDExamplewithJSF

4/12

12/10/2016

ASimpleCRUDExamplewithJSFCodeProject

importjavax.annotation.PostConstruct;
importjavax.faces.bean.ManagedBean;
importjavax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
publicclassSimpleCrudBeanimplementsSerializable{
privatestaticfinallongserialVersionUID=1L;

privateList<Student>list;
privateStudentitem=newStudent();
privateStudentbeforeEditItem=null;
privatebooleanedit;

@PostConstruct
publicvoidinit(){
list=newArrayList<Student>();
}

publicvoidadd(){
//DAOsavetheadd
item.setId(list.isEmpty()?1:list.get(list.size()1).getId()+1);
list.add(item);
item=newStudent();
}

publicvoidresetAdd(){
item=newStudent();
}

publicvoidedit(Studentitem){
beforeEditItem=item.clone();
this.item=item;
edit=true;
}

publicvoidcancelEdit(){
this.item.restore(beforeEditItem);
this.item=newStudent();
edit=false;
}

publicvoidsaveEdit(){
//DAOsavetheedit
this.item=newStudent();
edit=false;
}

publicvoiddelete(Studentitem)throwsIOException{
//DAOsavethedelete
list.remove(item);
}

publicList<Student>getList(){
returnlist;
}

publicStudentgetItem(){
returnthis.item;
}

publicbooleanisEdit(){
returnthis.edit;
}

}
The "add", "saveEdit", and "delete" methods need to synchronize the data with a persistent storage like a database;
In this example, the database operation is skipped for simplicity.
http://www.codeproject.com/Articles/1030872/ASimpleCRUDExamplewithJSF

5/12

12/10/2016

ASimpleCRUDExamplewithJSFCodeProject

The "Student" class is implemented in the "Student.java" file.

Hide Shrink

Copy Code

Hide Shrink

Copy Code

packagecom.song.jsf.example;

importjava.io.Serializable;

publicclassStudentimplementsSerializable{
privatestaticfinallongserialVersionUID=1L;

privateLongid;
privateStringname;

publicStudent(){}
publicStudent(Longid,Stringname){
this.id=id;
this.name=name;
}

publicLonggetId(){returnid;}
publicvoidsetId(Longid){this.id=id;}
publicStringgetName(){returnname;}
publicvoidsetName(Stringname){this.name=name;}

@Override
publicStudentclone(){
returnnewStudent(id,name);
}

publicvoidrestore(Studentstudent){
this.id=student.getId();
this.name=student.getName();
}
}
The "SimpleCrudBean" class is bound to the "simplecrud.xhtml" file to make it fully functional.

<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<head>
<title>SimpleCRUD</title>
</head>

<body>
<h3>Liststudents</h3>
<h:formrendered="#{notemptysimpleCrudBean.list}">
<h:dataTablevalue="#{simpleCrudBean.list}"var="item">
<h:column><f:facetname="header">ID</f:facet>#{item.id}</h:column>
<h:column><f:facetname="header">Name</f:facet>#{item.name}</h:column>
<h:column>
<h:commandButtonvalue="edit"action="#{simpleCrudBean.edit(item)}"/>
</h:column>
<h:column>
<h:commandButtonvalue="delete"action="#{simpleCrudBean.delete(item)}"/>
</h:column>
</h:dataTable>
</h:form>

<h:panelGrouprendered="#{emptysimpleCrudBean.list}">
<p>Nostudents!Pleaseaddstudents.</p>
</h:panelGroup>

<h:panelGrouprendered="#{!simpleCrudBean.edit}">
<h3>Addstudent</h3>
<h:form>
http://www.codeproject.com/Articles/1030872/ASimpleCRUDExamplewithJSF

6/12

12/10/2016

ASimpleCRUDExamplewithJSFCodeProject

<p>Name:<h:inputTextvalue="#{simpleCrudBean.item.name}"/></p>
<p>
<h:commandButtonvalue="add"action="#{simpleCrudBean.add}"/>
<h:commandButtonvalue="reset"action="#{simpleCrudBean.resetAdd}"/>
</p>
</h:form>
</h:panelGroup>

<h:panelGrouprendered="#{simpleCrudBean.edit}">
<h3>Editstudent#{simpleCrudBean.item.id}</h3>
<h:form>
<p>Name:<h:inputTextvalue="#{simpleCrudBean.item.name}"/></p>
<p>
<h:commandButtonvalue="save"action="#{simpleCrudBean.saveEdit}"/>
<h:commandButtonvalue="cancel"action="#{simpleCrudBean.cancelEdit}"/>
</p>
</h:form>
</h:panelGroup>
<p>
<ahref="#{appUrlStore.baseUrl}">Gobacktoindex</a>
</p>
</body>
</html>

If you now load the "simplecrud.xhtml" page, you can find that the CRUD operations all work fine. But if you click the refresh button on
the browser after adding a student, you will see this ugly popup message.

http://www.codeproject.com/Articles/1030872/ASimpleCRUDExamplewithJSF

7/12

12/10/2016

ASimpleCRUDExamplewithJSFCodeProject

If you click the "Continue" button and proceed with the refresh, you will notice that the student just added gets added again. This is
definitely not a good behavior. This kind of behavior is due to the JSF's "POSTBACK" nature. In the next example, we will try to resolve
this issue.

The Refreshsafe CRUD Example

In order to address the problem in the simple CRUD example, I created the "CommonUtils" class.
Hide Shrink

Copy Code

packagecom.song.jsf.example.util;

importjava.io.IOException;
importjava.io.Serializable;

importjavax.faces.bean.ApplicationScoped;
importjavax.faces.bean.ManagedBean;
importjavax.faces.context.ExternalContext;
importjavax.faces.context.FacesContext;
importjavax.servlet.http.HttpServletRequest;

@ManagedBean(name="commonUtils")
@ApplicationScoped
publicclassCommonUtilsimplementsSerializable{
privatestaticfinallongserialVersionUID=1L;

publicvoidredirectWithGet(){
FacesContextfacesContext=FacesContext.getCurrentInstance();
ExternalContextexternalContext=facesContext.getExternalContext();
HttpServletRequestrequest=(HttpServletRequest)externalContext.getRequest();

StringBufferrequestURL=request.getRequestURL();
StringqueryString=request.getQueryString();

if(queryString!=null){
requestURL.append('?').append(queryString).toString();
}

Stringurl=requestURL.toString();
try{
externalContext.redirect(requestURL.toString());
}catch(IOExceptione){
thrownewRuntimeException("Unabletorerirectto"+url);
}

facesContext.responseComplete();
}
}
The "redirectWithGet" method is to simply send a redirect request to the browser to refresh the browser with a GET request. The
"CommonUtils" object is injected into the "FreshsafeCrudBean" class, and the "redirectWithGet" method is called whenever a
"POSTBACK" is performed.
http://www.codeproject.com/Articles/1030872/ASimpleCRUDExamplewithJSF

8/12

12/10/2016

ASimpleCRUDExamplewithJSFCodeProject

Hide Shrink

Copy Code

packagecom.song.jsf.example;

importjava.io.IOException;
importjava.io.Serializable;
importjava.util.ArrayList;
importjava.util.List;

importjavax.annotation.PostConstruct;
importjavax.faces.bean.ManagedBean;
importjavax.faces.bean.ManagedProperty;
importjavax.faces.bean.SessionScoped;

importcom.song.jsf.example.util.CommonUtils;

@ManagedBean
@SessionScoped
publicclassFreshsafeCrudBeanimplementsSerializable{
privatestaticfinallongserialVersionUID=1L;

privateList<Student>list;
privateStudentitem=newStudent();
privateStudentbeforeEditItem=null;
privatebooleanedit;

@ManagedProperty(value="#{commonUtils}")
privateCommonUtilsutil;
publicvoidsetUtil(CommonUtilsutil){
this.util=util;
}

@PostConstruct
publicvoidinit(){
list=newArrayList<Student>();
}

publicvoidadd(){
//DAOsavetheadd
item.setId(list.isEmpty()?1:list.get(list.size()1).getId()+1);
list.add(item);
item=newStudent();

util.redirectWithGet();
}

publicvoidresetAdd(){
item=newStudent();

util.redirectWithGet();
}

publicvoidedit(Studentitem){
beforeEditItem=item.clone();
this.item=item;
edit=true;

util.redirectWithGet();
}

publicvoidcancelEdit(){
this.item.restore(beforeEditItem);
this.item=newStudent();
edit=false;

util.redirectWithGet();
}

publicvoidsaveEdit(){
//DAOsavetheedit
http://www.codeproject.com/Articles/1030872/ASimpleCRUDExamplewithJSF

9/12

12/10/2016

ASimpleCRUDExamplewithJSFCodeProject

this.item=newStudent();
edit=false;

util.redirectWithGet();
}

publicvoiddelete(Studentitem)throwsIOException{
//DAOsavethedelete
list.remove(item);

util.redirectWithGet();
}

publicList<Student>getList(){
returnlist;
}

publicStudentgetItem(){
returnthis.item;
}

publicbooleanisEdit(){
returnthis.edit;
}

}
The "freshsafecrud.xhtml" is exactly the same as the "simplecrud.xhtml" file, except that it is bound to the "FreshsafeCrudBean" class.

If you now load the "simplecrud.xhtml", you should feel free to refresh you page without seeing the side effects of the "POSTBACK". Of
course the cost is a round trip to the web server.

Points of Interest
http://www.codeproject.com/Articles/1030872/ASimpleCRUDExamplewithJSF

10/12

12/10/2016

ASimpleCRUDExamplewithJSFCodeProject

This is a simple CRUD example with JSF;

A true CRUD operation normally involves the database operations, but this example skipped them for simplicity;
JSF has a strongASP.NET Web Formflavor, it heavily relies on "POSTBACK" for its functionalities;
An additional example is also provided to address the side effects of the "POSTBACK" with the cost of an additional server round
trip.

History
First Revision 9/16/2015

License
This article, along with any associated source code and files, is licensed under The Code Project Open License CPOL

Share
EMAIL

TWITTER

About the Author

Dr. Song Li
United States

I have been working in the IT industry for some time. It is still exciting and I am still learning. I am a happy and honest person, and I
want to be your friend.

You may also be interested in...

RealLife Examples of how IBM DB2 with BLU
Acceleration is Creating Value for Enterprises

Microsoft Data Science Virtual Machine for

Windows and Linux now available

When Logging Isn't Enough: A Modern Approach to

Monitoring Performance in Production

Learnings from a DevOps Hackfest with Orckestra

10 Ways to Boost COBOL Application Development

SAPrefs Netscapelike Preferences Dialog

http://www.codeproject.com/Articles/1030872/ASimpleCRUDExamplewithJSF

11/12

12/10/2016

ASimpleCRUDExamplewithJSFCodeProject

Comments and Discussions

You must Sign In to use this message board.

Search Comments

Go
First Prev Next

Java+JPA+JSF tutorials
Gerd Wagner 17Sep15 5:50
Re: Java+JPA+JSF tutorials
Dr. Song Li 17Sep15 5:55
Re: Java+JPA+JSF tutorials
Gerd Wagner 23Sep15 7:41
Re: Java+JPA+JSF tutorials
Dr. Song Li 25Sep15 3:43

Refresh
General

News

1
Suggestion

Question

Bug

Answer

Joke

Praise

Rant

Admin

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.161010.2 | Last Updated 16 Sep 2015

Select Language

Article Copyright 2015 by Dr. Song Li

Everything else Copyright CodeProject, 19992016

Layout: fixed | fluid

http://www.codeproject.com/Articles/1030872/ASimpleCRUDExamplewithJSF

12/12