4.7 Cadres de contenu

Écrit par Neil Deakin. Traduit par Alain B. (19/02/2004).
Page originale : http://www.xulplanet.com/tutorials/xultu/cpanels.html

Dans ce chapitre, nous regarderons comment ajouter des cadres qui peuvent afficher des pages HTML ou d'autres fichiers XUL.

Ajout de cadres enfants

Il y a des fois où vous souhaitez qu'une partie d'un document soit chargée à partir d'une autre page. D'autres fois, vous voulez changer une partie de la fenêtre. Un bon exemple est un assistant qui vous guide pas-à-pas à travers un certain nombre d'écrans, en vous posant une série de questions. Chaque fois que l'utilisateur clique sur le bouton suivant, l'écran suivant de l'assistant est affiché.

Vous pouvez créer une interface d'assistant en ouvrant une fenêtre différente pour chaque écran. Il y a trois problèmes avec cette approche. Premièrement, chaque fenêtre peut apparaître à une position différente sur l'écran (bien qu'il existe une alternative à cela). Deuxièmement, les éléments tels que les boutons suivant ou précédent sont les mêmes tout au long de l'interface. Ce serait bien mieux si seul le contenu de l'assistant changeait. Troisièmement, il sera difficile de coordonner les scripts tournant dans les différentes fenêtres.

Notez que XUL a un élément wizard qui peut être utilisé pour créer des assistants. Il sera décrit dans une prochaine section.

Une meilleure approche est d'utiliser l'élément iframe, qui fonctionne comme l'élément HTML du même nom. Il crée un document séparé dans la fenêtre. Il a l'avantage de pouvoir être placé n'importe où et son contenu chargé à partir d'un fichier différent. Indiquez l'URL que vous souhaitez afficher dans le cadre avec l'attribut src. Cet URL peut pointer sur n'importe quelle sorte de fichiers, bien qu'elle pointe habituellement sur un fichier HTML ou un autre fichier XUL. Vous pouvez utiliser un script pour changer le contenu de ce cadre sans affecter la fenêtre principale.

Dans la fenêtre du navigateur Mozilla, l'endroit où la page web est affichée est créé en utilisant un cadre iframe. Lorsque l'utilisateur entre un URL ou clique sur un lien du document, la source du cadre est changée.

L'exemple suivant utilise un cadre iframe :

Exemple 4.7.1 : Source Voir

<toolbox>
   <toolbar id="nav-toolbar">
     <toolbarbutton label="Précédent"/>
     <toolbarbutton label="Suivant"/>
     <textbox id="urlfield"/>
   </toolbar>
</toolbox>

<iframe id="content-body" src="http://www.mozilla-europe.org/fr/" flex="1"/>

Ici, l'exemple crée une interface très simple pour un navigateur web, bien qu'elle ne soit pas fonctionnelle. Une boîte contenant deux éléments a été créée : un élément toolbox et un élément iframe. Un bouton 'Précédent', un bouton 'Suivant' et un champ de saisie des URLs ont été ajoutés seulement à la barre d'outils. Les pages web apparaîtraient à l'intérieur du cadre iframe. Dans ce cas, la page d'accueil du site apparaîtra par défaut.

Dans le chapitre suivant, nous allons voir comment créer des séparations.