1 Reply Latest reply on Mar 19, 2012 9:32 AM by Tanya Ruttenberg

    Skinning not working

    Tanya Ruttenberg Expert

      I have a small app based on the greeter quickstart.  I added richfacs-bom (4.2.0.Final) to my pom and am using richfaces library components and everythign is working great, it's just not looking great. It's as if skinning is completely not working.  I'm on AS 7.1.0.Final

       

      What am I missing?

       

      My web.xml has only this cause we're trying to keep things minimal

       

      <context-param>

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

          <param-value>ruby</param-value>

      </context-param>

       

      source looks like this

       

      <!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"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:rich="http://richfaces.org/rich"
        xmlns:s="http://jboss.org/seam/faces">

      <f:metadata>
        <f:viewParam name="sitecode" value="#{contactView.siteCode}" />
        <f:event listener="#{contactView.retrieve}" type="preRenderView"></f:event>
      </f:metadata>

      <h:messages />
      <h:form id="cf">
        <h:panelGrid columns="3">
          <h:outputLabel for="contact">Enter site code:</h:outputLabel>
          <h:inputText id="contact" value="#{contactView.siteCode}" />
          <h:outputText value="#{contactView.siteCode}" />
          <h:message for="contact" />
        </h:panelGrid>

        <h:commandButton id="find" value="Find Site Code"
          action="#{contactView.retrieve}" />

        <h:button value="Reset" includeViewParams="false" />
      </h:form>

      <rich:panel>
      RichFaces is a component library for JSF and an advanced framework for
      easily integrating AJAX capabilities into business applications.
      <ul>
        <li>100+ AJAX enabled components in two libraries</li>
        <li>a4j: page centric AJAX controls</li>
        <li>rich: self contained, ready to use components</li>
        <li>Whole set of JSF benefits while working with AJAX</li>
        <li>Skinnability mechanism</li>
        <li>Component Development Kit (CDK)</li>
        <li>Dynamic resources handling</li>
        <li>Testing facilities for components, actions, listeners, and
          pages</li>
        <li>Broad cross-browser support</li>
        <li>Large and active community</li>
      </ul>
      </rich:panel>

      <rich:panel rendered="#{not empty contactView.contact}">
        <f:facet name="header">
          <h:outputText value="Site Code #{contactView.contact.siteCode}" />
        </f:facet>
        <h:panelGrid columns="1">

          <h:outputText id="nm1" value="#{contactView.contact.name}" />
          <h:outputText id="pgr1" value="#{contactView.contact.pager}" />
          <h:outputText id="adr1" value="#{contactView.contact.addr1}" />
          <h:outputText id="adr2" value="#{contactView.contact.addr2}"
            rendered="#{not empty contactView.contact.addr2}" />
          <h:outputText id="csz"
            value="#{contactView.contact.city}, #{contactView.contact.state} #{contactView.contact.zip}" />

        </h:panelGrid>
      </rich:panel>

      </html>

       

      and output looks like this. Very boring.  Can someone tell me where are my lovely rf panel borders, etc?

       

      noskin.png

        • 1. Re: Skinning not working
          Tanya Ruttenberg Expert

          While trying to debug a separate problem, I added an <h:head /> section to my xhtml file and Voila!! skinning suddenly started working.

           

          FTR - the other problem was that a4j:commandLink action was producing a 'Richfaces' not defined error.

           

          Google led me to this solution and it fixed both problems.

           

          TDR.