Aujourd’hui j’ai porté le plugin jQuery Lightbox en wicket.
Et voilà mon retour d’expérience.
jQuery Lightbox plugin
Comme l’explique son concepteur, pour faire marcher le plugin jQuery Lightbox il faut tout d’abord ajouter les ligne suivante dans le head de votre page html.
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lightbox.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$(".lightbox").lightbox();
});
</script>Et ensuite pour l’utiliser voila en gros ce qu’il faut faire (notez l’attribut [rel]) :
<a href="images/image-1.jpg" class="lightbox" rel="flowers" title="jQuery Lightbox Sample Image"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a> <a href="images/image-2.jpg" class="lightbox" rel="flowers" title="Photo by Steven Pinker"><img src="images/thumb-2.jpg" width="100" height="40" alt="" /></a> <a href="images/image-3.jpg" class="lightbox" rel="flowers" title="Photo by Uwe Hermann"><img src="images/thumb-3.jpg" width="100" height="40" alt="" /></a>
Wicket jQuery Lighbox Component
Dans un premier temps voila l’arborescence pour ce composant:
Comme vous pouvez le constater, les images, le fichier CSS et les différents fichiers javascipts sont embarqués dans le composant.
import org.apache.wicket.Resource; import org.apache.wicket.ResourceReference; import org.apache.wicket.behavior.HeaderContributor; import org.apache.wicket.markup.ComponentTag; import org.apache.wicket.markup.html.link.ExternalLink; public class LightboxLink extends ExternalLink { public LightboxLink(String id, String href) { this(id, href, null); } public LightboxLink(String id, String href, String label) { super(id, href, label); add(HeaderContributor.forCss(LightboxLink.class, "css/lightbox.css")); add(HeaderContributor.forJavaScript(LightboxLink.class, "js/jquery-1.2.6.js")); add(HeaderContributor.forJavaScript(LightboxLink.class, "js/jquery.lightbox.js")); ResourceReference lightboxInit = new ResourceReference("lightboxInit") { protected Resource newResource() { return new LightboxJavascriptResource(); } }; HeaderContributor javascriptHeaderContributor = LightboxJavascriptResource.createHeaderContributor(lightboxInit); add(javascriptHeaderContributor); } @Override protected void onComponentTag(ComponentTag tag) { super.onComponentTag(tag); if (getDefaultModel() != null) { tag.put("class", "lightbox"); tag.put("rel", "album"); } } }
Constructeur de la classe LightboxLink
Dans un premier temps on ajoute d’abord des [HeaderContributor] pour la CSS et pour les Javascripts.
Ensuite, et pour coller au fonctionnement du plugin, il faut écrire quelque part dans notre page html le code suivant
<script>
$(document).ready(function(){
$(".lightbox").lightbox();
});
</script>Pour se faire nous allons générer dynamiquement une « Resource » au sens de Wicket, et ajouter un [HeaderContributor] vers celle-çi. (nous verons ça en détail juste après avec le [LightboxJavascriptResource])
Méthode onComponentTag de la classe LightboxLink
Cette méthode permet d’ajouter à la volée, les attributs [class] et [rel] au lien pour que le plugin fonctionne.
LightboxJavascriptResource
Voici donc la description de la classe [LightboxJavascriptResource]
import org.apache.wicket.RequestCycle; import org.apache.wicket.ResourceReference; import org.apache.wicket.behavior.HeaderContributor; import org.apache.wicket.markup.html.IHeaderContributor; import org.apache.wicket.markup.html.IHeaderResponse; import org.apache.wicket.markup.html.WebResource; import org.apache.wicket.util.resource.AbstractStringResourceStream; import org.apache.wicket.util.resource.IResourceStream; public class LightboxJavascriptResource extends WebResource { @Override public final IResourceStream getResourceStream() { return new JavascriptResourceStream(); } /** * create a {@link IHeaderContribution header contribution} that will render an autogenerate link to the {@link JavascriptWebResource javascript resource}. */ public static HeaderContributor createHeaderContributor(final ResourceReference reference) { return new HeaderContributor(new IHeaderContributor() { public void renderHead(IHeaderResponse response) { CharSequence url = RequestCycle.get().urlFor(reference, null); StringBuffer buffer = new StringBuffer(); buffer.append("<script type=\"text/javascript\" "); buffer.append("src=\"").append(url).append("\">"); buffer.append("</script>"); response.renderString(buffer.toString()); } }); } /** * resource stream for streaming javascript content. */ private static class JavascriptResourceStream extends AbstractStringResourceStream { @Override protected String getString() { StringBuffer sb = new StringBuffer(); sb.append("$(document).ready(function(){"); sb.append("$(\".lightbox\").lightbox();"); sb.append("});"); return sb.toString(); } } }
La méthode [createHeaderContributor] permet de générer a la volée la déclaration de la balise script pour la section head de la page html.
L’inner class [JavascriptResourceStream] est la « Resource » au sens Wicket qui contiendra le code Javacript.
Au final, voici ce qui est générer dans notre page html:
... <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>titre de la page</title> <link href="../../../../style/style.css" rel="stylesheet" type="text/css"/> <link rel="stylesheet" type="text/css" href="../../../../resources/com.noocodecommit.wicket.examples.wicket.components.link.lightbox.LightboxLink/css/lightbox.css" /> <script type="text/javascript" src="../../../../resources/com.noocodecommit.wicket.examples.wicket.components.link.lightbox.LightboxLink/js/jquery-1.2.6.js"></script> <script type="text/javascript" src="../../../../resources/com.noocodecommit.wicket.examples.wicket.components.link.lightbox.LightboxLink/js/jquery.lightbox.js"></script> <script type="text/javascript" src="../../../../resources/org.apache.wicket.Application/lightboxInit"></script> </head> <body> ...
Et quand on regarde se qui se trouve derrière l’url générée par [LightboxJavascriptResource] : [../../../../resources/org.apache.wicket.Application/lightboxInit] on retrouve bien :
$(document).ready(function(){$(".lightbox").lightbox();});Youloulou, notre composant « Wicket jQuery Lightbox » fonctionne.
Imprimer cet article
septembre 22nd, 2008 at 11:30
Whah … tu fais du jQuery … tu m’étonneras toujours ! ^^
septembre 22nd, 2008 at 11:31
Ben euh pourquoi? En quoi c’est étonnant?
octobre 3rd, 2008 at 15:27
du coup j’vais essayer de porter tout ça avec ce qu’a fait Butcho (pour ceux qui suivent pas…)
octobre 7th, 2008 at 07:31
Bon j’ai fait un premier jet ce matin, mais faut encore qu’on discute de deux trois trucs avec Butcho, concernant le moteur de jQuery4Wicket.
Mais ça va venir vite (non greg, ne le dit pas !)