JSF - Primefaces example to dynamically generate columns with values


For running this example on our system, we need JDK 8, Maven, any Java IDE (Eclipse, Intellij IDEA, etc.), any Application/ Web server (Tomcat, Glassfish, etc.)

I have used Glassfish 5 application server to deploy this application and Intellij IDEA for development.

Steps to create JSF - Primefaces web application using Maven:

(1)    Create new Maven project of type : maven-archetype-webapp
(2)    Write down the required dependencies in pom.xml file.
(3)    Create ManagedBean class
(4)    Create xhtml file to display user interface.
(5)    Create 3 configuration files – web.xml,   faces-config.xml and applicationContext.xml and place them inside WEB-INF directory.
(6)    Build the project – mvn clean install
(7)    Deploy the war file generated inside target directory to Glassfish server and launch the application

  Structure of the project in Intellij IDEA:





  Step 1: Create new Maven project of type : maven-archetype-webapp



















Step 2: Write down the required dependencies in pom.xml file.

<?xml version="1.0" encoding="UTF-8"?>

<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/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
<groupId>blogspot.evaluatethecode</groupId> <artifactId>jsfdynamiccolumn</artifactId> <version>1.0-SNAPSHOT</version> <packaging>war</packaging> <name>JSF dynamic column</name> <dependencies> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-core</artifactId> <version>4.3.0.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-web</artifactId> <version>4.3.0.RELEASE</version> </dependency> <dependency> <groupId>com.sun.faces</groupId> <artifactId>jsf-api</artifactId> <version>2.2.9</version> </dependency> <dependency> <groupId>com.sun.faces</groupId> <artifactId>jsf-impl</artifactId> <version>2.2.9</version> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>servlet-api</artifactId> <version>2.5</version> </dependency> <dependency> <groupId>javax.servlet.jsp</groupId> <artifactId>jsp-api</artifactId> <version>2.1</version> </dependency> <dependency> <groupId>org.glassfish.web</groupId> <artifactId>el-impl</artifactId> <version>2.2</version> </dependency> <dependency> <groupId>com.sun.el</groupId> <artifactId>el-ri</artifactId> <version>1.0</version> </dependency> <dependency> <groupId>javax.inject</groupId> <artifactId>javax.inject</artifactId> <version>1</version> </dependency> <dependency> <groupId>org.primefaces</groupId> <artifactId>primefaces</artifactId> <version>6.0</version> </dependency> </dependencies> <build> <finalName>dynamiccolumnjsf</finalName> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <version>3.6.0</version> <configuration> <source>1.8</source> <target>1.8</target> </configuration> </plugin> </plugins> </build> </project>

Step 3: Create ManagedBean class

package blogspot.evaluatethecode.bean;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

import blogspot.evaluatethecode.model.ColumnModel;
import blogspot.evaluatethecode.model.ValueModel;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Component;

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

@Component@ManagedBean(name = "dynamicColumnBean")
@RequestScoped@Scope("request")
public class DynamicColumnBean {


    @PostConstruct    public void init() {
        List<ColumnModel> columnList = new ArrayList<>();
        columnList.add(new ColumnModel("Name","name"));
        columnList.add(new ColumnModel("Age","age"));
        columnList.add(new ColumnModel("Email","email"));
        this.setColumns(columnList);

        List<ValueModel> valueModelList = new ArrayList<>();
        valueModelList.add(new ValueModel
                ("Mr. Test","10","test@evaluatethecode.com"));
        valueModelList.add(new ValueModel
                ("Mr. Code","11","code@evaluatethecode.com"));
        this.setValues(valueModelList);
    }

    private List<ColumnModel> columns;
    private List<ValueModel> values;

    public List<ColumnModel> getColumns() {
        return columns;
    }

    public void setColumns(List<ColumnModel> columns) {
        this.columns = columns;
    }

    public List<ValueModel> getValues() {
        return values;
    }

    public void setValues(List<ValueModel> values) {
        this.values = values;
    }
}

Step 4: Create xhtml file to display user interface.

<f:view 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">

    <p:panelGrid columns = "1" border="1">
        <p:dataTable value="#{dynamicColumnBean.values}" var="myValue"
                     style="border: 1px solid black;">
            <f:facet name="header">Dynamically generated column in data table
            </f:facet>
            <p:columns value="#{dynamicColumnBean.columns}" var="myColumn"
                       style="border: 1px solid black;">
                <f:facet name="header">
                    #{myColumn.header}
                </f:facet>
                #{myValue[myColumn.property]}
            </p:columns>
        </p:dataTable>
    </p:panelGrid>

</f:view>

Step 5: Create 3 configuration files – web.xml,   faces-config.xml and applicationContext.xml and place them inside WEB-INF directory.

web.xml:

<?xml version="1.0" encoding="UTF-8"?>

<web-app version="2.5"
         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_2_5.xsd">

  <display-name>jsf dynamic column</display-name>


  <listener>
    <listener-class>
      org.springframework.web.context.ContextLoaderListener
    </listener-class>
  </listener>
  <listener>
    <listener-class>
      org.springframework.web.context.request.RequestContextListener
    </listener-class>
  </listener>


  <context-param>
    <param-name>javax.faces.PROJECT_STAGE</param-name>
    <param-value>Development</param-value>
  </context-param>


  <welcome-file-list>
    <welcome-file>index.xhtml</welcome-file>
  </welcome-file-list>


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

</web-app>

faces-config.xml:

<?xml version="1.0" encoding="UTF-8"?>
<faces-config 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-facesconfig_2_1.xsd"
   version="2.1">

   <application>
      <el-resolver>org.springframework.web.jsf.el.SpringBeanFacesELResolver
      </el-resolver>
   </application>

</faces-config>

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" 
   xmlns:context="http://www.springframework.org/schema/context"
   xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.1.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.1.xsd">

   <context:component-scan base-package="blogspot.evaluatethecode" />
   <context:annotation-config />

</beans>

Step 6: Go to the location where pom.xml file is present and build the maven project using command – mvn clean install

Step 7: Deploy the war file generated inside target directory to Glassfish server and launch the application. Click here for Steps to deploy war file on Glassfish 5 Server


Output : 



No comments:

Post a Comment