Home | Tutorials | Smart-Cloud | Smart-EIS | License | FAQ | Contact

Last Updated: March 26, 2021

Smart-Cloud Web project simplifies building Java web applications based on JSF and PrimeFaces and Microservices backend.

Pre-Requisites:

  1. Create Simple Microservice

  2. Run the Microservice

Steps:

  1. Create Maven project with the following pom.xml:

<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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.jalalkiswani</groupId>
	<version>4.0.4</version>
	<artifactId>smart-cloud-web-microservice-example</artifactId>
	<packaging>war</packaging>
	<properties>
		<smart-cloud.version>4.0.8</smart-cloud.version>
	</properties>
	<dependencies>
		<dependency>
			<groupId>com.jalalkiswani</groupId>
			<artifactId>smart-cloud-web</artifactId>
			<version>${smart-cloud.version}</version>
		</dependency>
		<dependency>
			<groupId>com.jalalkiswani</groupId>
			<artifactId>smart-cloud-service-client</artifactId>
			<version>${smart-cloud.version}</version>
		</dependency>
		<dependency>
			<groupId>com.jalalkiswani</groupId>
			<artifactId>smart-cloud-standalone</artifactId>
			<version>${smart-cloud.version}</version>
			<scope>provided</scope>
		</dependency>
	</dependencies>
	<build>
		<plugins>
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-compiler-plugin</artifactId>
				<version>3.8.1</version>
				<configuration>
					<source>1.8</source>
					<target>1.8</target>
				</configuration>
			</plugin>
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-war-plugin</artifactId>
				<version>3.2.3</version>
				<configuration>
					<failOnMissingWebXml>false</failOnMissingWebXml>
				</configuration>
			</plugin>
		</plugins>
	</build>
</project>

If you are using Eclipse, be sure to refresh your project (select your project→ right click→ Maven→ Update Project)

  1. Create config file at src/main/resources/config.properties with the following contents:

services.example.url=http://localhost:8080/app/example
  1. Create Person class as a model at src/main/java/com/app/person/Person.java with the following contents:

package com.app.person;

public class Person {

	private String name;

	private Integer age;

	public String getName() {
		return name;
	}

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

	public Integer getAge() {
		return age;
	}

	public void setAge(Integer age) {
		this.age = age;
	}

}
  1. Create ServiceClient class at src/main/java/com/app/person/ServiceClient.java with the following contents:

package com.app.person;

import com.jk.util.config.JKConfig;
import com.jk.web.services.client.JKServiceClient;

public class ServiceClient extends JKServiceClient<Person> {
	@Override
	public String getBase() {
		return JKConfig.getDefaultInstance().getProperty("services.example.url");
	}

	public String callSayHello() {
		return callJsonAsString("/hello");
	}

	public String callSayHelloWithName(String name) {
		return callJsonAsString("/hello/"+name);
	}

	public String callSayHelloWithObject(Person p) {
		return callJsonWithPost("/hello", p);
	}

}
  1. Create controller (JSF Managed Bean) at src/main/java/com/app/person/Controller.java with the following contents:

package com.app.person;

import javax.faces.bean.ManagedBean;

import com.jk.web.faces.mb.JKManagedBean;

@ManagedBean(name = "controller")
public class Controller extends JKManagedBean {
	private ServiceClient client = new ServiceClient();
	private Person model;

	public String sayHello() {
		String msg=client.callSayHello();
		success(msg);
		return null;
	}

	public String sayHelloWithName() {
		String msg=client.callSayHelloWithName(getModel().getName());
		success(msg);
		return null;
	}


	public String sayHelloWithObject() {
		String msg=client.callSayHelloWithObject(getModel());
		success(msg);
		return null;
	}


	public Person getModel() {
		if (model == null) {
			model = new Person();
		}
		return model;
	}

	public void setModel(Person model) {
		this.model = model;
	}


}
  1. Create JSF XHTML Page at src/main/webapp/index.xhtml class with the following contents:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
	<h:form>
		<p:autoUpdate />
		<p:growl />
		<p:panelGrid columns="2" style="margin:auto">
			<f:facet name="header">
				<h:outputText value="Smart-Cloud-Web Demo" />
			</f:facet>
			<p:outputLabel value="Your Name" />
			<p:inputText value="#{controller.model.name}" required="true" id="personName"/>
			<p:outputLabel value="Your Age" />
			<p:inputText value="#{controller.model.age}" required="true"/>
			<f:facet name="footer">
				<div align="center">
					<p:commandButton value="Say Hello" action="#{controller.sayHello()}" process="@this"/>
					<p:commandButton value="Say Hello with Name" action="#{controller.sayHelloWithName()}" process="@this,personName"/>
					<p:commandButton value="Say Hello with Object" action="#{controller.sayHelloWithObject()}" process="@form"/>
				</div>
			</f:facet>
		</p:panelGrid>
	</h:form>
</h:body>
</html>
  1. Create App class at src/main/java/com/app/App.java with the following contents:

package com.app;

import com.jk.web.embedded.JKWebApplication;

public class App {
	public static void main(String[] args) {
		JKWebApplication.run(8181);
	}
}

Thats it, now run your App class, in few seconds your browser will open and you should see something like this:

Output

Home | Tutorials | Smart-Cloud | Smart-EIS | License | FAQ | Contact