using Bootsfaces in a netbeans project with Tomcat

2.5k views Asked by At

I've created a netbeans (7.31) new web project with JSF 2.2, using Tomcat, and I downloaded and added Bootsfaces-OSP-dist-0.7.jar to my project. I did all things related in Bootsfaces quick start guide, included all about web.xml , faces-config.xml and theme css support. I did not nothing about maven pom.xml build file (Working with netbeans IDE i didn't need to do nothing in pom.xml, and I dont know how to do in a project with netbeans IDE) I also created a index.xhtml page like related in quick start guide (with <h:head/> tags ) When I run my project all looks without any styling.

Can anybody help me with a guide step by step to do bootsfaces work in a project created with netbeans IDE, JSF 2.2 and tomcat ?

Here is my web.xml file:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
    <context-param>
        <param-name>javax.faces.PROJECT_STAGE</param-name>
        <param-value>Development</param-value>
    </context-param>
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>

    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.jsf</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.faces</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.xhtml</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/javax.faces.resource/*</url-pattern>
    </servlet-mapping>

    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <welcome-file-list>
        <welcome-file>faces/index.xhtml</welcome-file>
    </welcome-file-list>
    <context-param>
        <param-name>BootsFaces_USETHEME</param-name>
        <param-value>true</param-value>
    </context-param>
</web-app>

`

2

There are 2 answers

1
mmalik On

Well, everything works fine for me. I did the following steps:

  1. I created a new Web Project in Netbeans 8.0.2 and added JSF 2.2 (Library, then Add Library).
  2. Downloaded the newest Bootsfaces JAR from their site and added it the Project (Library, then Add JAR/Folder).
  3. Created a new JSF file:

    <?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:b="http://bootsfaces.net/ui"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <b:navBar brand="Brand" brandHref="#" inverse="true">
            <b:navbarLinks>
            <b:navLink value="Home" href="#"></b:navLink>
            <b:navLink value="Link" href="#"></b:navLink>
            <b:navLink value="Link" href="#"></b:navLink>
            </b:navbarLinks>
        </b:navBar>
    </h:body>
    

Just don't forget about this part xmlns:b="http://bootsfaces.net/ui".

2
Stephan Rauh On

There are at least three pitfalls which make your theme disappear:

  • Did you add the theme to the web.xml? xml <context-param> <param-name>BootsFaces_USETHEME</param-name> <param-value>true</param-value> </context-param>
  • Please don't use folder names in the servlet mapping. I'm not sure if it causes CSS error, but certainly it makes things more complex and might confuse the resource mapper.
  • For some reason, BootsFaces works better if you add the CombinedResourceHandler of OmniFaces to the faces-config.xml. Alternatively, you can add the UnmappedResourceHandler (which is part of BootsFaces). More often than not, BootsFaces needs one of those to find the CSS files and / or the font. Also see http://www.bootsfaces.net/integration/OmniFaces.jsf.

Another approach that usually works is to start with one the the demo projects, such as https://github.com/stephanrauh/BootsFaces-Examples.