2 Replies Latest reply on Nov 30, 2012 6:45 AM by cratsh

    Simple page with side navigation and css loading problems

    cratsh Newbie

      Hi there,

       

      I'm new to richfaces and just started a simple test.

       

      I created a template file overview.xhtml

      <?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:rich="http://richfaces.org/rich"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:a4j="http://richfaces.org/a4j">
      <h:head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <h:outputStylesheet library="css" name="default.css" />
       <h:outputStylesheet library="css" name="cssLayout.css" />
       <title>Facelets Template</title>
      </h:head>
      <h:body>
       <h:form>
        <div id="top" class="top">
         <h:graphicImage value="#{resource['images:banner.jpg']}" />
        </div>
        <div>
         <div id="left">
          <ui:include src="navigationMenu.xhtml" />
         </div>
         <div id="center_content" class="left_content">
                  <h:panelGroup id="centerContentDiv" layout="block">
                      <ui:insert name="center_content" />
                  </h:panelGroup>
              </div>
        </div>
       </h:form>
      </h:body>
      </html>
      

       

      The navigationMenu.xhtml

      <?xml version='1.0' encoding='UTF-8' ?>

      <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <ui:composition 
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:rich="http://richfaces.org/rich"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:a4j="http://richfaces.org/a4j">
      <h:form id="navigationFormId">
              <rich:collapsiblePanel id="carrierCollapsibleId" header="Application
      
      " switchType="client">
                  <h:commandLink  id="linkId3" action="/welcomeRichfaces" value="Welcome Richfaces
      
      ">
                      <a4j:ajax execute="@form" render=":centerContentDiv,:centerForm" />                    
                  </h:commandLink>
      </rich:collapsiblePanel>
      </h:form>
      </ui:composition>
      

       

      And the index.xhtml

      <?xml version='1.0' encoding='UTF-8' ?>
      <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns="http://www.w3.org/1999/xhtml"
       template="/templates/overview.xhtml"
       xmlns:rich="http://richfaces.org/rich"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:c="http://java.sun.com/jstl/core">
           <ui:define name="center_content">                                
                  <h:form id="centerForm">
                     <!-- put your components in here -->    
                      </h:form>
              </ui:define>
       
      </ui:composition>
      

       

      welcomeRichfaces.xhtml

      <?xml version='1.0' encoding='UTF-8' ?>
      <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns="http://www.w3.org/1999/xhtml"
       template="/templates/overview.xhtml"
       xmlns:rich="http://richfaces.org/rich"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:c="http://java.sun.com/jstl/core">
       <ui:define name="center_content">
        <h:form id="centerForm">
         <!-- put your components in here -->
         <rich:panel header="Welcome to Richfaces">
                  RichFaces is an advanced UI component framework for easily integrating Ajax capabilities into business applications using JSF.  Check out the links below to lear more about using RichFaces in your application.
                  <ul>
           <li><h:outputLink value="Richfaces" _mce_href="http://richfaces.org">Richfaces">http://richfaces.org">Richfaces Project Home Page</h:outputLink></li>
           <li><h:outputLink value="Richfaces" _mce_href="http://showcase.richfaces.org">Richfaces">http://showcase.richfaces.org">Richfaces Showcase</h:outputLink></li>
           <li><h:outputLink
             value="User" _mce_href="https://community.jboss.org/en/richfaces?view=discussions">User">https://community.jboss.org/en/richfaces?view=discussions">User Forum</h:outputLink></li>
           <li><h:outputLink value="Richfaces" _mce_href="http://www.jboss.org/richfaces/docs">Richfaces">http://www.jboss.org/richfaces/docs">Richfaces documentation...</h:outputLink>
            <ul>
             <li><h:outputLink
               value="Development" _mce_href="http://docs.jboss.org/richfaces/latest_4_X/Developer_Guide/en-US/html_single/">Development">http://docs.jboss.org/richfaces/latest_4_X/Developer_Guide/en-US/html_single/">Development Guide</h:outputLink></li>
             <li><h:outputLink
               value="Component" _mce_href="http://docs.jboss.org/richfaces/latest_4_X/Component_Reference/en-US/html/">Component">http://docs.jboss.org/richfaces/latest_4_X/Component_Reference/en-US/html/">Component Reference</h:outputLink></li>
             <li><h:outputLink
               value="Tag" _mce_href="http://docs.jboss.org/richfaces/latest_4_X/vdldoc/">Tag">http://docs.jboss.org/richfaces/latest_4_X/vdldoc/">Tag Library Docs</h:outputLink></li>
            </ul></li>
          </ul>
         </rich:panel>
        </h:form>
       </ui:define>
      </ui:composition>
      

       

      The index looks like it should but when I click on the link on the side the content gets replaced but the styles for the Richfaces components like the panel won't be in the page, even if I use in the web.xml

       

      <context-param>
           <param-name>org.richfaces.LoadStyleStrategy</param-name>
           <param-value>ALL</param-value>
       </context-param>