It perfectly works as long as my "droppable" control is not "dynamically updated".
I mean by "dynamically updated" a dropable control whose value depends on the selection of other controls, e.g. a p:selectOneMenu.
My droppable target is :
Code: Select all
<html lang="fr"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:composite="http://java.sun.com/jsf/composite"
xmlns:t="http://myfaces.apache.org/tomahawk"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Compositeur de commission</title>
</h:head>
<h:body>
<composite:interface>
<composite:attribute name="context" type="fr.senat.beans.ComposeCommissionContext" required="true"/>
<composite:attribute name="dataSource" required="true" />
<composite:attribute name="gridRows" required="false" default="0"/>
<composite:attribute name="gridCols" required="false" default="1"/>
<composite:attribute name="gridPaginate" required="false" default="true"/>
<composite:attribute name="imgWidth" required="false" default="51"/>
<composite:attribute name="imgHeight" required="false" default="75"/>
</composite:interface>
<composite:implementation>
<t:div>
<p:outputPanel id="compositionCommission">
<p:outputPanel id="dropArea">
<h:outputText value="Glisser/Déplacer ici" rendered="#{empty cc.attrs.context.sens}"/>
<p:dataGrid id="gridSimple" value="#{cc.attrs.context.sens}" rows="#{cc.attrs.gridRows}" columns="#{cc.attrs.gridCols}" var="asen" emptyMessage="Aucune sélection" paginator="#{cc.attrs.gridPaginate}">
<p:column>
<t:div styleClass="senCom">
<t:div styleClass="senComData">
<t:div styleClass="senComPhoto">
<p:graphicImage value="#{asen.URLPhoto}" width="${cc.attrs.imgWidth}" height="${cc.attrs.imgHeight}"/>
</t:div>
<t:div styleClass="senComInfos">
<p:panelGrid id="senPanel" columns="1" >
<h:outputText value="#{asen.libelle}"/>
<h:commandLink value="Supprimer" action="#{cc.attrs.context.delComMember}">
<f:param name="matricule" value="#{asen.sen.senmat}"/>
</h:commandLink>
</p:panelGrid>
</t:div>
</t:div>
<t:div>
<p:selectOneMenu value="#{asen.currentFonmemcom.foncom}" effect="fold" style="width: 100%;">
<f:selectItems value="#{constants.foncoms}" var="fonref" itemLabel="#{fonref.foncomlic}" itemValue="#{fonref}" />
<p:column>
#{fonref.foncomlic}
</p:column>
<p:ajax event="change" listener="#{cc.attrs.context.sortComMembers}" update=":#{p:component('compositionCommission')} :#{p:component('compositionCommissionDrop')}"/>
</p:selectOneMenu>
</t:div>
<t:div styleClass="spacer"/>
</t:div>
</p:column>
</p:dataGrid>
</p:outputPanel>
</p:outputPanel>
<p:droppable id="compositionCommissionDrop" for="compositionCommission" datasource="#{cc.attrs.dataSource}" tolerance="touch" activeStyleClass="ui-state-highlight" onDrop="handleDrop">
<p:ajax listener="#{cc.attrs.context.onSenDrop}" update="dropArea #{cc.attrs.dataSource}" />
</p:droppable>
</t:div>
<script type="text/javascript">
function handleDrop(event,ui) {
ui.draggable.fadeOut('fast');
}
</script>
</composite:implementation>
</h:body>
</html>
Code: Select all
<h:head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<title>Facelets Template</title>
</h:head>
<h:body>
<ui:composition template="./layout.xhtml">
<ui:define name="bandeau">
<ui:include src="bandeau.xhtml"/>
</ui:define>
<ui:define name="contenu">
<h:form>
<t:div styleClass="selectSens">
<sen:sen_picker pageSize="6"
onSelect=""
onUnselect=""
context="#{selectionContext}">
</sen:sen_picker>
</t:div>
<t:div styleClass="commission">
<t:div styleClass="selectCommission">
<p:panelGrid columns="2">
<p:row>
<p:column>
<p:selectOneMenu value="#{composeCommissionContext.typorgcom}" effect="fold" id="selectTyporg" style="width: 240px;margin-right: 10px;">
<f:selectItems value="#{constants.typorgscom}" var="typcom" itemLabel="#{typcom.typorglib}" itemValue="#{typcom}" />
<p:column>
#{typcom.typorglib}
</p:column>
<p:ajax event="change" update=":#{p:component('selectCom')} :#{p:component('compositionCommission')}"/>
</p:selectOneMenu>
</p:column>
<p:column>
<p:selectOneMenu value="#{composeCommissionContext.com}" effect="fold" id="selectCom" style="width: 240px;">
<f:selectItems value="#{composeCommissionContext.typorgcoms}" var="com" itemLabel="#{com.evelib}" itemValue="#{com}" />
<p:column>
#{com.evelib}
</p:column>
<p:ajax event="change" update=":#{p:component('compositionCommission')}"/>
</p:selectOneMenu>
</p:column>
</p:row>
</p:panelGrid>
</t:div>
<t:div styleClass="viewCommission">
<sen:composeCommission context="#{composeCommissionContext}"
dataSource=":#{p:component('senPickerData')}"
gridRows="6"
gridCols="2"
gridPaginate="true"/>
</t:div>
<div class="spacer"> </div>
</t:div>
</h:form>
</ui:define>
<ui:define name="pied">
<ui:include src="pied.xhtml"/>
</ui:define>
</ui:composition>
</h:body>
The picker control is :
Code: Select all
<html lang="fr"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:composite="http://java.sun.com/jsf/composite"
xmlns:t="http://myfaces.apache.org/tomahawk"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Explorateur de Sénateurs</title>
</h:head>
<h:body>
<!-- ui:composition permet de limiter ce qui est inclus par composition -->
<composite:interface>
<composite:attribute name="pageSize" required="false" default="10"/>
<composite:attribute name="onSelect" required="false" />
<composite:attribute name="onUnselect" required="false" />
<composite:attribute name="context" type="fr.senat.beans.SelectionContext" required="true"/>
<composite:attribute name="draggable" required="false" default="true"/>
</composite:interface>
<composite:implementation>
<t:div styleClass="senPicker">
<p:dataTable id="senPickerData" var="asen" value="#{senPager.actifsValues}"
rowId="#{asen.sen.senmat}" rowKey="#{asen.sen.senmat}"
rows="${cc.attrs.pageSize}" paginator="true"
selection="#{cc.attrs.context.selectedSen}" selectionMode="single" widgetVar="senPickerWdgt">
<p:ajax event="rowSelect" update="#{cc.attrs.onSelect}" disabled="#{empty cc.attrs.onSelect}"/>
<p:ajax event="rowUnselect" update="#{cc.attrs.onUnselect}" disabled="#{empty cc.attrs.onUnselect}"/>
<f:facet name="header">
<h:panelGrid>
<h:commandLink value="Reinitialiser" onclick="senDataWdgt.clearFilters()"/>
</h:panelGrid>
</f:facet>
<p:column>
<f:facet name="header"><h:outputText value=""/></f:facet>
<p:graphicImage id="mini_photo_picker" rendered="#{not empty asen.URLPhoto}" value="#{asen.URLPhoto}" width="51" height="75"/>
<p:draggable for="mini_photo_picker" revert="true" helper="clone" disabled="#{not cc.attrs.draggable}"/>
</p:column>
<p:column sortBy="#{asen.libelle}" filterBy="#{asen.libelle}">
<f:facet name="header"><h:outputText value=""/></f:facet>
<h:outputText value="#{asen.libelle}"/>
</p:column>
</p:dataTable>
</t:div>
</composite:implementation>
</h:body>
</html>
Code: Select all
<p:selectOneMenu value="#{composeCommissionContext.com}" effect="fold" id="selectCom" style="width: 240px;">
<f:selectItems value="#{composeCommissionContext.typorgcoms}" var="com" itemLabel="#{com.evelib}" itemValue="#{com}" />
<p:column>
#{com.evelib}
</p:column>
<p:ajax event="change" update=":#{p:component('compositionCommission')}"/>
</p:selectOneMenu>
Does anyone have an idea of the problem ?
Thanks in advance.
This behaviour occurs with :
- Tomcat 6.0.33
- Primefaces 3.2 (same with 3.1.1)
- myfaces 2.0.13
- CODI 1.0.5
- OWB 1.1.3