Composant composite avec ajax

Version imprimable

Bonsoir à tous,

j'ai un petit soucis avec les composants composite de jsf, je n'arrives pas à utiliser le composant ajax dans mon composant composite,
en fait quand je spécifie la valeur de l'attribut update qui fait reference a un id qui se trouve en dehors du composant composite je tombes
sur une erreur "id not find". merci a ceux qui pourront m'aider

Exemple :

code du composant
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:composite="http://java.sun.com/jsf/composite" xmlns:o="http://omnifaces.org/ui" xmlns:p="http://primefaces.org/ui"> <composite:interface> <composite:attribute name="ajaxUpdate" required="false" type="java.lang.String" /> </composite:interface> <composite:implementation> <c:if test="#{not empty cc.attrs.ajaxUpdate}" >  <p:ajax update="#{cc.attrs.ajaxUpdate}" /> </c:if> </composite:implementation> </html>
j'utilise mon composant comme cela et je tombes sur une exception de type id not find
Code:

1 2 3 4 5 6 <test:myComponent ajaxUpdate="userTable" ...(autres attribut) /> <dataTable id="userTable" > ... <datatable />

14/01/2020, 13h46
OButterlin
Ton composant implémente namingContainer ?

Si oui, si tu lui passe l'équivalent de "id" c'est normal, il faudrait lui passer "clientId".
En d'autre termes, si tu as une arborescence comme celle-ci
Code:

1 2 3 4 5 <form id="form1"> <input id="form1:champ1" ...> <perso:toncomposant ajaxUpdate="champ1".../> </form>
ça ne fonctionnera pas.
Par contre, avec

Code:

<perso:toncomposant ajaxUpdate="form1:champ1".../>

ça devrait fonctionner.
17/01/2020, 00h35
ajer789
salut, merci de ta réponse,
en effet ça fonctionne mais pour que mon composant soit plus clair et qu'il ne soit pas limiter à un seul event ajax,
j'ai décidé de spécifier le composant ajax au moment de l'utilisation de mon composant composite j'ai donc utiliser <composite:insertChildren/>

code du composant composite(je n'ai pas tout affiché) :
Code:

1 2 3 4 5 6 ... <p:inputText id="#{cc.attrs.id}" value="#{cc.attrs.value}"> <composite:insertChildren/> </p:inputText> ...
utilisation du composant composite
Code:

1 2 3 4 <test:myComponent*id="valid"*value="#{data.a}"> <p:ajax update=".."/> </test:myComponent>
je tombes sur une erreur "Composite component does not support event null"
donc je rajoute un event "change" à mon composant ajax et j'obtiens la même erreur " Composite component does not support event change",
merci pour ton aide.
17/01/2020, 09h47
OButterlin

C'est normal, ton composant n'a pas précisé qu'il gérait des événements, pour ça, il faut ajouter une ou plusieurs lignes dans l'interface (une par événement)

Code:

<composite:clientBehavior name="change" event="change" [targets="???"] />

Ceci dit, dans le cas de l'événement change, je ne serais pas surpris qu'il râle parce que tu n'exposes pas un

Code:

<composite:editableValueHolder...>

mais bon, tu peux toujours tester...

Ton composant est sensé faire quoi au juste ?

salut et merci pour ta réponse,

en fait ce que j'aimerai faire c'est que lorsqu'on est en consultation j'affiches un outputText et lorsqu'on est en édition j'affiche un selectOneMenu
j'ai essaiyé ce que tu m'as dit mais ça n'a pas fonctionné voici le code

code du composant composite

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
 
        </composite:interface>
                 ....(autres attribut)
		<composite:clientBehavior name="change" event="change" targets="#{cc.attrs.id}" default="true"/>				
	</composite:interface>
 
	<composite:implementation>	 	
		<c:choose>
			<c:when test="#{not cc.attrs.readonly}">
				<h:panelGroup>
							<h:selectOneMenu value="#{cc.attrs.value}" id="#{cc.attrs.id}" disabled="#{cc.attrs.disabled}"  required="#{cc.attrs.required}" 
                                                        style="#{cc.attrs.style}">
								<c:if test="#{withNull == 'true'}">
									<f:selectItem itemLabel=" " itemValue="#{null}" itemDisabled="#{cc.attrs.itemDisabled}"/>
								</c:if>
								<f:selectItems value="#{cc.attrs.itemsValue}" />
								<composite:insertChildren/>
							</h:selectOneMenu>								
							<p:message for="#{cc.attrs.id}"/>																			
				</h:panelGroup>
			</c:when>
			<c:otherwise>		
				<h:panelGroup>			
					<h:outputText id="#{cc.attrs.id}" value="#{cc.attrs.textValue}" />
				</h:panelGroup>
			</c:otherwise>
		</c:choose>		
	</composite:implementation>

je tombes sur une erreur "Unable to attach behavior to non-ClientBehaviorHolder"
merci pour ton aide.

J'ai fait un test simple, le principe fonctionne

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:composite="http://xmlns.jcp.org/jsf/composite"
    xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
    xmlns:p="http://primefaces.org/ui">
 
<composite:interface>
    <composite:attribute name="value" required="true"/>
    <composite:attribute name="readonly" type="java.lang.Boolean"/>
    <composite:attribute name="update"/>
</composite:interface>
 
<composite:implementation>
 
    <!-- En lecture seule -->
    <h:outputText value="#{cc.attrs.value}" rendered="#{cc.attrs.readonly}"/>
 
    <!-- En mise à jour -->
    <h:selectOneMenu value="#{cc.attrs.value}" rendered="#{!cc.attrs.readonly}">
        <f:selectItem itemValue="1" itemLabel="Valeur 1"/>
        <f:selectItem itemValue="2" itemLabel="Valeur 2"/>
        <f:selectItem itemValue="3" itemLabel="Valeur 3"/>
        <f:ajax event="change" execute="@this" render="#{cc.attrs.update}" immediate="true"  onevent="console.log('event change')"/>
    </h:selectOneMenu>
 
</composite:implementation>
</html>