Discussion :

[verbose]

Bonjour,

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

Code :

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

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.

[verbose]

J'avance un petit peu.

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

Code :

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

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 :

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

1
2
3
 
img.setImageResource(new ContextRelativeResource("path/to/new/image"));
img.render();

Ce code n'a aucun effet.

[joseph_p]

rapido sans chercher sur la ML wicket (ce que je t'enjoins à faire !) : tu peux faire cela :

Code :

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

<img wicket:id="image"/>

et dans ton code faire (pseudo code encore) :

Code :

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

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.

++

[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.

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

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

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 !

++

[verbose]

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

[joseph_p]

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

++

[verbose]

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 :

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

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 ?
        }
    }
}

[joseph_p]

salut verbose

voici un exemple de code :

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

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

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é

++

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

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

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

[verbose]

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

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

Code :

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

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.

[verbose]

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

Merci beaucoup Zedros, je n'y serais jamais arrivé sans toi

[joseph_p]

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 :

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

1
2
3
4
			@Override
			protected boolean wantOnSelectionChangedNotifications() {
				return true;
			}

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

Code :

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

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.

++

[verbose]

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.

[joseph_p]

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 :

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

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.
++

[verbose]

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

[joseph_p]

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...)...

[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.

[joseph_p]

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

[dot-_-net]

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 :

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

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

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

Merci pour vos réponses .