Custom component à partir de deux composants

Version imprimable

30/05/2008, 15h51
helios2092

Custom component à partir de deux composants

Bonjour,

J'ai une question à vous poser concernant la création d'un custom component JSF.
Est ce qu'il est possible de créer un composant à partir de de deux composant Aet B.
On a deux modes d'affichage d'une page html ,un mode edition et un mode prévisualisation,pour le mode 1 le custom composant doit retouner le composant A et pour l'autre mode il renvoie le composant B.

:merci: beaucoup d'avance.
30/05/2008, 16h42
tchize_

Y a plusieurs possibilité d'avoir ce genre de comportement:

La première c'est de créer un custom component qui se crée automatiquement 2 childs, et dont le "rendered" pointe sur la condition de read/write ainsi tu a à l'arrivée trois composants:

le tiens, une child qui est le readonly et un child qui est le write

Une autre possibilité (est qu'un utilise avec succès ici) apparait si t'as beaucoup d'état différent à gérer ou si tes deux type d'affichage (A et B) utilisent un même set de données au départ. Ca consiste à créer un seul composant, mais à avoir plusieurs renderer. Y a un renderer "maitre" qui est associé au composant, et une série de classes implémentant aussi l'interface renderer, et que le renderer maitre appelle en fonction de certaines conditions liée au composant. Dans notre cas, c'est un paramètre du composant qui donne l'info sur le renderer à choisir parmis une liste d'une dizaine. C'est en fait une simple application du delegate pattern où le délégué est choisi au vol :)

Note que, a part le renderer maitre, les autre renderer ne sont pas inscrit dans la liste des renderers du faces-config. On ne fait qu'utiliser l'interface, ils ne sont pas associés à des composants :)
30/05/2008, 16h58
romaintaz

Sinon on peut faire des compositions à partir du moment où on utilise Facelets...
30/05/2008, 17h25
tchize_

et faire des custom component sur facelets c'est accessiorement plus facile (même sans passer par les compositions) car tu peut te passer du boulot chiant de définir une taglib jps :p
30/05/2008, 17h25
helios2092

Citation:

Envoyé par tchize_

Y a plusieurs possibilité d'avoir ce genre de comportement:

Une autre possibilité (est qu'un utilise avec succès ici) apparait si t'as beaucoup d'état différent à gérer ou si tes deux type d'affichage (A et B) utilisent un même set de données au départ. Ca consiste à créer un seul composant, mais à avoir plusieurs renderer. Y a un renderer "maitre" qui est associé au composant, et une série de classes implémentant aussi l'interface renderer, et que le renderer maitre appelle en fonction de certaines conditions liée au composant. Dans notre cas, c'est un paramètre du composant qui donne l'info sur le renderer à choisir parmis une liste d'une dizaine. C'est en fait une simple application du delegate pattern où le délégué est choisi au vol :)

Merci Beaucoup pour la réponse tchize.
Je serai preneur si tu me donne plus de détails sur la deuxiéme méthode,surtout que c'est mon premier composant jsf (et il est composite:mrgreen:)Je voudrai en fait utiliser deux composants standards un HtmlcommandButton et un HtmlInplaceInput(richafaces) alors je vais essayer d'utiliser leurs renderers de bases dans le renderer maitre ,je vois pas comment je vais les appeler dans mon renderer maitre?

Merci
30/05/2008, 17h33
tchize_

Citation:

Envoyé par helios2092

Merci Beaucoup pour la réponse tchize.
Je serai preneur si tu me donne plus de détails sur la deuxiéme méthode,surtout que c'est mon premier composant jsf (et il est composite:mrgreen:)Je voudrai en fait utiliser deux composants standards un HtmlcommandButton et un HtmlInplaceInput(richafaces) alors je vais essayer d'utiliser leurs renderers de bases dans le renderer maitre ,je vois pas comment je vais les appeler dans mon renderer maitre?

Merci

Ca passera pas. Ca ne peut marcher que si tes différents renderers sont au courant qu'il partage un type de composant de base commun. Tu ne passe par par divers composant, tu ne fait que splitter ton renderer en plusieurs implémentation et en choisir une au vol. La pluspart des renderer font du typecasting dans leur code vers le composant qu'il sont supposé mettre en rendu, hors quand HtmlcommandButtonRenderer va tenter le typcasting, t'aura un classcast exception :D

Dans ton cas, si tu veux que ton composant switche entre deux composants standard, il faut passer par un pur composite, donc tu devra avoir un arbre à 3 composant (première solution).

Créer les childs est pas super dur, mais, si tu ne passe pas par les composants composites de facelets qui te permettent de le faire direct en xhtml, il faut faire gaffe à ton code java

1) ne pas créer les childs dans le constructeur, car une fois ceux-ci dans l'arbre jsf, il y resteront pour une durée plus longue que celle de ta classe java -> au prochain new il sera irrelevant de créer les childs. A la place, surcharger les différentes méthodes du Component, et checker si des childs sont présent. Si pas, les créer au vol (une sorte de création "lazy").

2) on ne crée pas un composant avec un new xxxxx(); en JSF. On passe par FacesContext.getApplication().createcomponent()
30/05/2008, 17h35
helios2092

Citation:

Envoyé par romaintaz

Sinon on peut faire des compositions à partir du moment où on utilise Facelets...

Citation:

Envoyé par tchize_

et faire des custom component sur facelets c'est accessiorement plus facile (même sans passer par les compositions) car tu peut te passer du boulot chiant de définir une taglib jps :p

J'ai déja utilisé les Facelete pour un autre composant(des labels editables et ça marche trés bien:mrgreen:),mais dans le cadre de meme projet ,je suis demandé de mettre mes boutons comme editables aussi ,le problème est que pour le bouton c'est un peu difficile de limiter les nombres des attributs qu'on doit associer au composant(au contraire d'un Label qu'on un seul attribut)
c'est pourcela J'ai choisi de voir avec l'autre solution ,et définir une Taglib:aie:

Bonjour ,
je suis arrivé à créer le composant qui se compose de deux composants le :htmlCommandButton et le inplaceInput.:merci: Tchize_
voila le code qu j'ai utilisé :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
public class UI18nCommandBtn extends HtmlPanelGroup {
    private HtmlCommandButton commandBtn;
    private HtmlInplaceInput inplaceInput;
    public static final String COMPONENT_FAMILY = "MyCmd";
    public static final String COMPONENT_TYPE = "ui18nCod";
    public static final String INPUT_1_VALUE_ATTR_NAME = "input1Value";
 
 
    @Override
    public String getFamily() {
        return COMPONENT_FAMILY;
    }
 
    public UI18nCommandBtn() {
        Application f_app = getFacesContext().getApplication();
        commandBtn = (HtmlCommandButton) f_app.createComponent(HtmlCommandButton.COMPONENT_TYPE);
        getChildren().add(commandBtn);
        inplaceInput = (HtmlInplaceInput) f_app.createComponent(HtmlInplaceInput.COMPONENT_TYPE);
        getChildren().add(inplaceInput);
    }
 
    @Override
    public void setId(String id) {
        commandBtn.setId(id + "Cmd");
        inplaceInput.setId(id + "Input");
        super.setId(id);
    }
 
    public void setInput1Value(String input1_value) {
        commandBtn.setValue(input1_value);
        inplaceInput.setValue(input1_value);
    }
 
    @Override
    public void setValueBinding(String attr_name, ValueBinding vb) {
        if (attr_name.equals(INPUT_1_VALUE_ATTR_NAME)) {
            commandBtn.setValueBinding("value", vb);
            return;
        }
        if (attr_name.equals(INPUT_1_VALUE_ATTR_NAME)) {
            inplaceInput.setValueBinding("value", vb);
            return;
        }
        super.setValueBinding(attr_name, vb);
    }
 
    public Object processSaveState(FacesContext context) {
        Object superState = super.processSaveState(context);
        return new Object[]{superState, new Integer(getChildCount())};
    }
 
    public void processRestoreState(FacesContext context, Object state) {
         Object[] values = (Object[]) state;
        Integer savedChildCount = (Integer) values[1];
        for (int i = getChildCount() - savedChildCount.intValue(); i > 0; i--) {
            getChildren().remove(0);
        }
        super.processRestoreState(context, values[0]);
    }
 
}

J'ai déclaré mes childs dans le constructeur ,mais à chaque restore state je vide les liste des childs.

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
33
34
35
36
37
38
39
40
41
 
public class I18nCommandBtnTag extends UIComponentTag {
    private String _input1_value = null;
 
    @SuppressWarnings("unchecked")
    protected void putAttribute(UIComponent comp, String attr_name, String value) {
        if (attr_name == null) return;
        if (isValueReference(value)) {
            comp.setValueBinding(attr_name, getFacesContext().getApplication().createValueBinding(value));
            return;
        }
        comp.getAttributes().put(attr_name, value);
    }
 
    @Override
    protected void setProperties(UIComponent comp) {
        super.setProperties(comp);
        putAttribute(comp, UI18nCommandBtn.INPUT_1_VALUE_ATTR_NAME, _input1_value);
        putAttribute(comp, UI18nCommandBtn.INPUT_1_VALUE_ATTR_NAME, _input1_value);
    }
 
    public String getComponentType() {
        return UI18nCommandBtn.COMPONENT_TYPE;  //To change body of implemented methods use File | Settings | File Templates.
    }
 
    @Override
    public String getRendererType() {
        return "javax.faces.Group";
    }
 
    public void setInput1Value(String input1_value) {
        _input1_value = input1_value;
    }
 
    @Override
    public void release() {
        super.release();
        _input1_value = null;
 
    }
}

et dans le faces-config

Code:

1
2
3
4
5
6
7
8
9
10
11
 <component>
        <component-type>ui18nCod</component-type>
        <component-class>com.sqli.kmji18njsf.web.ui.component.UI18nCommandBtn</component-class>
    </component>
   <render-kit>
 		<renderer>
			<component-family>MyCmd</component-family>
			<renderer-type>javax.faces.Group</renderer-type>
			<renderer-class>com.sun.faces.renderkit.html_basic.GroupRenderer</renderer-class>
		</renderer>
	</render-kit>

Il y a encore quelques soucis mais ce que je voudrais bien savoir si la gestion des attributs dans l'appel de mon l'utilisation de mon tag.
Est ce que je doit déclarer tous les attributs (celles de HtmlCommandButton et le HtmlInplaceInput,plus que 50 attributs:mrgreen: )pour qu' elles fonctionnent correctement dans mon composant ou il y 'a moyen de gérer ça automatiquement;surtout que les composants que j'utilise sont des composants standards .

Merci d'avance

Bonjour,
ben le problème est semi résolu:aie: ,je suis arrivé à créer plusieurs composites composant avec jsf qui sont éditables :un commandButton un a4j command Boutton un a4j commandLink un outputText en utilisant cette méthode:
La classe de composant:

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
 
public class I18nCommandButton extends HtmlCommandButton {
    public static final String COMPONENT_FAMILY = "i18ncmd";
    public static final String COMPONENT_TYPE = "ui18nCommand";
    public static final String KEY_VALUE_ATTR_NAME = "key";
    public static final String BUNDLE_NAME_ATTR_NAME = "bundleName";
    public static final String COMPONENT_RENDER = "javax.faces.Button";
 
    private HtmlInplaceInput inplaceInput;
    private HtmlForm form;
    private String key = null;
    private String bundleName = null;
 
    @Override
    public String getFamily() {
        return COMPONENT_FAMILY;
    }
 
    public HtmlForm getForm() {
        Application f_app = getFacesContext().getApplication();
        form = (HtmlForm) f_app.createComponent(HtmlForm.COMPONENT_TYPE);
        return form;
    }
 
    public HtmlInplaceInput getInplaceInput() {
        Application application = getFacesContext().getApplication();
        inplaceInput = (HtmlInplaceInput) application.createComponent(HtmlInplaceInput.COMPONENT_TYPE);
        inplaceInput.setOnchange("document.getElementById(this.id);document.getElementById(this.parentNode.id).component.save();this.form.submit();");
        MethodExpression methodExpression = application.getExpressionFactory().createMethodExpression(
                FacesContext.getCurrentInstance().getELContext(), "#{i18nBean.update}", null, new Class[]{ValueChangeEvent.class});
        MethodExpressionValueChangeListener mevcl = new MethodExpressionValueChangeListener(methodExpression);
        inplaceInput.addValueChangeListener(mevcl);
        inplaceInput.setValue(this.getValue());
        return inplaceInput;
    }
 
    public I18nCommandButton() {
    }
 
    @Override
    public void setId(String id) {
        if (form != null) {
            form.setId(this.getId() + "Form");
            if (inplaceInput != null) {
                inplaceInput.setId(form.getId() + "Input");
            }
        }
        super.setId(id);
    }
 
    public void setKey(String _key) {
        key = _key;
 
    }
 
    public void setBundleName(String _bundleName) {
        bundleName = _bundleName;
 
    }
 
    /**
     * @see javax.faces.component.StateHolder#restoreState(javax.faces.context.FacesContext, java.lang.Object)
     */
    @SuppressWarnings("unchecked")
    public void restoreState(FacesContext context, Object state) {
        Object values[] = (Object[]) state;
        // standard component attributes are restored by the super class
        super.restoreState(context, values[0]);
        this.key = (String) values[1];
        this.bundleName = (String) values[2];
 
    }
 
    /**
     * @see javax.faces.component.StateHolder#saveState(javax.faces.context.FacesContext)
     */
    public Object saveState(FacesContext context) {
        Object values[] = new Object[3];
        values[0] = super.saveState(context);
        values[1] = this.key;
        values[2] = this.bundleName;
        return (values);
    }
 
    public void encodeBegin(FacesContext context
    ) throws IOException {
        Map<String, Object> sessionMap = FacesContext.getCurrentInstance().getExternalContext().getSessionMap();
        FacesContext fc = FacesContext.getCurrentInstance();
        Application application = fc.getApplication();
        ResourceBundle bundle = application.getResourceBundle(fc, bundleName);
        this.setValue((String) bundle.getObject(key));
        if (sessionMap.containsKey("edit")) {
            if (this.getChildCount() == 0) {
                form = getForm();
                form.getChildren().add(getInplaceInput());
                this.getChildren().add(form);
                form.getChildren().get(0).getAttributes().put("key", this.key);
                form.getChildren().get(0).getAttributes().put("bundleName", this.bundleName);
                this.setStyle("visibility:hidden");
            }
        } else {
            if (this.getChildCount() != 0) {
                this.getChildren().clear();
            }
          }
        super.encodeBegin(context);
    }
}

La classe de Tag

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
public class I18nCommandButtonTag extends UIComponentELTag {
    private ValueExpression key = null;
    private ValueExpression bundleName = null;
 
    @Override
    protected void setProperties(UIComponent component) {
 
        super.setProperties(component);
        if (key != null) {
            if (!key.isLiteralText()) {
                component.setValueExpression(I18nCommandButton.KEY_VALUE_ATTR_NAME, key);
            } else {
                component.getAttributes().put(I18nCommandButton.KEY_VALUE_ATTR_NAME, key.getExpressionString());
            }
        }
        if (bundleName != null) {
            if (!bundleName.isLiteralText()) {
                component.setValueExpression(I18nCommandButton.BUNDLE_NAME_ATTR_NAME, bundleName);
            } else {
                component.getAttributes().put(I18nCommandButton.BUNDLE_NAME_ATTR_NAME, bundleName.getExpressionString());
            }
        }
 
    }
 
    public String getComponentType() {
        return I18nCommandButton.COMPONENT_TYPE;  //To change body of implemented methods use File | Settings | File Templates.
    }
 
    @Override
    public String getRendererType() {
        return I18nCommandButton.COMPONENT_RENDER ;
    }
 
    public void setBundleName(ValueExpression bundleName) {
        this.bundleName = bundleName;
    }
 
    public void setKey(ValueExpression key) {
        this.key = key;
    }
 
    @Override
    public void release() {
        super.release();
        key = null;
        bundleName = null;
 
    }
}

Faces-Config:

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
33
34
35
36
37
38
39
40
 
<faces-config
        xmlns="http://java.sun.com/xml/ns/javaee"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
        version="1.2">
    <application>
        <variable-resolver>
            org.springframework.web.jsf.DelegatingVariableResolver
        </variable-resolver>
        <view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
    </application>
    <managed-bean>
        <managed-bean-name>sessionBean</managed-bean-name>
        <managed-bean-class>com.sqli.kmji18njsf.web.bean.SessionBean</managed-bean-class>
        <managed-bean-scope>application</managed-bean-scope>
    </managed-bean>
    <managed-bean>
        <managed-bean-name>i18nBean</managed-bean-name>
        <managed-bean-class>com.sqli.kmji18njsf.web.bean.I18nBean</managed-bean-class>
        <managed-bean-scope>request</managed-bean-scope>
        <managed-property>
            <property-name>labelService</property-name>
            <value>#{labelService}</value>
        </managed-property>
    </managed-bean>
 
    <component>
        <component-type>ui18nCommand</component-type>
        <component-class>com.sqli.kmji18njsf.web.ui.component.I18nCommandButton</component-class>
    </component>
    <render-kit>
        <renderer>
            <component-family>i18ncmd</component-family>
            <renderer-type>javax.faces.Button</renderer-type>
            <renderer-class>com.sun.faces.renderkit.html_basic.ButtonRenderer</renderer-class>
        </renderer>
    </render-kit>
 
    </faces-config>

et enfin i18n.taglib.xml

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<?xml version="1.0"?>
<!DOCTYPE facelet-taglib PUBLIC
        "-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN"
        "facelet-taglib_1_0.dtd">
<facelet-taglib>
    <namespace>http://www.sqli.com/i18n-jsf</namespace>
      <tag>
        <tag-name>
            command
        </tag-name>
        <component>
            <component-type>ui18nCommand</component-type>
        </component>
    </tag>
</facelet-taglib>

Par contre j'ai de mal à faire marcher le HtmlCommandLink avec la même manière ,dés que je met visibility à hidden tous les composant children se cache aussi(pas le cas pour les autres composants)
J'ai essayé de faire autrement en attachant le composant fils(le form qui contient de sa part un inplaceInput) au Parent de htmlCommandLink et en mettant alors dans les deux situations (edition et prévisualisation une fois je rend mon composant commandLink et une autre fois je le rend(setRendered(false))et j'attache le form à son parent(de commandLink)
voila le code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
...
 public void encodeBegin(FacesContext context
    ) throws IOException {
 
        FacesContext fc = FacesContext.getCurrentInstance();
        Application application = fc.getApplication();
        ResourceBundle bundle = application.getResourceBundle(fc, bundleName);
        this.setValue((String) bundle.getObject(key));
 
        Map<String, Object> sessionMap = FacesContext.getCurrentInstance().getExternalContext().getSessionMap();
        if (sessionMap.containsKey("edit")) {
  int index=this.getParent().getChildren().indexOf(this);
            form = getForm();
            form.getChildren().add(getInplaceInput());
            this.getParent().getChildren().add(index + 1, form);
                   this.setRendered(false);
        } else {
            this.setRendered(true);
        }
        super.encodeBegin(context);
    }
....

Le problème est que lorsque on restaure la vue ,on se trouve avec le composant fils(form) qui est mal placé par rapport à la position ou le composant de base,(par contre c'est prévu qu'il soit au même niveau )

De l'aide s'il vous plait :mrgreen:

Merci d'avance.

En fait c'est enfin réssolu :yaisse2:
il suffisait d'ajouter un petit refresh de la page de jsf avant de renvoyer la réponse.
la méthode update coté backed Bean

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    public void update(ValueChangeEvent event) {
        FacesContext fc = FacesContext.getCurrentInstance();
        String locale = fc.getExternalContext().getRequestLocale().toString();
        UIComponent component = (UIComponent) event.getSource();
        String key = (String) component.getAttributes().get("key");
        String bundleName = (String) component.getAttributes().get("bundleName");
        if (ValidatorUtil.isNotBlank(key)) {
            this.getLabelService().create(key, locale, event.getNewValue().toString());
        }
        ResourceBundle bundle = fc.getApplication().getResourceBundle(fc, bundleName);
        if (bundle instanceof AbstractHibernateResourceBundle) {
            AbstractHibernateResourceBundle hibernateResourceBundle = (AbstractHibernateResourceBundle) bundle;
            hibernateResourceBundle.updateLabel(key, event.getNewValue().toString());
        }
        refresh();
    }

    public static void refresh() {
        FacesContext context = FacesContext.getCurrentInstance();
        UIViewRoot viewRoot = context.getViewRoot();
        viewRoot.getChildren().clear();
    }

J'espère que ça aidera quelqu'un un jour.

:salut: