Wicket jQuery Lightbox Component

Sep 19

Wicket jQuery Lightbox Component

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

Partagez:

4 Responses to “Wicket jQuery Lightbox Component”

FiNaLsPY Says:
September 22nd, 2008 at 11:30
Whah … tu fais du jQuery … tu m’étonneras toujours ! ^^
nicogiard Says:
September 22nd, 2008 at 11:31
Ben euh pourquoi? En quoi c’est étonnant?
nicogiard Says:
October 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…)
nicogiard Says:
October 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 !)

NooCodeCommit