#JSFでもBootStrapを使いたい
ちょっとしたWebシステムを開発する場合、言語問わず、BootStrapを使うことが多いです。なので、JSF+PrimeFacesな環境でもBootStrapを使いたいですが、そのまま使ってもたぶん競合するだろうなと考えていたら、BootsFacesというものを見つけたのでその導入方法をメモします。
#BootsFacesを導入する
##Mavenで、ライブラリをインストールする
pomに以下を追記します。参考までに、primefacesのdependency要素も記載しています。
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
BootsFacesで「Hello,World」をするために、以下のようなxhtmlファイルを作成します。
このとき、名前空間に
xmlns:b="http://bootsfaces.net/ui"
を追記します。利用できるコンポーネントや使い方はここを参照します。
一応、PrimeFacesのタグも使って動作確認します。
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>
##BootStrapのテーマを変える
せっかくなので、BootStrapのテーマを変えてみます。
Bootswatchのテーマが使えるそうなので、web.xmlで利用するテーマを指定します。
web.xml
<context-param>
<param-name>BootsFaces_THEME</param-name>
<param-value>cyborg</param-value>
</context-param>
##完了
以上で、BootsFacesの導入は完了です。サンプル画面にアクセスして、Hello,Worldできていることを確認します。
