5 Replies Latest reply on Aug 17, 2007 4:54 PM by kevcpu411

    a4j-include and css problem

    kevcpu411 Aug 17, 2007 4:06 PM

      I have several pages that implement the facelets scenario with the a4j-include component. The menu happens to be one of the pages I have using a4j-include. For some reason, the included pages cannot see the css file. To shed more light, I have the ui:inserts in a file called basetemplate.xhtml which contains the css entry. Next, I have a page called TemplateBrowse.xhtml that adds the basetemplate.xhtml as its ui:composition. It also includes(a4j-include), TemplateBrowse.xhtml, menu.xhtml. I am also having a problem using the   tag which seems to generate an exception. Is there another css should be included?
       ?

      • 833 Views
      • Tags:
        • 1. Re: a4j-include and css problem
          fernando_jmt
          fernando_jmt Aug 17, 2007 4:10 PM (in response to kevcpu411)

          Have you tried with a4j:loadStyle in your template?

           <a4j:loadStyle src="/stylesheet/theme.css"/>


            • Actions
          • 2. Re: a4j-include and css problem
            kevcpu411 Aug 17, 2007 4:15 PM (in response to kevcpu411)

            no, I have been using the standard link rel tags, which dont seem to work here. BTW, what is the difference between LoadStyle and link rel tags. Also, what is the problem with the   tag. It seems as if xhtml does not like that. Are there any alternatives or fixes?

              • Actions
            • 3. Re: a4j-include and css problem
              fernando_jmt
              fernando_jmt Aug 17, 2007 4:29 PM (in response to kevcpu411)

               


              BTW, what is the difference between LoadStyle and link rel tags


              AFAIK, loadStyle ensure your CSS is available when you are loading Ajax content (partial loading).


              Also, what is the problem with the   tag. It seems as if xhtml does not like that


              I can assume you're using facelets, so you should use XML entities instead HTML ones. try with &#160; (xml representaion to  )

                • Actions
              • 4. Re: a4j-include and css problem
                fernando_jmt
                fernando_jmt Aug 17, 2007 4:37 PM (in response to kevcpu411)

                 

                & # 160;


                (Remove the blank spaces)

                  • Actions
                • 5. Re: a4j-include and css problem
                  kevcpu411 Aug 17, 2007 4:54 PM (in response to kevcpu411)

                  I tried to use the LoadStyle and LoadScript tags but it still does not work.

                  This time I have included the code:

                  basetemplate.xhtml:
                  <!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:f="http://java.sun.com/jsf/core"
                  xmlns:h="http://java.sun.com/jsf/html"
                  xmlns:a4j="https://ajax4jsf.dev.java.net/ajax"
                  xmlns:rich="http://richfaces.ajax4jsf.org/rich"
                  xmlns:ks="http://ks.com/jsf/components/kslib"
                  xmlns:ui="http://java.sun.com/jsf/facelets">

                  <meta http-equiv="Content-Language" content="en-us" />
                  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                  <ui:insert name="title">Title</ui:insert>
                  <a4j:loadStyle src="/ksl/css/app.css"/>
                  <a4j:loadScript src="/ksl/js/app.js"/>
                  <a4j:loadScript src="/ksl/js/lib.js"/>







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




                   


                   


                   


                   




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




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










                  TemplateBrowse.xhtml:
                  <!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:f="http://java.sun.com/jsf/core"
                  xmlns:h="http://java.sun.com/jsf/html"
                  xmlns:a4j="https://ajax4jsf.dev.java.net/ajax"
                  xmlns:rich="http://richfaces.ajax4jsf.org/rich"
                  xmlns:ks="http://ks.com/jsf/components/kslib"
                  xmlns:ui="http://java.sun.com/jsf/facelets">

                  <ui:composition template="basetemplate.xhtml">
                  <ui:define name="title">Template Browse</ui:define>
                  <ui:define name="menu"><a4j:include viewId="menu.xhtml"></a4j:include></ui:define>
                  <ui:define name="header">Template Browse</ui:define>
                  <ui:define name="body">
                  <h:form id="frmTemplateBrowse">
                  <a4j:outputPanel ajaxRendered="true"><h:messages></h:messages></a4j:outputPanel>

                  <h:panelGroup id="pnlTemplateBrowseBody">



                  Search Template




                  Column1


                  <ks:kstextbox id="txtColumn1" binding="#{templateBrowseBackingBean.txtColumn1}" required="false"></ks:kstextbox>


                  Column2


                  <ks:kstextbox id="txtColumn2" binding="#{templateBrowseBackingBean.txtColumn2}" required="false"></ks:kstextbox>




                  Column3


                  <ks:kstextbox id="txtColumn3" binding="#{templateBrowseBackingBean.txtColumn3}" required="false"></ks:kstextbox>


                  &#160;


                  &#160;




                  <a4j:commandButton action="#{templateBrowseBackingBean.retrieveGrid}" value="Search Template" reRender="pnlTemplateBrowseBody"></a4j:commandButton>




                  &#160;


                  &#160;


                  &#160;


                  &#160;




                  <ks:ksdatatable id="dtgTemplateBrowse" scrollable="true" height="500" rowClasses="OddRow,EvenRow" headerClass="DataGridHeader" value="#{templateBrowseBackingBean.rs}" var="template" width="768" cellpadding="0" cellspacing="1" columnClasses="Column">
                  <f:facet name="header">
                  <h:panelGrid columns="1" width="760">
                  <h:panelGrid columns="2" style="width:100%;text-align:right;" columnClasses="grdHeaderLeft,grdHeaderRight">
                  <ks:kslabel value="Template Information"></ks:kslabel>
                  <a4j:commandLink id="btnAddNew" value="Add New Template" onclick="javascript:Richfaces.showModalPanel('pnlTemplateManage',{width:450, top:200});" action="#{templateBrowseBackingBean.navigateNextPage}" reRender="incTemplateManage"></a4j:commandLink>
                  </h:panelGrid>
                  </h:panelGrid>
                  </f:facet>
                  <ks:kscolumn id="colColumn1" width="192">
                  <f:facet name="header"><ks:kslabel id="hdrColumn1" value="Column 1"></ks:kslabel></f:facet>
                  <ks:kslabel id="lblTemplateColumn1" value="#{template.Column1}"></ks:kslabel>
                  </ks:kscolumn>
                  <ks:kscolumn id="colColumn2" width="192">
                  <f:facet name="header"><ks:kslabel id="hdrColumn2" value="Column 2"></ks:kslabel></f:facet>
                  <ks:kslabel id="lblTemplateColumn2" value="#{template.Column2}"></ks:kslabel>
                  </ks:kscolumn>
                  <ks:kscolumn id="colColumn3" width="192">
                  <f:facet name="header"><ks:kslabel id="hdrColumn3" value="Column 3"></ks:kslabel></f:facet>
                  <ks:kslabel id="lblTemplateColumn3" value="#{template.Column3}"></ks:kslabel>
                  </ks:kscolumn>
                  <ks:kscolumn id="colActions">
                  <a4j:commandLink id="lnkShowWindow" onclick="javascript:Richfaces.showModalPanel('pnlTemplateManage',{width:450,top:200});" value="Edit" action="#{templateBrowseBackingBean.navigateNextPage}" reRender="incTemplateManage">
                  <f:param name="CurrentID" value="#{template.TemplateID}"></f:param>
                  </a4j:commandLink>
                  </ks:kscolumn>
                  </ks:ksdatatable>



                  </h:panelGroup>
                  <rich:modalPanel id="pnlTemplateManage">
                  <f:facet name="header">
                  <h:outputText value="Template Manage" />
                  </f:facet>
                  <f:facet name="controls">
                  <a4j:commandLink id="lnkHidePanel" action="#{templateBrowseBackingBean.navigateReset}" reRender="pnlTemplateBrowseBody" onclick="javascript:Richfaces.hideModalPanel('pnlTemplateManage');">
                  <h:graphicImage value="/images/close.png" style="cursor:pointer" border="0"/>
                  <f:param name="Clear" value="Clear"/>
                  </a4j:commandLink>
                  </f:facet>
                  <a4j:include id="incTemplateManage" binding="#{templateBrowseBackingBean.includeManage}" viewId="blank.xhtml"></a4j:include>
                  </rich:modalPanel>
                  </h:form>
                  </ui:define>
                  </ui:composition>



                  menu.xhtml:
                  <h:form xmlns="http://www.w3.org/1999/xhtml"
                  xmlns:f="http://java.sun.com/jsf/core"
                  xmlns:h="http://java.sun.com/jsf/html"
                  xmlns:a4j="https://ajax4jsf.dev.java.net/ajax"
                  xmlns:rich="http://richfaces.ajax4jsf.org/rich"
                  xmlns:ks="http://ks.com/jsf/components/kslib"
                  xmlns:ui="http://java.sun.com/jsf/facelets" id="frmMenu">







                  <rich:toolBar itemSeparator="line" styleClass="RichToolbar">
                  <rich:dropDownMenu value="Main Menu">
                  <rich:menuItem submitMode="ajax" value="Manage Carriers">
                  </rich:menuItem>
                  <rich:menuItem submitMode="ajax" value="Manage Customers">
                  </rich:menuItem>
                  <rich:menuItem submitMode="ajax" value="Manage Loads">
                  </rich:menuItem>
                  <rich:menuItem submitMode="ajax" value="Manage Trucks">
                  </rich:menuItem>
                  <rich:menuItem submitMode="ajax" value="Modify Rate Confirmation">
                  </rich:menuItem>
                  </rich:dropDownMenu>
                  <rich:dropDownMenu value="Account Information">
                  <rich:menuItem submitMode="ajax" value="Add New User">
                  </rich:menuItem>
                  <rich:menuItem submitMode="ajax" value="Change My Password">
                  </rich:menuItem>
                  <rich:menuItem submitMode="ajax" value="Manage Billing Info">
                  </rich:menuItem>
                  <rich:menuItem submitMode="ajax" value="Manage Company Account">
                  </rich:menuItem>
                  <rich:menuItem submitMode="ajax" value="Manage My User Account">
                  </rich:menuItem>
                  <rich:menuItem submitMode="ajax" value="Manage Users">
                  </rich:menuItem>
                  </rich:dropDownMenu>
                  <rich:dropDownMenu value="Logout">
                  </rich:dropDownMenu>
                  </rich:toolBar>



                  </h:form>

                  I still do not see what I am doing wrong, the css works for the TemplateBrowse page but not for the included pages. Should I include the css in all of the pages or just the composition page? Do you have any suggestions?

                    • Actions