I have been working with JSF-Primefaces for a while but I also like the Bootstrap framework, specifically the bootstrap navigation bar. I'm trying to integrate both frameworks in order to use the typical nav-bar from bootstrap and use the Primefaces components in the rest of the page with the help of Grid CSS.
First thing I did was to search over the internet and I found many tutorials such as this one: http://blog.hatemalimam.com/jsf-and-twi ... tegration/
In order to implement it I altered my JSF main template like this:
Code: Select all
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</h:head>
<h:body>
<link href="#{request.contextPath}/css/bootstrap.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript" />
<script src="#{request.contextPath}/js/bootstrap.js" type="text/javascript" />
<ui:insert name="head">HEAD NOT FOUND</ui:insert>
<ui:insert name="body">BODY NOT FOUND</ui:insert>
<ui:insert name="foot">FOOT NOT FOUND</ui:insert>
</h:body>
</html>And added the following typical nav bar on the HEAD page:
Code: Select all
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="nav-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-1">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand"><i class="fa fa-book fa-lg"></i> The TEST</a>
</div>
<div class="collapse navbar-collapse" id="navbar-1">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="">Start</a></li>
<li><a href="">Content</a></li>
<li><a href="">Content</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</div>
</nav>
</div> Initially everything seemed to work fine: the bootstrap menubar rendered/worked and some primeface components also rendered... but after adding the following VERY SIMPLE selectOneMenu:
Code: Select all
<p:selectOneMenu id="console" value="#{indexBB.test}" >
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
<f:selectItem itemLabel="PS4" itemValue="PS4" />
<f:selectItem itemLabel="Wii U" itemValue="Wii U" />
</p:selectOneMenu>I was aware that something was wrong... The selectOneMenu arrow wasn't correctly positioned and the popup with the options didn't appear when clicking the arrow...
As most of you already know Primefaces and Bootstrap use Jquery, so I supposed that the main problem was that Primefaces Jquery version and the Jquery version I included conflicted.
I tried the same above configuration but changing the Jquery version in order to match the Primefaces Jquery version. I tried with 1.11.3 (AFAIK the old version used by Primefaces), 2.2.4(the new one for Primeface 6.1.1 as stated here https://www.primefaces.org/primefaces-6-1-1-released/ ) and 3.2.1
None of them seems to work with a simple selectOneMenu...
I also tried adding the Bootstrap via CDN (<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"></link>) WITHOUT ADDING Jquery and the selectOneMenu WORKED, but the arrow still didn't draw correctly...
Such test made me aware that I have 2 problems:
- Jquery conflict
- CSS problem drawing the selectOneMenu
Can someone tell me:
- Which Jquery version should I use in <script src="https://ajax.googleapis.com/ajax/libs/j ... ery.min.js" type="text/javascript" /> in order to avoid the conflict? (take into account that such library is included just in case some page doesn't have primefaces)
- How correct/avoid the selectOneMenu arrow CSS problem?
I'm interested in the aproach described in this thread, but any help to implement a menubar similar to the bootstrap one with Primefaces native components is welcome... (specifically the small button that appears in small resolutions).
Thanks a lot in advance!