Smart-Web tutorial

Full Database driven example using Smart-Web-App

1- Create new maven project with “jk-faces-test" as the artifact id

2- Edit pom.xml to be :
<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>com.jalalkiswani.test</groupId>
<artifactId>jk-faces-test</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>

<dependencies>
    <dependency>
        <groupId>com.jalalkiswani</groupId>
        <artifactId>smart-eis-web</artifactId>
        <version>0.0.9-1</version>
    </dependency>
</dependencies>

<build>
    <plugins>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-compiler-plugin</artifactId>
            <version>3.3</version>
            <configuration>
                <!-- http://maven.apache.org/plugins/maven-compiler-plugin/ -->
                <source>1.7</source>
                <target>1.7</target>
            </configuration>
        </plugin>

        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-war-plugin</artifactId>
            <configuration>
                <failOnMissingWebXml>false</failOnMissingWebXml>
            </configuration>
        </plugin>
    </plugins>
</build>
3. Create new JSF test page src/main/webapp/test.xhtml
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:jk="http://jalalkiswani.com/jsf" xmlns:p="http://primefaces.org/ui">
<h:head>
    <title>JK-Faces test with JK-DB</title>
</h:head>
<h:body>
    <h:form>
        <p:panelGrid columns="1">
            <p:growl autoUpdate="true" />
            <p:inputText value="#{mb.id}" placeholder="Enter id here" />
            <p:inputText value="#{mb.name}" placeholder="Enter name" />
            <p:inputText value="#{mb.salary}" placeholder="Enter salary" />
            <p:commandButton value="Add" action="#{mb.add}" ajax="false" />
        </p:panelGrid>
    </h:form>
</h:body>
</html>

This will produce the following output :example21

Important: don’t click add yet , you need to write the below manage bean 🙂

4. Create new JSF Managed bean src/main/java/test/MBEmployee
package com.jk.example.faces;

import javax.faces.bean.ManagedBean;

import com.jk.faces.mb.JKPlainDataAccessManagedBean;

@ManagedBean(name = "mb")
public class MBEmployee extends JKPlainDataAccessManagedBean {
    Integer id;
    String name;
    Double salary;

    public String add() {
        execute("INSERT INTO employees (id,name,salary) VALUES (?,?,?)", id, name, salary);
        success("Added successfully");
        return null;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Double getSalary() {
        return salary;
    }

    public void setSalary(Double salary) {
        this.salary = salary;
    }   
}
5. Create new JK-DB Config src/main/webapp/WEB-INF/jk-db.properties
db-driver-name=com.mysql.jdbc.Driver
db-url=jdbc:mysql://localhost:3306/app
db-user=root
db-password=123456

*Important: * The above examples assumes the existence of employees with id,name,salary as fields , please refer to JK-DB project to get the script for the table.