Small Talks/2009/July/ZK 5.0 and jQuery fr

• Author

  Timothy Clare, Technology Evangelist, Potix Corporation

• Translator

  Arnaud Dewulf, Belgium

• Date

  July 9, 2009

• Version

  ZK 5.0 preview release

Introduction

ZK5 utilise jQuery coté client, offrant un large panel de possibilités. Un des plus grands bénéfices à utiliser jQuery est qu'il existe un nombre important d'excellents plug-ins. Dans ce Small Talk, nous allons montrer l'implémentation d'un effet coté client en utilisant le plug-in jQuery Tools qui fournit nombre de composants graphiques importants dans les sites web actuels.

Ce document est le premier d'une série de 2 documents. La deuxième partie se trouve ici.

Le but de l'application

Le but de l'application est de mettre en évidence une zone d'authenfication lorsque l'utilisateur interagit avec celle-ci. Nous avons une fenêtre contenant deux zones de textes qui seront mises en surbrillance pendant que le fond de la fenêtre sera masqué.

Démo

Inclure le javascript coté client

Inclure les outils jQuery

Pour commencer, il faut inclure le plug-in jQuery tools dans la page, ce qui est fait par le composant script de ZK, voir ci-dessous.

<?script src="/scripts/tools.expose-1.0.3.js" ?>

Nous utilisons ensuite la méthode "expose" fournie par jQuery tools pour mettre en surbrillance la fenêtre.

Créer une fonction pour mettre un composant en surbrillance

Pour implémenter l'effet coté client, il nous faut créer une méthode qui prend comme paramètre un widget. La fonction "expose" est dès lors appliquée au widget avec comme conséquence la mise en surbrillance du widget passé en argument.

Certaines remarques doivent être faites. D'abord, l'évènement onLoad recherche la fenêtre qui contient les composants (dans ce cas-ci, les zones de textes et les labels) pour éviter que l'effet de couleur n'interfère avec le titre. Ensuite, l'évènement onClose est utilisé pour remettre le background à sa couleur initiale. Il nous faut spécifier cette couleur, ou bien la récupérer d'ailleurs.

La fonction javascript qui accomplit cette tâche est définie ci-dessous.

N'oubliez pas de placer ceci dans les balises <script> de votre fichier ZUL.

function exposeLogin (widget) {		
	jq(widget).expose({

		// when exposing is done, change form's background color 
		onLoad: function() { 
			jq(widget.$n('cave')).css({backgroundColor: '#c7f8ff'});		
		}, 
			 
		// when "unexposed", return to original background color 
		onClose: function() { 
			jq(widget.$n('cave')).css({backgroundColor: ""});
		}, 
			 
		api: true

	}).load();
}

Implémenter les contrôles ZK

Utiliser un namespace coté client

Lorsque des fonctionnalités sont implémentées coté client, il est nécessaire de déclarer un namespace. En faisant cela, les évènements seront gérés du coté client et non du coté serveur. Sans ce namespace, ZK va penser que votre code est du code Java et qu'il devrait être exécuté du coté serveur.

Définir un namespace

Définir un namespace est facile, il suffit d'ajouter le code suivant comme attribut de n'importe quelle balise ZK.

xmlns:w=http://www.zkoss.org/2005/zk/client

Dans notre exemple, nous l'avons ajouté dans la balise ZK de sorte que le namespace soit disponible pour tous les composants.

<zk xmlns:w="http://www.zkoss.org/2005/zk/client">

Définir un évènement coté client

La manière la pus simple de définir un évènement coté client est d'utiliser le namespace et les attributs pour "emballer" le code javascript. Le code suivant est extrait de notre exemple, remarquez que name=”onClick” est précédé du namespace déclaré dans le form [NAMESPACE]:name=”[EVENT]”.

<attribute w:name="onClick">
	//javascript code goes here
</attribute>

Appliquer l'effet à la fenêtre

Dans l'exemple, la fenêtre contient un évènement coté client appelé onClick (similaire au code ci-dessus). Dans cet évènement, la fonction exposeLogin est appelée avec “this” comme argument. Dans ce cas, l'argument “this” fait référence à la fenêtre.

Code Source

Pour voir l'exemple complet, merci de télécharger le code source ci-dessous.

Téléchargez ici!

See Also

ZK 5.0 and jQuery (English)

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.