6 Replies Latest reply on Mar 7, 2011 10:51 AM by ibstmt

    ExtendedDataTable doesn't respect skin?

    ibstmt Newbie

      RichFaces 3.3.3: I edited web.xml to set the skin to Classic. I have a page with a rich:dataTable and a rich:extendedDataTable. The former now reflects the new skin, but the latter doesn't. 

        • 1. ExtendedDataTable doesn't respect skin?
          Rocky S Master

          show your code please

          • 2. ExtendedDataTable doesn't respect skin?
            Ilya Sorokoumov Master

            Make sure that CSS is not simply cached in your browser.

            • 3. Re: ExtendedDataTable doesn't respect skin?
              ibstmt Newbie

              Clearing the cache did not help. Here are my web.xml, template.xhtml, and main page. On any page, the skin shows up fine in menu and dataTables, but not on ExtendedDataTable.

               

               

              web.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>Sales</display-name>

                  <description>Manage Sales</description>

               

                      <!-- Richfaces -->

                      <!-- if using with Trinidad, disable a4j view handler and

                          add a4j-trinidad.jar into lib -->

               

                      <context-param>

                          <param-name>org.ajax4jsf.VIEW_HANDLERS</param-name>

                          <param-value>com.sun.facelets.FaceletViewHandler</param-value>

                      </context-param>

               

                      <context-param>

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

                          <param-value>classic</param-value>

                      </context-param>

               

                      <!-- Seam -->

                      <listener>

                          <listener-class>org.jboss.seam.servlet.SeamListener</listener-class>

                      </listener>

               

                      <servlet>

                          <servlet-name>Seam Resource Servlet</servlet-name>

                          <servlet-class>org.jboss.seam.servlet.SeamResourceServlet</servlet-class>

                      </servlet>

               

                      <servlet-mapping>

                          <servlet-name>Seam Resource Servlet</servlet-name>

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

                      </servlet-mapping>

               

                  <filter>

                      <filter-name>CAS Filter</filter-name>

                      <filter-class>edu.yale.its.tp.cas.client.filter.CASFilter</filter-class>

                      <init-param>

                          <param-name>edu.yale.its.tp.cas.client.filter.loginUrl</param-name>

                          <param-value>https://issvmj2ee.ibi.com/cas/login</param-value>

                      </init-param>

                      <init-param>

                          <param-name>edu.yale.its.tp.cas.client.filter.validateUrl</param-name>

                          <param-value>https://issvmj2ee.ibi.com/cas/serviceValidate</param-value>

                      </init-param>

                      <init-param>

                          <param-name>edu.yale.its.tp.cas.client.filter.serverName</param-name>

                          <param-value>auto/issvm.*:80/default:8081</param-value>

                      </init-param>

                  </filter>

               

                  <filter-mapping>

                      <filter-name>CAS Filter</filter-name>

                      <url-pattern>/</url-pattern>

                      <url-pattern>/index.jsp</url-pattern>

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

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

                  </filter-mapping>

               

                      <filter>

                          <filter-name>Seam Filter</filter-name>

                          <filter-class>org.jboss.seam.servlet.SeamFilter</filter-class>

                      </filter>

               

                      <filter-mapping>

                          <filter-name>Seam Filter</filter-name>

                          <url-pattern>/*</url-pattern>

                      </filter-mapping>

               

               

                      <!-- facelets -->

                      <context-param>

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

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

                      </context-param>

               

                      <!-- JSF -->

                      <context-param>

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

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

                      </context-param>

               

                      <context-param>

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

                          <param-value>server</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>*.seam</url-pattern>

                      </servlet-mapping>

               

                      <!-- session duration...in minutes -->

                      <session-config>

                          <session-timeout>15</session-timeout>

                      </session-config>

               

                      <security-constraint>

                          <display-name>Restrict raw XHTML Documents</display-name>

                          <web-resource-collection>

                              <web-resource-name>XHTML</web-resource-name>

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

                          </web-resource-collection>

                          <auth-constraint>

                              <role-name>NONE</role-name>

                          </auth-constraint>

                      </security-constraint>

               

                      <welcome-file-list>

                          <welcome-file>index.jsp</welcome-file>

                      </welcome-file-list>

               

                  <ejb-ref>

                      <ejb-ref-name>ejb/Authentication</ejb-ref-name>

                      <ejb-ref-type>Session</ejb-ref-type>

                      <remote>com.ibi.ejb.authentication.Authentication</remote>

                  </ejb-ref>

               

                  <ejb-local-ref>

                      <ejb-ref-name>sales/GlobalVarBean/local</ejb-ref-name>

                      <ejb-ref-type>Session</ejb-ref-type>

                      <local>com.ibi.ejb.view.stateless.GlobalVar</local>

                      <ejb-link>GlobalVarBean</ejb-link>

                  </ejb-local-ref>

               

                  <ejb-local-ref>

                      <ejb-ref-name>sales/OutboundSsoBean/local

                      </ejb-ref-name>

                      <ejb-ref-type>Session</ejb-ref-type>

                      <local>com.ibi.ejb.web.OutboundSso</local>

                      <ejb-link>OutboundSsoBean</ejb-link>

                  </ejb-local-ref>

               

                  <ejb-local-ref>

                      <ejb-ref-name>sales/OrderManagerBean/local</ejb-ref-name>

                      <ejb-ref-type>Session</ejb-ref-type>

                      <local>com.ibi.ejb.order.OrderManager</local>

                      <ejb-link>OrderManagerBean</ejb-link>

                  </ejb-local-ref>

               

                  <ejb-local-ref>

                      <ejb-ref-name>sales/SalesManagerBean/local</ejb-ref-name>

                      <ejb-ref-type>Session</ejb-ref-type>

                      <local>com.ibi.ejb.view.stateful.SalesManager</local>

                      <ejb-link>SalesManagerBean</ejb-link>

                  </ejb-local-ref>

               

                  <ejb-local-ref>

                      <ejb-ref-name>sales/SiteManagerBean/local</ejb-ref-name>

                      <ejb-ref-type>Session</ejb-ref-type>

                      <local>com.ibi.ejb.site.SiteManager</local>

                      <ejb-link>SiteManagerBean</ejb-link>

                  </ejb-local-ref>

               

                  <ejb-local-ref>

                      <ejb-ref-name>sales/DomainManagerBean/local</ejb-ref-name>

                      <ejb-ref-type>Session</ejb-ref-type>

                      <local>com.ibi.ejb.domain.DomainManager</local>

                      <ejb-link>DomainManagerBean</ejb-link>

                  </ejb-local-ref>

               

                  <ejb-local-ref>

                      <ejb-ref-name>sales/PricingManagerBean/local</ejb-ref-name>

                      <ejb-ref-type>Session</ejb-ref-type>

                      <local>com.ibi.ejb.price.PricingManager</local>

                      <ejb-link>PricingManagerBean</ejb-link>

                  </ejb-local-ref>

               

                  <ejb-local-ref>

                      <ejb-ref-name>sales/EjbSynchronizations/local</ejb-ref-name>

                      <ejb-ref-type>Session</ejb-ref-type>

                      <local>

                          org.jboss.seam.transaction.LocalEjbSynchronizations

                      </local>

                      <ejb-link>EjbSynchronizations</ejb-link>

                  </ejb-local-ref>

               

               

              </web-app>

               

              template.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:h="http://java.sun.com/jsf/html"

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

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

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

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

               

                  <head>

                      <title>#{title}</title>

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

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

                  </head>

               

               

               

                  <body>

                      <h:form>   

                      <div style="min-width=810px">

                          <img src="./images/coresprite.gif" />

                          <ui:insert name="logoutButton">

                              <h:panelGrid cellpadding="0" cellspacing="0" columns="2"

                                  style="width:80px;vertical-align:middle;float:right;"

                                  rendered="#{empty callerUrl}">

                                  <s:link action="#{identity.logout}">

                                      <h:graphicImage style="border:0px;" value="./images/kdeicons/exit.png" />

                                  </s:link>

                                  <s:link styleClass="regularlink" action="#{identity.logout}"

                                                  value="Close" />

                              </h:panelGrid>

                              <h:panelGrid cellpadding="0" cellspacing="0" columns="2"

                                  style="width:80px;vertical-align:middle;float:right;"

                                  rendered="#{not empty callerUrl}">

                                  <s:link action="#{applicationManager.jumpToCallerWithoutResult}">

                                      <h:graphicImage style="border:0px;" value="./images/kdeicons/exit.png" />

                                  </s:link>

                                  <s:link styleClass="regularlink" action="#{applicationManager.jumpToCallerWithoutResult}"

                                                  value="Cancel" />

                              </h:panelGrid>

                          </ui:insert>

                      </div>

               

                      <div>

                          <ui:insert name="mainmenu">

                              <rich:toolBar >

                              <ui:insert name="additionalMenus" />           

                              </rich:toolBar>

                          </ui:insert>

                      </div>

               

                      <div class="mainbodyContainer">

                          <ui:insert name="mainbody">content</ui:insert>

                      </div>

                      </h:form>

               

                      <div class="modalPanels">

                          <ui:insert name="modalpanels">content</ui:insert>

                      </div>

               

                  </body>

              </html>

               

               

              mypage.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">

               

              <ui:composition

                  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:s="http://jboss.com/products/seam/taglib"

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

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

                  template="template.xhtml">

               

               

              <ui:define name="additionalMenus">

               

                  <rich:menuItem value="Create"  icon="images/New16.gif" submitMode="none">

                      <a4j:support event="onclick" immediate="true"   

                          action="#{orderManager.createOrder}"

                              reRender="addQuoteForm"

                              oncomplete="#{rich:component('addQuoteModal')}.show()"/>

                  </rich:menuItem> 

               

                  <rich:menuItem value="Open"  icon="images/Open16.gif" submitMode="none">

                      <a4j:support event="onclick" immediate="true"   

                          action="#{orderManager.openOrder}"/>

                  </rich:menuItem> 

               

                  <rich:menuItem submitMode="none" value="Delete"  icon="images/trash.png">

                       <a4j:support event="onclick" immediate="true"   

                          reRender="deleteQuoteModal"

                          oncomplete="#{rich:component('deleteQuoteModal')}.show()"/>

                  </rich:menuItem> 

               

                  <rich:dropDownMenu>

                      <f:facet name="label">

                          <h:panelGrid cellpadding="0" cellspacing="0" columns="2"

                              style="vertical-align:middle">

                              <h:graphicImage value="images/Print16.gif" />

                              <h:outputText value="Print"></h:outputText>

                          </h:panelGrid>

                      </f:facet>

                      <rich:menuItem submitMode="none" value="Selected">

                          <a4j:support event="onclick"

                              action="#{orderManager.setFocexec('quote')}"

                              oncomplete="openUrl();"/>

                      </rich:menuItem> 

                      <rich:menuItem submitMode="none" value="Comparison">

                          <a4j:support event="onclick"

                              action="#{orderManager.setFocexec('comparison')}"

                              oncomplete="openUrl();"/>

                          </rich:menuItem> 

                  </rich:dropDownMenu>

               

              </ui:define>

               

              <ui:define name="mainbody">

                      <rich:messages layout="list" ajaxRendered="true"

                          globalOnly="true"

                          infoClass="infoMessage" warnClass="errorMessage"

                          errorClass="errorMessage" fatalClass="errorMessage" />

               

                      <a4j:jsFunction name="openUrl" data="#{orderManager.reportUrl}" 

                             oncomplete="window.open.apply(null, data)">

                          </a4j:jsFunction>

               

                      <h:panelGrid columns="2" width="500px">

                          <h:panelGrid columns="1" width="120px">

                              <h:outputText value="Selected quote:"/>

                          </h:panelGrid>   

                          <h:panelGrid id="selectedOrder" columns="1" width="700px">

                              <h:outputText value="#{currentOrder.selectionText}" style="font-weight:bold" rendered="#{currentOrder != null}"/>

                                <h:outputText value="None" style="font-weight:bold" rendered="#{currentOrder == null}"/>

                           </h:panelGrid>   

                       </h:panelGrid>   

               

                      <rich:spacer style='display:block' height="5"/>

               

                        <a4j:region>

                          <rich:extendedDataTable id="quoteQueue" var="order"

                              value="#{orderManager.orderTable.dataModel}"

                               width="750px" height="600px"

                               sortMode="#{orderManager.orderTable.sortMode}"

                               selection="#{orderManager.orderTable.selection}">

               

                              <rich:column id="company" width="300px" style="text-align:left" sortable="true" sortBy="#{order.customerCompany.compName}">

                                  <f:facet name="header">

                                      <h:outputText value="Company" />

                                      </f:facet>

                                  <h:outputText value="#{order.customerCompany.compName}"></h:outputText>

                                  </rich:column>

               

                              <rich:column width="90px" style="text-align:left">

                                  <f:facet name="header">

                                      <h:outputText value="Created" />

                                      </f:facet>

                                  <h:outputText value="#{order.createDate}"><f:convertDateTime dateStyle="full" type="date" pattern="yyyy.MM.dd"/>    </h:outputText>

                                  </rich:column>

               

                              <rich:column width="200px" style="text-align:left">

                                  <f:facet name="header">

                                      <h:outputText value="Description" />

                                      </f:facet>

                                  <h:outputText value="#{order.description}"></h:outputText>

                                  </rich:column>

               

                              <rich:column width="100px" style="text-align:left">

                                  <f:facet name="header">

                                      <h:outputText value="Quote Status" />

                                      </f:facet>

                                  <h:outputText value="#{order.approvalStatus}"></h:outputText>

                                  </rich:column>

               

                              <rich:column width="80px" style="text-align:left">

                                  <f:facet name="header">

                                      <h:outputText value="Opp ID" />

                                      </f:facet>

                                  <h:outputText value="#{order.opportunityId}"></h:outputText>

                                  </rich:column>

               

                               <a4j:support reRender="selectedOrder"

                                   event="onselectionchange"

                                  action="#{orderManager.selectOrder}">

                                  </a4j:support>

               

                           </rich:extendedDataTable>

               

                      </a4j:region>

               

              </ui:define>

               

              <ui:define name="modalpanels">

                  <rich:modalPanel id="addQuoteModal" autosized="true">

                      <f:facet name="header">

                          <h:outputText value="Create Quote" style="padding-right:15px;" />

                      </f:facet>

                      <f:facet name="controls">

                          <h:panelGroup>

                              <h:graphicImage value="/images/kdeicons/cancel.png" styleClass="hidelink" id="closeAddQuoteModal" />

                              <rich:componentControl for="addQuoteModal" attachTo="closeAddQuoteModal" operation="hide" event="onclick" />

                          </h:panelGroup>

                      </f:facet>

                      <ui:include src="addQuoteForm.xhtml" />

                  </rich:modalPanel>   

               

               

                   <rich:modalPanel id="deleteQuoteModal" autosized="true">

                      <f:facet name="header">

                          <h:outputText value="Delete this quote?"

                              style="padding-right:15px;" />

                      </f:facet>

                      <f:facet name="controls">

                          <h:panelGroup>

                              <h:graphicImage value="/images/modal/close.png"

                                  styleClass="hidelink" id="closeDeleteQuoteModal" />

                              <rich:componentControl for="deleteQuoteModal" attachTo="hidelink2"

                                  operation="hide" event="onclick" />

                          </h:panelGroup>

                      </f:facet>

                       <h:form>

               

                          <h:panelGrid columns="1" width="500px" rendered="#{currentOrder != null}">

                              <h:outputText value="#{currentOrder.selectionText}" style="font-weight:bold"/>

                           </h:panelGrid>

               

                          <h:panelGrid columns="2">

                              <a4j:commandButton image="/images/ok.gif"

                                          ajaxSingle="true" action="#{orderManager.delete}"

                                          oncomplete="#{rich:component('deleteQuoteModal')}.hide();"

                                          reRender="selectedOrder,quoteQueue" />

                              <a4j:commandButton image="/images/cancel.gif"

                                          onclick="#{rich:component('deleteQuoteModal')}.hide();return false;" />       

                          </h:panelGrid>          

               

                  </h:form>

                   </rich:modalPanel>               

               

              </ui:define>

               

              </ui:composition>

              • 4. ExtendedDataTable doesn't respect skin?
                Rocky S Master

                your code is alright.

                 

                I confirm it is a issue, soon i will let you know workaround, this even does not works here too-

                 

                Richfaces v.3.3.3.Final     SVN $Revision: 16741

                 

                http://livedemo.exadel.com/richfaces-demo/richfaces/extendedDataTable.jsf?c=extendedDataTable&tab=usage

                 

                 

                it has been fixed in version RIchfaces v.4.0.0-SNAPSHOT SVN r.22014

                • 5. Re: ExtendedDataTable doesn't respect skin?
                  Ilya Shaikovsky Master

                  actually it's a bug.. I found our that this table does not provides the bg-image and only maps the header to additionalBackgroundColor(of skin) instead of headerBackgroudColor.

                   

                  so to solve the problem you need

                  http://livedemo.exadel.com/richfaces-demo/richfaces/style.jsf - create ecss as shown there, put to classpath and load using loadstyle

                  in the css define the  .extdt-subheader css class using:

                  <u:selector name=".extdt-subheader" >

                  <u:style name="background-color" skin="headerBackgroundColor"/> <!--headerBackgroundColor-->

                            <u:style name="background-image" > <!--from headerGradientColor to headerBackgroundColor-->

                                <f:resource f:key="org.richfaces.renderkit.html.GradientA"/>

                            </u:style>

                            <u:style name="background-position" value="top left"/>

                            <u:style name="background-repeat" value="repeat-x"/>

                  </u:selector>

                  • 6. Re: ExtendedDataTable doesn't respect skin?
                    ibstmt Newbie

                    Some progress... I reformatted the .xcss file using the demo as a model. I no longer get a parsing exception. However, there's no effect: the table still looks the same.

                     

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

                    <f:template xmlns:f='http:/jsf.exadel.com/template'

                       xmlns:u='http:/jsf.exadel.com/template/util'

                       xmlns="http://www.w3.org/1999/xhtml" >

                     

                    <f:verbatim><![CDATA[

                    .extdt-subheader {

                        background-position : top left;

                        background-repeat : repeat-x;    

                    }

                    ]]></f:verbatim>

                    <u:selector name=".extdt-subheader">

                        <u:style name="background-color" skin="headerBackgroundColor"/> <!--headerBackgroundColor-->

                        <u:style name="background-image" > <!--from headerGradientColor to headerBackgroundColor-->

                            <f:resource f:key="org.richfaces.renderkit.html.GradientA"/>

                        </u:style>

                        <u:style name="background-position" value="top left"/>

                        <u:style name="background-repeat" value="repeat-x"/>

                    </u:selector>

                    </f:template>