En esta sección veremos como crear paneles capaces de mostrar páginas HTML o XUL.
Añadiendo marcos
Hay veces en que queremos tener parte de un documento cargado desde una página separada. Como por ejemplo en los dialogos guiados paso a paso, en los que pasamos secuencialmente de una pantalla a otra, preguntando una serie de preguntas. Cada vez que el usuario hace clic en el boton ‘siguiente’, la siguiente pantalla se muestra.
Se podrían crear estos dialogos guiados abriendo una ventana para cada pantalla, sin embargo hay almenos tres problemas con esta aproximación. Primero, cada ventana podría aparecer en un sitio diferente (aunque hay formas de evitarlo). Segundo, algunos elementos como los botones ‘atrás’ y ‘siguiente’ son siempre iguales durante todas las pantallas, por lo que sería mucho mejor si solo el área de contenidos fuera la que cambiara. Tercero, sería dificil coordinar los scripts si se ejecutarán en diferentes ventanas.
Cabe destacar que XUL nos ofrece el elemento wizard, que podemos usar para crear dialogos guiados. Este elementos se explicará más adelante.
Otra aproximación es usar marcos de contenido, el elemento iframe en XUL, el cual funciona practicamente igual que el elemento del mismo nombre en HTML. Crea un documento separado dentro de la ventana. Tiene la ventaja de que puede colocarse en cualquier parte de la ventana y de que su contenido puede guardarse en un fichero separado. Podemos decidir que fichero queremos que se muestre usando el atributo src. Este fichero puede ser de cualquier tipo, aunque normalmente usaremos ficheros HTML o XUL. Podemos cambiar los contenidos de un iframe, sin afectar a la ventana principal, usando un script.
En la ventana del navegador Mozilla, el área donde se muestra la página web se crea usando un iframe. Cuando el usuario introduce una dirección o hace clic en un enlace del documento, el atributo src del iframe es cambiado.
El siguiente ejemplo muestra el uso de los marcos de contenido:
Ejemplo: Usando iframe
<toolbox>
<toolbar id="nav-toolbar">
<toolbarbutton label="Atrás"/>
<toolbarbutton label="Siguiente"/>
<textbox id="urlfield"/>
</toolbar>
</toolbox>
<iframe id="contenidos" src="https://www.mozilla.org" flex="1"/>
Este ejemplo presenta el interfaz para un navegador web muy simple. Hay dos elementos principales, un toolbox (contenedor para barras de herramientas) y un iframe (marco de contenidos). Los botones Atrás y Siguiente, así como la caja de texto para la dirección se han incluido en una barra de herramientas. Las páginas web aparecerían dentro del elemento iframe, en este caso la página de la fundación Mozilla sería la que aparecería por defecto.
Este ejemplo no es completamente funcional. Posteriormente, necesitaremos adicionar un script el cual cambia el atributo en el tiempo deseado, por ejemplo cuando el usuario presiona la tecla Enter.
Browsers
There is a second type of content panel, using the browser tag. You would use this when you want to create a frame that displays content like a browser. Actually, the iframe can do this too, but the browser has a variety of additional features. For example, the browser maintains a page history for use with Back and Forward buttons. The browser can also load pages with referers and other flags. Essentially, the browser tag should be used when you want to create a browser-like interface, but the iframe may be used when you just need a simple panel.
A similar element, tabbrowser, provides the functionality of browser but also provides a tab bar for switching between multiple pages. This is the widget used by the Mozilla browser for its tabbed browsing interface. The tabbrowser element is actually implemened as a tabbox containing a set of browser elements. Both types of browser offer similar control over pages that are displayed.
Here is an example browser:
Example
<browser src="https://www.mozilla.org" flex="1"/>
As with the iframe, you can specify the url in a browser using the src attribute. For a tabbrowser, you cannot set the url directly like this, as it doesn't display just one url. Instead, you must use a script and call the loadURI function.
There are three classes of browser, depending on the kind of content that you want to display inside. The type may be specified using the type attribute. The first type is the default and is used if you don't specify a type. In this case, the content loaded inside the browser is treated as if it was part of the same application and has access to the outer window. That means that when a script loaded inside the browser tries to get the topmost window, it will get the outer XUL window.
This would be suitable for a child XUL panel that is part of your application, but this isn't what you want for a browser that loads a web page. Instead, you would want to restrict the web page to only getting access to the web page content. You might note that a Mozilla browser window has XUL content for the toolbars and statusbar and so forth with a tabbrowser forming the main area. This inner area displays a web page, but the web page cannot access the XUL around it. This is because it uses the second type of browser, specified by setting the type attribute to the value content. This prevents the content from traversing up to the XUL window. An example:
<browser src="https://www.mozilla.org" type="content" flex="1"/>
It is important that you set the type attribute correctly if you are going to be displaying remote web sites inside the browser element. The tabbrowser sets the content type automatically on all tabbed browsers that it creates. So you don't have to set this explicitly for tabbed browsers.
The third type is used when your window contains multiple browser elements, for example if you have a sidebar displaying some extra content. Set the type attribute on the main browser element to content-primary to indicate that its content will be the primary content inside the window. This acts just like the content value except that the content inside is accessible using the XUL window's 'content' property. This makes it easy to access the content of the main browser using a script. The tabbrowser automatically sets the type attribute of whichever browser is currently visible to content-primary, which means that you will always be able to access the currently visible content in this way.
Next, we'll look at how to create a splitter.
Categorías
links interwikis