3 Replies Latest reply on Jun 6, 2011 10:50 AM by Karsten Wutzke

    Panel not rendering any styles (Facelets template, JSF 2.0, Seam)

    Karsten Wutzke Expert

      Hello,

       

      I'm all new to RichFaces, so it might turn out to be an easy question in the end. I've read a lot of similar postings, but none of them helped.

       

      I have a pretty basic page arena.xhtml that uses a Facelets template default.xhtml. When using a rich:panel the panel's header text and body text get rendered without any styles.

       

      Here's my default template first (default.xhtml):

       

      {code:xml}<?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">

       

        <head>

          <title><ui:insert name="title" /></title>

          <link rel="stylesheet" type="text/css" href="styles/grid-960/hybrid.css" />

          <link rel="stylesheet" type="text/css" href="styles/grid-960/reset.css" />

          <link rel="stylesheet" type="text/css" href="styles/grid-960/text.css" />

          <link rel="stylesheet" type="text/css" href="styles/layout.css" />

          <link rel="stylesheet" type="text/css" href="styles/elements.css" />

        </head>

       

        <body>

          <div id="page" class="container_16">

            <div id="header" class="grid_16">

              ...

            </div>

            <div id="navigation" class="grid_4">

              ...

            </div>

            <div id="content" class="grid_12">

              <div class="inner-frame">

                <ui:insert name="content" />

              </div>

            </div>

            <div class="clear"></div>

            <div id="footer" class="grid_16">

              ...

            </div>

          </div>

        </body>

       

      </html>{code}

      Don't get irritated by the container_ and grid_ style classes, it's from a CSS framework grid960 and the numbers basically only define fixed pixel widths (16 column layout).

       

      The rest is straightforward: there's a header, then a navigation and content panel next to each other, followed by a clear div to render the footer at the bottom. The content div is injected from the concrete pages using <ui:define name="content">, here arena.xhtml:

       

      {code:xml}<?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">

      <ui:composition xmlns="http://www.w3.org/1999/xhtml"

                      xmlns:f="http://java.sun.com/jsf/core"

                      xmlns:h="http://java.sun.com/jsf/html"

                      xmlns:ui="http://java.sun.com/jsf/facelets"

                      xmlns:s="http://jboss.com/products/seam/taglib"

                      xmlns:a4j="http://richfaces.org/a4j"

                      xmlns:rich="http://richfaces.org/rich"

                      template="/templates/default.xhtml">

        <ui:define name="navigation">

          ...

        </ui:define>

        <ui:define name="content">

          <h1>Arena Info</h1>

          <rich:panel header="Write your own custom rich components with built-in AJAX support">

              The CDK includes a code-generation facility and a

              templating facility using a JSP-like syntax. These capabilities help

              to avoid a routine process of a component creation. The component factory

              works like a well-oiled machine allowing the creation of first-class

              rich components with built-in Ajax functionality even more easily than

              the creation of simpler components by means of the traditional coding

              approach.

          </rich:panel>

        </ui:define>

      </ui:composition>{code}

      Nothing spectacular. However, when loading the page the panel isn't rendered at all. It appears as if the panel header text and the panel text are just two unstyled paragraphs.

       

      Here's my web.xml:

       

      {code:xml}<?xml version="1.0" encoding="UTF-8"?>

      <web-app version="2.5"

               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_2_5.xsd">

       

        <display-name>Basketball Stats</display-name>

        <description>Basketball Stats Web Application</description>

       

        <context-param>

          <param-name>javax.faces.DEFAULT_SUFFIX</param-name>

          <param-value>.xhtml</param-value>

        </context-param>

       

        <!-- See http://www.seamframework.org/Documentation/WhyIsCommentedCodeInMyXHTMLFileExecuted: -->

        <context-param>

          <param-name>facelets.DEVELOPMENT</param-name>

          <param-value>true</param-value>

        </context-param>

       

        <context-param>

          <param-name>facelets.SKIP_COMMENTS</param-name>

          <param-value>true</param-value>

        </context-param>

       

        <!-- See http://community.jboss.org/thread/158984 -->

        <!--context-param>

          <param-name>org.jboss.jbossfaces.JSF_CONFIG_NAME</param-name>

          <param-value>Mojarra-1.2</param-value>

        </context-param-->

       

        <!-- See http://community.jboss.org/message/578365 -->

        <context-param>

          <param-name>org.jboss.jbossfaces.WAR_BUNDLES_JSF_IMPL</param-name>

          <param-value>false</param-value>

        </context-param> 

       

        <!-- See http://community.jboss.org/message/578365 -->

        <context-param>

          <param-name>com.sun.faces.displayConfiguration</param-name>

          <param-value>true</param-value>

        </context-param>

       

        <!-- RichFaces skin -->

        <context-param>

           <param-name>org.richfaces.SKIN</param-name>

           <param-value>blueSky</param-value>

        </context-param>

       

        <context-param>

          <param-name>org.richfaces.LoadStyleStrategy</param-name>

          <param-value>ALL</param-value>

        </context-param>

       

        <context-param>

          <param-name>org.richfaces.LoadScriptStrategy</param-name>

          <param-value>ALL</param-value>

        </context-param>

       

        <!-- Faces Servlet -->

        <servlet>

          <servlet-name>Faces Servlet</servlet-name>             

          <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>             

          <!--load-on-startup>2</load-on-startup-->

        </servlet>   

       

        <servlet-mapping>

          <servlet-name>Faces Servlet</servlet-name>             

          <url-pattern>*.seam</url-pattern>

        </servlet-mapping>

      </web-app>{code}

      The webapp is running on JBoss AS 6 Final, Seam 2.2.1, RichFaces 3.?.? (the JAR coming with Seam 2.2.1), and Mojarra 2.0. Everything is deployed as WAR, that is I'm using the JSF 2.0 deployer and add all Seam, Facelets, RichFaces JARs via webapp deploy:

       

      {code}commons-lang-2.5.jar

      jboss-el.jar

      jboss-seam.jar

      jboss-seam-ui.jar

      jsf-facelets.jar

      commons-digester.jar

      richfaces-api.jar

      richfaces-impl.jar

      richfaces-ui.jar{code}

      Here's the (relevant) HTML code generated by the server:

       

      {code:xml}<?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">

       

        <head>

          <title></title>

          <link rel="stylesheet" type="text/css" href="styles/grid-960/hybrid.css" />

          <link rel="stylesheet" type="text/css" href="styles/grid-960/reset.css" />

          <link rel="stylesheet" type="text/css" href="styles/grid-960/text.css" />

          <link rel="stylesheet" type="text/css" href="styles/layout.css" />

          <link rel="stylesheet" type="text/css" href="styles/elements.css" />

        </head>

       

        <body>

          <div id="page" class="container_16">

            <div id="header" class="grid_16">

              ...

            </div>

            <div id="navigation" class="grid_4">

              ...

            </div>

            <div id="content" class="grid_12">

              <div class="inner-frame">

          <h1>Arena Info</h1><div class="rich-panel " id="j_id37"><div class="rich-panel-header " id="j_id37_header">Write your own custom rich components with built-in AJAX support</div><div class="rich-panel-body " id="j_id37_body">

              The CDK includes a code-generation facility and a

              templating facility using a JSP-like syntax. These capabilities help

              to avoid a routine process of a component creation. The component factory

              works like a well-oiled machine allowing the creation of first-class

              rich components with built-in Ajax functionality even more easily than

              the creation of simpler components by means of the traditional coding

              approach.</div></div>

              </div>

       

            </div>

            <div class="clear"></div>

            <div id="footer" class="grid_16">

              ...

            </div>

          </div>

       

        </body>

       

      </html>{code}

      As far as I can see, there are no RichFaces CSS or JS scripts included anywhere in the HTML file, so it can't work. What am I doing wrong? How do I fix this?

       

      Thanks

      Karsten