Introduction
Another article which is focusing on how to develop a Java web application using JSF library. But in this context, there is a specific subject on the development process. It is adding the Bootstrap framework for displaying the view of the page in order to enrich the visual presentation of it. Before going on further, please check two articles before which is important as a reference. First article is an article referencing about how to create a maven-based Java web application. It is available as an article in this link with the title of ‘How to Create maven-based Web Application in NetBeans IDE’. Second article is an article informing how to add JSF library functionality as a reference. It exist in this link with the title of ‘How to Add JSF Library to a maven-based Web Application in NetBeans IDE’. After that, just check the article in this link. That is an article with the title of ‘How to Define Title Header in JSF File without using ui Tag in Java Web Application’. Furthermore, it informs how to create a JSF file in Java web application for defining title of the header. Actually, defining the title without using ui tag template.
Adding Bootstrap to a JSF Java Web Application
So, this article continues on the script available in the article defining the title header of a JSF file in the Java web application. The following are the steps to add the Bootstrap :
-
First of all, just download the Bootstrap files. Visit the bootstrap webpage link. Currently, it is available in this link
-
Next, download the necessary Bootstrap files link. In this case, the curretn version of the Bootstrap for downloading is the Bootstrap v 5.0.
-
Continue on the step, just extract the Bootstrap files. Actually, the download process in the previous step is a success, it will have a file with the name of ‘bootstrap-5.0.2-dist.zip’ in the Downloads folder. After extracting that file, there will be a new folder with the name of ‘bootstrap-5.0.2-dist’ as a result. The following is the content of it :
C:\Users\Personal\Downloads\bootstrap-4.1.3-dist>dir Volume in drive C is Windows-SSD Volume Serial Number is CA30-19A4 Directory of C:\Users\Personal\Downloads\bootstrap-4.1.3-dist 04/08/2022 08:14 AM <DIR> . 05/15/2022 01:19 PM <DIR> .. 04/08/2022 08:14 AM <DIR> css 04/08/2022 08:14 AM <DIR> js 0 File(s) 0 bytes 4 Dir(s) 206,708,748,288 bytes free C:\Users\Personal\Downloads\bootstrap-4.1.3-dist>
-
Next, copy all of those two folders in the Java web application’s project. Before that, create a new folder in the project with the name of ‘resources’. Just create it in the Web Pages folder of the Java web application’s project. In order to describe it correctly, below is the structure of the Java web application’s project :
C:\repository\demojava\src\main>dir Volume in drive C is Windows-SSD Volume Serial Number is CA30-19A4 Directory of C:\repository\demojava\src\main 05/03/2022 10:53 AM <DIR> . 05/03/2022 10:53 AM <DIR> .. 05/03/2022 10:53 AM <DIR> java 05/15/2022 12:35 PM <DIR> resources 05/15/2022 12:32 PM <DIR> webapp 0 File(s) 0 bytes 5 Dir(s) 206,699,040,768 bytes free C:\repository\demojava\src\main>
-
So, copy those two folders of the Bootstrap files which is the ‘css’ and ‘js’ folders to the resources folder of the Java web application’s project exist above.
-
After that, continue on editing the JSF file which is already exist. Specifically, a JSF file where there is a title definition in the header part. Basically, the following is the original content before editing the file further :
<?xml version='1.0' encoding='UTF-8' ?> <!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:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"> <h:head> <title>Default Title</title> </h:head> </html> -
Continuing on the script above, just edit it further. The first edit step is adding the CSS and Javascript file which is the requirement for adding Bootstrap. In this case, the CSS definition exist as follows :
<h:outputStylesheet library="css" name="css/bootstrap.min.css"/>
Furthermore, the following definition is the revision for the Javascript file :
<h:outputScript library="js" name="bootstrap.min.js"/>
- Finally, in order to test the Bootstrap layout, just add some snippet code in the body part exist in the JSF file as follows :
<?xml version='1.0' encoding='UTF-8' ?> <!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:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"> <h:head> <title>Default Title</title> <h:outputStylesheet library="css" name="css/bootstrap.min.css"/> </h:head> <h:body> <div class="container"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> <a class="navbar-brand" href="#">Hidden brand</a> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link-active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link-active" aria-current="page" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link-active" aria-current="page" href="#">Home</a> </li> </ul> </div> </div> </nav> <h:outputScript library="js" name="bootstrap.min.js"/> </div class="container"> </h:body> </html> -
Finally, compile, build and run it once more. In this case, it is using NetBeans IDE in order to check the layout of the Bootstrap template in order to prove the load process of CSS and JSF files is a success. If there is no further error appear, the following page will be present in the web browser :
How to Add Bootstrap to a JSF Java Web Application