I want to use BootStrap in JSF

When developing a small web system, BootStrap is often used regardless of the language. So, I would like to use BootStrap even in a JSF + PrimeFaces environment, but if I thought that using it as it is would probably conflict, I found something called BootsFaces, so I will write down how to install it.

Introduce Boots Faces

Install the library with Maven

Add the following to pom. For reference, the dependency element of primefaces is also listed.

`pom.xml`


<dependency>
    <groupId>net.bootsfaces</groupId>
    <artifactId>bootsfaces</artifactId>
    <version>1.0.1</version>
    <scope>compile</scope>
</dependency>
<dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces</artifactId>
    <version>6.0</version>
    <scope>compile</scope>
</dependency>

Hello,BootsFaces Create the following xhtml file to do "Hello, World" in BootsFaces. At this time, in the namespace

xmlns:b="http://bootsfaces.net/ui"

Will be added. See here for available components and usage. For the time being, check the operation using the PrimeFaces tag as well.

`hello_bootsfaces.xhtml`


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<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"
	xmlns:b="http://bootsfaces.net/ui">
<h:head>
	<title>Hello,BootsFaces</title>
</h:head>
<h:body>
	<b:container>
		<b:row>
			<b:column>
				<h1>Hello,BootsFaces!</h1>
			</b:column>
		</b:row>
		<b:row>
			<b:column>
				<p:spinner />
			</b:column>
		</b:row>
	</b:container>
</h:body>
</html>

Change the theme of BootStrap

Since it's a big deal, I'll change the theme of BootStrap. It seems that the theme of Bootswatch can be used, so specify the theme to be used in web.xml.

`web.xml`


<context-param>
	<param-name>BootsFaces_THEME</param-name>
	<param-value>cyborg</param-value>
</context-param>

Done

This completes the installation of BootsFaces. Access the sample screen and check that Hello, World is created.

How to install Boots Faces