Let's move into the development mode now. We will look at a JSF example that I created for my earlier book. The project is called XenTracker. The code is available at https://github.com/peterpilgrim/javaee7-developer-handbook. The following is the JSF view (xentracker-basic/src/main/webapp/views/index.xhtml):
<!DOCTYPE html>
<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://java.sun.com/jsf/core">
<ui:composition template="/views/template.xhtml">
<f:metadata>
<f:viewParam name="id" value="#{taskListViewController.id}" />
<f:event type="preRenderView" listener="#{taskListViewController.findProjectById}"/>
</f:metadata>
<ui:define name="content">
<div class="entry-form-area">
<h1>Task List for Project</h1>
<p>
<h:outputText value="Task list for this project:"/>
</p>
<h:link styleClass="btn btn-primary" outcome= "createTask.xhtml?id=#{taskListViewController.id}">
<f:param name="id" value="#{taskListViewController.id}" />
Create New Task
</h:link>
<table class="table table-striped table-bordered" >
<tr>
<td>Title:</td>
<td><strong>
 #{taskListViewController.project.name}
</strong></td>
</tr>
<tr>
<td>Headline:</td>
<td> 
#{taskListViewController.project.headline}</td>
</tr>
<tr>
<td>Description:</td>
<td> 
#{taskListViewController.project.description}</td>
</tr>
</table>
<!-- form table grid see below -->
</div>
</ui:define>
</ui:composition>
</html>At first glance, this looks like standard HTML5; the specific JSF tags and the Expression Language syntax are not so obvious. The name of the file in the project is called projectTaskList.xhtml, which serves a big clue to the type of view this file represents. This view is actually a JSF Facelet template. The file type refers to an older XHTML standard, as sanctioned by the World Wide Web Consortium (W3C) after the creation of the HTML 4.01 standard. XHTML is the same as HTML4, but restricted by an XML schema and, therefore, is genuinely an XML document.
In order to render any output from JSF, the specification stipulates the provision of a Page Description Language (PDL). It is possible to have more than one type of PDL. The standard PDL is a view called a Facelet view template. The Facelet framework was a separate open source API external to the JCP, but since JSF 2.0 it has been brought into the fold. Facelet templates are designed to be lightweight and work natively with the JSF framework. Facelets have implicit knowledge of the JSF lifecycle and have access to the UI components through expression language, and they provide decorators to standard HTML elements. The Facelets templating solution performs very well in servlet engines. It may eventually feature in its own specification for Java EE 8.
The templating in the preceding example is illustrated by the specific Facelet tags, namely <ui:define> and <ui:composition>. Briefly, the <ui:composition> tag refers to a template view that defines the layout of the page. One can think of this as the master view. The <ui:define> tag defines the actual content, which will be inserted into the template to form the final page output. We will comprehensively tackle JSF and Facelets in later chapters of this book.
By inspecting the opening XML definition at the top of the view definition, we can see a few namespace declarations. The xmlns:ui namespace, as you have already seen, refers to the Facelet extensions. The xmlns:f namespace refers to the core JSF tags and xmlns:h namespace refers to the JSF components that render the HTML elements. You are warned not to expect a complete one-to-one match as you will understand later on. For instance, the <h:outputText> tag simply prints out the content; you can almost think of it as the echo function in PHP.
The really observant among you will see that it is definitely possible to build modern websites with JSF. There is a <div> element in the markup, and yes, as you may have guessed correctly, Bootstrap CSS is definitely being used. It is important to stress that JSF is a server-side templating solution and a view technology.
Look at the following section again:
<h:link styleClass="btn btn-primary" outcome="createTask.xhtml?id=#{taskListViewController.id}">This is approximately the equivalent to this straight HTML5:
<a style="btn btn-primary" href="JSF_munged_createTask.xhtml?id=jsf_fizz_12345">
In JSF, the syntactic delimiters denote Expressions: #{...}. The expression language is parsed in the JSF runtime during the rendering phase of the lifecycle. We will discuss the life cycle in the following chapters.
The previous view is incomplete, because we are missing the tabular view component. Although HTML tables are frowned upon due to the layout of content of the web pages, tables are still extremely important for their original purpose, that is, to display tabular data.
The following is the missing table view that should be inserted in the correct place:
<h:form>
<h:dataTable id="projects" value="#{taskListViewController.project.tasks}" styleClass="table table-bordered" var="task">
<h:column>
<f:facet name="header">
<h:outputText value="Task Name" />
</f:facet>
<h:outputText value="#{task.name}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Target Date" />
</f:facet>
<h:outputText value="#{task.targetDate}">
<f:convertDateTime pattern="dd-MMM-yyyy" />
</h:outputText>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Completed" />
</f:facet>
<h:outputText value="#{task.completed}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Action" />
</f:facet>
<h:link styleClass="btn" outcome="editTask.xhtml?taskId=#{task.id}">
<f:param name="taskId" value="#{task.id}" />
<i class="icon-edit"></i>
</h:link>
<h:link styleClass="btn" outcome="removeTask.xhtml?taskId=#{task.id}">
<f:param name="taskId" value="#{task.id}" />
<i class="icon-trash"></i>
</h:link>
</h:column>
</h:dataTable>
<hr/>
<h:commandLink styleClass="btn btn-primary btn-info" immediate="true" action="#{taskListViewController.returnToProjects}">
Return to Projects</h:commandLink>
</h:form>The preceding code exemplifies the JSF style of content. The <h:form> tag corresponds to a HTML Form element. The <h:dataTable> tag denotes the table component grid that renders the data from the managed JSF bean. The value attribute denotes the data that is retrieved from a server component named taskListViewController. This controller accesses the list collection of Task objects using the expression language, and translates it to the Java reflection invocation of taskListViewController.getProjects().getTasks(). It is worth noticing once more the Bootstrap CSS in the attribute styleClass="table table-bordered".
The <h:dataTable> JSF component essentially iterates over a Java Collection, array, iterator, or enumerator, sets the current element defined by the attribute var, and processes the content in its body. It builds an HTML table. The <h:column> tag declares the content in each column of the row and <f:facet> tag declares the content specifically to go into the table header rows.
The <h:outputText> tag is also flexible enough to accept another usual tag <f:convertDateTime>, which formats the particular data value into a date time format.
Finally, we have the h:commandLink tag that renders an HTML anchor tag, which behaves like a form submit button. The h:commandLink tag is optionally associated with a backing bean, which in our case is the taskListViewController. Certain components of the JSF HTML tags like h:dataTable and h:commandLink are contained in an h:form tag in order to be processed correctly.
Tip
Bootstrap CSS (http://getbootstrap.com) is a very popular CSS, component, and front-end framework for developing responsive websites. It is particularly suited for mobile by default projects, because it builds against a flexible and fluid grid system. The CSS and JavaScript are easily added to the web application; Bootstrap is genuinely a kick-starter for many projects.