7 Replies Latest reply on Mar 24, 2009 11:25 AM by zmarrapese

    skin: loading blueSky instead of classic in IE

    zmarrapese
    zmarrapese Mar 19, 2009 5:26 PM

      I'm having a skinning issue with a fairly large application. When I load it up in IE, it doesn't load the correct skin. It loads blueSky instead of classic, which is the one I selected in my web.xml file. My application includes my ui:include elements, all in there own tabs (if this makes a difference).

      When I load the application in firefox, the buttons and what-not skin correctly.

      I notice that the IE never actually stops loading the page. It just sits there forever trying to load resources, etc.

      Any recommendations?

      Thanks,
      ~Zack

      • 945 Views
      • Tags:
        • 1. Re: skin: loading blueSky instead of classic in IE
          zmarrapese
          zmarrapese Mar 19, 2009 5:32 PM (in response to zmarrapese)

          Update: I forgot to mention. These tabs are loaded dynamically, and the holdup only seems to happen when there are tabs which have been loaded into the page before the page loads. If there are no tabs (which contain most of the content), then the skin gets loaded just fine.

            • Actions
          • 2. Re: skin: loading blueSky instead of classic in IE
            zmarrapese
            zmarrapese Mar 20, 2009 1:19 PM (in response to zmarrapese)

            Any help on this?

            Thanks,
            ~Zack

              • Actions
            • 3. Re: skin: loading blueSky instead of classic in IE
              zmarrapese
              zmarrapese Mar 23, 2009 1:19 PM (in response to zmarrapese)

              Still haven't gotten a response on this. Has this happened to anyone else?

                • Actions
              • 4. Re: skin: loading blueSky instead of classic in IE
                nbelaevski
                nbelaevski Mar 23, 2009 1:49 PM (in response to zmarrapese)

                Please post this information:

                1. Exact RF version
                2. IE version
                3. Page code to reproduce the problem

                  • Actions
                • 5. Re: skin: loading blueSky instead of classic in IE
                  zmarrapese
                  zmarrapese Mar 23, 2009 1:59 PM (in response to zmarrapese)

                  I'm using the newest version of richFaces (3.3?), and this is happening in IE7.

                  Note: the main part of the page below is within the a4j:include files. This is my index.xhtml, which has no problems until more tabs are added to the list of tabs.

                  I don't use the actual rich:tabPanel, because there is no option for vertical tabs. Instead, I create my own using CSS and a simple a4j:support call.

                  <!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:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich"
 xmlns:tp="http://www.sd.com/jsf/title-processor"
 xmlns:sd="http://www.sd.com/jsf/sd-web-utils">

<head>
 <a4j:loadStyle src="/css/index.css"></a4j:loadStyle>
 <a4j:loadStyle src="/css/servicesTab.css"></a4j:loadStyle>
 <a4j:loadScript src="/js/jquery.corner.js"></a4j:loadScript>
</head>
<body>
<a4j:form id="titleProcessorMainForm">

<a4j:keepAlive beanName="infoManagerBean" />
<a4j:keepAlive beanName="serviceTabManagerBean" />
<a4j:keepAlive beanName="holdItemBean" />

<a4j:jsFunction name="updateTabPanel" reRender="tabbedPanelsHolder">
 <a4j:actionparam name="serviceID" assignTo="#{serviceTabManagerBean.selectedServiceTab}" />
</a4j:jsFunction>

<sd:messages />

<div class="content">
<div class="contentTitle">Title Processor</div>
<div class="contentInner">
 <h:panelGroup id="titleProcessorMainHolder" rendered="#{infoManagerBean.validRequest}">
 <h:panelGroup id="informationHolder">

 <div class="subHeader">Information</div>

 <h:panelGrid columns="2" columnClasses="infoLabel, infoValue" >
 <h:outputText value="Status: " />
 <h:outputText value="#{infoManagerBean.status}" />
 <h:outputText value="Customer: " />
 <h:outputText value="#{infoManagerBean.customer}" />
 <h:outputText value="Title Number: " />
 <h:outputText value="#{infoManagerBean.titleNumber}" />
 <h:outputText value="SDA: " />
 <h:outputText value="#{infoManagerBean.SDA}" />
 <h:outputText value="Claim Number: " />
 <h:outputText value="#{infoManagerBean.claimNumber}" />
 <h:outputText value="Vehicle: " />
 <h:outputText value="#{infoManagerBean.vehicleInfo}" />
 <h:outputText value="Hold Items: " />
 <a4j:commandLink onclick="#{rich:component('holdItemPanel')}.show();"> #{infoManagerBean.holdCount}</a4j:commandLink>
 <h:outputText value="Returnables: " />
 <a4j:commandLink>
 <h:outputText value="#{infoManagerBean.returnablesCount}" />
 </a4j:commandLink>

 <h:outputLabel id="titleProcessorLabel" for="titleProcessorField">Title Processor: </h:outputLabel>
 <h:selectOneMenu id="titleProcessorField" value="#{infoManagerBean.titleProcessorID}">
 <a4j:support event="onchange" eventsQueue="titleProcessorChange"
 requestDelay="500" actionListener="#{infoManagerBean.storeTitleProcessor}"
 reRender="servicesHolder"/>
 <f:selectItems value="#{infoManagerBean.titleProcessorList}" />
 </h:selectOneMenu>
 </h:panelGrid>

 </h:panelGroup>

 <hr />

 <div class="subHeader">Services</div>

 <h:panelGroup id="servicesHolder">
 <h:panelGroup rendered="#{infoManagerBean.titleProcessorID == infoManagerBean.defaultListIndex}">
 In order to start creating services, select the responsible title processor.
 </h:panelGroup>

 <h:panelGrid columns="2" rendered="#{infoManagerBean.titleProcessorID != infoManagerBean.defaultListIndex}"
 styleClass="addServiceHolder">
 <h:selectOneMenu id="serviceList" value="#{serviceTabManagerBean.selectedServiceListItem}">
 <f:selectItems value="#{serviceTabManagerBean.serviceList}" />
 </h:selectOneMenu>
 <a4j:commandButton id="addServiceBtn" actionListener="#{serviceTabManagerBean.addServiceTab}" value="Add Service"
 reRender="serviceList,tabbedPanelsHolder" styleClass="rich-button"
 onclick="this.disabled=true;" oncomplete="this.disabled=false;" >
 <f:param name="requestID" value="#{infoManagerBean.requestGUID.asString}" />
 </a4j:commandButton>
 </h:panelGrid>

 <h:panelGroup id="tabbedPanelsHolder" rendered="#{infoManagerBean.titleProcessorID != infoManagerBean.defaultListIndex}"
 styleClass="tabbedPanelsHolder">

 <div class="serviceTabPanelsHolder #{(serviceTabManagerBean.selectedServiceTabNew) ? 'newTabPanel' : 'dbTabPanel'}">
 <h:panelGroup rendered="#{serviceTabManagerBean.selectedServiceTab eq null}">
 <div style="height: 500px;">
 There are currently no services for this request.
 </div>
 </h:panelGroup>
 <h:panelGroup rendered="#{serviceTabManagerBean.selectedServiceTab eq serviceTypesBean.verifyVehicleID}">
 <a4j:include ajaxRendered="false" viewId="/services/vehicleVerification.xhtml" />
 </h:panelGroup>
 <h:panelGroup rendered="#{serviceTabManagerBean.selectedServiceTab eq serviceTypesBean.receiveProcessedTitleID}">
 <a4j:include ajaxRendered="false" viewId="/services/certReceived.xhtml" />
 </h:panelGroup>
 <h:panelGroup rendered="#{serviceTabManagerBean.selectedServiceTab eq serviceTypesBean.applyForTitleID}">
 <a4j:include ajaxRendered="false" viewId="/services/applyForTitle.xhtml" />
 </h:panelGroup>
 <h:panelGroup rendered="#{serviceTabManagerBean.selectedServiceTab eq serviceTypesBean.verifyBrandsID}">
 <a4j:include ajaxRendered="false" viewId="/services/brandsSet.xhtml" />
 </h:panelGroup>
 <h:panelGroup rendered="#{serviceTabManagerBean.selectedServiceTab eq serviceTypesBean.verifyClaimID}">
 <a4j:include ajaxRendered="false" viewId="/services/claimVerification.xhtml" />
 </h:panelGroup>
 <h:panelGroup rendered="#{serviceTabManagerBean.selectedServiceTab eq serviceTypesBean.verifyOriginalTitleID}">
 <a4j:include ajaxRendered="false" viewId="/services/verifyOriginalTitle.xhtml" />
 </h:panelGroup>
 <h:panelGroup rendered="#{serviceTabManagerBean.selectedServiceTab eq serviceTypesBean.verifyExecRightsID}">
 <a4j:include ajaxRendered="false" viewId="/services/verifyExecRights.xhtml" />
 </h:panelGroup>
 <h:panelGroup rendered="#{serviceTabManagerBean.selectedServiceTab eq serviceTypesBean.verifyTitleProcessedID}">
 <a4j:include ajaxRendered="false" viewId="/services/verifyTitleProcessed.xhtml" />
 </h:panelGroup>
 </div>

 <div class="serviceTabsHolder">
 <a4j:repeat value="#{serviceTabManagerBean.serviceTabs}" var="serviceTab">
 <div class="#{(serviceTab.GUID == null) ? 'newTab' : 'dbTab'} serviceTab rounded
 #{(serviceTabManagerBean.selectedServiceTab eq serviceTab.serviceType.GUID) ? 'selectedTab' : 'unselectedTab'}">
 <table>
 <tr>
 <td>
 <a4j:commandLink actionListener="#{serviceTabManagerBean.removeServiceTab}"
 reRender="servicesHolder">
 <f:param name="serviceTypeID" value="#{serviceTab.serviceType.GUID.asString}" />
 <h:graphicImage style="border: 0px;" value="/img/delete24S.png" />
 </a4j:commandLink>
 </td>
 <td style="padding:5px; cursor: pointer;" onclick="updateTabPanel('#{serviceTab.serviceType.GUID}')">
 #{serviceTab.serviceType.name}
 </td>
 </tr>
 </table>
 </div>
 </a4j:repeat>

 </div>

 <div style="clear: both;"></div>
 </h:panelGroup>
 </h:panelGroup>
 </h:panelGroup>
 <h:panelGroup id="titleProcessorBadRequestHolder" rendered="#{not infoManagerBean.validRequest}">
 Invalid request ID given. Please do not access this page directly.
 </h:panelGroup>
</div>
</div>
<rich:jQuery selector=".contentInner" query="corner('bottom 18px').parent().css('padding', '5px').corner('20px')"></rich:jQuery>

</a4j:form>


<rich:modalPanel id="holdItemPanel" styleClass="holdItemPanel" autosized="true" width="300">
 <f:facet name="header">
 <h:panelGroup>
 <h:outputText style="float: left;" value="Hold Items" />
 <div style="closeWindow" onclick="#{rich:component('holdItemPanel')}.hide();">
 <h:graphicImage value="img/close_X_white.png" />
 </div>
 </h:panelGroup>
 </f:facet>
 <a4j:form>

 <h:outputLabel for="holdItemList">Hold Items:</h:outputLabel>
 <br />
 <h:selectOneMenu id="holdItemList" value="#{holdItemBean.selectedHoldItem}">
 <f:selectItems value="#{holdItemBean.holdItemList}" />
 </h:selectOneMenu>
 <br />
 <a4j:commandButton id="createHoldBtn" value="Create Hold"
 actionListener="#{holdItemBean.createHold}"/>

 <rich:dataTable id="holdItemsTable" value="#{holdItemBean.requestHolds}"
 var="requestHold">

 <rich:column>
 <f:facet name="header"> </f:facet>
 <a4j:commandLink>
 <h:graphicImage value="img/delete24S.png" style="border: 0px;" />
 </a4j:commandLink>
 </rich:column>

 <rich:column>
 <f:facet name="header">Hold Type</f:facet>
 <h:outputText value="#{requestHold.requestHoldType.name}">
 <f:convertDateTime pattern="MM/dd/yy" />
 </h:outputText>
 </rich:column>

 <rich:column>
 <f:facet name="header">Created Date</f:facet>
 <h:outputText value="#{requestHold.createdDate}" >
 <f:convertDateTime pattern="MM/dd/yy" />
 </h:outputText>
 </rich:column>

 <rich:column>
 <f:facet name="header">Clear</f:facet>
 <h:outputText rendered="#{requestHold.clearedDate != null}" value="#{requestHold.clearedDate}" >
 <f:convertDateTime pattern="MM/dd/yy" />
 </h:outputText>
 <h:selectBooleanCheckbox rendered="#{requestHold.clearedDate == null}" />
 </rich:column>

 </rich:dataTable>

 </a4j:form>
</rich:modalPanel>

</body>
</html>


                    • Actions
                  • 6. Re: skin: loading blueSky instead of classic in IE
                    ilya_shaikovsky
                    ilya_shaikovsky Mar 24, 2009 6:13 AM (in response to zmarrapese)

                    please also show your web.xml and inform about any third parties if used.

                      • Actions
                    • 7. Re: skin: loading blueSky instead of classic in IE
                      zmarrapese
                      zmarrapese Mar 24, 2009 11:25 AM (in response to zmarrapese)

                      I'm using facelets.

                      Also, I'm using some jQuery plug-ins, modified to work with your jquery plug-in -- changed instances of $() to jQuery() -- and that works correctly...these plug-ins are jCarousel, and galleria, and corner.

                      The custom tag library simply contains a wrapper for rich:messages, which handles styling, and presentation of different error/notification messages. This has been tested in many previous applications, albeit none this large.

                      I'm deploying to GlassFish v2 and Eclipse is my IDE, although that's probably irrelevant.

                      Here is my web.xml:

                      <?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
 <display-name>title-processor</display-name>
 <welcome-file-list>
 <welcome-file>index.html</welcome-file>
 <welcome-file>index.htm</welcome-file>
 <welcome-file>index.jsp</welcome-file>
 <welcome-file>default.html</welcome-file>
 <welcome-file>default.htm</welcome-file>
 <welcome-file>default.jsp</welcome-file>
 </welcome-file-list>
 <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>*.xhtml</url-pattern>
 </servlet-mapping>
 <context-param>
 <param-name>facelets.LIBRARIES</param-name>
 <param-value>
 /WEB-INF/title-processor.taglib.xml
 </param-value>
 </context-param>
 <context-param>
 <param-name>javax.faces.DEFAULT_SUFFIX</param-name>
 <param-value>.xhtml</param-value>
 </context-param>
 <context-param>
 <param-name>facelets.DEVELOPMENT</param-name>
 <param-value>true</param-value>
 </context-param>
 <context-param>
 <param-name>org.richfaces.SKIN</param-name>
 <param-value>classic</param-value>
 </context-param>
 <context-param>
 <param-name>org.richfaces.CONTROL_SKINNING</param-name>
 <param-value>enable</param-value>
 </context-param>

 <filter>
 <display-name>RichFaces Filter</display-name>
 <filter-name>richfaces</filter-name>
 <filter-class>org.ajax4jsf.Filter</filter-class>
 </filter>
 <filter-mapping>
 <filter-name>richfaces</filter-name>
 <servlet-name>Faces Servlet</servlet-name>
 <dispatcher>REQUEST</dispatcher>
 <dispatcher>FORWARD</dispatcher>
 <dispatcher>INCLUDE</dispatcher>
 </filter-mapping>
 <servlet>
 <description></description>
 <display-name>TitleApplicationViewer</display-name>
 <servlet-name>TitleApplicationViewer</servlet-name>
 <servlet-class>com.salvagedirect.web.services.TitleApplicationViewer</servlet-class>
 </servlet>
 <servlet-mapping>
 <servlet-name>TitleApplicationViewer</servlet-name>
 <url-pattern>/TitleApplicationViewer</url-pattern>
 </servlet-mapping>
</web-app>


                      Thanks in advance,
                      ~Zack

                        • Actions