Magnus K Karlsson: Getting Started with JSF 2.3 and Bootstrap 4

Introduction

The most popular CSS framework today is Bootstrap.

We are now going to add Bootstrap to my previous getting started JSF 2.3 (Java EE 8).

Starting Files

pom.xml
src/main/java/se/magnuskkarlsson/jsf23/boundary/PersonBacking.java
src/main/webapp/welcome-bootstrap.xhtml (Copy of welcome.xhtml so far)
src/main/webapp/WEB-INF/web.xml
src/main/webapp/WEB-INF/beans.xml

Download Bootstrap

Open https://getbootstrap.com/ and click Download and then download "Compiled CSS and JS".

Unzip bootstrap-4.3.1-dist.zip to src/main/webapp/ so you have:

src/main/webapp/bootstrap-4.3.1-dist/css/
src/main/webapp/bootstrap-4.3.1-dist/js/

Bootstrap Template

Then go back to https://getbootstrap.com/ and click Get Started, there you will see a Bootstrap getting started template. Lets add that to our welcome-bootstrap.xhtml.

NOTE Since we are using xhtml, we need to close elements and have a well formatted file.


<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core">

    <h:head>
        <!-- Required meta tags -->
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="bootstrap-4.3.1-dist/css/bootstrap.min.css"/>

        <title>Hello JSF 2.3 and Bootstrap 4</title>
    </h:head>
    <h:body>
        <h:form>
            <h:outputLabel for="name" value="Who do you want to greet?"/>
            <h:inputText id="name" value="#{personBacking.name}" />
            <h:commandButton value="Submit" action="#{personBacking.submit()}">
                <f:ajax execute="@form" render=":message"/>
            </h:commandButton>
        </h:form>
        <br/>
        <h:outputText id="message" value="#{personBacking.message}"/>  

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
    </h:body>
</html>

Lets Use Bootstrap 4

Now lets use some bootstrap CSS classes.

Form: we need to add class="form-group" for each input for a vertical layout and for each input field add class="form-control".

Button: for our submit button we add class="btn btn-primary".

Overall layout: to add some space to the side lets add main container class.

Card: Which was panel in Bootstrap 3, we add class="card", class="card-body" and class="card-title".


<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core">

    <h:head>
        <!-- Required meta tags -->
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="bootstrap-4.3.1-dist/css/bootstrap.min.css"/>

        <title>Hello JSF 2.3 and Bootstrap 4</title>
    </h:head>
    <h:body>
        <div class="container">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">
                        <h:outputText id="message" value="#{personBacking.message}"/>  
                    </h5>
                    <h:form>
                        <div class="form-group">
                            <h:outputLabel for="name" value="Who do you want to greet?"/>
                            <h:inputText id="name" value="#{personBacking.name}" class="form-control" />
                        </div>
                        <h:commandButton value="Submit" action="#{personBacking.submit()}" class="btn btn-primary">
                            <f:ajax execute="@form" render=":message"/>
                        </h:commandButton>
                    </h:form>
                </div>
            </div>
        </div>

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
    </h:body>
</html>

Test

Lets build, deploy and test it and then open for (JBoss EAP 7.2) http://localhost:8080/example-jsf23/welcome-bootstrap.xhtml.

Magnus K Karlsson

April 5, 2019

Getting Started with JSF 2.3 and Bootstrap 4