After Hello World: jsf tutorial

This tutorial explains the basics of integrating JSF-Spring integration. I will try and inject a jdbcTemplete in a jsf application.

I assume that you have gone through the basics of JSF and Spring and at least tired a hello world application. I also assume that you are able to create a maven-archetype-webtype project.

I will also be using Primefaces to build a web page.

I will be using maven and jetty plugin to build the application and Eclipse to edit the codes. The database server is Mysql.

Environment Setup:

Create a database and a table: In my case the database is "tele" and the table is "member".

Insert some values. We will query the table from our application.

Lets Start.

Create a maven project with maven-archetype-webtype. I created a project called

The basic structure will be something like

Now lets write come codes.

The pom:

I plan to create a jsf application using Primefaces and inject jdbcTempete. We will need mysql connector to connect to database. We will also require servlet.

I will also require Spring-web because i will be using listeners to integrate Jsf and Spring. The final dependencies end up with will be something like:

          <!-- Spring Dependencies -->  
           <dependency>  
                <groupId>org.springframework</groupId>  
                <artifactId>spring-jdbc</artifactId>  
                <version>4.0.5.RELEASE</version>  
           </dependency>  
           <dependency>  
                <groupId>org.springframework</groupId>  
                <artifactId>spring-web</artifactId>  
                <version>4.0.5.RELEASE</version>  
           </dependency>


           <!-- jsf dependencies -->  
           <dependency>  
                <groupId>com.sun.faces</groupId>  
                <artifactId>jsf-api</artifactId>  
                <version>2.2.2</version>  
           </dependency>  
           <dependency>  
                <groupId>com.sun.faces</groupId>  
                <artifactId>jsf-impl</artifactId>  
                <version>2.2.2</version>  
           </dependency>

           <!-- Prime faces -->  
           <dependency>  
                <groupId>org.primefaces</groupId>  
                <artifactId>primefaces</artifactId>  
                <version>5.0</version>  
           </dependency>

           <!-- servlet -->  
           <dependency>  
                <groupId>javax.servlet</groupId>  
                <artifactId>javax.servlet-api</artifactId>  
                <version>3.0.1</version>  
           </dependency>

           <!-- Mysql -->  
           <dependency>  
                <groupId>mysql</groupId>  
                <artifactId>mysql-connector-java</artifactId>  
                <version>5.1.9</version>  
           </dependency>

Jetty Plugin:
I will be using jetty:run maven goal. This will save me from having to use other application server. Jetty is a light weight web server and javax.servlet container.

I don't want jetty scan for changes in my code changes. So I add the following plugin under. This requires me to reload jetty manually.

<plugin> <groupId>org.mortbay.jetty</groupId> <artifactId>jetty-maven-plugin</artifactId> <configuration> <scanIntervalSeconds>0</scanIntervalSeconds> <reload>manual</reload> <webApp> <contextPath>/Springjsf</contextPath> </webApp> </configuration> </plugin>

Now lets write some java codes.

The final structure of source package is something like.

Go ahead and create these classes:

DAOBase and Member are very simple classes. MemberDAO extends DAOBase and uses the jdbcTemplate. MemberRowMapper is the implementation of rowmapper Interface.

Lets hava a look in these classes one by one:

Member.java: This is a just POJO

public class Member {  
   private String id;  
   private String fName;  
   private String lName;  
   private String address;  
   public String getId() {  
     return id;  
   }  
   public void setId(String id) {  
     this.id = id;  
   }  
   public String getFName() {  
     return fName;  
   }  
   public void setFName(String fName) {  
     this.fName = fName;  
   }  
   public String getLName() {  
     return lName;  
   }  
   public void setLName(String lName) {  
     this.lName = lName;  
   }  
   public String getAddress() {  
     return address;  
   }  
   public void setAddress(String address) {  
     this.address = address;  
   }  
 }

DAOBase.java:

 public class DAOBase {  
   private JdbcTemplate templete;  
   public JdbcTemplate getTemplete() {  
     return templete;  
   }  
   public void setTemplete(JdbcTemplate templete) {  
     this.templete = templete;  
   }  
 }

MemberDAO.java

public class MemberDAO extends DAOBase {  
   public List<Member> getAllMembers() {    
     String sql = "Select MemID,First_Name,Last_Name,Address from member";  
     return this.getTemplete().query(sql, new MemberRowMapper());  
   }  
 }

MemberRowMapper.java

 public class MemberRowMapper implements RowMapper<Member>{  
   public Member mapRow(ResultSet rs, int i) throws SQLException {  
     Member mem= new Member();  
     mem.setId(rs.getString("MemID"));  
     mem.setFName(rs.getString("First_Name"));  
     mem.setLName(rs.getString("Last_Name"));  
     mem.setAddress( rs.getString("Address"));  
     return mem;  
   }  
 }

Now I am done with the classes.
Now lets start wiring things up.

web.xml:

We need to define a context parameter which is the location of spring context xml.

<context-param>  
     <param-name>contextConfigLocation</param-name>  
     <param-value>/WEB-INF/applicationContext.xml</param-value>  
   </context-param>

Add listeners: We need to configure ConfigurationListner, ContextLoaderListener and RequestContextListner.

 <listener>  
     <listener-class>com.sun.faces.config.ConfigureListener</listener-class>  
   </listener>  
   <listener>  
     <listener-class>  
       org.springframework.web.context.ContextLoaderListener  
     </listener-class>  
   </listener>  
   <listener>  
     <listener-class>  
       org.springframework.web.context.request.RequestContextListener  
     </listener-class>  
   </listener>

Servlet mappings:

 <servlet>  
     <servlet-name>Faces Servlet</servlet-name>  
     <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>  
     <load-on-startup>1</load-on-startup>  
   </servlet>  
   <servlet-mapping>  
     <servlet-name>Faces Servlet</servlet-name>  
     <url-pattern>/faces/*</url-pattern>  
   </servlet-mapping>

Final web.xml:

<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">    
   <context-param>  
     <param-name>contextConfigLocation</param-name>  
     <param-value>/WEB-INF/applicationContext.xml</param-value>  
   </context-param>  
   <listener>  
     <listener-class>com.sun.faces.config.ConfigureListener</listener-class>  
   </listener>  
   <listener>  
     <listener-class>  
       org.springframework.web.context.ContextLoaderListener  
     </listener-class>  
   </listener>  
   <listener>  
     <listener-class>  
       org.springframework.web.context.request.RequestContextListener  
     </listener-class>  
   </listener>  
   <servlet>  
     <servlet-name>Faces Servlet</servlet-name>  
     <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>  
     <load-on-startup>1</load-on-startup>  
   </servlet>  
   <servlet-mapping>  
     <servlet-name>Faces Servlet</servlet-name>  
     <url-pattern>/faces/*</url-pattern>  
   </servlet-mapping>  
   <welcome-file-list>  
     <welcome-file>faces/index.xhtml</welcome-file>  
   </welcome-file-list>  
 </web-app>

Now I need to inject the jdbcTemplate to our DAO class. We will use Spring IOC(inversion of control) and JSF dependency injection for this purpose.

applicationContext.xml:

<?xml version="1.0" encoding="UTF-8"?>  
 <beans xmlns="http://www.springframework.org/schema/beans"  
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
     xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd  
 ">  
   <bean id="ds" class="org.springframework.jdbc.datasource.DriverManagerDataSource">  
     <property name="driverClassName" value="com.mysql.jdbc.Driver" />  
     <property name="url" value="jdbc:mysql://localhost/tele" />  
     <property name="username" value="root" />  
     <property name="password" value="" />  
   </bean>  
   <bean id="templete" class ="org.springframework.jdbc.core.JdbcTemplate">  
     <property name="dataSource" ref="ds"/>  
   </bean>  
 </beans>

faces-config.xml:

 <?xml version='1.0' encoding='UTF-8'?>  
 <faces-config version="2.2" xmlns="http://xmlns.jcp.org/xml/ns/javaee"  
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
      xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd">  
      <application>  
           <el-resolver>org.springframework.web.jsf.el.SpringBeanFacesELResolver</el-resolver>  
      </application>  
      <managed-bean>  
           <managed-bean-name>viewBean</managed-bean-name>  
           <managed-bean-class>com.afterHelloWorld.springjsf.DAO.MemberDAO</managed-bean-class>  
           <managed-bean-scope>view</managed-bean-scope>  
           <managed-property>  
                <property-name>templete</property-name>  
                <value>#{templete}</value>  
           </managed-property>  
      </managed-bean>  
 </faces-config>

Notice the el-resolver tag. Spring integrates to jsf using the
org.springframework.web.jsf.el.SpringBeanFacesELResolver

I am almost done. I only need a view.

index.xhtml:

<html xmlns="http://www.w3.org/1999/xhtml"  
    xmlns:h="http://java.sun.com/jsf/html"  
    xmlns:f="http://java.sun.com/jsf/core"  
    xmlns:p="http://primefaces.org/ui">  
   <h:head>  
     <title>View</title>  
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>  
   </h:head>  
   <h:body>  
     <p:outputLabel value="This is my 1st primefaces String JSF"/>  
     <p:dataTable value="#{viewBean.allMembers}" var="mem">  
     <p:column headerText="Id">  
         <h:outputText value="#{mem.id}"/>  
       </p:column>  
       <p:column headerText="First Name">  
         <h:outputText value="#{mem.FName}"/>  
       </p:column>  
       <p:column headerText="Last Name">  
         <h:outputText value="#{mem.LName}"/>  
       </p:column>  
       <p:column headerText="Address">  
         <h:outputText value="#{mem.address}"/>  
       </p:column>  
     </p:dataTable>  
   </h:body>  
 </html>

To use Primefaces I am required to add

  xmlns:p="http://primefaces.org/ui"

in html tag.

Now lets run mvn jetty:run command, and browse "http://localhost:8080/Springjsf/faces/index.xhtml"

Conclusion:
Spring integrates with JSF using el-resolver.

After Hello World

Sunday, June 29, 2014

Jsf Spring Maven Jetty