Content widgets allow you to load content into the UI for display. These widgets -- browser and editor -- provide a window into which you can load. In the standard browser, these documents can be written in HTML, XML, text, or other supported content types.
The <browser> element displays online content and provides full browsing capabilities to your application, such as navigation features or maintaining a history.
<browser id="content" type="content-primary" src="ch3.html"/>
The behind-the-scenes implementation for browser gives you access to certain interfaces that can be used in your scripts. These interfaces include:
If you would like to learn more about these available interfaces, the best place to look is the source code. The two recommended files to start with are browser.xml, which shows how the interfaces are exposed, and navigator.js, which shows how they are used. Both files can be browsed on the online Mozilla Cross Reference, at http://lxr.mozilla.org.
An alternative to <browser> is the <iframe>. It's similar to the browser widget in appearance, but better suited for simple or ephemeral content. It's often used as a preview window in HTML/XML editors and other WYSIWYG applications. iframes can also be good for dynamic document editing, as in the following example, in which the frame provides access to the document loaded as content. This can then be written to:
<iframe id="simple-content" />
var doc = window.frames.document; doc.open( ); doc.write("<html><body>Come fly with me ...</body></html>"); doc.close( );
In this code snippet, you get a handle to the particular frame that you want by using window.frames, which returns an array of all frames contained in a document. There can be multiple frames in a document, which are indexed. Here it is assumed that we get the second (1 in a zero-based array) frame. The doc variable has a reference to the content area and uses the methods available on the document object to write content -- in this case, HTML.
Ideas for using content panels include:
Create HTML or XML help pages for your application and upload them in a ready-made help browser.
Create a previewer: test your XML, HTML, or CSS layout and styling in Gecko -- one of the most standards-compliant layout engines around.
A slight variation of the previous use, you could use mini-versions inline in dialogs to load up examples that change depending on the selection of the user from a number of choices (a font previewer, for example).
Pop ups contained in a window for display of web content.
The <editor> element loads editable content and can handle text or HTML editing. A good example of its usage is in Mozilla Composer, the HTML editor that comes bundled with Mozilla.
The editor is also used in the various XUL and HTML text widgets in Mozilla, such as textbox and HTML forms, and for composing HTML messages in Mail and News. The text widgets differ from the full-blown editor because they act on a subtree of the document. Also, text widgets have limited text-editing services.
Uses for the editor, both practical and speculative, include:
Plain text editor
Web forms editor
An HTML-enabled bulletin board, a guestbook entry form, or a Wiki that is a web interface collaboration area for posting comments
Note that these examples are distinct from embedding the Gecko layout engine in your generic application. A separate toolkit and a set of APIs is available for doing this.