CODEWITHSUNDEEP
csstwitter-bootstrapjsf-2richfacesweb-frameworks
Steve Oh
Steve Oh

Reputation: 1159

richfaces with bootstrap CSS

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?

Upvotes: 2

Views: 6111

Answers (3)

Steve Oh
Steve Oh

Reputation: 1159

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

This is, what I learned:

  1. 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!
  2. richfaces skinning should be disables in web.xml
  3. 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)
  4. 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>

Upvotes: 7

Auston
Auston

Reputation: 315

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!

Upvotes: 0

Pavol Pitonak
Pavol Pitonak

Reputation: 509

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

Upvotes: 4

Related Questions