Tous les autres noms de produits ou appellations sont des marques déposées ou des noms commerciaux appartenant à leurs propriétaires respectifs.

Le framework YUI et le développement 4D Par Olivier DESCHANELS, Responsable Programme 4D S.A. Note technique 4D-201004-08-FR Version 1 - Date 1 avril 2010 Résumé Dans la présente note technique, nous allons vous présenter le framework javascript YUI et voir comment l intégrer au sein d un développement web 4D. 4D Notes techniques Copyright 1985-2010 4D SAS - Tous droits réservés Tous les efforts ont été faits pour que le contenu de cette note technique présente le maximum de fiabilité possible. Néanmoins, les différents éléments composant cette note technique, et le cas échéant, le code, sont fournis sans garantie d'aucune sorte. L'auteur et 4D SAS déclinent donc toute responsabilité quant à l'utilisation qui pourrait être faite de ces éléments, tant à l'égard de leurs utilisateurs que des tiers. Les informations contenues dans ce document peuvent faire l'objet de modifications sans préavis et ne sauraient en aucune manière engager 4D SAS. La fourniture du logiciel décrit dans ce document est régie par un octroi de licence dont les termes sont précisés par ailleurs dans la licence électronique figurant sur le support du Logiciel et de la Documentation afférente. Le logiciel et sa documentation ne peuvent être utilisés, copiés ou reproduits sur quelque support que ce soit et de quelque manière que ce soit, que conformément aux termes de cette licence. Aucune partie de ce document ne peut être reproduite ou recopiée de quelque manière que ce soit, électronique ou mécanique, y compris par photocopie, enregistrement, archivage ou tout autre procédé de stockage, de traitement et de récupération d'informations, pour d'autres buts que l'usage personnel de l'acheteur, et ce exclusivement aux conditions contractuelles, sans la permission explicite de 4D SAS. 4D, 4ème Dimension, 4D Server, ainsi que tous les logos sont des marques enregistrées de 4D SAS. Windows,Windows NT, Vista, Windows 7, Win 32s et Microsoft sont des marques enregistrées de Microsoft Corporation. ICU Copyright 1995-2010 International Business Machines Corporation and others - iodbc Copyright 1995-2006: Open Linck Software - LibZip Copyright 2006 Dieter Baron and Thomas Klausner. OpenSSL : OpenSSL Project for use in the OpenSSL Toolkit. - SYNAPSE Copyright 1994-2010 Synapse Developement - XALAN Copyright 2010 4D SAS/ XERCES Copyright 2010 4D SAS - zlib Copyright 1995-2010 Jean-Loup Gailly and Mark Adler. Apple, Macintosh, QuickTime sont des marques enregistrées ou des noms commerciaux de Apple Computer,Inc. Mac2Win Software Copyright 1990-2002 est un produit de Altura Software,Inc. Tous les autres noms de produits ou appellations sont des marques déposées ou des noms commerciaux appartenant à leurs propriétaires respectifs. 1 / 25

Le framework YUI et le développement 4D Dans la présente note technique, nous allons vous présenter le framework javascript YUI et voir comment l intégrer au sein d un développement web 4D. I. Yahoo! User Interface Library YUI est l acronyme de Yahoo! User Interface Library. Comme son nom le laisse deviner ce framework est une production de la société Yahoo! Il s agit d une collection gratuite d utilitaires et de contrôles entièrement écrite en javascript et accompagnée des CSS indispensables à la présentation des éléments. Les contrôles et objets graphiques sont nommés Widgets dans le monde YUI. Les utilitaires sont des outils complémentaires permettant de préparer ou d'optimiser le code. 1.1. Points clefs de YUI YUI est écrit par des experts de la société Yahoo! pour les propres besoins de leur société. L utilisation de YUI est gratuite pour tous les usages et régie par les termes de la licence BSD. Bien que de nombreux contributeurs du monde entier participent à la réalisation de YUI, il n y a pas de contribution non contrôlée par l équipe de Yahoo! ce qui tend à garantir une bonne robustesse de l ensemble. Comme tout bon framework, YUI est indépendant des navigateurs, ce qui est un confort important lorsqu on connait les différences entre des produits tels que Firefox, Safari ou Internet Explorer. Contrairement à d autres, YUI est documenté de manière professionnelle et ne se contente pas de proposer des API générés à la va-vite par un javadoc. Enfin, comme nous y sommes habitués dans le monde 4D, YUI propose une compatibilité entre les versions successives qui permet de migrer en douceur. 1.2. Technologies utilisées Javascript est bien évidement au coeur de YUI, avec sa «déclinaison» AJAX pour les requêtes du client au serveur. 2 / 25

Pour la communication et les échanges, les fonctions YUI utilisent au choix du JSON ou de l XML. Enfin pour la partie présentation, les technologies HTML, XHTML, CSS et DOM sont utilisées. Toutes ces technologies mises en oeuvre par YUI sont parfaitement compatibles avec 4D! 1.3. Ressources disponibles autour de YUI De nombreuses ressources sont disponibles pour travailler avec YUI. Voici les plus importantes : a.c.a. Le portail Disponible à l adresse http://developer.yahoo.com/yui/index.html ce site regroupe l ensemble des accès aux informations : Vous y trouverez notamment la description de la librairie à l adresse suivante : http://developer.yahoo.com/yui/2/ 3 / 25

a.c.b. Une documentation - prise en main YUI est organisé en module. Chaque module est documenté dans une page dédiée qui permet d avoir un aperçu rapide du module, une prise en main et des usages plus élaborés. a.c.c. Exemples Pour chaque module, mais également de façon plus globale, de nombreux exemples de mise en oeuvre sont disponibles à l adresse http://developer.yahoo.com/yui/examples/ : 4 / 25

a.c.d. Cheat Sheet Disponible module par module, chaque Cheat Sheet se présente sous la forme d une simple feuille A4 regroupant en son sein les informations primordiales. Plus d une cinquantaine de Cheat Sheet sont disponibles formant un véritable mémorandum de YUI. L ensemble de ces Cheat Sheet est disponible à l adresse http://developer.yahoo.com/yui/docs/assets/cheatsheets.zip a.c.e. Les API Pour avoir le détail de l ensemble des éléments de la librairie, vous pouvez consulter les API à l adresse : http://developer.yahoo.com/yui/docs/ : 5 / 25

Cette ressource est utile lorsqu on cherche les paramètres possibles ou des détails de fonctionnement mais n aidera pas à la prise en main! D autres ressources existent pour cela... a.c.f. Les blogs Alimenté par les membres de l équipe de développement de YUI et des employés de Yahoo!, ce blog apporte de nombreuses réponses. Il est disponible à l adresse : http://yuiblog.com/ : a.c.g. Le théâtre YUI theater est un lieu qui regroupe de nombreuses vidéos autour de YUI et qui sont très souvent de réels cours donnés par les développeurs en personne. Cela se trouve à l adresse : http://developer.yahoo.com/yui/theater/ : 6 / 25

a.c.h. Des livres Des ouvrages papier sont disponibles pour apprendre YUI, principalement en anglais. Nous pouvons vous citer par exemple l ouvrage de Dan Wellman : Learning the Yahoo! User Interface library Autres sources utiles Si vous voulez accéder à un forum dédié à YUI il faut aller à l'adresse : http://yuilibrary.com/forum/ Pour ajouter des extensions à YUI, vous pouvez vous rendre à l'adresse : http://bubbling-library.com/ 7 / 25

II. Préparation d une base 4D 2.1. Création de la base 4D Une fois n est pas coutume, pour illustrer cette note technique la base peut être construite de zéro. Vous pouvez donc créer une base vierge avec les réglages suivants : La base est prête! Vous pouvez alors tester la base avec le menu suivant : 8 / 25

Après avoir démarré le serveur web, vous pouvez le tester et obtenez alors la page par défaut : Nous allons partir de cette base élémentaire pour continuer notre découverte de YUI. 2.2. Le dossier web En allant dans le dossier de la base de données ainsi créée (en ouvrant éventuellement le package sous Mac OS), vous pouvez trouver le dossier contenant les pages web et qui doit se nommer «DossierWeb» (si vous n avez pas changé les préférences proposées). Ce dossier ne contient actuellement qu une simple page html nommée «index.html». C est à partir de cette page que nous allons travailler pour afficher un dialogue YUI. III. Un peu de théorie 9 / 25

Si l on vous parle de MVC, vous devez répondre «Modèle-Vue-Contrôleur» qui est un des fondements de l organisation du développement des sites web. 3.1. Schéma classique 3.2. Schéma dans une base web 4D Dans ce schéma, le modèle est constitué par la base de données et les méthodes 4D. Le contrôleur est le code javascript côté client et la ou les méthodes bases côté serveur (Méthodes base «Sur authentification web» et «Sur connexion web»). Enfin la vue est constituée par le markup html (c est à dire le réceptacle de données html) agrémenté de la présentation via les CSS. IV. Mise en oeuvre de YUI 10 / 25

4.1. Objectif Nous allons à présent essayer d ouvrir un simple dialogue de connexion dans une fenêtre dessinée au sein de la page web affichée par le navigateur. 4.2. Moyens Pour réaliser notre objectif, nous allons utiliser YUI et plus spécialement le module dialogue proposé par YUI. Le module dialogue utilise les modules container et button de YUI. 4.3. Installation de YUI Pour installer YUI, il n y a pratiquement rien à faire si ce n est faire référence aux fichiers javascript de la librairie dans le code de vos pages html. Ces fichiers javascript peuvent être situés en ligne sur les serveurs Yahoo! ou sur votre serveur spécifique. Dans ce cas il vous faut installer le dossier de YUI dans votre dossier web après l avoir téléchargé à l adresse : http://developer.yahoo.com/yui/2/ 4.4. Utilisation du configurateur YUI est constitué de nombreux modules et il serait dommage de devoir télécharger systématiquement toutes les librairies de code pour chaque page. L idée est de ne charger que les éléments strictement nécessaires au fonctionnement de la page. Mais le problème pour cela est qu il faut connaitre les dépendances entre les différents modules sinon le code ne fonctionne pas correctement. Fort heureusement, il existe un moyen simple pour résoudre ce problème : le configurateur disponible à l adresse : http://developer.yahoo.com/yui/articles/hosting/#configure 11 / 25

Dans ce configurateur vous avez de nombreux choix ; voici les éléments à choisir au stade de notre étude. d.d.a. Filter Le code javascript de YUI est proposé sous trois formes : -min, -debug et raw. La version -min est «minifiée» c est à dire réduite au minimum afin que le temps de téléchargement et l empreinte mémoire soit minimale. C est l option qui nous intéresse aujourd hui car nous allons nous limiter à utiliser le code de YUI ; dans d autres cas il nous faudrait choisir la version de debogage pour avoir plus d information en cas de souci, ou la version raw contenant les sources commentées mais sans le code de débogage. d.d.b. Option L option de combinaison des fichiers permet de réduire le nombre d échange entre le navigateur et le serveur. d.d.c. CDN Les CDN (Content Delivery Network) sont des outils très puissants et extrêmement pratiques pour accélérer les temps de chargement des éléments de YUI. En effet, les librairies YUI sont recopiées sur de nombreux CDN à travers le monde et donc comme il y en a toujours un proche de chez vous les temps de mise à disposition sont des plus réduits. Gardons le CDN de Yahoo!. d.d.d. Les différents modules Viennent ensuite 6 blocs de modules permettant de sélectionner les éléments que nous souhaitons utiliser. Nous allons donc choisir «button control» et «container familly». 4.5. Mise en place des CSS Le configurateur étudié précédemment nous donne l indication des deux CSS nécessaires pour notre projet de page : container.css et button.css Il nous faut donc modifier la page index.html pour ajouter les appels adéquats afin de charger ces CSS. La partie <head head> de la page est actuellement la suivante : <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>page d'accueil du serveur Web de 4D</title> <style type="text/css"> <!-- 12 / 25

h2 { font: 16px Verdana, Arial, Helvetica, sans-serif; } p { font: 12px Verdana, Arial, Helvetica, sans-serif; } --> </style> </head> Voici les modifications nécessaires : <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>page d'accueil du serveur Web de 4D</title> <style type="text/css"> <!-- h2 { font: 16px Verdana, Arial, Helvetica, sans-serif; } p { font: 12px Verdana, Arial, Helvetica, sans-serif; } --> </style> <link rel="stylesheet" type="text/css" href=" http://yui.yahooapis.com/2.7.0/build/container/assets/skins/sam/container.css "> <link rel="stylesheet" type="text/css" href=" http://yui.yahooapis.com/2.7.0/build/button/assets/skins/sam/button.css "> </head> Ici nous avons des url vers les ressources YUI en ligne ; toutefois si vous désirez utiliser vos propres ressources YUI en ligne, il vous faudra adapter le code pour donner le bon chemin d accès. 4.6. Appliquer les CSS Le simple fait de lier votre page avec des CSS ne provoque pas leur utilisation. Pour cela il faut que des éléments du code html appellent un ou plusieurs des éléments de style décrit par la CSS. Dans la documentation de YUI nous apprenons que pour un bon fonctionnement la classe yuiskin-sam doit être appliquée à un élément parent de la partie du code html qui sera la cible de YUI. L habitude est donc d appliquer la classe yui-skin-sam à la balise body qui englobe tous les balises de dessin html de la page (ce n est pas une obligation, mais c est le plus simple). Le code de la page index.html évolue donc de : <body bgcolor="#ffffff"> à : <body bgcolor="#ffffff" class="yui-skin-sam"> 13 / 25

La page est à présent prête au niveau CSS pour YUI! Si vous rechargez la page dans votre navigateur vous ne remarquerez aucun changement, ce qui est bien souhaitable car nous n avons pas encore spécifié explicitement les éléments affectés par YUI. 4.7. Définir le markup html A présent nous pouvons définir un markup html, c est à dire un élément qui sera la cible du code YUI et donc dans notre cas le dialogue de connexion. Voici le code que nous vous proposons : <div id="mylogin"> <div class="hd">identification</div> <div class="bd"> <form id="dlgform" name="dlgform" method="post" action="/4daction/www_login/"> <p> <label for="login">identifiant:</label> <input type="text" name="login" /> </p> <p> <label for="password">mot de passe:</label> <input type="password" name="password" /> </p> </form> </div> </div> Ce code html sera inséré dans la page index.html juste avant la balise fermante < /body> La première balise div est le container qui servira de base plus tard à la fenêtre du dialogue. Nous lui donnons un identifiant : mylogin. Le deuxième div de classe hd est le futur titre de la fenêtre. hd est l abréviation de header, soit entête en anglais... Le troisième div de classe bd pour body contiendra le coeur du dialogue. Vient ensuite une balise <form> qui permet de définir un formulaire d une manière tout à fait classique en html. L action associée à la balise <form> est consituée d un appel à 4D via un 4DAction. Nous pouvons à présent créer la méthode www_login dans la base de données pour le temps voulu vérifier que l appel est bien réalisé : ` ---------------------------------------------------- ` Méthode : www_login 14 / 25

` Description ` ` Paramètres ` ---------------------------------------------------- C_TEXTE($1) TABLEAU TEXTE (_form_champ;0) TABLEAU TEXTE (_form_value;0) LIRE VARIABLES FORMULAIRE WEB (_form_champ;_form_value) ENVOYER REDIRECTION HTTP ("/index.html") Sans oublier de définir l attribut «disponible via 4DACTION, 4DMETHOD et 4DSCRIPT» : Le markup html est prêt, mais pas encore actif comme nous le désirons. En effet si à présent nous rechargeons la page nous voyons le formulaire en bas de la page : 15 / 25

Nous remarquons que nous n avons pas défini de boutons pour valider ou annuler le formulaire ; ce n est pas un oubli, mais un choix sur lequel nous reviendrons. V. Codage du dialogue façon YUI Pour atteindre notre but nous devons à présent déclarer le dialogue en tant qu objet YUI, lui ajouter les boutons nécessaires, gérer ces derniers, appliquer le rendu et enfin déclencher l affichage. Tout cela va être réalisé à travers du code javascript - que nous écrirons dans un fichier nommé mylogin.js - car tout se passe du côté client c est-à-dire dans le navigateur. 5.1. Déclarer le dialogue Dans le markup html nous avons défini un dialogue constitué par le div englobant et d identifiant «mylogin». Il nous faut à présent définir ce markup comme un dialogue YUI et stocker le résultat dans un objet javascript que nous pourrons manipuler par la suite. Voici la ligne requise pour ceci : var mydialog = new YAHOO.widget.Dialog("myLogin"); mydialog est à présent l objet que nous allons manipuler par la suite. 5.2. Ajouter des boutons Le markup html ne définit pas de bouton en utilisant les balises <input type= "Submit".../> que nous rencontrons habituellement dans les formulaires web. Ici nous préférons nous appuyer sur les boutons proposés par YUI qui présentent l avantage d être plus simple à contrôler et surtout avec des contrôles beaucoup plus riches qu un simple envoi du formulaire. 16 / 25

Note : Pour respecter les bons usages de l'html, il faudrait ajouter des champs "input" de type "submit" directement dans le formulaire. Nous avons fait ici le choix de rester en accord avec les choix de YUI qui est de gérer via le code les boutons quitte à faire une entorse aux bonnes pratiques. La construction des boutons se déroulera en deux étapes : la définition des propriétés, puis l ajout des boutons au formulaire. Pour définir les boutons et leurs propriétés nous pouvons écrire le code suivant : var mybuttons = [ { text:"submit", handler:handlesubmit, isdefault:true }, { text:"cancel", handler:handlecancel } ]; Dans le tableau mybuttons nous avons deux entrées, donc nous aurons deux boutons. Le premier bouton a un titre «Submit Submit». Une fonction javascript lui est associée et sera déclenchée lorsque l on appuyera sur ce bouton ; c est la propriété handler qui définit la fonction handlesubmit. Enfin ce bouton est choisi comme bouton par défaut via la propriété isdefault. Le second bouton est le bouton d annulation. Cet objet mybuttons doit maintenant être ajouté au formulaire en tant que boutons. Pour réaliser cette action il faut écrire la ligne suivante : mydialog.cfg.queueproperty("buttons", mybuttons); 5.3. Gérer les comportements Les boutons et les fonctions associés sont maintenant définis. Il faut à présent créer les fonctions associées. La méthode d annulation est la plus simple. Voici son code : var handlecancel = function() { this.cancel(); } Nous utilisons ici «this this» qui «représente» le dialogue lui même, pour l annuler. La fonction de validation est presque aussi simple : var handlesubmit = function() { document.getelementbyid( dlgform ).submit(); 17 / 25

} Cette fois nous allons chercher le formulaire html par son identifiant et nous l envoyons. Il est maintenant très facile à présent de soumettre l envoi à des conditions comme par exemple la vérification des champs pour contrôler la saisie. 5.4. Appliquer le rendu L objet mydialog est maintenant défini ; il faut demander à YUI de préparer la représentation dans le navigateur. Cette étape obligatoire s effectue par la ligne suivante : mydialog.render() 5.5. Assembler et sauver le code Maintenant il reste à sauver les lignes dans un fichier que nous appellerons mylogin.js et que nous placerons dans un sous dossier «js» au sein du dossier web de la base. Le code actuel du fichier mylogin.js doit donc être celui-ci : var mydialog = new YAHOO.widget.Dialog("myLogin"); var handlecancel = function() { this.cancel(); }; var handlesubmit = function() { document.getelementbyid('dlgform').submit(); }; var mybuttons = [ { text:"submit", handler:handlesubmit, isdefault:true }, { text:"cancel", handler:handlecancel } ]; mydialog.cfg.queueproperty("buttons", mybuttons); mydialog.render(); 5.6. Appeler le code Le code dans un fichier c'est bien, mais il faut que le fichier soit appelé sinon il ne sert à rien. Mais comme ce code utilise la librairie YUI, il faut ajouter également les appels aux fichiers nécessaires de YUI qui sont déterminés par le configurateur (comme pour les CSS). Le code html à ajouter est donc le suivant : <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/container/container-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script> <script type="text/javascript" src="/js/mylogin.js"></script> Placez ce code dans la balise <head head> de manière traditionnelle c est-à-dire juste après les appels pour lier les CSS : 18 / 25

... <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/container/assets/skins/sam/container.css"> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/button/assets/skins/sam/button.css"> <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/container/container-min.js"></script> <script type="text/javascript" src="/js/mylogin.js"></script> </head> Rechargez la page pour constater le résultat...... vous ne devez constater aucun changement! En effet le script est mal positionné. Regardons pourquoi. Lors du chargement du fichier mylogin.js le code est immédiatement exécuté par le navigateur. Dans ce code nous faisons référence à un objet défini par son identifiant (mylogin) qui n est pas encore connu du navigateur car pas encore chargé, le code html se trouvant plus bas dans la page. La librairie YUI ne peut alors rien faire! La solution est de déplacer les appels au javascript pour respecter ce qui est recommandé actuellement dans les bonnes pratiques des webmasters. La bonne place est au plus bas dans la page, c est à dire juste avant la balise fermante </html> : </body> <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/container/container-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/js/mylogin.js"></script> </html> A présent rechargez la page sur le navigateur et vous devez obtenir le résultat suivant : 19 / 25

Le résultat est joli mais pas vraiment satisfaisant car le dialogue est posé là directement sans l effet de fenêtrage escompté. Obtenir cet effet est l objet de la partie à venir... VI. Améliorer le dialogue 6.1. Masquer le dialogue Pour avoir un effet de fenêtrage il faut commencer par masquer le dialogue. Dans le code YUI nous allons utiliser une propriété de l objet dialogue. Lors de la définition de l objet dialogue YUI, nous pouvons en effet ajouter une série de propriétés en ajoutant un paramètre à la fonction ; voici le code adéquat : var mydialog = new YAHOO.widget.Dialog("myLogin", { visible: false } ); Ici la propriété visible permet de masquer le dialogue dès sa création. Rechargez la page sur le navigateur suite à cette modification dans le code. Vous remarquez que le dialogue n est plus affiché : Mais il n y actuellement aucun moyen de faire afficher le dialogue ; corrigeons cela! 6.2. Bouton d appel Ajoutons dans le code html une balise pour définir un bouton : 20 / 25

</table> <button id="mybtn">test</button> </div> Ce bouton, est uniquement décoratif si nous ne lui associons pas de code. Nous devons mettre le code suivant à la fin de notre fichier mylogin.js var el = new YAHOO.util.Element('myBtn') el.on("click", mydialog.show, mydialog, true); Dans la première ligne, nous utilisons un appel permettant de définir un nouvel élément YUI à partir de l identifiant de notre bouton. La seconde ligne, permet d ajouter un comportement de ce bouton qui va réagir sur l'événement «click click» en effectuant la fonction mydialog.show (qui a pour but d afficher le dialogue). Ces deux lignes utilisent une nouvelle partie de YUI qu il faut lier dans le code html via l appel suivant : <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script> A présent le bouton est opérationnel et permet de contrôler l affichage du dialogue : 6.3. Centrer le dialogue Afin d obtenir un effet plus joli nous pouvons ajouter au dialogue la propriété fixedcenter : var mydialog = new YAHOO.widget.Dialog("myLogin", { 21 / 25

visible: false, fixedcenter: true } ); Voici le résultat : 6.4. Dialogue modal Toujours dans le but d améliorer le rendu, nous allons ajouter la propriété modal : var mydialog = new YAHOO.widget.Dialog("myLogin", { visible: false, fixedcenter: true, modal: true } ); 22 / 25

Remarquez qu'à présent vous ne pouvez plus sélectionner le texte hors de la fenêtre du dialogue. 6.5. Case de fermeture Si vous désirez masquer la case de fermeture, utilisez la propriété close en modifiant ainsi le code : var mydialog = new YAHOO.widget.Dialog("myLogin", { visible: false, fixedcenter: true, modal: true, close:true } ); 6.6. Déplacement du dialogue Essayez de déplacer le dialogue, vous n y arriverez pas! Ajoutez à présent la ligne suivante dans les appels aux librairies javascript de YUI : <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/dragdrop/dragdrop-min.js"></script> Rechargez la page et vous constaterez que le dialogue est à présent déplaçable : 23 / 25

Notez que la propriété draggable permet à présent de contrôler cette possibilité en modifiant le code ainsi : var mydialog = new YAHOO.widget.Dialog("myLogin", { visible: false, fixedcenter: true, modal: true, draggable:true } ); Cet exemple montre bien le niveau d intégration des librairies YUI. Si la librairie dragdrop est chargée alors le dialogue en bénéficie sans plus de code à écrire. Si l appel est absent, la position est figée, mais il n y a pas d erreur pour autant. Cette souplesse est vraiment très agréable! Maintenant que nous avons plusieurs scripts nécessaires dans l'ensemble YUI nous pourrions utiliser le configurateur pour regrouper les appels et augmenter les performances lors du chargement. VII. Appel de 4D Il est temps à présent de cliquer sur le bouton «Submit» pour déclencher l envoi du formulaire et vérifier si l appel est reçu dans 4D. Placer un point d arrêt dans la méthode base «Sur authentification web» et constater que vous recevez les informations comme pour tout formulaire 24 / 25

html ; YUI ne perturbe en rien l envoi classique des formulaires. Reste à traiter le formulaire côté 4D, mais cela est une autre histoire... VIII. Conclusion A travers ce simple exemple nous avons exploré quelques aspects basiques de YUI. Sachez que les possibilités sont bien plus vastes que l affichage d un dialogue ; le développement est en constante évolution, et de nouveaux modules enrichissent les précédents assez régulièrement. YUI est parfaitement compatible avec le serveur web de 4D, rien ne vous empêche donc d agrémenter vos prochains développements web de nouveaux effets pour vos utilisateurs... Vous avez à présent les clefs pour commencer des développements avec YUI et notamment les appels AJax... 25 / 25