Composant composite avec ajax

**ajer789** · 13/01/2020, 19h52

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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}" >
						<!-- je n'ai pas affiché tout le code car c'est cette ligne qui pose problème -->
							<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**OButterlin** · 14/01/2020, 14h46

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ça devrait fonctionner.

**ajer789** · 17/01/2020, 01h35

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**OButterlin** · 17/01/2020, 10h47

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<composite:editableValueHolder...>

mais bon, tu peux toujours tester...

Ton composant est sensé faire quoi au juste ?

**ajer789** · 18/01/2020, 16h14

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**OButterlin** · 20/01/2020, 10h30

J'ai fait un test simple, le principe fonctionne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Composant composite avec ajax

JSF Java

Discussions similaires

Partager

Partager