Créer une application XUL – Partie 2 – Création de l’Interface

Tutoriel « Réalisation d’un projet XUL pas à pas »

– Création de l’Interface –

  Prérequis:

  • CSS (quelques notions),
  • Javascript (notion de base)
  • HTML (facultatif)

  Outils :

  • Sans Assistant (pour ceux qui utilise couramment un Éditeur [avec coloration syntaxique et plugin] ou un IDE)

  Temps estimé:

  • 1 heure 30 à 2 heures pour ceux qui découvrent XUL.

Vous vous y connaissez en création de site web simple? Un peu de CSS par ci un peu de Javascript par la!
Imaginez que vous puissiez réaliser une application comme si c’était un site 🙂 Et bien c’est la que XUL rentre en scène! et une fois que l’on comprend le principe, XUL prend l’allure d’un jeu d’enfant.

XUL c’est quoi?? 🙂 rappelez vous on l’a présenté dans un précédent billet, a quoi servait ‘il, son importance dans le développement d’interface, et pourquoi il attire de plus en plus de monde?
Le seul défaut de XUL a mon avis, c’est que coté marketing il est vraiment nul! dans le sens ou on a pas su nous le présenter comme il fallait, pas assez de pub, pas assez d’article… donc j’espère que ce billet saura vous convaincre de ces possibilités. Pour cela, je vais essayer de sortir du cadre du programme « Hello World » qui est plus un test de fonctionnement histoire de se dire « ouaiiiss ça fonctionne » qu’une démonstration réelle de ces capacités. L’application que je vous propose est un condensé de technologies qui j’espère avec votre esprit d’imagination donneront lieu a de grands projets comme par exemple la réalisation de votre propre navigateur 🙂 En nous basant sur l’arborescence et les fichiers déjà crées en première partie, nous allons passer d’une simple application qui affiche « Hello World » a une application qui intégrera un menu (bof!), un widget (wow!), du javascript (oula!) et du DOM (nannnnn!), puis on jouera un peu avec le fichier chrome.manifest pour montrer comment faire une application multilingue (das ist unmöglich!!), et avant de terminer on montrera que grâce aux interfaces XPCOM (huh? au quoi?) on peut réaliser et manipuler des préférences (paramètres de configuration) propres au logiciels offrant bien plus de possibilités à vos réalisations. Et le clou de la fin, la manipulation pure et dure du presse papier.

Les opérations de notre application seront réalisables en cliquant sur un bouton, un menu ou alors via la capture de touche (du genre si vous appuyez sur ESCAPE l’application se ferme, sur F1 vous avez l’aide etc…).

Remarque: ce tutoriel sera réalisé sans IDE (XUL-Explorer). Pour ceux qui souhaitent utiliser XUL-Explorer nous développerons son utilisation dans un prochain tutoriel/billet.

Lire la suite

Publicités

Créer une application XUL – Partie 1 – Théorie

Le langage XUL c’est quoi?

XUL (prononcé zoul) est l’abréviation de « XML-based User interface Language » (basé sur XML).

C’est un langage de balisage (tout comme l’(X)HTML) qui permet la description d’interfaces graphiques des applications (dont entre autres les extensions du navigateur Firefox de Mozilla).

Les balises sont des unités sémantiques qui permettent de délimité des ensembles dans un fichier texte (ici un fichier XUL), par exemple si je veux que dans ma phrase le mot « tutoriel » soit en gras j’adopterais la logique qui veut que juste avant d’écrire le mot tutoriel j’annonce le fait que ce qui suit sera en gras, ensuite après le mot tutoriel j’annonce qu’il ne faut plus écrire en gras. comme suit:

  • « Cette article est un <debut ensemble a afficher en gras>tutoriel<fin ensemble a afficher en gras> »

Lors de l’affichage de cette phrase dans le navigateur web par le moteur d’affichage, les balises « <debut ensemble a afficher en gras> » et « <fin ensemble a afficher en gras> » ne seront pas visible mais interprété pour donner le résultat suivant:

  • « Cette article est un tutoriel« 

XUL offre les informations permettant de dire comment mettre en place tous les éléments d’une interface graphique tel que les menus (fixes et popups), les listes, les boutons, les zones de textes mais aussi les boites de dialogues, les barres d’outils ou encore les raccourcis claviers.

il est possible de mettre ces informations dans un autre fichier (source de donnée externe) de type RDF (Ressource Description Framework) qui est un modèle informatique de description de  ressources.

XUL a l’avantage d’être simple, de permettre de travailler rapidement, logiquement, il est extensible grâce à l’utilisation de XBL qui lui permet d’implémenter de nouveau élément d’interface ou d’associer des comportements ou des modèles de contenu, et enfin, il est bon de citer que XUL offre un résultat multiplateforme dit  portable (Tout comme JAVA).

Bien… c’est jolie de décrire son interface mais comment fait on pour l’afficher?

Notre première application XUL

C’est simple on utilise ce qu’on appelle un moteur d’affichage de page web (ou moteur de rendu), dans le cas de Firefox (navigateur Internet), Thunderbird (client de messagerie) et SeaMonkey (ensemble d’outils internet [Agenda, Tchat…]), le premier moteur à implémenter XUL est Gecko qui en plus de XUL supporte aussi CSS, DOM, JavaScript, RDF, HTML et XHTML, SMIL, XML etc…

Comment fonctionne Gecko?

Le fonctionnement de Gecko est assez compliqué car il fait appelle a des algorithmes très avances, pour informations sachez que pour chaque page via l’interface DOM il crée d’un coté un arbre (arborescence) d’objets « content » et d’un autre coté un arbre d’objets FRAME (langage Gecko).

Pour schématiser le fonctionnement de Gecko, les objets content sont les informations (réellement plus) quant à l’objet FRAME contient les éléments à afficher (éléments ayant des propriétés et pouvant être modifié via CSS).

Donc ou se trouve la complexité??? Dans le fait que tout est lié, si un frame (tableau, cadre, etc…) change sa hauteur ou sa largeur (par exemple) alors il faudra recalculer toutes les autres hauteurs ou largeurs et faire en sortes de ne pas oublier dans les calcules les autres propriétés telles que les margin ou padding, parfois la taille obligera le texte à faire un saut de ligne ou à changer le nombre de colonnes…, C’est comme dans un rubik’s Cube, une simple rotation supposée modifier 3 petites cases causera en réalité, le changement de position de coins, d’arêtes et couronnes de plusieurs autres faces.

Où trouve t’on Gecko?

Le moteur Gecko est inclus dans Firefox ainsi que dans d’autres navigateurs web tel que Camino (OS X) · Epiphany (utilise Gecko jusqu’a 2008)· IceCat · Iceweasel (qui est en quelques sortes la version pour Debian de Firefox)· Kazehakase (navigateur japonais pour Linux) · K-Meleon (Qui utilise Gecko mais pas XUL) · Fennec (version mobile de Firefox) · Torpark/xB Browser (navigateur pour le réseau TOR [Réseau basé sur le principe de l’anonymat] ,

XULRunner est aussi dans ce qu’on appelle des environnements d’exécution (a titre informatif une machine virtuel est un environnement d’exécution)ce qui permet à un développeur de voir ce que donnera son implémentation XUL avant de réellement l’interpréter par Firefox dans le cadre d’une extension (par exemple).

Grâce à la bibliothèque XPCOM (Cross-Platform Component Object Model) qui permet via C++ ou javascript de construire de nouveaux composants, Mozilla a pu offrir à la communauté mondiale XPFE (Cross-Platform Front End parfois appelé XPToolkit) une plate-forme de développement multiplate-forme  comparable à la machine virtuel de JAVA ou à l’environnement .NET (DotNet) de Microsoft.

Le principe du multiplateforme est d’obtenir la portabilité, ce qui en d’autre terme veut dire qu’il sera exécutable sur de nombreux systèmes d’exploitations (Linux, Mac OS,  Windows, Palm OS etc…) ce qui inévitablement est un gain en coût de développement/production. vous n’aurez pas à faire une version pour chaque système d’exploitation. Pour qu’un logiciel est le plus d’audience possible il existe trois techniques :

L’histoire veut que Mozilla ai crée l’environnement de développement XPFE (Cross Platform Front-End)  qui par sa simplicité, sa rapidité de développement et son évolutivité a permit de donner une réponse au problème de l’évolution du code de Netscape (notamment dans la prise en charge des éléments HTML 4.0 et dans le besoin de créer une version pour chaque environnement de travail [Linux, Mac OS, Windows]sa portabilité)

XULRunner est un environnement d’exécution dédié à XUL et incluant (mis à par le moteur d’affichage Gecko) la majeur partie des API de Firefox (Application Programming Interface).

Le développement d’une application XUL est simple, pour chaque objet de l’interface graphique on associe un événement et une action (typiquement écrite en JavaScript) qui sera exécuté par la machine cliente. CSS sera utilisé pour modifier le style.

Via ces API, XULRunner offre une interface (en terme de développement) aux entrées/sorties (clavier, souris, impression, affichage), à la communication réseau (socket), au gestionnaire de thèmes et d’extensions,  à la localisation, à la manipulation de plusieurs type de fichiers tel que XML, RDF etc…

Tout ceci est la partie client (navigateur), du coté du serveur il y a la possibilité de travaillé en JAVA ou PHP (avec toutes les extensions qu’il possède dont PDO!)

Quand et où utilise t’on XUL?

La où il a du Mozilla ou plus généralement, la ou il y a du Gecko 🙂

Rappelez vous que XUL n’est que la peinture, pour l’utiliser il vous faut des pinceaux ou encore un pistolet à peinture.

XUL et éventuellement RDF et XBL définissent l’interface et les différents éléments de l’interface qui auront un style prédéfinis grâce à CSS.

Rappelez vous que XUL est basé sur XML  qui lui même a pour ancêtre SGML, sans rentrer dans encore plus de détails mais XML et SGML sont une encapsulation de données (via les balises) qui sont représenté par une arborescence formé de noeud (le premier noeud étant appelé la racine du document) de la racine Si vous entendez parlez de XSLT et XPATH, sachez que le premier permet de changer  la structure d’un document (comme CSS permet de changer le style des élements d’une page Web) et le second (XPATH) permet de naviguer facilement à

Chaque action entreprise lors d’un clique ou tout autre évènement sera réalisé par l’intermédiaire de javascript ou Python.

Vous pouvez grâce à XUL et les technologies adjacentes (RDF,XBF,CSS,Javascript…) faire des applications ou créer des modules XPI pour firefox. Oui j’ai bien dit POUR car c’est l’un des inconvénients (disons mineur)de XUL,Donc d’après le tableau suivant, une application XUL sera affichable sur Firefox, Torpark … et pas sur Internet Explorer Konqueror ou les versions d’Epiphany sortie depuis 2008

Fondés sur Gecko Camino · Epiphany · IceCat · Iceweasel · K-Meleon · Fennec · Mozilla Firefox · SeaMonkey · Torpark
Fondés sur KHTML ou WebKit ABrowse · Arora · Epiphany · Google Chrome · Chromium · iCab · Konqueror · Midori · MixShark · OmniWeb · rekonq · Safari · Shiira · SRWare Iron · SWK browser · Uzbl · Vespucci
Fondés sur Presto Opera · Opera Mini · Opera Mobile · Opera Wii · Nintendo DS Browser · Nintendo DSi Browser
Fondés sur Trident Avant Browser · AOL Explorer · Internet Explorer · Maxthon
Navigateurs obsolètes ABrowse · Arachne · Beonex Communicator · Chimera · Flock · Galeon · HotJava · MidasWWW · Mosaic · NetPositive · Netscape
Autres Amaya · Dillo · Links · Lynx · NetFront · NetSurf · w3m · Lunascape

Pour information, Firefox version 1.0 est née en novembre 2004, le projet initial s’appelait Phoenix (2002)  puis Firebird (2003)

Notre première application XUL Hello World

Lire la suite