richfaces with bootstrap CSS

Question

Is it possible (and reasonable) to use JSF with richfaces and bootstrap CSS styling together in one project. so using richfaces for page rendering, UI models and ajax; leaving the styling up to bootstrap and custom CSS.

Did someone ever tried this? Is this an oversized approach?

I startet over with plain JSF and Bootstrap and it worked well so far. — Steve Oh, Oct 08 '13 at 19:54

score 7 · Answer 1 · edited May 23 '17 at 12:24

I worked with richfaces 4.3 + bootstrap 3 for quite a time now and consider it a successful approach

This is, what I learned:

jquery version conflict: both ship with jQuery (bootstrap requires a newer version, than richfaces); doublecheck, if you are using the correct jQuery instance, especially with $ alias!
richfaces skinning should be disables in web.xml
resources like fonts or icons, that are references from CSS are often declared as relative URL; this does not fit quite well into the JSF resource system (workaround see below)
JSF resource library support and versioning helps a lot with managing different JS libraries

solution for 1:

create a file static-resource-mappings.properties with this line

jquery.js=org.richfaces.staticResource/jquery-1.10.2.js
jquery-migrate.js=org.richfaces.staticResource/jquery-migrate-1.2.1.js

in xhtml, use the resource shortcut:

<h:outputScript name="jquery.js"/>

check this - Richfaces 4 seems to be broken with JSF 2.2; the proposed workaround worked for me

Possible solution for 3: I added static resource servlet shipped with tomcat to web.xml and put the relative resources (query-ui theme in my project) under /static folder

<servlet>
    <servlet-name>static-resource-servlet</servlet-name>
    <servlet-class>
      org.apache.catalina.servlets.DefaultServlet
    </servlet-class>
    <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>static-resource-servlet</servlet-name>
    <url-pattern>/static/*</url-pattern>
</servlet-mapping>

due to incompatibilities, I needed to add jquery-migrate.js – Steve Oh Nov 21 '14 at 07:51 — Steve Oh, Nov 21 '14 at 07:51

score 4 · Answer 2 · answered May 30 '13 at 14:01

4

Have a look on RichFaces Bootstrap project. It's a sandbox effort but it might be useful for you.

answered May 30 '13 at 14:01

Pavol Pitonak

509
1
5
15

score 0 · Answer 3 · answered Mar 18 '14 at 12:12

I have found this project, but i'm not have still used this in any project. Look that and see if this is what you want: https://bootstrap-richfaces.rhcloud.com/

Built on top of Bootstrap from Twitter, the RichFaces Bootstrap project is wrapping all the awesomeness of Bootstrap, all its great components, and all its effects as JSF components! It's magic and we're sure you'll love it!

Warning! This project is currently a "sandbox" project and is under heavy development. As such both tags and attribute names are subject to change at any time. Use it for fun or prototyping purposes only! But do stay tuned for the release of course!

richfaces with bootstrap CSS

3 Answers3