Cadres de contenu

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

Ajout de cadres enfants

Parfois, 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. Cette approche pose trois problèmes. 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.

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. Cette 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 doit être affichée est créé en utilisant un cadre iframe. Lorsque l'utilisateur entre une URL ou clique sur un lien du document, la source du cadre est changée.

Exemple iframe

Exemple 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="https://www.mozilla-europe.org/fr/" flex="1"/>

Ici, l'exemple crée une interface très simple pour un navigateur Web. 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 sur la barre d'outils. Les pages Web apparaissent à l'intérieur du cadre iframe. Dans ce cas, c'est la page d'accueil du site qui apparaîtra par défaut.

Cet exemple n'est pas fonctionnellement complet. Par la suite, nous ajouterons un script qui changera l'attribut de src au moment désiré, par exemple quand l'utilisateur appuie sur la touche Entrée.

Navigateurs

Il existe un second type de cadre de contenu, utilisant la balise browser. Vous l'utiliserez quand vous voudrez créer un cadre qui montre le contenu comme un navigateur. En réalité, l'élément iframe peut aussi le faire, mais le navigateur (browser) possède certaines caractéristiques supplémentaires. Par exemple, l'élément browser conserve un historique pour utiliser les boutons « Précédent » et « Suivant ». Le navigateur peut aussi charger des pages avec des referers et d'autres états. La balise browser doit être utilisée essentiellement lorsque vous voulez créer une interface semblable au navigateur, mais l'iframe peut être utilisé lorsque vous avez juste besoin d'un cadre simple.

Un élément similaire, tabbrowser, fournit la fonctionnalité du browser, mais fournit également une barre d'onglets pour basculer entre de multiples pages. C'est le composant graphique utilisé par le navigateur Mozilla pour son interface de navigation par onglets. L'élément tabbrowser est en réalité implémenté comme un tabbox contenant un ensemble d'éléments browser. Ces deux types de navigateur offrent un contrôle similaire sur les pages à afficher.

Exemple de browser

Exemple 2: Source Voir.

<browser src="https://www.mozilla.org" flex="1"/>

Comme avec l'iframe, vous pouvez indiquer l'URL dans un navigateur utilisant l'attribut src. Pour un tabbrowser, vous ne pouvez pas définir l'url directement comme ceci, étant donné qu'il n'affiche pas qu'une seule URL. À la place, vous devez utiliser un script et appeler la fonction loadURI.

Il y a trois catégories de navigateurs, selon le genre de contenu que vous voulez afficher. Le type peut être indiqué en utilisant l'attribut type.

Le premier type est le type par défaut utilisé si vous omettez cet attribut. Dans ce cas, le contenu chargé à l'intérieur du navigateur est traité comme s'il faisait partie de la même application et avait accès à la fenêtre extérieure. Cela signifie que lorsqu'un script chargé à l'intérieur du navigateur essaie d'obtenir la fenêtre la plus élevée, il obtiendra la fenêtre XUL extérieure.

Ce comportement conviendrait pour un cadre XUL fils qui fait partie de votre application, mais il ne serait pas adapté pour un navigateur qui chargerait des pages Web. À la place, vous voudrez restreindre la page Web au seul accès de son contenu. Vous pouvez noter qu'une fenêtre de navigateur Mozilla possède du contenu XUL pour les barres d'outils et de statut et ainsi de suite avec un tabbrowser formant la zone principale. Cette zone interne affiche une page Web, mais celle-ci ne peut pas accéder au XUL l'entourant. C'est parce le second type de navigateur est utilisé en définissant l'attribut type avec la valeur 'content'. Il empêche le contenu de remonter jusqu'à la fenêtre XUL. Un exemple :

<browser src="https://www.mozilla.org" type="content" flex="1"/>

Le tabbrowser définit le type 'content' automatiquement sur tous les onglets de navigation qu'il crée. Vous n'avez donc pas à le définir explicitement pour les onglets de navigation.

Le troisième type sert lorsque votre fenêtre contient plusieurs éléments browser, comme par exemple si vous aviez un panneau latéral affichant du contenu supplémentaire. Renseignez l'attribut type sur l'élément browser principal avec la valeur 'content-primary' pour spécifier le contenu primaire. Il fonctionne comme avec la valeur 'content' excepté le fait que le contenu à l'intérieur est accessible en utilisant la propriété 'content' de la fenêtre XUL. L'accès au contenu du navigateur principal en utilisant un script s'en trouve simplifié. tabbrowser définit automatiquement l'attribut type avec cette valeur 'content-primary' pour tous les navigateurs visibles, ce qui vous permet de cette manière de toujours pouvoir avoir accès au contenu visible.

Dans la section suivante, nous allons voir comment créer des séparateurs.

Interwiki