Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JSF Java Discussion :

Composant composite avec ajax


Sujet :

JSF Java

  1. #1
    Candidat au Club
    Composant composite avec ajax
    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 />

  2. #2
    Modérateur

    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.
    N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  3. #3
    Candidat au Club
    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.

  4. #4
    Modérateur

    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 ?
    N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  5. #5
    Candidat au Club
    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.

  6. #6
    Modérateur

    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>
    N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

###raw>template_hook.ano_emploi###