7 Replies Latest reply on Nov 13, 2008 8:01 AM by mvitenkov

    Blinking Shadow for ModalPanel

    pbaker01

      Using Richfaces 3.3.0 SNAPSHOT 2008-11-08

      I have an odd problem where the shadow around a modalPanel blinks (or alternates btwn shadow and no shadow). To make matters worse, this happen only sporadically. (I did say odd problem)...

      Below are two images that show the modalPanel with and without a shadow. The speed of blinking or alternating btwn shadow and non-shadow varies.

      With Shadow right and lower edge of modalPanel
      http://picbite.com/image/6999cnsab/

      Without Shadow right and lower edge of modalPanel
      http://picbite.com/image/6998dtmzg/

      What could be causing this strange blinking of the shadow?

      I tried setting the style="text-decoration:none", I did not think that this would do anything (and it didn't).

      <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:rich="http://richfaces.ajax4jsf.org/rich"
       xmlns:a4j="http://richfaces.org/a4j"
       xmlns:c="http://java.sun.com/jstl/core"
       xmlns:f="http://java.sun.com/jsf/core" xml:lang="en" lang="en">
      
       <rich:modalPanel id="#{id}" autosized="true"
       style="text-decoration:none"
       onshow="setText(this, event.parameters.text, event.parameters.docId)">
       <f:facet name="header">
       <h:outputText value="#{title}" />
       </f:facet>
       <f:facet name="controls">
       <span style="cursor: pointer"
       onclick="javascript:Richfaces.hideModalPanel('#{id}')">X</span>
       </f:facet>
      
       <a4j:form>
       <h:panelGrid columns="2" border="0" columnClasses="CtaRvaM, CtaLvaM">
       <h:outputLabel for="text" value="#{textLbl}:" styleClass="LblNormal" />
       <h:inputTextarea id="text" value="#{controllerObj[textAttr]}"
       rows="10" cols="40" />
       </h:panelGrid>
       <center>
       <h:panelGrid columns="2" border="0" cellpadding="10">
       <a4j:commandButton id="upd" value="Apply" reRender="#{rerender}"
       action="#{controllerObj[updAction]}">
       </a4j:commandButton>
      
       <a4j:commandButton id="cnl" value="Cancel" immediate="true"
       onclick="javascript:Richfaces.hideModalPanel('#{id}')"
       limitToList="true" />
       </h:panelGrid>
       </center>
       <h:inputHidden id="modalError" value="#{controllerObj['modalError']}" />
       <h:inputHidden id="docId" value="#{controllerObj['docId']}" />
      
       </a4j:form>
       </rich:modalPanel>
      </html>


      Thanks in advance!!!



        • 1. Re: Blinking Shadow for ModalPanel
          nbelaevski

          Hello,

          Can you please tell in what browser the problem is reproduced?

          • 2. Re: Blinking Shadow for ModalPanel
            pbaker01

            Browser is IE7.

            • 3. Re: Blinking Shadow for ModalPanel
              tkuprevich

              Hi,

              I have just tried in two configurations for 3.2.2.GA:
              1) JBoss 4.2; JSF Sun RI 1.2; facelets; IE7
              2) tomcat 6; myfaces 1.2.4; JSP; IE7

              - and it looks fine for me.

              Could you please describe your environment?

              Best Regards,
              Tsikhon Kuprevich

              • 4. Re: Blinking Shadow for ModalPanel
                pbaker01

                HI Tsikhon, Thank-you for looking into this.

                My configuration is the same as your "1" except that I am using Richfaces 3.3.0 SNAPSHOT 2008-11-08.

                I have several strange problems that may be all related.
                The other odd one is that the MenuBar become disabled after a few server hops. It could be 1 hop or 100 hops. But after awhile the menuBar stops functioning. It is as if the associated javascript became unloaded.

                Here is an image that illustraites the problem:
                http://picbite.com/image/7233iapia/

                Here are a few files that may help.

                Please let me know if you see anything odd. Is it possible that the javascript is getting droped for the MenuBar component during the rerendering of the content section?

                layoyut/layout.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:ui="http://java.sun.com/jsf/facelets">
                 <head>
                 <title><ui:insert name="title">SITA - AHM565</ui:insert>
                 </title>
                 <link rel="stylesheet" type="text/css"
                 href="#{facesContext.externalContext.requestContextPath}/css/browser/ahm565.css" />
                 </head>
                
                 <body>
                
                 <div id="header" >
                 <ui:insert name="header" />
                 </div>
                
                 <div id="menu" >
                 <ui:insert name="menu" />
                 </div>
                
                 <div id="content" >
                 <ui:insert name="content" />
                 </div>
                
                 </body>
                
                </html>


                Page to Load:
                <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:rich="http://richfaces.ajax4jsf.org/rich"
                 xmlns:c="http://java.sun.com/jstl/core"
                 xmlns:f="http://java.sun.com/jsf/core" xml:lang="en" lang="en">
                
                 <ui:composition template="#{ahm565State.layout}">
                
                 <ui:define name="header">
                 <ui:include src="/topMenuBar.xhtml" />
                 </ui:define>
                
                 <ui:define name="menu">
                 <ui:include src="/leftMenu.xhtml" />
                 </ui:define>
                
                 <ui:define name="content">
                 <ui:include src="/content.xhtml" />
                 </ui:define>
                
                 </ui:composition>
                </html>
                


                topMenuBar.xhtml
                <html xmlns="http://www.w3.org/1999/xhtml"
                 xmlns:ui="http://java.sun.com/jsf/facelets"
                 xmlns:rich="http://richfaces.ajax4jsf.org/rich"
                 xmlns:h="http://java.sun.com/jsf/html"
                 xmlns:a4j="http://richfaces.org/a4j"
                 xmlns:f="http://java.sun.com/jsf/core" xml:lang="en" lang="en">
                
                 <style>
                 </style>
                 <h:form>
                 <rich:panel styleClass="pnlNoPadding" style="border:0">
                 <h:panelGrid border="0" columns="1" style="width: 100%">
                 <rich:toolBar>
                 <rich:dropDownMenu submitMode="ajax" value="File">
                
                 <rich:menuItem value="New" submitMode="server"
                 action="#{acTypeController.newAcTypeDsp}" />
                 <rich:menuItem value="Open" submitMode="server"
                 action="#{acTypeController.openAcTypeDsp}" />
                 <rich:menuItem value="Close" submitMode="server"
                 action="#{acTypeController.closeAcTypeDsp}" />
                 <rich:menuSeparator id="menuSeparator11" />
                 <rich:menuItem value="Exit" submitMode="server" />
                
                 </rich:dropDownMenu>
                
                 <rich:dropDownMenu submitMode="ajax" value="View">
                 <rich:menuItem value="#{ahm565State.toggleLabel}"
                 action="#{ahm565State.toggleMenu}" submitMode="server" />
                 <rich:menuItem value="Airlines" />
                 <rich:menuItem value="Aircraft" />
                 <rich:menuItem value="Flight Schedules" />
                 <rich:menuItem value="Flight Dispatch" />
                 </rich:dropDownMenu>
                
                 </rich:toolBar>
                 </h:panelGrid>
                 </rich:panel>
                 </h:form>
                
                </html>
                


                content.xhtml
                <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:rich="http://richfaces.ajax4jsf.org/rich"
                 xmlns:a4j="http://richfaces.org/a4j"
                 xmlns:c="http://java.sun.com/jstl/core"
                 xmlns:f="http://java.sun.com/jsf/core" xml:lang="en" lang="en">
                
                 <rich:panel id="contentPage">
                 <c:if test="#{ahm565State.selectionPage == 'alnSupplierPage'}">
                 <a4j:include viewId="/contentPage/alnSupplierPage.xhtml" />
                 </c:if>
                
                 <c:if test="#{ahm565State.selectionPage == 'alnCarrierPage'}">
                 <a4j:include viewId="/contentPage/alnCarrierPage.xhtml" />
                ...
                ...
                ...
                 </rich:panel>
                </html>


                Example Content Body:

                <!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:rich="http://richfaces.ajax4jsf.org/rich"
                 xmlns:a4j="http://richfaces.org/a4j"
                 xmlns:c="http://java.sun.com/jstl/core"
                 xmlns:f="http://java.sun.com/jsf/core" xml:lang="en" lang="en">
                
                 <body>
                 <center>
                 <h:outputLabel value="List of Revisions" styleClass="TitleNormal" />
                 </center>
                
                 <ui:include src="/messages.xhtml" />
                
                 <a4j:keepAlive beanName="docRevisionController" />
                 <a4j:loadScript src="js/alnRevisionsPage.js?version=1" />
                 <a4j:loadScript src="js/Focus.js?version=3" />
                
                 <a4j:form id="revisionForm">
                 <center>
                 <h:panelGrid columns="1">
                 <h:panelGroup>
                 <rich:spacer height="5" />
                 <rich:extendedDataTable id="revision"
                 value="#{docRevisionController.value}" var="item" rowKeyVar="idx"
                 selectionMode="single" width="740px" height="450px"
                 cellpadding="0" cellspacing="0">
                 <rich:column id="selected" sortable="false" width="30px"
                 label="Select">
                 <f:facet name="header">
                 <h:outputText value="Sel" />
                 </f:facet>
                 <h:selectBooleanCheckbox value="#{item.selected}">
                 </h:selectBooleanCheckbox>
                 </rich:column>
                
                 <rich:column id="docIssueNum" sortable="true"
                 headerClass="CHfw80" sortBy="#{item.docIssueNum}"
                 filterBy="#{item.docIssueNum}" filterEvent="onkeyup"
                 width="100px" label="Issue Number">
                 <f:facet name="header">
                 <h:outputText>Issue<br />Number</h:outputText>
                 </f:facet>
                 <h:inputText value="#{item.docIssueNum}" styleClass="InpNormal"
                 size="12" >
                 <f:validator validatorId="issueNumberValidator"/>
                 </h:inputText>
                 </rich:column>
                
                 <rich:column id="revisionNum" sortable="true"
                 headerClass="CHfw80" sortBy="#{item.revisionNum}"
                 filterBy="#{item.revisionNum}" filterEvent="onkeyup"
                 width="100px" label="Revision Number">
                 <f:facet name="header">
                 <h:outputText>Revision<br />Number</h:outputText>
                 </f:facet>
                 <h:inputText value="#{item.revisionNum}" styleClass="InpNormal"
                 size="12" />
                 </rich:column>
                
                 <rich:column id="releaseDate" sortable="true"
                 headerClass="CHfw80" sortBy="#{item.releaseDate}"
                 filterBy="#{item.releaseDate}" filterEvent="onkeyup"
                 width="100px" label="Release Date">
                 <f:facet name="header">
                 <h:outputText>Release<br />Date</h:outputText>
                 </f:facet>
                 <h:inputText value="#{item.releaseDate}" styleClass="InpNormal"
                 size="12">
                 <f:convertDateTime pattern="yyyy-MM-dd" />
                 </h:inputText>
                 </rich:column>
                
                 <rich:column id="completedBy" sortable="true"
                 headerClass="CHfw80" sortBy="#{item.completedBy}"
                 filterBy="#{item.completedBy}" filterEvent="onkeyup"
                 width="100px" label="Compled By">
                 <f:facet name="header">
                 <h:outputText>Completed<br />By</h:outputText>
                 </f:facet>
                 <h:inputText value="#{item.completedBy}" styleClass="InpNormal"
                 size="12" />
                 </rich:column>
                
                 <rich:column id="reason" width="70px" label="Reason">
                 <f:facet name="header">
                 <h:outputText value="Reason" />
                 </f:facet>
                 <rich:panel id="updReason" styleClass="PNLp0bI"
                 ondblclick="showdisp('reasonModal','#{item.reasonEscapeFormatted}','#{item.id}');">
                 <h:outputText value="#{(not empty item.reason) ? 'update' : 'create'}" styleClass="LnkNormal" />
                 <rich:toolTip styleClass="ToolTipSty"
                 showDelay="1000" disabled="#{item.reasonToolTipDisabled}" zorder="1000">
                 <h:outputText value="#{item.reasonHtmlFormatted}"
                 escape="false" />
                 </rich:toolTip>
                 </rich:panel>
                 </rich:column>
                
                 <rich:column id="changesOverview" width="70px"
                 label="Changes Overview">
                 <f:facet name="header">
                 <h:outputText value="Changes Overview" />
                 </f:facet>
                 <rich:panel id="updOverview" styleClass="PNLp0bI"
                 ondblclick="showdisp('changesModal','#{item.overviewEscapeFormatted}','#{item.id}');">
                 <h:outputText value="#{(not empty item.changesOverview) ? 'update' : 'create'}" styleClass="LnkNormal" />
                 <rich:toolTip styleClass="ToolTipSty"
                 disabled="#{item.reasonToolTipDisabled}" showDelay="1000" zorder="1000">
                 <h:outputText value="#{item.overviewHtmlFormatted}"
                 escape="false" />
                 </rich:toolTip>
                 </rich:panel>
                
                 </rich:column>
                 </rich:extendedDataTable>
                 <h:panelGrid columns="1" width="740px" style="text-align: right">
                 <h:panelGrid columns="3"
                 columnClasses="CtaLw50P, CtaRw50P,CtaLw50P" width="740px">
                 <h:commandButton id="delete" value="Delete Selected"
                 action="#{docRevisionController.deleteSelected}"
                 styleClass="BtnSmall" />
                 <h:outputText value="Blank Lines:" styleClass="LblNormal" />
                 <rich:inputNumberSpinner inputSize="2" enableManualInput="false"
                 value="#{docRevisionController.blankLines}">
                 <a4j:support requestDelay="500" ignoreDupResponses="true"
                 actionListener="#{docRevisionController.updBlankLines}"
                 event="onchange" reRender="revision" />
                 </rich:inputNumberSpinner>
                 </h:panelGrid>
                 </h:panelGrid>
                 <rich:spacer height="5" />
                 <center>
                 <a4j:commandButton value="Update" reRender="contentPage"
                 action="#{docRevisionController.updateAcType}" />
                 </center>
                 </h:panelGroup>
                 </h:panelGrid>
                 </center>
                 </a4j:form>
                
                 <ui:include src="/textModalPanel.xhtml">
                 <ui:param name="id" value="reasonModal"></ui:param>
                 <ui:param name="rerender" value="revision"></ui:param>
                 <ui:param name="title" value="Reason"></ui:param>
                 <ui:param name="textLbl" value="Reason"></ui:param>
                 <ui:param name="controllerObj" value="#{docRevisionController}"></ui:param>
                 <ui:param name="textAttr" value="reason"></ui:param>
                 <ui:param name="updAction" value="updReason"></ui:param>
                 </ui:include>
                
                 <ui:include src="/textModalPanel.xhtml">
                 <ui:param name="id" value="changesModal"></ui:param>
                 <ui:param name="rerender" value="revision"></ui:param>
                 <ui:param name="title" value="ChangesOverview"></ui:param>
                 <ui:param name="textLbl" value="Changes Overview"></ui:param>
                 <ui:param name="controllerObj" value="#{docRevisionController}"></ui:param>
                 <ui:param name="textAttr" value="overview"></ui:param>
                 <ui:param name="updAction" value="updOverview"></ui:param>
                 </ui:include>
                
                 </body>
                 <script>
                 setHighlight('${highlight}');
                 setFocus('${focus}');
                 </script>
                </html>


                • 5. Re: Blinking Shadow for ModalPanel

                  Hello, pbaker01.

                  Issue not reproducible under jboss server 4.2.2, jsf1_2.10(Sun RI), richfaces 3.3.0-SNAPSHOT, IE7.

                  No modalPanel blinks was noticed.

                  • 6. Re: Blinking Shadow for ModalPanel
                    pbaker01

                    Hi, Thanks for looking into this...
                    It is such an odd problem, I'm not surprised that you were not able to
                    reproduce. Keep in mind, it was just the modalPanel shawdow that was
                    blinking not the entire modalPanel.

                    I'll start a new thread on the problem with the ToolBar that I described
                    above. It seems as if the associated javascript is unloaded or dropped
                    between ajax server hops.

                    Thanks VERY much for looking into this!!!

                    • 7. Re: Blinking Shadow for ModalPanel

                      Hi, thanks for participation. Your comment is important for us. We will keep in mind 1st issue about modalPanel shadow blinking. The 2nd issue related with ToolBar will be verified separately.