Remplacer une image par une autre

Version imprimable

11/02/2010, 15h40
verbose

Remplacer une image par une autre
Bonjour,

J'ai un lien hypertexte qui s'affiche avec une image par dessus :
Code:

1 2 <a href="" wicket:id="valider"><img src="..."/></a>
Je voudrais pouvoir modifier cette image lorsque l'utilisateur clique sur une checkbox. Je ne vois pas du tout comment procéder.

J'avance un petit peu.

Je peux maintenant définir dynamiquement la source de l'image :
Code:

1 2 3 4 5 <img wicket:id="image"/> Image img = new Image("image", new ContextRelativeResource("path/to/img")); add(img)
Seulement je n'arrive pas à modifier l'image :
Code:

1 2 3 img.setImageResource(new ContextRelativeResource("path/to/new/image")); img.render();
Ce code n'a aucun effet.

11/02/2010, 16h27
joseph_p
rapido sans chercher sur la ML wicket (ce que je t'enjoins à faire !) : tu peux faire cela :

Code:

<img wicket:id="image"/>

et dans ton code faire (pseudo code encore) :
Code:

1 2 WMC image =new WebMarkupContainer("image"); image.add(new AttributeModifier("src", true, IModel<String> imageSrcModel);
A toi de voir comment tu veux fournir ton modèle.

++
11/02/2010, 16h40
verbose

Désolé, ton pseudo code est un peu obscure, j'ai encore du mal à maîtriser le système de model.

Ce que je ne comprends pas, c'est comment je vais pouvoir modifier dynamiquement mon image.
11/02/2010, 16h50
joseph_p
pour les modèles, as tu lu cet excellent article http://jawher.wordpress.com/i-wrote/...les-de-wicket/ ?

Quoiqu'il en soit, voici une réponse courte, si cela ne suffit pas je ferai une réponse + longue ce soir :
en fait, wicket utilise les modèles comme une "indirection" entre l'affichage et les données. Autrement dit, un composant utilise un seul modèle, et pour cela utilise un bête IModel.getObject(). Par contre le modèle peut accéder aux données de différentes façons.

Dans ton cas, tu as besoin d'un modèle dynamique, qui cherche à chaque fois la bonne valeur. Je te conseille donc le LoadableDetachableModel, via qqchose comme :
Code:

1 2 3 4 5 6 IModel<String> imageSrcModel = new LoadableDetachableModel<String>(){ public String load(){ return searchForSrc(); } }
à toi de coder searchForSrc() afin de retourner la bonne source.

NB : ce modèle appelle la méthode load() une fois par requestCycle seulement. Si tu as besoin que ce soit à chaque getObject, regarde du coté du PropertyModel.

si ça ne te suffit pas, je te ferai un exemple ce soir

de façon plus globale, les modèles c'est vraiment tip top une fois assimilés : on peut vraiment tout faire aisément de façon optimale avec. Par contre la prise en main est un peu rude... mais persévérer vaut vraiment le coup !

++
11/02/2010, 16h57
verbose

Je vais essayer ça. Mais je ne comprends pas comment je vais forcer l'appel de load().
11/02/2010, 17h17
joseph_p

Citation:

Envoyé par verbose

Je vais essayer ça. Mais je ne comprends pas comment je vais forcer l'appel de load().

oups, faut utiliser l'implémentation du LoadableDetachableModel, cad : LoadableDetachableModelImpl

ensuite wicket fait le tout pour toi

++

J'ai besoin que l'image soit changée lorsqu'un évènement survient. Donc il faut que j'exécute une instruction lorsque cet évènement survient pour forcer le rafraichissement de l'image.

Je dois faire un truc du genre :
Code:

1 2 3 4 5 6 7 8 9 10 CheckBox checkbox = new CheckBox("checkbox", new Model<Boolean>()) { @Override protected void onSelectionChanged(Object obj) { Boolean choix = this.getModel().getObject(); if (choix) { //que dois-je écrire ici pour changer l'image ? } } }

salut verbose

voici un exemple de 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 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 public class ImageDemoPage extends WebPage { private static final String CHECKBOX_MODEL_TRUE = "http://www.developpez.net/forums/images/ranks/stars-2-0.gif"; protected static final String CHECKBOX_MODEL_FALSE = "http://www.developpez.net/forums/images/ranks/6pj.gif"; private String imageSrcModel; public ImageDemoPage() { final WebMarkupContainer image = new WebMarkupContainer("image"); image.add(new AttributeModifier("src", true, new PropertyModel<String>( this, "imageSrcModel"))); add(image); setImageSrcModel(CHECKBOX_MODEL_TRUE); final Model<Boolean> model = new Model<Boolean>(); CheckBox checkbox = new CheckBox("checkbox", model) { @Override protected boolean wantOnSelectionChangedNotifications() { return true; } @Override protected void onSelectionChanged(Object obj) { Boolean choix = model.getObject(); if (choix) { setImageSrcModel(CHECKBOX_MODEL_TRUE); } else { setImageSrcModel(CHECKBOX_MODEL_FALSE); } } }; add(checkbox); } public void setImageSrcModel(String imageSrcModel) { this.imageSrcModel = imageSrcModel; } public String getImageSrcModel() { return imageSrcModel; } }
qui va avec :
Code:

1 2 3 4 5 6 7 <html> <body> <img wicket:id="image"/><br/> <input type="checkbox" wicket:id="checkbox"/> </body> </html>
maintenant, je ne suis vraiment pas certain de t'aider dans la durée en faisant ainsi : comprendre les modèles est essentiel pour réellement utiliser à profit Wicket. As tu lu l'article de Jawher sur le sujet ? Les articles du wiki ?
Perso je te conseille de faire des tests avec les modèles, histoire de te rendre compte par toi même de ce qu'ils sont.

Si tu as des questions sur le sujet, n'hésites pas.

Perso j'ai aussi un peu eu du mal sur le sujet... J'avais tendance à voir ces modèles comme de la magie mise entre mes données et les composants. Je mettais des modèles dans des modèles dans des modèles. Rien ne marchait, l'horreur. Le jour où j'ai compris que les modèles ne servaient qu'à envelopper les données, tout a changé.

Ils définissent juste si les données doivent être accédées à chaque fois qu'un composant en a besoin (PropertyModel), voir être accédées qu'en lecture seule (AbstractReadOnlyModel), ou à être chargées une fois en début de RequestCycle (LoadableDetachableModel, essentiel lorsqu'on bosse avec une base de données). Tout ça donne une grande liberté au développeur sans polluer les composants, qui eux ne demandent qu'à IModel pour obtenir leur données. Bref, de l'or pur, à condition de ne pas être aveuglé ;)

++

12/02/2010, 10h03
verbose
Merci pour ta réponse Zedros.

Le problème est que ça ne marche pas chez moi. D'ailleurs, je ne comprends pas comment l'appel d'un simple setter pourrait entrainer le changement d'image :
Code:

1 2 3 4 5 6 if (choix) { setImageSrcModel(CHECKBOX_MODEL_TRUE); } else { setImageSrcModel(CHECKBOX_MODEL_FALSE); }

Ca y est, j'ai trouvé !!!!! :mrgreen:

Je suis reparti d'un truc que j'avais fais hier. J'ajoute un Behavior à mon CheckBox :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 contrat.add(new AjaxFormComponentUpdatingBehavior("onclick") { @Override protected void onUpdate(AjaxRequestTarget target) { Boolean choix = imgValiderSource.model.getObject(); if (choix != null && choix) { setImageSrcModel(CHECKBOX_MODEL_TRUE); } else { setImageSrcModel(CHECKBOX_MODEL_FALSE); } target.addComponent(image); } });
Par contre j'ai un autre petit problème maintenant. A l'origine j'utilisais une Image à la place de WebMarkupContainer, ce qui me permettait de définir comme source de l'image un ContextRelativeResource. Or maintenant je suis obligé apparemment de définir une url static. Je ne trouve plus mon image en chemin relatif.

12/02/2010, 10h51
verbose

Ok c'est bon, je m'étais planté dans les chemins.

Merci beaucoup Zedros, je n'y serais jamais arrivé sans toi :ccool:
12/02/2010, 12h13
joseph_p
Citation:

Envoyé par verbose

Merci pour ta réponse Zedros.

Le problème est que ça ne marche pas chez moi.

Hum, as tu vraiment pris tout mon code ? En effet, ce bout est important :
Code:

1 2 3 4 @Override protected boolean wantOnSelectionChangedNotifications() { return true; }
Citation:
Envoyé par verbose

D'ailleurs, je ne comprends pas comment l'appel d'un simple setter pourrait entrainer le changement d'image :

Code:

1 2 3 4 5 6 if (choix) { setImageSrcModel(CHECKBOX_MODEL_TRUE); } else { setImageSrcModel(CHECKBOX_MODEL_FALSE); }
au final, tu ne veux que changer une chaine de caratères dans ta page. Le but du IModel<String> est justement de fournir une chaine de caractère. Je me contente de changer la valeur retournée. Ca illustre très bien la puissance des modèles, puissance à maitriser si on veut utiliser au mieux wicket.

Ta solution au final fait de même, seule différence elle recharge l'image via ajax au lieu d'un aller retour serveur.

++
12/02/2010, 17h41
verbose

Citation:

au final, tu ne veux que changer une chaine de caratères dans ta page

Oui, mais il faut aussi forcer le navigateur à charger la nouvelle image.
12/02/2010, 21h34
joseph_p
Citation:

Envoyé par verbose

Oui, mais il faut aussi forcer le navigateur à charger la nouvelle image.

je vais donc réitérer ma question, as tu pris tout mon code y compris le bout ci dessous?
Code:

1 2 3 4 5 @Override protected boolean wantOnSelectionChangedNotifications() { return true; }
=> tout son intérêt est de forcer l'aller retour client/serveur et donc de réafficher la page.

à noter que, dans l'hypothèse où tu as pris tout mon code, je serai curieux de savoir ce qui ne marche pas.
++
16/02/2010, 13h39
verbose

Oui, j'avais bien pris tout ton code, y compris la méthode wantOnSelectionChangedNotifications().
16/02/2010, 16h23
joseph_p

Citation:

Envoyé par verbose

Oui, j'avais bien pris tout ton code, y compris la méthode wantOnSelectionChangedNotifications().

surprenant, ça marchait de mon côté...

Je suis intéressé par toute info me permettant de reproduire ce problème (message d'erreur, source...)...
16/02/2010, 16h45
verbose

Le problème est que j'ai changé mon code, donc ça serait délicat pour moi de détricoter ce que j'ai fais.
16/02/2010, 20h59
joseph_p

Citation:

Envoyé par verbose

Le problème est que j'ai changé mon code, donc ça serait délicat pour moi de détricoter ce que j'ai fais.

ok

c'est juste dommage de dire que le code communiqué ne marchait pas sans donner de raison ou la possibilité de voir pourquoi, surtout quand le code en question est à la portée d'un simple copier/coller.

bonne soirée
joseph

Bonjour j'ai le même problème ,

J'arrive pas à changer l'image je sais pas si c'est un problème de version de
Wicket ou autre .
si verbose avait postulé en donnant la solution il nous aura trop aidé .

voici mon code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 String imageSrcmodel = "canvas.png";
 
    public Imageviewer() {
        super();
 
           final Image ima = new Image("image", new PropertyModel<String>(this, "imageSrcmodel"));
           ima.setOutputMarkupId(true);
           add(ima);
 
        add(new AjaxFallbackLink("but") {
 
            @Override
            public void onClick(AjaxRequestTarget target) {
               imageSrcmodel = "canvas2.png";
             target.addComponent(ima);
 
 
            }
 
        });
 
    }

Code:

1
2
3
 <img wicket:id="image" width="300" height="300" />
 
        <a wicket:id="but" >change</a>

Merci pour vos réponses .