Boris Lam

About Boris Lam

Boris is an experienced Java developer with in Hong Kong. His expertise is in Java EE technology, object-oriented application development, and the use of open source frameworks (e.g. Spring , Apache MyFaces). In recent years, he is primarily involved in framework development and architectural design in serveral Government related software development projects.

Spring Data, MongoDB and JSF Integration tutorial

Introduction to sample application (MongoShop Product Catalog)

After this tutorial, a sample application (MongoShop Product Catalog) with the following functional requirement will be built:
 
 
 
 
 
 
 
1. Searching product with different criteria (e.g. sku, product type, title, stc)

2. Create a new product with different category.

3. Edit selected product details

4. Delete selected product from the enquiry screen.

Presentation Layer:

JSF is used as presentation layer technology in this sample application. PrimeFaces is a one of lightweight component for enhancing the JSF UI. Frontend interaction is controlled by JSF backing bean in this layer.

Service Layer:

Spring managed singleton service object is used. Business service and application logic are written in this layer

Data Layer:

Spring data MongoDB component is used. It provides integration with the MongoDB document-oriented database. It provides MongoTemplate so that MongoDB operation could be performed easily. Moreover, Spring repository style data access layer could be easily written with spring data MongoDB.

MongoDB schema design and data preparation

MongoDB Introduction

MongoDB is a open-source scalable, high-performance NoSQL database. It is a document-oriented Storage. It can store JSON-style documents with dynamic schemas. In this application, each product is stored as JSON-style document in MongoDB.

Schema Design in MongoDB

Each product in the catalog contains general product information (e.g. sku, title, and product type), price details (e.g. retail and list price) and product sub-details (e.g. tracks of audio CDs / chapters of books). In this application, MongoDB is used. The schema design will be focus more on the data usage. It is different from traditional RDBMS schema design. The schema design in MongoDB should be:

Sample Data:

x= {
  sku: '1000001',
  type: 'Audio Album',
  title: 'A Love Supreme',
  description: 'by John Coltrane',
  publisher: 'Sony Music',
  pricing: {
    list: 1200,
    retail: 1100
  },

  details: {
    title: 'A Love Supreme [Original Recording Reissued]',
    artist: 'John Coltrane',
    genre:  'Jazz' ,
    tracks: [
      'A Love Supreme Part I: Acknowledgement',
      'A Love Supreme Part II - Resolution',
      'A Love Supreme, Part III: Pursuance',
      'A Love Supreme, Part IV-Psalm'
    ],
  }
}

y= {
  sku: '1000002',
  type: 'Audio Album',
  title: 'Love Song',
  description: 'by Khali Fong',
  publisher: 'Sony Music',
  pricing: {
    list: 1000,
    retail: 1200
  },

  details: {
    title: 'Long Song [Original Recording Reissued]',
    artist: 'Khali Fong',
    genre:  'R&B',
    tracks: [
      'Love Song',
      'Spring Wind Blow',
      'Red Bean',
      'SingAlongSong'
    ],
  }
}

z= {
  sku: '1000003',
  type: 'Book',
  title: 'Node.js for PHP Developers',
  description: 'by Owen Peter',
  publisher: 'OReilly Media',

  pricing: {
    list: 2500,
    retail: 2100
  },

  details: {
    title: 'Node.js for PHP Developers',
    author: 'Mark Owen',
    genre:  'Technology',
    chapters: [
      'Introduction to Node',
      'Server-side JS',
      'PHP API',
      'Example'
    ],
  }
}

Sample query to add the data:

db.product.save(x);
db.product.save(y);
db.product.save(z);

Sample query to test the sample data:

db.product.find({'sku':'1000004'});
db.product.find({'type':'Audio Album'});
db.product.find({'type':'Audio Album', 'details.genre': 'Jazz'});

JSF (PrimeFaces) and Spring data MongoDB Integration

pom.xml of the project

<project xmlns='http://maven.apache.org/POM/4.0.0' xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'
  xsi:schemaLocation='http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd'>
  <modelversion>4.0.0</modelVersion>
  <groupid>com.borislam</groupId>
  <artifactid>mongoShop</artifactId>
  <packaging>war</packaging>
  <version>1.0-SNAPSHOT</version>
  <name>MongoShop Webapp</name>
  <url>http://maven.apache.org</url>
  <dependencies>
  <dependency>
     <groupid>org.jboss.el</groupId>
     <artifactid>com.springsource.org.jboss.el</artifactId>
     <version>2.0.0.GA</version>
 </dependency>
    <dependency>  
     <groupid>org.primefaces.themes</groupId>  
     <artifactid>all-themes</artifactId>  
     <version>1.0.9</version>  
    </dependency>
    <dependency>  
  <groupid>org.primefaces</groupId>  
  <artifactid>primefaces</artifactId>  
  <version>3.4.2</version>  
 </dependency>
 <dependency>
  <groupid>commons-beanutils</groupId>
  <artifactid>commons-beanutils</artifactId>
  <version>1.8.3</version>
 </dependency> 

 <dependency>
  <groupid>commons-codec</groupId>
  <artifactid>commons-codec</artifactId>
  <version>1.3</version>
 </dependency> 

 <dependency>
  <groupid>org.apache.directory.studio</groupId>
  <artifactid>org.apache.commons.lang</artifactId>
  <version>2.6</version>
 </dependency>

 <dependency>
  <groupid>commons-digester</groupId>
  <artifactid>commons-digester</artifactId>
  <version>1.8</version>
 </dependency>

 <dependency>
  <groupid>commons-collections</groupId>
  <artifactid>commons-collections</artifactId>
  <version>3.2</version>
 </dependency>

 <dependency>
  <groupid>org.apache.myfaces.core</groupId>
  <artifactid>myfaces-api</artifactId>
  <version>2.1.9</version>
 </dependency>

 <dependency>
  <groupid>org.apache.myfaces.core</groupId>
  <artifactid>myfaces-impl</artifactId>
  <version>2.1.9</version>
 </dependency>

   <dependency>
  <groupid>org.mongodb</groupId>
  <artifactid>mongo-java-driver</artifactId>
  <version>2.10.1</version>
 </dependency>
    <dependency>
      <groupid>junit</groupId>
      <artifactid>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
    </dependency>
 <dependency>
  <groupid>org.springframework.data</groupId>
  <artifactid>spring-data-mongodb</artifactId>
  <version>1.0.3.RELEASE</version>
 </dependency> 
 <dependency>
   <groupid>org.springframework</groupId>
   <artifactid>spring-context</artifactId>
   <version>3.2.0.RELEASE</version>
 </dependency> 
 <dependency>
   <groupid>org.springframework</groupId>
   <artifactid>spring-web</artifactId>
   <version>3.2.0.RELEASE</version>
 </dependency>
  </dependencies>
  <repositories>
    <repository>
  <id>java.net</id>
  <url>https://maven.java.net/content/repositories/public/</url>
    </repository>
 <repository>  
  <id>prime-repo</id>  
  <name>PrimeFaces Maven Repository</name>  
  <url>http://repository.primefaces.org</url>  
  <layout>default</layout>  
 </repository>

 <repository>
  <id>com.springsource.repository.bundles.release</id>
  <name>SpringSource Enterprise Bundle Repository - SpringSource Releases</name>
  <url>http://repository.springsource.com/maven/bundles/release</url>
 </repository>

 <repository>
  <id>com.springsource.repository.bundles.external</id>
  <name>SpringSource Enterprise Bundle Repository - External Releases</name>
  <url>http://repository.springsource.com/maven/bundles/external</url>
 </repository>
 <repository>
         <releases>
           <enabled>false</enabled>
         </releases>
         <snapshots>
           <enabled>true</enabled>
         </snapshots>
         <id>apache.snapshots</id>
         <name>Apache Snapshot Repository</name>
         <url>https://repository.apache.org/content/repositories/snapshots</url>
    </repository> 
 <repository>
          <id>jboss-deprecated-repository</id>
          <name>JBoss Deprecated Maven Repository</name>
          <url>https://repository.jboss.org/nexus/content/repositories/deprecated/</url>
          <layout>default</layout>
          <releases>
            <enabled>true</enabled>
            <updatepolicy>never</updatePolicy>
          </releases>
          <snapshots>
            <enabled>false</enabled>
            <updatepolicy>never</updatePolicy>
          </snapshots>
        </repository>
  </repositories>
  <build>
    <finalname>mongoShop</finalName>
  </build>
</project>

MyFaces

MyFaces is used as the JSF implementation in this application. The following details should be added in web.xml

PrimeFaces Theme

As said before, PrimeFaces library is used to enhance the UI. There is nearly no configuration required for this library. PrimeFaces provides many pre-designed theme for your web application. In our case, we use “blue-sky” theme. We just add the following setting in web.xml

<context-param>
  <param-name>primefaces.THEME</param-name><param-value>glass-x</param-value></context-param>

JSF and Spring Integration:

To integrate JSF with Spring, you have to specify the SpringBeanFacesELResolver in Faces-config.xml

Faces-config.xml

<?xml version='1.0' encoding='UTF-8'?>
<faces-config version='2.0' xmlns='http://java.sun.com/xml/ns/javaee'
  xmlns:xi='http://www.w3.org/2001/XInclude'
  xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' 
  xsi:schemaLocation='http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd'>
   <application>
     <el-resolver>org.springframework.web.jsf.el.SpringBeanFacesELResolver</el-resolver>
   </application>
   <factory>
 <partial-view-context-factory>org.primefaces.context.PrimePartialViewContextFactory</partial-view-context-factory>
   </factory> 
</faces-config>

Full web.xml

<?xml version='1.0' encoding='UTF-8'?>
<web-app id='WebApp_ID' version='3.0'
 xmlns='http://java.sun.com/xml/ns/javaee'
 xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' 
 xsi:schemaLocation='http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd'>
 <context-param>
 <param-name>contextConfigLocation</param-name><param-value>WEB-INF/spring-application-context.xml</param-value></context-param>
 <context-param>
  <param-name>errorPageUrl</param-name><param-value>/pages/systemError.do</param-value></context-param>
 <context-param>
  <param-name>facelets.DEVELOPMENT</param-name><param-value>false</param-value></context-param>
 <context-param>
   <param-name>facelets.REFRESH_PERIOD</param-name><param-value>2</param-value></context-param>
 <context-param>
   <param-name>javax.faces.STATE_SAVING_METHOD</param-name><param-value>client</param-value></context-param>
 <context-param>
   <param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name><param-value>resources.application</param-value></context-param>
 <context-param>
   <param-name>org.apache.myfaces.ALLOW_JAVASCRIPT</param-name><param-value>true</param-value></context-param>
  <context-param>
    <param-name>org.apache.myfaces.AUTO_SCROLL</param-name><param-value>false</param-value></context-param>
 <context-param>
    <param-name>org.apache.myfaces.DETECT_JAVASCRIPT</param-name><param-value>false</param-value></context-param>
 <context-param>
  <param-name>org.apache.myfaces.ERROR_HANDLING</param-name><param-value>false</param-value></context-param>
 <context-param>
  <param-name>org.apache.myfaces.EXPRESSION_FACTORY</param-name><param-value>org.jboss.el.ExpressionFactoryImpl</param-value></context-param>
 <context-param>
  <param-name>org.apache.myfaces.PRETTY_HTML</param-name><param-value>false</param-value></context-param>
 <context-param>
  <param-name>primefaces.THEME</param-name><param-value>glass-x</param-value></context-param>  
 <servlet>
   <servlet-name>Faces Servlet</servlet-name>
   <servlet-class>org.apache.myfaces.webapp.MyFacesServlet</servlet-class>
   <load-on-startup>1</load-on-startup>
  </servlet>
 <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.jsf</url-pattern>
 </servlet-mapping>
 <listener>
 <listener-class>org.apache.myfaces.webapp.StartupServletContextListener</listener-class>
 </listener>
 <listener>
 <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
 </listener>
</web-app>

MongoDB connection Details

In to order connect to MongoDB, you have to register a MongoDbFactory instance in XML. The connection details is specified in spring-application-context.xml

spring-application-context.xml

<?xml version='1.0' encoding='UTF-8'?>
<beans xmlns='http://www.springframework.org/schema/beans'
xmlns:context='http://www.springframework.org/schema/context'
 xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'
 xmlns:util='http://www.springframework.org/schema/util'
 xmlns:mongo='http://www.springframework.org/schema/data/mongo'
 xsi:schemaLocation='http://www.springframework.org/schema/beans        

http://www.springframework.org/schema/beans/spring-beans-3.2.xsd


http://www.springframework.org/schema/data/mongo


http://www.springframework.org/schema/data/mongo/spring-mongo.xsd


http://www.springframework.org/schema/data/repository


http://www.springframework.org/schema/data/repository/spring-repository.xsd


http://www.springframework.org/schema/context


http://www.springframework.org/schema/context/spring-context-3.2.xsd


http://www.springframework.org/schema/util


http://www.springframework.org/schema/util/spring-util-3.2.xsd'>

 <context:annotation-config/>
 <context:component-scan base-package='com.borislam'/>

 <mongo:mongo host='localhost' port='27017'> 
  <mongo:options
       connections-per-host='5'       
       connect-timeout='30000'
       max-wait-time='10000'       
       write-number='1'
       write-timeout='0'
       write-fsync='true'/>
 </mongo:mongo>

 <mongo:db-factory dbname='test' mongo-ref='mongo'/>

 <mongo:repositories base-package='com.borislam.repository' />

 <bean id='mongoTemplate' class='org.springframework.data.mongodb.core.MongoTemplate'>
     <constructor-arg ref='mongo'/><constructor-arg name='databaseName' value='test'/></bean>
</beans>

Enquriy data with spring data repository and mongotemplate

Spring Data Repository:

Spring Data repository abstraction reduces the boilerplate code to write the data access layer of the application. Automatic implementation of Repository interfaces provides simple operation on mongoDB. It helps our product save and delete function make

MongoTemplate:

MongoTemplate offers convenience operations to create, update, delete and query for MongoDB documents and provides a mapping between your domain objects and MongoDB documents. In our application, since the spring data repository cannot fulfill the requirement of searching function, we use MongoTemplate to archive the searching capability.

Customizing Spring Data Repository:

Since the searching of product cannot be easily implement with Spring data repository abstraction, we would like to implements the multi-criteira product search with MongoDBTemplate. To enrich Spring data repository with MongoTemplate, we can do the following to customize the repository:

ProductRepository.java

package com.borislam.repository;

import java.util.List;
import org.springframework.data.repository.PagingAndSortingRepository;
import com.borislam.domain.Product;

public interface ProductRepository  extends PagingAndSortingRepository<Product, String> , ProductRepostitoryCustom{

 List<product> findByType(String type);
 List<product> findByTypeAndTitle(String type, String title); 
 Product findBySku(String sku);
}

ProductRepositoryCustom.java

package com.borislam.repository;

import java.util.List;
import com.borislam.domain.Product;
import com.borislam.view.ProductSearchCriteria;

public interface ProductRepostitoryCustom {
 public List<product> searchByCriteria(ProductSearchCriteria criteria);

}

ProductRepositoryImpl.java

package com.borislam.repository.impl;

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.mongodb.core.MongoTemplate;
import org.springframework.data.mongodb.core.query.Criteria;
import org.springframework.data.mongodb.core.query.Query;
import org.springframework.util.StringUtils;
import com.borislam.domain.Product;
import com.borislam.repository.ProductRepostitoryCustom;
import com.borislam.view.ProductSearchCriteria;

public class ProductRepositoryImpl implements ProductRepostitoryCustom{

 @Autowired
 private MongoTemplate mongoTemplate;

 @Override
 public List<product> searchByCriteria(ProductSearchCriteria criteria) {
  Query query = new Query();
  if ( StringUtils.hasText(criteria.getSku())) 
  { 
   Criteria c = Criteria.where('sku').is(criteria.getSku());
   query.addCriteria(c);
  }
  if (StringUtils.hasText(criteria.getTitle())) {
   Criteria c = Criteria.where('title').regex('.*' + criteria.getTitle() + '.*', 'i');
   query.addCriteria(c);
  }
  if (StringUtils.hasText(criteria.getDescription())) {
   Criteria c = Criteria.where('description').regex('.*' + criteria.getDescription() + '.*', 'i');
   query.addCriteria(c);
  }
  if (StringUtils.hasText(criteria.getProductType())) {
   Criteria c = Criteria.where('type').is(criteria.getProductType());
   query.addCriteria(c);

  }  
  if (StringUtils.hasText(criteria.getTrack())) {
   Criteria c = Criteria.where('details.tracks').regex('.*' + criteria.getTrack() + '.*', 'i');
   query.addCriteria(c);
  }
  if (StringUtils.hasText(criteria.getChapter())) {
   Criteria c = Criteria.where('details.chapters').regex('.*' + criteria.getChapter() + '.*', 'i');
   query.addCriteria(c);
  }
  return mongoTemplate.find(query, Product.class);
 }

}

Data Model:Product.java

package com.borislam.domain;

public class Product {
  private String id;
  private String sku ;
  private String  type;
  private String title;
  private String description;
  private String publisher;
  private Pricing pricing;
  private Detail details;
 public String getId() {
  return id;
 }
 public void setId(String id) {
  this.id = id;
 }
 public String getSku() {
  return sku;
 }
 public void setSku(String sku) {
  this.sku = sku;
 }
 public String getType() {
  return type;
 }
 public void setType(String type) {
  this.type = type;
 }
 public String getTitle() {
  return title;
 }
 public void setTitle(String title) {
  this.title = title;
 }
 public String getDescription() {
  return description;
 }
 public void setDescription(String description) {
  this.description = description;
 }
 public String getPublisher() {
  return publisher;
 }
 public void setPublisher(String publisher) {
  this.publisher = publisher;
 }
 public Pricing getPricing() {
  return pricing;
 }
 public void setPricing(Pricing pricing) {
  this.pricing = pricing;
 }
 public Detail getDetails() {
  return details;
 }
 public void setDetails(Detail details) {
  this.details = details;
 }    
}

Pricing.java

package com.borislam.domain;

public class Pricing {
 private String id;
 private double list;
 private double retail;
 public String getId() {
  return id;
 }
 public void setId(String id) {
  this.id = id;
 }
 public double getList() {
  return list;
 }
 public void setList(double list) {
  this.list = list;
 }
 public double getRetail() {
  return retail;
 }
 public void setRetail(double retail) {
  this.retail = retail;
 }
 public Pricing(double list, double retail) {
  super();
  this.list = list;
  this.retail = retail;
 }

}

Detail.java

package com.borislam.domain;

import java.util.List;

public class Detail {
 private String id;
 private String title;
 private String author;
 private String artist;
 private String genre;
 private List<string> pic;
 private List<string> chapters;
 private List<string> tracks;
 public String getTitle() {
  return title;
 }
 public void setTitle(String title) {
  this.title = title;
 }
 public String getAuthor() {
  return author;
 }
 public void setAuthor(String author) {
  this.author = author;
 }
 public String getGenre() {
  return genre;
 }
 public void setGenre(String genre) {
  this.genre = genre;
 }
 public List<string> getPic() {
  return pic;
 }
 public void setPic(List<string> pic) {
  this.pic = pic;
 }
 public List<string> getChapters() {
  return chapters;
 }
 public void setChapters(List<string> chapters) {
  this.chapters = chapters;
 }
 public String getId() {
  return id;
 }
 public void setId(String id) {
  this.id = id;
 }
 public String getArtist() {
  return artist;
 }
 public void setArtist(String artist) {
  this.artist = artist;
 }
 public List<string> getTracks() {
  return tracks;
 }
 public void setTracks(List<string> tracks) {
  this.tracks = tracks;
 }

}

JSF Part:common.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:ui='http://java.sun.com/jsf/facelets'
 xmlns:p='http://primefaces.org/ui'>

<f:view contentType='text/html'>

 <h:head>

  <f:facet name='first'>
   <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
   <title><ui:insert name='pageTitle'>Page Title</ui:insert></title>
   <ui:insert name='head' />
  </f:facet>

 </h:head>

 <h:body>
  <div style='margin:auto;width:1024px;'>
<div id='header' class='ui-widget' >
<div id='logo' style='border:1px  solid #acbece; border-bottom: none; '>
<p:graphicImage   value='/resources/image/mongoshopheader.jpg'/></div>
<div id='logo' style='border:1px solid #acbece;'>
<p:menubar style='border:none'><p:menuitem value='Search' url='/search.jsf' icon='ui-icon-search' /><p:menuitem value='New Product' url='/detail.jsf' icon='ui-icon-document' /></p:menubar></div>
</div>
<div id='page' class='ui-widget' style='overflow:hidden;'>
<div id='content'  style='display:block'>
<ui:insert name='content'>...</ui:insert>     
             </div>
</div>
</div>
</h:body>

</f:view>
</html>

Search.xhml

<html xmlns='http://www.w3.org/1999/xhtml'
 xmlns:ui='http://java.sun.com/jsf/facelets'
 xmlns:h='http://java.sun.com/jsf/html'
 xmlns:f='http://java.sun.com/jsf/core'
 xmlns:p='http://primefaces.org/ui'>

 <ui:composition template='/template/common.xhtml'>

  <ui:define name='pageTitle'>
   <h:outputText value='Product Search' />
  </ui:define>

  <ui:define name='content'>
      <h:form id='searchForm'>
       <p:growl id='mainGrowl' sticky='true'  /><p:panelGrid style='width:1024px'><f:facet name='header'>
     <p:row><p:column colspan='4'>Product Search
             </p:column></p:row></f:facet>  
       <p:row><p:column><h:outputLabel for='sku' value='sku: ' />
         </p:column><p:column><p:inputText id='sku' value='#{productSearchBean.criteria.sku}' /></p:column><p:column><h:outputLabel for='productType' value='Product Type: ' />
         </p:column><p:column><p:selectOneMenu id='productType'   label='Type'   value='#{productSearchBean.criteria.productType}'  ><f:selectItem itemLabel='Select One' itemValue='' />  
                 <f:selectItem itemLabel='Audio Album' itemValue='Audio Album' />  
                 <f:selectItem itemLabel='Book' itemValue='Book' /> 
             </p:selectOneMenu></p:column></p:row><p:row><p:column><h:outputLabel for='title' value='Title: ' />
         </p:column><p:column><p:inputText id='title' value='#{productSearchBean.criteria.title}' /></p:column><p:column><h:outputLabel for='description' value='Description: ' />
         </p:column><p:column><p:inputText id='description' value='#{productSearchBean.criteria.description}' /></p:column></p:row><p:row><p:column><h:outputLabel for='track' value='Track: ' />
         </p:column><p:column><p:inputText id='track' value='#{productSearchBean.criteria.track}' /></p:column><p:column><h:outputLabel for='chapter' value='Chapter: ' />
         </p:column><p:column><p:inputText id='chapter' value='#{productSearchBean.criteria.chapter}' /></p:column></p:row></p:panelGrid><p:commandButton value='search' icon='ui-icon-search'  actionListener='#{productSearchBean.doSearch}' update='dataTable'/><hr/><p:dataTable id='dataTable' var='prod' value='#{productSearchBean.productList}'  
     paginator='true' rows='10'><p:column><f:facet name='header'>  
                    <h:outputText value='Sku' />  
                </f:facet>  
                <h:outputText value='#{prod.sku}' />  
            </p:column><p:column><f:facet name='header'>  
                    <h:outputText value='Type' />  
                </f:facet>  
                <h:outputText value='#{prod.type}' />  
            </p:column><p:column><f:facet name='header'>  
                    <h:outputText value='Title' />  
                </f:facet>  
                <h:outputText value='#{prod.title}' />  
            </p:column><p:column><f:facet name='header'>  
                    <h:outputText value='Publisher' />  
                </f:facet>  
                <h:outputText value='#{prod.publisher}' />  
            </p:column><p:column><f:facet name='header'>  
                    <h:outputText value='Artist' />  
                </f:facet>  
                <h:outputText value='#{prod.details.artist}' />  
            </p:column><p:column><f:facet name='header'>  
                    <h:outputText value='Author' />  
                </f:facet>  
                <h:outputText value='#{prod.details.author}' />  
            </p:column></p:dataTable></h:form>
  </ui:define>
 </ui:composition>
</html>

ProductSearchCriteria.java

package com.borislam.view;

public class ProductSearchCriteria {
 private String sku;
 private String description;
 private String productType;
 private String track;
 private String chapter;
 private String title;
 public String getSku() {
  return sku;
 }
 public void setSku(String sku) {
  this.sku = sku;
 }
 public String getDescription() {
  return description;
 }
 public void setDescription(String description) {
  this.description = description;
 }
 public String getProductType() {
  return productType;
 }
 public void setProductType(String productType) {
  this.productType = productType;
 }
 public String getTrack() {
  return track;
 }
 public void setTrack(String track) {
  this.track = track;
 }
 public String getTitle() {
  return title;
 }
 public void setTitle(String title) {
  this.title = title;
 }
 public String getChapter() {
  return chapter;
 }
 public void setChapter(String chapter) {
  this.chapter = chapter;
 }

}

ProductSearchBean.java

package com.borislam.view;

import java.util.List;
import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;
import org.springframework.dao.DataAccessException;
import org.springframework.stereotype.Component;
import com.borislam.domain.Product;
import com.borislam.service.ProductService;

@Component
@Scope('session')
public class ProductSearchBean {

 private Product selectedProduct;

 private ProductSearchCriteria criteria = new ProductSearchCriteria();

 private List<product> productList;

 public Product getSelectedProduct() {
  return selectedProduct;
 }

 public void setSelectedProduct(Product selectedProduct) {
  this.selectedProduct = selectedProduct;
 }

 public List<product> getProductList() {
  return productList;
 }

 public void setProductList(List<product> productList) {
  this.productList = productList;
 }

 public ProductSearchCriteria getCriteria() {
  return criteria;
 }

 public void setCriteria(ProductSearchCriteria criteria) {
  this.criteria = criteria;
 }
 @Autowired
 private ProductService productService;

 public void doSearch(ActionEvent event){
  productList= productService.searchByCriteria(criteria);
 }
}

Service Layer:ProductService.java

package com.borislam.service;

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.borislam.domain.Product;
import com.borislam.repository.ProductRepository;
import com.borislam.view.ProductSearchCriteria;

@Service
public class ProductService {

 @Autowired
 private ProductRepository productRepository;

 public List<product> searchByCriteria(ProductSearchCriteria criteria){
  return productRepository.searchByCriteria(criteria);
 }

 public Product getProduct(String sku) {
  return productRepository.findBySku(sku);
 }
}

Create, Edit and Delete data with Spring data repository

In the last part of this tutorial, we will add create, edit and delete function to the MongoShop Product Catalog application. The search page is modified. A modal confirm dialogue box is added before the product is physically deleted

updated search.xhtml

<html xmlns='http://www.w3.org/1999/xhtml'
 xmlns:ui='http://java.sun.com/jsf/facelets'
 xmlns:h='http://java.sun.com/jsf/html'
 xmlns:f='http://java.sun.com/jsf/core'
 xmlns:p='http://primefaces.org/ui'>

 <ui:composition template='/template/common.xhtml'>

  <ui:define name='pageTitle'>
   <h:outputText value='Product Search' />
  </ui:define>

  <ui:define name='content'>
      <h:form id='searchForm'>
       <p:growl id='mainGrowl' sticky='true'  />
       <p:panelGrid style='width:1024px'>  
        <f:facet name='header'>
         <p:row>  
                <p:column colspan='4'>  
              Product Search
             </p:column>
            </p:row>
        </f:facet>  
       <p:row> 
        <p:column>
          <h:outputLabel for='sku' value='sku: ' />
         </p:column>
         <p:column>  
          <p:inputText id='sku' value='#{productSearchBean.criteria.sku}' />
         </p:column>  
         <p:column>  
          <h:outputLabel for='productType' value='Product Type: ' />
         </p:column>
            <p:column>  
          <p:selectOneMenu id='productType'   label='Type'   value='#{productSearchBean.criteria.productType}'  >  
                 <f:selectItem itemLabel='Select One' itemValue='' />  
                 <f:selectItem itemLabel='Audio Album' itemValue='Audio Album' />  
                 <f:selectItem itemLabel='Book' itemValue='Book' /> 
             </p:selectOneMenu>
         </p:column>
       </p:row>
       <p:row> 
        <p:column>
          <h:outputLabel for='title' value='Title: ' />
         </p:column>
         <p:column>  
          <p:inputText id='title' value='#{productSearchBean.criteria.title}' />
         </p:column>  
         <p:column>  
          <h:outputLabel for='description' value='Description: ' />
         </p:column>
            <p:column>  
          <p:inputText id='description' value='#{productSearchBean.criteria.description}' />
         </p:column>
       </p:row>      

       <p:row> 
        <p:column>
          <h:outputLabel for='track' value='Track: ' />
         </p:column>
         <p:column>  
          <p:inputText id='track' value='#{productSearchBean.criteria.track}' />
         </p:column>  
         <p:column>  
          <h:outputLabel for='chapter' value='Chapter: ' />
         </p:column>
            <p:column>  
          <p:inputText id='chapter' value='#{productSearchBean.criteria.chapter}' />
         </p:column>
       </p:row> 

     </p:panelGrid>
     <p:commandButton value='search' icon='ui-icon-search'  actionListener='#{productSearchBean.doSearch}' update='dataTable'/>
     <hr/>

     <p:dataTable id='dataTable' var='prod' value='#{productSearchBean.productList}'  
                  paginator='true' rows='10'>  

            <p:column>  
                <f:facet name='header'>  
                    <h:outputText value='Sku' />  
                </f:facet>  
                <h:outputText value='#{prod.sku}' />  
            </p:column>  

        <p:column>  
                <f:facet name='header'>  
                    <h:outputText value='Type' />  
                </f:facet>  
                <h:outputText value='#{prod.type}' />  
            </p:column> 

            <p:column>  
                <f:facet name='header'>  
                    <h:outputText value='Title' />  
                </f:facet>  
                <h:outputText value='#{prod.title}' />  
            </p:column>  

            <p:column>  
                <f:facet name='header'>  
                    <h:outputText value='Publisher' />  
                </f:facet>  
                <h:outputText value='#{prod.publisher}' />  
            </p:column>  

             <p:column>  
                <f:facet name='header'>  
                    <h:outputText value='Artist' />  
                </f:facet>  
                <h:outputText value='#{prod.details.artist}' />  
            </p:column>  

       <p:column>  
                <f:facet name='header'>  
                    <h:outputText value='Author' />  
                </f:facet>  
                <h:outputText value='#{prod.details.author}' />  
            </p:column>  

        <p:column>  
                <f:facet name='header'>  
                    <h:outputText value='Edit' />  
                </f:facet>  
                 <p:commandButton value='Edit'  action='#{productSearchBean.doEditDetail}' ajax='false'>
                  <f:setPropertyActionListener target='#{productSearchBean.selectedProduct}' value='#{prod}' />
                 </p:commandButton>
            </p:column>  

       <p:column>  
                <f:facet name='header'>  
                    <h:outputText value='Delete' />  
                </f:facet>

                <p:commandButton id='showDialogButton' value='Delete' oncomplete='confirmation.show()' ajax='true' update=':searchForm:confirmDialog'>  
                  <f:setPropertyActionListener target='#{productSearchBean.selectedProduct}' value='#{prod}' />
                </p:commandButton>

            </p:column>

        </p:dataTable>

      <p:confirmDialog id='confirmDialog' message='Are you sure to delete this product (#{productSearchBean.selectedProduct.sku})?'  
                    header='Delete Product' severity='alert' widgetVar='confirmation'>  

            <p:commandButton id='confirm' value='Yes' update='mainGrowl' oncomplete='confirmation.hide()'  
                        actionListener='#{productSearchBean.doDelete}' />  
            <p:commandButton id='decline' value='No' onclick='confirmation.hide()' type='button' />   

        </p:confirmDialog>

      </h:form>
  </ui:define>
 </ui:composition>
</html>

updated ProductSearchBean.java

package com.borislam.view;

import java.util.List;

import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;
import org.springframework.dao.DataAccessException;
import org.springframework.stereotype.Component;
import com.borislam.domain.Product;
import com.borislam.service.ProductService;

@Component
@Scope('session')
public class ProductSearchBean {

 private Product selectedProduct;

 private ProductSearchCriteria criteria = new ProductSearchCriteria();

 private List<Product> productList;

 public Product getSelectedProduct() {
  return selectedProduct;
 }

 public void setSelectedProduct(Product selectedProduct) {
  this.selectedProduct = selectedProduct;
 }

 public List<Product> getProductList() {
  return productList;
 }

 public void setProductList(List<Product> productList) {
  this.productList = productList;
 }

 public ProductSearchCriteria getCriteria() {
  return criteria;
 }

 public void setCriteria(ProductSearchCriteria criteria) {
  this.criteria = criteria;
 }
 @Autowired
 private ProductService productService;

 public void doSearch(ActionEvent event){
  productList= productService.searchByCriteria(criteria);
 }

 public String doEditDetail() {
  (FacesContext.getCurrentInstance().getExternalContext().getFlash()).put('selected', selectedProduct);
  return 'detail.xhtml';
 }

 public void doDelete(ActionEvent event){
  try {   
   productService.deleteProduct(selectedProduct);

   FacesContext context = FacesContext.getCurrentInstance();  
         context.addMessage(null, new FacesMessage('Delete Successfully!'));
  }
  catch (DataAccessException e ) {
   FacesContext context = FacesContext.getCurrentInstance();  
         context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR,'Error when deleting product!',null));
  }

 }
}

A product detail page is added to view the produc details. Creation and edition of product is done in the product detail page.

detail.xhtml

<html xmlns='http://www.w3.org/1999/xhtml'
 xmlns:ui='http://java.sun.com/jsf/facelets'
 xmlns:h='http://java.sun.com/jsf/html'
 xmlns:f='http://java.sun.com/jsf/core'
 xmlns:p='http://primefaces.org/ui'>

 <ui:composition template='/template/common.xhtml'>

  <ui:define name='pageTitle'>
   <h:outputText value='Product Search' />
  </ui:define>

  <ui:define name='content'>
     <f:event listener='#{productDetailBean.initProduct}' type='preRenderView' />

      <h:form id='mainForm'>      
       <p:growl id='mainGrowl' sticky='true'  />
       <p:panelGrid style='width:1024px'>  
        <f:facet name='header'>
         <p:row>  
                <p:column colspan='2'>  
              Product Details
             </p:column>
            </p:row>
        </f:facet>  
       <p:row> 
        <p:column>
          <h:outputLabel for='sku' value='sku: *' />
         </p:column>
         <p:column>  
          <p:inputText id='sku' required='true' value='#{productDetailBean.product.sku}' label='Sku'  rendered='#{productDetailBean.newProduct}'/>
          <h:outputText  value='#{productDetailBean.product.sku}' label='Sku' rendered='#{not productDetailBean.newProduct}'/>
         </p:column>  
       </p:row>
       <p:row> 
        <p:column>
          <h:outputLabel for='type' value='Type *' />
         </p:column>
         <p:column>  
          <p:selectOneMenu id='type' required='true'  label='Type'  valueChangeListener='#{productDetailBean.clearDetails}' value='#{productDetailBean.product.type}'  >  
                 <f:selectItem itemLabel='Select One' itemValue='' />  
                 <f:selectItem itemLabel='Audio Album' itemValue='Audio Album' />  
                 <f:selectItem itemLabel='Book' itemValue='Book' /> 
                 <f:ajax  render='buttonPanel trackPanel chapterPanel'/>
             </p:selectOneMenu>
         </p:column>  
       </p:row> 
       <p:row> 
        <p:column>
          <h:outputLabel for='title' value='Title: *' />
         </p:column>
         <p:column>  
          <p:inputText id='title' required='true' value='#{productDetailBean.product.title}' label='Title' />
         </p:column>  
       </p:row> 
       <p:row> 
        <p:column>
          <h:outputLabel for='description' value='Description: *' />
         </p:column>
         <p:column>  
          <p:inputText id='description' required='true' value='#{productDetailBean.product.description}' label='Description' />
         </p:column>  
       </p:row> 
       <p:row> 
        <p:column>
          <h:outputLabel for='publisher' value='Publisher: *' />
         </p:column>
         <p:column>  
          <p:inputText id='publisher' required='true' value='#{productDetailBean.product.publisher}' label='Publisher' />
         </p:column>  
       </p:row> 

        <p:row> 
        <p:column>
          <h:outputLabel for='artist' value='Artist: ' />
         </p:column>
         <p:column>  
          <p:inputText id='artist'  value='#{productDetailBean.product.details.artist}' label='Artist' />
         </p:column>  
       </p:row>  

        <p:row> 
        <p:column>
          <h:outputLabel for='listPrice' value='List Price: ' />
         </p:column>
         <p:column>  
          <p:inputText id='listPrice'  required='true' value='#{productDetailBean.product.pricing.list}' label='List Price' />
         </p:column>  
       </p:row>  

         <p:row> 
        <p:column>
          <h:outputLabel for='retailPrice' value='Retail Price: ' />
         </p:column>
         <p:column>  
          <p:inputText id='retailPrice'  required='true' value='#{productDetailBean.product.pricing.retail}' label='REtail Price' />
         </p:column>  
       </p:row>  

        <p:row> 
        <p:column>
          <h:outputLabel for='author' value='Author: ' />
         </p:column>
         <p:column>  
          <p:inputText id='author'  value='#{productDetailBean.product.details.author}' label='Author' />
         </p:column>  
       </p:row> 

        <p:row> 
        <p:column>
          <h:outputLabel for='genre' value='Genre: *' />
         </p:column>
         <p:column>  
          <p:inputText id='genre' required='true' value='#{productDetailBean.product.details.genre}' label='Genre' />
         </p:column>  
       </p:row> 

      <p:row>  
            <p:column colspan='2' styleClass='ui-widget-header'>  
             <p:outputPanel id='buttonPanel'>            
                 <p:commandButton value='Add Tracks'   onclick='addTrackDlg.show();' type='button' rendered='#{productDetailBean.product.type == 'Audio Album'}'/>               
                 <p:commandButton value='Add Chapters'   onclick='addChapterDlg.show();' type='button' rendered='#{productDetailBean.product.type == 'Book'}'/>
                </p:outputPanel>
            </p:column>  
        </p:row>

        <p:row>  
            <p:column colspan='2' > 
             <p:outputPanel id='trackPanel' >
                 <p:dataList value='#{productDetailBean.product.details.tracks}' var='track' type='ordered' rendered='#{productDetailBean.product.details.tracks.size() > 0}'>  
            #{track} 
        </p:dataList> 
       </p:outputPanel>
       <p:outputPanel id='chapterPanel' >
        <p:dataList value='#{productDetailBean.product.details.chapters}' var='chapter' type='ordered' rendered='#{productDetailBean.product.details.chapters.size() > 0}'>  
            #{chapter} 
        </p:dataList> 
       </p:outputPanel> 

            </p:column>  
        </p:row> 

        <f:facet name='footer'> 
         <p:row>
          <p:column colspan='2'>  
           <p:commandButton value='Save' icon='ui-icon-disk'  actionListener='#{productDetailBean.doSave}' update='mainGrowl' />
           <p:button value='Back to Search' icon='ui-icon-back'  outcome='search.xhtml' />
          </p:column>
         </p:row>          
        </f:facet>  
    </p:panelGrid>   

   </h:form>

   <h:form>   
    <p:growl id='trackGrowl' sticky='true'  />
    <p:dialog id='addTrackDlg' header='Adding Tracks for the product' widgetVar='addTrackDlg' modal='true' height='100' width='450' resizable='false'>  
        <h:outputLabel for='track' value='Track: ' /> 
        <p:inputText id='track' required='true' value='#{productDetailBean.newTrack}' label='Track' /> 
        <p:commandButton value='Add' actionListener='#{productDetailBean.doAddTracks}' icon='ui-icon-check'  update='trackGrowl, :mainForm:trackPanel' oncomplete='addTrackDlg.hide()'/>
    </p:dialog> 
   </h:form> 

   <h:form>
    <p:growl id='chapterGrowl' sticky='true'  /> 
    <p:dialog id='addChapterDlg' header='Adding Chapters for the product' widgetVar='addChapterDlg' modal='true' height='100' width='450' resizable='false'>  
        <h:outputLabel for='chapter' value='Chapter: ' /> 
        <p:inputText id='chapter' required='true' value='#{productDetailBean.newChapter}' label='Chapter' /> 
        <p:commandButton value='Add' actionListener='#{productDetailBean.doAddChapters}' icon='ui-icon-check'  update='chapterGrowl, :mainForm:chapterPanel' oncomplete='addChapterDlg.hide()'/>

    </p:dialog> 
   </h:form> 
  </ui:define>
 </ui:composition>
</html>

ProductDetailsBean.java

package com.borislam.view;

import java.util.ArrayList;
import java.util.List;

import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;
import javax.faces.event.ValueChangeEvent;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Component;
import org.springframework.util.CollectionUtils;
import org.springframework.dao.DataAccessException;

import com.borislam.domain.Detail;
import com.borislam.domain.Pricing;
import com.borislam.domain.Product;
import com.borislam.service.ProductService;

@Component
@Scope('session')
public class ProductDetailBean {

 @Autowired
 private ProductService productService;
 private boolean newProduct;
 private Product product;
 private String newTrack;
 private String newChapter;

 public boolean isNewProduct() {
  return newProduct;
 }

 public void setNewProduct(boolean newProduct) {
  this.newProduct = newProduct;
 }

 public Product getProduct() {
  return product;
 }

 public void setProduct(Product product) {
  this.product = product;
 }

 public String getNewTrack() {
  return newTrack;
 }

 public void setNewTrack(String newTrack) {
  this.newTrack = newTrack;
 }

 public String getNewChapter() {
  return newChapter;
 }

 public void setNewChapter(String newChapter) {
  this.newChapter = newChapter;
 }

 public void initProduct(){
  Object selectedProduct = (FacesContext.getCurrentInstance().getExternalContext().getFlash()).get('selected');

  if (selectedProduct==null &&  !FacesContext.getCurrentInstance().isPostback()) {
   product = new Product();
   product.setDetails(new Detail());
   product.setPricing(new Pricing(0,0));
   setNewProduct(true);
  }
  if (selectedProduct!=null) {
   product = (Product)selectedProduct;
   setNewProduct(false);
  }

 }

 public void  doSave(ActionEvent event) {

  try {
   productService.saveProduct(product);

   FacesContext context = FacesContext.getCurrentInstance();  
         context.addMessage(null, new FacesMessage('Save Successfully!'));
  }
  catch (DataAccessException e)
  { 
   e.printStackTrace();

   FacesContext context = FacesContext.getCurrentInstance();  
         context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR,'Error when saving product!',null));

  }

 }

 public void  doAddTracks(ActionEvent event) {
  List<String> tracks = product.getDetails().getTracks();
  if (CollectionUtils.isEmpty(tracks)) {
   product.getDetails().setTracks(new ArrayList<String>());
  }
  product.getDetails().getTracks().add(this.newTrack);

 }

 public void  doAddChapters(ActionEvent event) {
  List<String> tracks = product.getDetails().getChapters();
  if (CollectionUtils.isEmpty(tracks)) {
   product.getDetails().setChapters(new ArrayList<String>() );
  }
  product.getDetails().getChapters().add(this.newChapter);

 }

 public void clearDetails(ValueChangeEvent  event) {

  if ('Audio Album'.equalsIgnoreCase(event.getNewValue().toString()) ) {
   product.getDetails().setChapters(null);
  }
  if ('Book'.equalsIgnoreCase( event.getNewValue().toString())) {
   product.getDetails().setTracks(null);
  }
 }
}

updated ProductService.java

package com.borislam.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.borislam.domain.Product;
import com.borislam.repository.ProductRepository;
import com.borislam.view.ProductSearchCriteria;

@Service
public class ProductService {

 @Autowired
 private ProductRepository productRepository;

 public List<Product> searchByCriteria(ProductSearchCriteria criteria){
  return productRepository.searchByCriteria(criteria);
 }

 public Product getProduct(String sku) {
  return productRepository.findBySku(sku);
 }

 public void saveProduct(Product p){  
  productRepository.save(p);
 }

 public void deleteProduct(Product p){  
  productRepository.delete(p);
 }

}

Conclusion:

1. Spring Data Mongo DB provides MongoTemplate which allow you to perform MongoDB operation easily.

2. MongoDB JSON-style document could mapped to POJO easily with the help of Spring Data MongoDB

3. Repository abstraction of spring data reduces the boilerplate code write for accessing MongoDB.

4. You add custom behaviour to spring data repository.

 

Reference: Introduction to sample application (MongoShop Product Catalog), MongoDB schema design and data preparationJSF (PrimeFaces) and Spring data MongoDB IntegrationEnquriy data with spring data repository and mongotemplate, Create, Edit and delete data, from our JCG partner Boris Lam at the Programming Peacefully blog.

Related Whitepaper:

Functional Programming in Java: Harnessing the Power of Java 8 Lambda Expressions

Get ready to program in a whole new way!

Functional Programming in Java will help you quickly get on top of the new, essential Java 8 language features and the functional style that will change and improve your code. This short, targeted book will help you make the paradigm shift from the old imperative way to a less error-prone, more elegant, and concise coding style that’s also a breeze to parallelize. You’ll explore the syntax and semantics of lambda expressions, method and constructor references, and functional interfaces. You’ll design and write applications better using the new standards in Java 8 and the JDK.

Get it Now!  

One Response to "Spring Data, MongoDB and JSF Integration tutorial"

  1. Sheila Leverson says:

    Excellent! Thank you so much. I had never heard of PrimeFaces before; I was looking for a Java/Maven/MongoDB tutorial. This is a bonus. The code works perfectly after I solved a few configuration issues on my own environment.

Leave a Reply


three + 7 =



Java Code Geeks and all content copyright © 2010-2014, Exelixis Media Ltd | Terms of Use
All trademarks and registered trademarks appearing on Java Code Geeks are the property of their respective owners.
Java is a trademark or registered trademark of Oracle Corporation in the United States and other countries.
Java Code Geeks is not connected to Oracle Corporation and is not sponsored by Oracle Corporation.

Sign up for our Newsletter

15,153 insiders are already enjoying weekly updates and complimentary whitepapers! Join them now to gain exclusive access to the latest news in the Java world, as well as insights about Android, Scala, Groovy and other related technologies.

As an extra bonus, by joining you will get our brand new e-books, published by Java Code Geeks and their JCG partners for your reading pleasure! Enter your info and stay on top of things,

  • Fresh trends
  • Cases and examples
  • Research and insights
  • Two complimentary e-books