Discussion :

[zaboug]

Bonjour,

j'ai un menu sous forme de liste qui se présente ainsi :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<ul class="blocklist">
 
	<!-- MENU -->
	<li class="selected-item"><a href="#">Accueil</a>
	</li>
	<li><a href="#">Infos E4N</a></li>
	<li><a href="#">FAQ</a></li>
	<li><a href="#">Contact</a></li>
	<li wicket:id="event"><a>Event</a></li>
	<!-- END MENU -->
</ul>

Le but est que quand on clique sur un des liens, la page correspondante s'affiche (ça ça va) et que le style css "selected-item" soit appliqué à la puce sur laquelle on a cliqué.

Je débute en wicket (et en framework web en général) et je ne sais pas trop quelle stratégie utiliser :
j'ai testé la solution proposée ici qui fait le changement via wicket, mais sans succès (c-à-d que la page event apparait bien, mais que le style n'est pas appliqué).
Mon code Java correspondant :

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
package fr.statlife.protoE4N;
 
import org.apache.wicket.PageParameters;
import org.apache.wicket.behavior.SimpleAttributeModifier;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.link.BookmarkablePageLink;
 
import fr.statlife.protoE4N.pages.EventPage;
 
public abstract class BasePageVisiteur extends WebPage {
 
	public BasePageVisiteur() {
		super();
		add(new BookmarkablePageLink<Void>("event", EventPage.class));
	}
 
	public BasePageVisiteur(PageParameters parameters) {
		super(parameters);
		final BookmarkablePageLink<Void> lienEvent = new BookmarkablePageLink<Void>("event", EventPage.class);
		lienEvent.add(new SimpleAttributeModifier("class", "selected-item"));
		add(lienEvent);
	}
}

Vaut-il mieux utiliser du javascipt via wiQuery par exemple?

ou encore de tenter d'adapter la solution de joseph_p permettant de changer une image en fonction d'une checkbox?

J'ai un peu de mal à savoir de quel côté creuser... tout conseil serait le bienvenue.
Merci d'avance

[zaboug]

bon, en postant le message précédant, j'ai revu le coup des deux constructeurs, en mettant le même code dans les deux, le style apparait bien finalement.
Je vais essayer de me documenter sur cette histoire de 2 constructeurs, voir si c'est nécessaire de garder les deux.

Pour en revenir à mon problème de stratégie, la solution implémentée ajoute bien la class "selected-item" à la puce, mais pas lors d'un clic.
Du coup, j'imagine que pour gérer le fait que ça soit ajouté seulement lors d'un clic sur le menu, il faut utiliser Javascript, et donc wiQuery (par exemple).
Je suis vraiment en phase exploratoire, je découvre. Donc si je me plante royalement de direction hésitez pas à me le dire.

[zaboug]

Bon, j'avance un peu...

Au fil du développement (j'avais un peu laissé ce problème de style de côté pour m'attaquer au reste), la code HTML de mon menu est devenu le suivant :

Code :

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

1
2
3
4
5
6
7
8
9
<ul class="blocklist">
 
	<!-- MENU -->
	<li wicket:id="accueilpage"><a>Accueil</a></li>
	<li wicket:id="e4npage"><a>Infos E4N</a></li>
	<li wicket:id="faqpage"><a>FAQ</a></li>
	<li wicket:id="contactpage"><a>Contact</a></li>
	<!-- END MENU -->
</ul>

J'ai intégré la librairie WiQuery à mon projet pour implémenter une FAQ (cf sujet suivant), du coup, je me suis dit que je pourrais l'utiliser pour mon problème de CSS dynamique :

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
public abstract class BasePageVisiteur extends WebPage {
 
	public BasePageVisiteur(PageParameters parameters) {
		super(parameters);
 
		// ajout des liens du menu
		final BookmarkablePageLink<Void> lienAccueil = new BookmarkablePageLink<Void>("accueilpage", AccueilPage.class);
		lienAccueil.setOutputMarkupId(true);
		lienAccueil.setMarkupId(lienAccueil.getId());
		add(lienAccueil);
 
		final BookmarkablePageLink<Void> lienE4N = new BookmarkablePageLink<Void>("e4npage", E4NPage.class);
		lienE4N.setOutputMarkupId(true);
		lienE4N.setMarkupId(lienE4N.getId());
		add(lienE4N);
 
		final BookmarkablePageLink<Void> lienFAQ = new BookmarkablePageLink<Void>("faqpage", FaqPage.class);
		lienFAQ.setOutputMarkupId(true);
		lienFAQ.setMarkupId(lienFAQ.getId());
		add(lienFAQ);
 
		final BookmarkablePageLink<Void> lienContact = new BookmarkablePageLink<Void>("contactpage", ContactPage.class);
		lienContact.setOutputMarkupId(true);
		lienContact.setMarkupId(lienContact.getId());
		add(lienContact);
 
		//ajout du style "selected-item" sur le menu accueil
		//lienAccueil.add(new SimpleAttributeModifier("class", "selected-item"));
 
		lienE4N.add(new WiQueryEventBehavior(new Event(MouseEvent.CLICK){
 
			@Override
			public JsScope callback() {
				return JsScope.quickScope(new JsQuery(lienE4N).$().chain(AttributesHelper.attr("class", "selected-item")));
			}
 
		}));
	}
}

Résultat : le css apparait quand on clique puis disparait aussitôt. Logique : quand on clique le style css est bien ajouté à mon lien, mais le fait de cliquer fait que le lien est suivi, donc la page est rechargée, et donc le style disparait
Bon, je sais ce qui se passe c'est déjà ça, mais ça résout pas mon problème

Dans les exemples Wickets, il présente le navomatic : un menu de navigation avec le composant Border. Mais il est dit dans l'explication de l'exemple que le style (lien courant en italique) est appliqué automatiquement... du coup, ça correspond pas vraiment à ce que je veux... Mais je vais essayer de fouiller un peu par là quand même, sait-on jamais.

[zaboug]

bon, au final j'ai trouvé une solution qui donne le comportement souhaité à mon menu : j'ai ajouté un PageParameter à chacun de mes liens et j'applique le style en fonction du paramètre.
Ce qui nous donne le code suivant :

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
public BasePage(PageParameters parameters) {
	super(parameters);
 
	// ajout des liens du menu
	final BookmarkablePageLink<Void> lienAccueil = new BookmarkablePageLink<Void>("accueilpage", AccueilPage.class, new PageParameters("p=accueil"));
	lienAccueil.add(new SimpleAttributeModifier("style", "cursor: pointer;"));
	add(lienAccueil);
 
	final BookmarkablePageLink<Void> lienE4N = new BookmarkablePageLink<Void>("e4npage", E4NPage.class, new PageParameters("p=e4n"));
	lienE4N.add(new SimpleAttributeModifier("style", "cursor: pointer;"));
	add(lienE4N);
 
	BookmarkablePageLink<Void> lienFAQ = new BookmarkablePageLink<Void>("faqpage", FaqPage.class, new PageParameters("p=faq"));
	lienFAQ.add(new SimpleAttributeModifier("style", "cursor: pointer;"));
	add(lienFAQ);
 
	BookmarkablePageLink<Void> lienContact = new BookmarkablePageLink<Void>("contactpage", ContactPage.class, new PageParameters("p=contact"));
	lienContact.add(new SimpleAttributeModifier("style", "cursor: pointer;"));
	add(lienContact);
 
 
	if(parameters.isEmpty())
		lienAccueil.add(new SimpleAttributeModifier("class", "selected-item"));
	else
	{
		String page = parameters.getString("p");
		if(page.equals("accueil"))
			lienAccueil.add(new SimpleAttributeModifier("class", "selected-item"));
		else if(page.equals("e4n"))
			lienE4N.add(new SimpleAttributeModifier("class", "selected-item"));
		else if(page.equals("faq"))
			lienFAQ.add(new SimpleAttributeModifier("class", "selected-item"));
		else if(page.equals("contact"))
			lienContact.add(new SimpleAttributeModifier("class", "selected-item"));
	}
}

C'est sans doute pas l'idéal, déjà car ça modifie les URLs, mais ça a le mérite de fonctionner. Une meilleure solution serait sans doute d'appliquer le style en fonction de la classe qui a appeler le constructeur de BasePage, mais j'ai absolument aucune idée de la manière de récupérer ce genre d'info...
J'essaierai peut être de creuser de ce côté si j'ai un moment pour du refactoring (à moins que quelqu'un ici sache comment faire?).

En attendant, le comportement attendu est bien là, je mets donc ce sujet comme résolu, ça pourra peut être être utile à quelqu'un.