![]() |
![]() |
Accueil > Intranet Michel Buffa > Web 2.0 2010 > Seance 5 et 6 : Developpement d'application XUL > TP5 : extensions firefox, les bases
TP5 : extensions firefox, les basesDe $1Table des matières
IntroductionDans ce TP vous allez faire vos premières armes avec le développement d'extensions firefox en apprenant tout d'abord le langage XUL à travers les applis XUL-Runner. Principales ressources pour développer des extensions Firefox : Pour développer des extensions firefox : ressources Avant de commencer à développer une extension proprement dite, nous allons créer ce que l'on appelle une "application XulRunner. Fireefox peut être en effet exécuté dans un mode spécial, un peu comme une JVM, pour exécuter des applications stand alone utilisant exactement les mêmes technologies que les extensions. Il est même possible de télécharger un binaire exécutable de XulRunner, au lieu d'utiliser Firefox. Une première application XulRunner
Une fois l'archive récupérée, vous pouvez l'exécuter en lançant la commande : content tp1helloworld file:content/ skin tp1helloworld global file:skin/global/ skin tp1helloworld neofuture file:skin/neofuture/ locale tp1helloworld fr-FR file:locale/fr-FR/ locale tp1helloworld en-EN file:locale/en-EN/
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="main" title="hello world" width="300" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <caption label = "hello world !!" /> </window>
Vous pouvez également aller consulter la table périodique des éléments XUL : http://www.hevanet.com/acorbin/xul/top.xul L'élément <caption> est un champs de texte qui est compris dans la fenêtre (il est inclu dedans). Son label fait référence à une des clés figurant dans les fichiers de localisation. Création d'un environnement pour développer des extensionsPour développer des extensions firefox il est pratique d'avoir un profil firefox spécial pour le développement et un autre profil "classique". Dans le profil pour le développement vous activerez certaines options de debug javascript, pour la console, etc, vous installerez une extension spéciale pour les développeurs, et vous pourrez aisément tester vos extensions sans avoir besoin de les packager. Création d'un nouveau profil développeur
user_pref("nglayout.debug.disable_xul_cache", true); // désactive le cache XUL user_pref("nglayout.debug.disable_xul_fastload", true); // lié au précédent, facultatif user_pref("javascript.options.strict", true); // active l'affichage de toutes les erreurs d'exécutions user_pref("javascript.options.showInConsole", true); // active l'affichage de toutes les erreurs de syntaxe user_pref("browser.dom.window.dump.enabled", true); // active le dump sur la console Installation d'extensions pour l'aide au développement dans le profil developpeurNous vous recommandons d'installer les extensions suivantes :
Test de l'éditeur XUL interactif de l'extension "Extension Developer"Dans le menu outil, lancez l'éditeur XUL de l'extension "extension developer" : Une fenetre s'ouvre. Dans la partie haute, vous pouvez editeur le XUL et en temps réel voir dans la partie basse l'interface graphique qui se construit. Cet outil est très utile pour tester et construire une GUI. Rajoutez une ligne pour créer un bouton : En utilisant la documentation de référence de XUL, ajoutez des éléments à cette GUI (https://developer.mozilla.org/en/XUL_Reference) Etude d'une application XUL-RunnerVous allez maintenant étudier un exemple d'application XUL runner. Télécharger et décompresser l'archive fakeapp.zip Procéder de même que pour l'appli "tp1helloworld" pour la lancer : Menu et toolbarbuttonLe premier élément ajouté est le menu. Observez cet exemple et référez-vous à la référence (https://developer.mozilla.org/en/XUL_Reference) pour ajouter un menuitem qui affiche à laide d'un "alert" le nome de l'application (regardez les attributs de "window" qui font appel à des entités. Observez ensuite comment sont ajoutés les toolbarbutton (nous y reviendrons) Insertion d'un browserDeux autres éléments sont insérés dans une "hbox" : un browser web et une listbox listant le contenu d'un flux RSS delicious.com (cf exercice suivant). Ajoutez un boutton (toolbarbutton) qui modifie la page affichée par le browser ( voir attribut src). Modèle de template XMLDans la même hbox que le browser (séparé par un élement "splitter"), nous avons placé une vbox qui contient une listbox (regardez les références correspondantes). Cette liste est "peuplé" en allant lire des données dans un fichier xml (un fil RSS tiré de delicious.com) placé dans le même dossier que main.xul à l'adresse
Etudiez l'exemple de template XML proposé dans l'appli en vous aidant de la référence correspondente dans la doc XUL https://developer.mozilla.org/en/XUL/Template_Guide/XML_Templates ou encore de la section correspondante du tutoriel https://developer.mozilla.org/en/XUL/Template_Guide(sautez la partie sur les templates RDF pour le moment) Ajoutez ensuite une variable qui stocke chaque "link" de chaque item du flux RSS. Pour vérifier la requête Xpath correspondante, aidez vous de l'extension XPathChecker (présentée plus haut). Dans les templates XUL XML, la requête XPath est "coupée" en deux. Regardez le code de l'appli exemple:
une première partie est située dans l'attribut "expr" qui dans notre cas va chercher tous les "item" du fichier RSS. Testez cette requête dans l'extension Xpath Checker après avoir ouvert le fichier delicious.xml dans FF. !! Attention dans les template XUL les "//" du début de la requête Xpath sont automatiquement ajoutés. Donc pour tester la requete dans l'extension, faites //channel/item au lieu de channel/item (vous pouvez vous aider du rappel Xpath ici) Ensuite il suffit d'ajouter un élément "assign" en vous inspirant de celui récupérant le "title". Ensuite utilisez cette variable comme valeur de l'attribut "value" de l'élément "listitem" que vous ajouterez (même syntaxe que pour l'attribut label). Ajoutez ensuite une interaction qui affiche la page correspondant au lien ainsi récupéré dans le "browser" inséré précédemment. Utilisez pour cela l'attribut "ondblclick". Approfondissement avec le tutorial XUL !Sur le site de mozilla on trouve un tutorial bien fait sur XUL : https://developer.mozilla.org/fr/Tutoriel_XUL Attention, pour une raison inexpliquée les boutons "suivants" et "précédents" ne fonctionnent pas et ramènent à la page d'accueil du site mozilla. Revenez à chaque fois au menu du tutorial et repartez dans la section suivante. Etudiez le tutorial afin de préparer la prochaine séance où nous étudierons une extension qui exploite les web services de tagging développés lors des séances précédentes.
Mots clés:
|
Powered by MindTouch Deki Open Source Edition v.8.08 |