Web Development Practice: JEE6 and Primefaces with Netbeans Tutorial Part 2/2

<- Part1. Our goal is develop an application called the "Music Event Platform". On this platform you can submit music events by their name and get an overview of all music events submitted. The Platform is reachable through an Web Interface and a REST API.
The project structure has already been constructed by Netbeans, so we don't need to do much there. Also worth mentioning is that Netbeans deploys the application with each save. First I will describe the Frontend, which consists of "welcomePrimefaces.xhtml", "showEvents.xhtml" and "WelcomeController.java". The platforms entry point is the sample page "welcomePrimefaces.xhtml", which needs to be modified. We delete the body and write a form to enter the name of an event an submit it. The name is transmitted to the Java file which backs the JSF and then is sent to the backend by clicking the button. The Frontends code looks as follows:

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<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 content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
	<title>Hands on Primefaces</title>
	</f:facet>
	</h:head>
	<h:body>
	<p:panelGrid columns="2" style="width:100%">
	<h:form id="updateme">
	<p:panel header="Welcome to the awesome Music Event platform. Do you have events for us?">
	<h:panelGrid columns="2">
	<h:outputText value="Music Event: *" />
	<p:inputText value="#{welcomeController.name}" required="true" label="Name" />
	</h:panelGrid>
	<p:commandButton value="Send" action="#{welcomeController.save}" update="updateme"/>
	</p:panel>
	</h:form>
	</p:panelGrid>
	<h:link outcome="showEvents" value="Show Events" />
	</h:body>
	</f:view>
	</html>

view raw welcomePrimefaces.xhtml hosted with ❤ by GitHub

	package de.christiankapp.preloee.client;

	import de.christiankapp.preloee.server.MusicEvent;
	import de.christiankapp.preloee.server.MusicEventsBackend;
	import java.util.List;
	import javax.ejb.EJB;
	import javax.faces.bean.RequestScoped;
	import javax.inject.Named;

	@Named
	public class WelcomeController {

	@EJB
	MusicEventsBackend backend;
	String name;

	public void save() {
	backend.addEvent(name);
	name = "";
	}

	public String getName() {
	return name;
	}

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

	public List<musicevent> getMusicEvents() {
	return backend.getAllEvents();
	}
	}

view raw WelcomeController.java hosted with ❤ by GitHub

As you can see save() from WelcomeController.java is called by clicking the button, because the buttons action attribute points to the method. All tags in the namespace / beginning with p: are Primefaces components, <p:panelGrid> is defining the layout, the others should be self-explaining. For using them the namespace should be included over the html tag. The WelcomeController.java class is annotated with @Named, which allows us the refer to it with welcomeController from the pages without any further configuration. The class also includes a Enterprise Java Bean @EJB which is a standard component within JEE and is managed through the container (e.g. you don't need to initialize it). EJBs are never connected directy to the frontend, they are placed on the server and contain Business Logic. The most significant characteristic is, if they are stateful or stateless (read more: http://www.oracle.com/technetwork/java/ejb-141389.html).
Over a "Show Events"-link the page "showEvents.xhtml" is shown, it contains all the events submitted:

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<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 content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
	<title>Hands on Primefaces</title>
	</f:facet>
	</h:head>
	<h:body>
	The last music event added was #{welcomeController.name}. <br/>
	<p:dataList value="#{welcomeController.musicEvents}" var="me" type="ordered">
	#{me.id}, #{me.name}
	</p:dataList>
	<h:link outcome="welcomePrimefaces" value="back" />
	</h:body>
	</f:view>
	</html>

view raw showEvents.xhtml hosted with ❤ by GitHub

JSF Components can directly compute several Java types, e.g. Lists, which is done here by a <p:dataList>. It lists all results retrieved from public List<MusicEvent> getMusicEvents() in the WelcomeController.java. All the calls concerning data are forwarded to the backend, which is explained in the following. It consists of MusicEventsBackend.java (the EJB), MusicEventsREST.java and MusicEvent.java. The EJB manages the interaction and calls the EntityManager to add or get MusicEvent.java , which is an EntityBean, i.e. serializable and normally directly mapped to a database relation (read more: http://www.oracle.com/technetwork/java/javaee/tech/persistence-jsp-140049.html). MusicEventsREST.java implements the REST API and is build upon the backend. Netbeans automatically detects the implementation of a RESTful Webservice and guides you step by step through the configuration needed. The sources look as follows:

	package de.christiankapp.preloee.server;

	import java.util.List;
	import javax.ejb.Stateless;
	import javax.persistence.EntityManager;
	import javax.persistence.PersistenceContext;

	@Stateless
	public class MusicEventsBackend {

	@PersistenceContext(unitName = "preloeePU")
	EntityManager em;

	public List<MusicEvent> getAllEvents() {
	return em.createQuery("Select m from MusicEvent m").getResultList();
	}

	public MusicEvent addEvent(String name) {
	MusicEvent event = new MusicEvent(name);
	em.persist(event);
	return event;
	}
	}

view raw MusicEventsBackend.java hosted with ❤ by GitHub

The important part of the Entity MusicEvent (the rest will be generated) and the RESTful Webservice MusicEventsREST:

	package de.christiankapp.preloee.server;

	import java.io.Serializable;
	import javax.persistence.Entity;
	import javax.persistence.GeneratedValue;
	import javax.persistence.GenerationType;
	import javax.persistence.Id;

	@Entity
	public class MusicEvent implements Serializable {
	private static final long serialVersionUID = 1L;
	@Id
	@GeneratedValue(strategy = GenerationType.AUTO)
	private Long id;

	private String name;

	public MusicEvent() {
	this("unknown");
	}

	public MusicEvent(String name){
	this.name=name;
	}

view raw MusicEvent.java hosted with ❤ by GitHub

	package de.christiankapp.preloee.server;

	import java.util.List;
	import javax.ejb.EJB;
	import javax.ws.rs.FormParam;
	import javax.ws.rs.GET;
	import javax.ws.rs.POST;
	import javax.ws.rs.Path;
	import javax.ws.rs.Produces;
	import javax.ws.rs.core.MediaType;

	@Path("/MusicEventsREST")
	@Produces(MediaType.APPLICATION_JSON)
	public class MusicEventsREST {

	@EJB
	MusicEventsBackend em;

	@GET
	@Path("/events/")
	public List<MusicEvent> getAllEvents() {
	return em.getAllEvents();
	}

	@POST
	@Path("/events/")
	public MusicEvent addEvent(@FormParam("name") String name) {
	return em.addEvent(name);
	}
	}

view raw MusicEventsREST.java hosted with ❤ by GitHub

The Web Frontend then looks like:

Now we can add music events over the form and they are added to the database. Comments and Questions are welcome. Also watch out for a Technology comparison on this blog providing pros and cons of JEE with Primefaces.

Web Development Practice

9/18/2012

JEE6 and Primefaces with Netbeans Tutorial Part 2/2

No comments:

Post a Comment

Statistics