1 Reply Latest reply on Apr 8, 2008 1:30 AM by Patrick Madden

    listShuttle and ui:include - wierd issue

    Patrick Madden Newbie

      Hi,

      I have implemented (shamelessly borrowed from demo code) functionality similar to the RichFaces Demo where you can click on a link and it shows and hides components much like the "view source" on the RichFaces Demo. I'm using 3.2.0.GA and Seam 2.0.0.GA.

      I have a toolbar with a <h:inputText> field as follows:

      <a4j:form id="searchForm">
       <rich:toolBar id="searchToolBarId" height="26" styleClass="searchBar">
       <rich:toolBarGroup>
       <h:inputText id="searchTermID" value="#{search.searchTerm}" />
      ....
       </rich:toolBarGroup>
       </rich:toolBar>
      </a4j:form>
      
      


      Right underneath that I have this:

      <s:div id="enterpriseSearchToolbarDivId" rendered="#{search.enterprise}">
      
       <ui:include src="/templates/include/showHideView.xhtml">
       <ui:param name="sourcepath" value="/includes/enterprise/queryBuilder.xhtml"/>
       <ui:param name="openlabel" value="View Enterprise Query Builder"/>
       <ui:param name="hidelabel" value="Hide Enterprise Query Builder"/>
       </ui:include>
      </s:div>
      


      I've tested the showHideView.xhtml using some simple things like a helloWorld.xhtml and some much more complicated things like online docs with facelets, panels etc.

      However when I ui:include a file that contains a listShuttle all of a sudden my input text field in my toolbar looses the ability to have text selected with the mouse. I'm thinking somehow the css attributes of it is being modified somehow.

      Here I'll show the code of my showHideView.xhtml and the helloWorld.xhtml and my queryBuilder.xhtml. Again, the showHideView was shamelessly borrowed from the demo code with slight modifications.


      showHideView.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:f="http://java.sun.com/jsf/core"
       xmlns:a4j="http://richfaces.org/a4j"
       xmlns:rich="http://richfaces.org/rich">
      <ui:composition>
       <rich:spacer height="8" />
      
       <script>
       //<![CDATA[
       Effect.Transitions.exponential = function(pos) {
       return 1-Math.pow(1-pos,2);
       }
       //]]>
       </script>
      
       <style>
       .viewsourcepanel {
       padding-bottom:0px;
       width:100%;
       overflow:auto;
       border-width:0;
       }
       .viewsourcepanelOrig {
       padding-bottom:0px;
       width:100%;
       overflow:auto;
       border-width:0;
       background-color:#FFFFE7;
       }
       .viewsourcebody {
       padding:0;
       }
       .viewsourceheader {
       background-image:none;
       border-width:0px;
       padding:0px;
       height:6px;
       }
       .viewsourceheaderOrig {
       background-color:#E6F3F7;
       background-image:none;
       border-width:0px;
       padding:0px;
       height:6px;
       }
       .viewsourcediv {
       padding:0 10px 10px 10px;
       }
       .viewsourcediv pre {
       margin:0;
       }
      
       .viewsourcelooklink {
       cursor:pointer;
       text-decoration:underline;
       padding-left:5px;
       color:blue;
       font-size:11px;
       font-family:Verdana;
       }
      
       .viewsourcehidelink {
       text-align:right;
       cursor:pointer;
       display:block;
       text-decoration:underline;
       }
      
       .viewsourcehidelinkOrig {
       text-align:right;
       cursor:pointer;
       display:block;
       background-color:#E6F3F7;
       text-decoration:none;
       }
       </style>
      
       <f:subview>
       <div>
      
       <a4j:outputPanel id="hide2" styleClass="viewsourcelooklink" style="display:none">
       <rich:effect for="hide2" event="onclick" type="BlindUp" targetId="source1" params="id:'source1', duration:1.0" />
       <rich:effect for="hide2" event="onclick" type="Appear" targetId="look" params="delay:1.0, duration:1.0" />
       <rich:effect for="hide2" event="onclick" type="Fade" targetId="hide2" params="delay:0.9, duration:0.1" />
       <h:outputText style="padding-right:5px" value="#{empty hidelabel?'Hide' : hidelabel }"/>
       </a4j:outputPanel>
      
       <a4j:outputPanel styleClass="viewsourcelooklink" id="look">
       <rich:effect for="look" event="onclick" type="Fade" targetId="source1" params="duration:0.0" />
       <rich:effect for="look" event="onclick" type="Fade" params="duration:0.1" />
       <rich:effect for="look" event="onclick" type="BlindDown" targetId="source1" params="delay:0.1,duration:1.0,from:0.0,to:1.0" />
       <rich:effect for="look" event="onclick" type="Appear" targetId="source1" params="delay:0.1,duration:0.5,from:0.0,to:1.0" />
       <rich:effect for="look" event="onclick" type="Appear" targetId="hide2" params="delay:0.1,duration:0.5,from:0.0,to:1.0" />
       <h:outputText escape="false" value="#{empty openlabel?'View Source' : openlabel }" />
       </a4j:outputPanel>
      
      
       <rich:panel id="source1" bodyClass="viewsourcebody" headerClass="viewsourceheader" styleClass="viewsourcepanel" style="display:none">
       <f:facet name="header">
       <rich:spacer height="3px" />
       </f:facet>
      
       <div class="viewsourcediv">
       <ui:include src="#{sourcepath}"/>
       </div>
      
       <a4j:outputPanel id="hide" styleClass="viewsourcehidelink">
       <rich:effect for="hide" event="onclick" type="BlindUp" targetId="source1" params="id:'source1', duration:1.0" />
       <rich:effect for="hide" event="onclick" type="Appear" targetId="look" params="delay:1.0, duration:1.0" />
       <rich:effect for="hide" event="onclick" type="Fade" targetId="hide2" params="delay:0.9, duration:0.1" />
       <h:outputText style="padding-right:5px" value="<<#{empty hidelabel?'Hide' : hidelabel }"/>
       </a4j:outputPanel>
       </rich:panel>
       </div>
       </f:subview>
      
      </ui:composition>
      </html>
      
      


      Here is the helloWorld.xhtml (no problem here with mouse on input text)
      <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:h="http://java.sun.com/jsf/html">
      <ui:composition>
       <h:outputText value="Hello World"/>
      </ui:composition>
      </html>
      


      Here is the code that if ui:included messes up my input text field where mouse select doesn't work any more.

      
      <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:s="http://jboss.com/products/seam/taglib"
       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"
      <ui:composition>
      
       <rich:spacer height="4px" width="100%"/>
      
       <rich:listShuttle sourceValue="#{enterpriseSearchFields.defaultFieldsAsSelectItems}"
       targetValue="#{enterpriseSearchFields.userSelectedFieldsAsSelectItems}" var="selectItemField" listHeight="300" listWidth="300"
       sourceCaptionLabel="Document Fields"
       targetCaptionLabel="Active Document Fields"
       converter="clooster.IndexingFieldSelectItemConverter">
       <rich:column>
       <h:outputText value="#{selectItemField.label}"></h:outputText>
       </rich:column>
       <a4j:support event="onlistchanged" reRender="queryBuilderSearchFieldsDivId"/>
       </rich:listShuttle>
      
       <s:div id="queryBuilderSearchFieldsDivId">
       .....
       </s:div>
      
      
      </ui:composition>
      </html>
      
      


      I've narrowed it down to including the listShuttle.

      Anyone have any idea?

      Thanks,

      PVM

        • 1. Re: listShuttle and ui:include - wierd issue
          Patrick Madden Newbie

          Just an FYI,

          I've tested my exact code contained in my included file containing the list shuttle without using ui:include and I don't have the problem. What this means is I removed the ui:include and simply cut and past my included xhtml file directly into the owning file and my input field works just fine. I can select the text with the mouse.

          Therefore it is something with ui:include where an included file contains a list shuttle that is doing it.

          It is strange indeed and I'm sure its a corner case somehow. However, I'd really like to have that effect if at all possible.

          On the other hand it could just be something I'm doing wrong but I can't see what that is.

          Thanks in advance,

          PVM