ZK 5.0 and jQuery fr"
m (Created page with '{{Template:Smalltalk_Author_Translator| |author=Timothy Clare, Technology Evangelist, Potix Corporation |translator=Arnaud Dewulf, Belgium |date=July 9, 2009 |version=ZK 5.0 prev…') |
m (→Démo) |
||
| Line 18: | Line 18: | ||
= Démo = | = Démo = | ||
| − | <gflash width="600" height="350"> | + | <gflash width="600" height="350">JQuery_demo.swf |
</gflash> | </gflash> | ||
Revision as of 04:10, 14 September 2010
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.
See Also
| Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License. |