listShuttle and ui:include - wierd issue
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