Combining Persistence with CDI - Java EE 7 Development with WildFly - page 191

Coding the JSF view
Now that our middle tier is completed, we just need to add a couple of JSF views to our ap-
plication in the views folder of our web app. The first view, named setup.xhtml , will
set up our theatre and the second one, named book.xhtml , will be used to book tickets,
borrowing some of its code from the earlier chapter.
However, this time we would like to make our application a little bit more graphically ap-
pealing. To keep it simple, we will use Bootstrap , a very popular frontend framework that
will nicely integrate with our JSF views. It heavily relies on JavaScript and CSS, but we
will only need to use basic HTML to get it up and running in our application. Incorporating
a strict frontend framework to our application will be an opportunity to show how to use
Java EE 7 with the newest web technologies.
You can get the latest version of Bootstrap from http://getbootstrap.com/ and just place all
files in the resources directory; however, we won't do it here. We will use the WebJars,
which are simply JARs that pack client-side web libraries. You can find dependencies at ht-
tp://www.webjars.org/ , which after adding to your pom.xml file will work just like manu-
ally adding static files to the project. However, thanks to WebJars, we get Maven to control
our versions, and don't need to worry about polluting our codebase with external code.
Now, we need Bootstrap and jQuery, so we will add the following dependencies:
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.2.0</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>1.11.0</version>
</dependency>
Now, when we have the Bootstrap's libraries in place, we have to link them to our code. We
will add them to our WEB-INF/templates/default.xhtml file along with a simple
navigation bar: