Faire son propre navigateur
Le navigateur est mort. C’est un bout de logiciel bi-dimensionnel qui ralentit l’évolution du Web.
Etes vous choqué par ces phrases alors que vous lisez cet article avec le confort de votre navigateur de choix ? Et bien, vous devriez l’être, parce qu’à l’inevrse de ce que quelques personnes vous poussent à croire, les navigateurs seront encore de la partie pour un bon moment. Le but de cet article est de vous présenter le concept de la personnalisation ou de la création de votre propre navigateur en utilisant le merveilleux outil qu’est Mozilla.
Pourquoi votre propre navigateur ?
Avant de vous lancer, vous devez savoir que cet article se concentre sur les problèmes techniques que l’on rencontre lorsque l’on veut faire en sorte qu’un navigateur XUL soit opérationnel dans le framework applicatif. Cela n’a rien à voir avec l’incorporation de Gecko, dont on parlé dans un précédent article, Laisser fleurir une centaine de navigateurs. Gecko est le moteur de rendu de Mozilla. Les mérites d’avoir plusieurs projets de navigateurs ont déjà été abordés, regardons donc les usages pratiques qu’un navigateur intégré peuvent apporter à votre application, en dehors de son usage traditionnel — la navigation Web :
- Vous pouvez créer des pages d’aide au format HTML ou XML pour votre application et les charger dans un navigateur d’aide déjà prêt.
- Vous pouvez utiliser un prévisualiseur pour tester vos mises en pages XML, HTML ou CSS et vos styles dans Gecko, un des navigateurs qui respecte le plus les standards du Web.
- En guise de petite variation de l’exemple précédent, vous pourriez intégrer des versions miniatures à vos dialogues pour charger des exemples qui changeraient en fonction de la sélection de l’utilisateur. Un visualisateur de polices, par exemple.
- Vous pouvez créer des pop-ups dans une fenêtre dans le but d’afficher du contenu Web.
Bien sûr, quand vous trouvez une raison d’être (sic) à votre navigateur, vous devez commencer par assembler les pièces pour qu’il fonctionne. Cela prendra la forme d’une application Mozilla complète, comprenant l’outil XPFE (XPFE est le composant interface utilisateur de Mozilla) pour créer votre propre interface utilisateur, ou pour peut-être juste créer un complément à la suite existante, qui peut être distribué sous la forme d’un XPI. Le terme XPI fait référence aux installations multi-plateformes, l’installateur natif de Mozilla.
Les symboles graphiques de gestion
Pour commencer, regardons de près deux des symboles graphiques les plus évidents disponibles dans le toolkit de Mozilla : le browser et le iframe. Ils sont caractérisés par des balises de même nom , <browser> et <iframe>, et sont placés dans votre fenêtre XUL ou vos modules incorporés . Ils ont tous les deux été conçus principalement pour gérer du contenu Web, qui peut aller du HTML au XML, qui peut n’être que du texte et des images reconnus par Gecko, tels que des jpeg, png, gif, et des bmp. Voici ce que peut être un navigateur dans sa forme la plus simpliste :
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<window id="browser-window" title="Simple Browser Widget Display"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
width="640" height="480">
<browser src="http://mozdev.org" flex="1"/>
</window>Le code à regarder de plus est celle de la ligne contenant la balise browser, elle crée une aire de contenu. Elle représente le marquage exclusif de la fenêtre XUL. Elle s’accapare tout l’espace disponible du fait de l’attribut flex, et vous y chargerez la page d’index de mozdev.org dedans. Le résultat consiste en une fenêtre avec du contenu Web.
Fenêtre Simple de Navigateur
Ce qu’il manque dans cette image et dans le code qui s’y rapporte c’est un peu de contextualité. Il manque un espace propre à l’application et des symboles graphiques de gestion permettant l’exécution de fonctionnalités complémentaires au navigateur. Dans les navigateurs traditionnels, y compris le navigateur Mozilla qui fait partie de la suite applicative, il y a une barre de menus et une barre d’outils, chacune d’elle contenant des accès simples aux fonctions telles que “Page précédente”, “Page suivante”, “Actualiser”, “Afficher le code source” et ainsi de suite.
Le symbole de gestion <iframe> est une version plus légère de <browser>, cependant aussi utile lorsque vous avez seulement besoin d’afficher du simple contenu Web. Il a été conçu pour un comportement se rapprochant beaucoup plus du symbole HTML iframe, pour être un cadre contenu dans un document. C’est principalement utile pour afficher des contenus spéciaux tels que des aperçus de contenus ou une pages de résultats.
<iframe class="results" id="resultsframe" type="content" src="results.xul" flex="1"/>Rappelez-vous que les contenus XUL peuvent être chargés dans les aires de contenu, comme c’est le cas, par exemple, dans les préférences globales de la suite Mozilla, composées d’un cadre situé à droite dans lequel les différents panneaux de préférences sont chargés quand ils sont sélectionnés.
Le Script
Regardons maintenant le code source qui initialise le navigateur. Nous allons couvrir juste les bases permettant à quelques fonctions de navigation de fonctionner. A mon avis, la meilleure façon de comprendre comment fonctionne Mozilla consiste à en regarder le code. Pour ce faire, nous devons utiliser LXR, la Mozilla Cross Reference. Les fichiers particuliers que vous devriez regarder sont navigator.js et help.js, les fichiers JavaScript principaux associés respectivement aux fenêtres du Navigateur et de l’Aide.
Le code suivant représente une manière générique de mettre les choses en place, mais revient quand même à initialiser ces fenêtres et à démarrer le navigateur. Ce script est plus à sa place s’il est placé dans la fonction associée au gestionnaire de chargement de la fenêtre XUL.
La première étape consiste à ajouter deux attributs supplémentaires à l’objet browser dans le fichier XUL.
<browser id="browser-content" type="content-primary" src="about:blank" flex="1"/>L’attribut type est optionnel mais dans cet exemple il est important car il affecte la manière dont est traité le contenu dans l’application. La valeur de "content-primary" signifie que nous sommes dans l’aire de contenu principale du navigateur (par exemple, content.focus()), et qu’elle doit être considérée comme étant plus importante que les autres. Le contenu de ce navigateur sera accédé quand vous utiliserez le mot clé content dans votre script. L’attribut id donne un identifiant unique au navigateur au sein du contenu XUL. Cela vous permet simplement d’avoir la main sur le navigateur à l’intérieur de votre script :
var myBrowser // déclaration globale en vue d'une réutilisation
myBrowser = document.getElementById("browser-content");Ensuite, nous allons créer l’instance du navigateur et configurer sa fenêtre :
var appCore = null; // déclaration globale en vue d'une réutilisation
appCore = Components.classes["@mozilla.org/appshell/component/browser/instance;1"]
.createInstance(Components.interfaces.nsIBrowserInstance);
appCore.setWebShellWindow(window);Le navigateur démarre sur une fenêtre vide (à cause de l’utilisation de “about:blank” en tant qu’attribut src), vous aurez donc à charger un peu de contenu dans le navigateur. Ici, une URL http est utilisée :
const nsIWebNavigation = Components.interfaces.nsIWebNavigation;
myBrowser.webNavigation.loadURI("http://www.mozdev.org",
nsIWebNavigation.LOAD_FLAGS_NONE, null, null, null);Cela crée une instance de l’interface XPCOM nsIWebNavigation, qui expose de nombreux utilitaires pratiques pour changer le contenu affiché dans le navigayeur et y naviguer dedans. Dans cet exemple, pour charger une page, la méthode loadURI est utilisée. D’autres méthodes sont comprises dans cette interface, goBack(), goForward(), et reload(). nsIWebNaviagtion ne sont que quelques-unes des interfaces disponibles lorsque vous utilisez l’objet browser. Parmi d’autres :
preferenceswebBrowserFindcontentViewerdocumentCharsetInfo
Une liste complète peut être trouvée dans les fichiers de liaison de l’objet. Les étapes fournies dans cette section vous mèneront correctement sur la voie de la création d’un navigateur à contenu riche placé au sein de votre application Mozilla et représentent le principe de base à respecter pour l’ajout d’autres gadgets généralement associés à un navigateur.
L’Art de la Navigation
Ce qui suit est une brève description de l’ajout des éléments et des fonctionnalités “Page précédente” et “Page suivante” à votre fenêtre. Après tout c’est le minimum requis pour tout navigateur, j’illustrerai donc la procédure d’ajout de cette fonctionnalité. Le fichier XUL représente l’endoit où vous devez définir vos boutons d’interface utilisateur. Si vous êtes calé en XUL et en CSS, vous pouvez leur donner le style et l’apparence que vous souhaitez, mais dans cet exemple les styles standard (basés sur le thème Modern) seront utilisés.
Boutons Page Précédente et Page Suivante
Ce sont de simples boutons de barre d’outils. Les boutons Page Précédente et Page Suivante utilisés dans le navigateur Mozilla comportent un menu intégré qui crée une liste des pages accessibles. L’apparence est complète en incluant le fichier CSS navigator et en utilisant une classe spécifique aux boutons (toolbarbutton-1). Voici le code XUL des boutons :
...
<?xml-stylesheet href="chrome://navigator/skin" type="text/css"?>
...
<toolbarbutton id="back-button" class="toolbarbutton-1"
tooltiptext="Go Back"
oncommand="goBack();"
observes="canGoBack">
</toolbarbutton>
<toolbarbutton id="forward-button" class="toolbarbutton-1"
tooltiptext="Go Forward"
oncommand="goForward();"
observes="canGoForward">
</toolbarbutton>A part l’attribut class des boutons, d’autres attributs portant un intérêt sont oncommand, qui crée le pont avec la fonctionnalité, et observes. L’attribut observes détermine si le bouton est actif. Un petit artifice permet de faire passer les boutons de l’état actif à l’état désactivé. Cela dépend de la possibilité de naviguer en arrière ou en avant. Nous ne nous approfondirons pas sur ça ici, mais le code source complet du Fichier XUL et du Fichier JavaScript utilisés dans cet article sont disponibles en guise de référence. Jetons un oeil au code des fonctions goBack() et goForward().
function goBack()
{
var webNavigation = myBrowser.webNavigation;
if (webNavigation.canGoBack)
webNavigation.goBack();
}
function goForward()
{
var webNavigation = myBrowser.webNavigation;
if (webNavigation.canGoForward)
webNavigation.goForward();
}Une fois encore l’interface webNavigation est accédée au travers de l’élément browser. Après une efficace vérification de l’observer, la routine goBack() ou goForward() de l’interface est appelée. Rien de plus à ajouter — trois lignes de code. Les fondations ont été jetées dans le code d’initialisation, et maintenant vous en récolter les bénéfices.
Résumé
Le reste, comme ils disent, est de votre ressort. Vous pouvez choisir de rendre votre navigateur aussi simple ou aussi complexe que vous le souhaitez. Mozilla fournit les éléments graphiques pour gérer votre contenu, et comme illustré dans cet article, il vous donne aussi le code source pour que vous puissiez y ajouter des fonctionnalités complexes. Je n’ai fait qu’effleurer le sujet ici. Parmis d’autres fonctionnalités que vous pouvez intégrer, vous trouverez les menus contextuels, les événements tels que drag&drop (glisser-déposer) et onclick (après un clic) sur l’aire de contenu, et l’affichage du code source de la page. Si vous êtes très ambitieux, vous pouvez même aller encore plus loin et utiliser la navigation par onglet. Intégrée au navigateur Mozilla et activée par défaut, cette fonction est devenue très populaire et a amélioré la navigation, et elle a gagné le coeur de beaucoup de nouveaux utilisateurs. L’élément <tabbrowser> est plus complexe que le browser basique, mais devrait vous apporter plus de succès. Et n’oubliez pas, si cela ne correspond pas tout à fait à vos besoins, vous pouvez changer le code source !
Textes originaux en anglais sur O’Reilly : http://www.oreillynet.com/pub/au/81
Chargement
Commentaires récents