Diff for /books/www/chapters/ch03.html between versions 1.1 and 1.2

version 1.1, 2002/09/17 21:10:35 version 1.2, 2002/09/23 15:23:31
Line 2 Line 2
 <HEAD><TITLE>Chapter 3</TITLE></HEAD><BODY BGCOLOR=WHITE><H2>Chapter 3</H2>  <HEAD><TITLE>Chapter 3</TITLE></HEAD><BODY BGCOLOR=WHITE><H2>Chapter 3</H2>
 <H1><A NAME="77084"></A> XUL Elements and Features</H1>  <H1><A NAME="77084"></A> XUL Elements and Features</H1>
 <P>The XML-based User-interface Language (XUL) includes all of the basic widgets you need to build application user interfaces. These interfaces include tabs, text areas, buttons, and menus, as well as handy interfaces you may not have thought you needed, such as the <TT>&lt;stack&gt;</TT> widget or <TT>&lt;colorpicker&gt;</TT>.  <P>The XML-based User-interface Language (XUL) includes all of the basic widgets you need to build application user interfaces. These interfaces include tabs, text areas, buttons, and menus, as well as handy interfaces you may not have thought you needed, such as the <TT>&lt;stack&gt;</TT> widget or <TT>&lt;colorpicker&gt;</TT>.
<P><A HREF="ch02.htm#77048">Chapter 2</A> introduced some of the XUL elements that make up a window and basic applications. This chapter examines XUL elements and features in more detail, describing the rationale behind them, their look and behavior, and common usage. Though not comprehensive, the chapter provides more than enough information about XUL to get you started on building your own Mozilla applications, particularly when used in conjunction with the XUL reference in <A HREF="appc.htm#77003">Appendix C</A>.<P><A HREF="ch02.html#77048">Chapter 2</A> introduced some of the XUL elements that make up a window and basic applications. This chapter examines 
 XUL elements and features in more detail, describing the rationale behind them, their look and behavior, and common usage. Though not 
 comprehensive, the chapter provides more than enough information about XUL to get you started on building your own Mozilla applications, particularly when used in conjunction with the XUL reference in <A HREF="appc.html#77003">Appendix C</A>.
 <P>The elements described here, such as menus, buttons, trees, and boxes, are needed in almost any type of application, and most of the examples are generic, so you can plug them into any application or customize them to your needs. We've packed a lot information in this chapter and it be a useful reference as you begin to develop your applications.  <P>The elements described here, such as menus, buttons, trees, and boxes, are needed in almost any type of application, and most of the examples are generic, so you can plug them into any application or customize them to your needs. We've packed a lot information in this chapter and it be a useful reference as you begin to develop your applications.
 <H2><A NAME="77085"></A> The XUL Document Object</H2>  <H2><A NAME="77085"></A> The XUL Document Object</H2>
 <P>At the core of a XUL file  <!--INDEX XUL document object;objects:XUL document object --> is the <TT>document</TT> object. As in HTML, <TT>document</TT> is an object that represents the XUL document itself-the content as opposed to the window that surrounds it. The <TT>document</TT> provides methods for getting individual elements, manipulating the structure of the document, or updating style rules.  <P>At the core of a XUL file  <!--INDEX XUL document object;objects:XUL document object --> is the <TT>document</TT> object. As in HTML, <TT>document</TT> is an object that represents the XUL document itself-the content as opposed to the window that surrounds it. The <TT>document</TT> provides methods for getting individual elements, manipulating the structure of the document, or updating style rules.
<P>A <TT>document</TT> object provides  <!--INDEX getElementById( ) method;methods:getElementById( ) -->  <!--INDEX getElementsByTagName( ) method;methods:getElementByTagName( ) -->  <!--INDEX createElement( ) method;methods:createElement( ) -->  <!--INDEX createTextNode( ) method;methods:createTextNode( ) --> methods such as <TT>getElementById</TT>, <TT>getElementsByTagName</TT>, <TT>createElement</TT>, and <TT>createTextNode</TT> for DOM querying and manipulation of the actual document. Further details about the DOM are available in <A HREF="ch05.htm#44523">Chapter 5</A>.<P>A <TT>document</TT> object provides  <!--INDEX getElementById( ) method;methods:getElementById( ) -->  <!--INDEX getElementsByTagName( ) 
 method;methods:getElementByTagName( ) -->  <!--INDEX createElement( ) method;methods:createElement( ) -->  <!--INDEX createTextNode( ) method;methods:createTextNode( ) --> methods such as <TT>getElementById</TT>, <TT>getElementsByTagName</TT>, <TT>createElement</TT>, and <TT>createTextNode</TT> for DOM querying and manipulation of the actual document. Further details about the DOM are available in <A HREF="ch05.html#44523">Chapter 5</A>.
 <P>Other types of <TT>document</TT> objects include the width and height of the window, a <TT>popupNode</TT> property that accesses the elements currently displaying a pop up (a XUL widget that attaches to another widget and appears above it holding some content), a <TT>tooltipNode</TT> property that accesses the element currently displaying a tooltip, and a <TT>documentElement</TT> property that accesses the body of the document:  <P>Other types of <TT>document</TT> objects include the width and height of the window, a <TT>popupNode</TT> property that accesses the elements currently displaying a pop up (a XUL widget that attaches to another widget and appears above it holding some content), a <TT>tooltipNode</TT> property that accesses the element currently displaying a tooltip, and a <TT>documentElement</TT> property that accesses the body of the document:
 <PRE>var docEl = document.documentElement;  <PRE>var docEl = document.documentElement;
 var secondLevelNodes = new Array( );  var secondLevelNodes = new Array( );
Line 21  secondLevelNodes[I] = docEl.childNodes[i Line 24  secondLevelNodes[I] = docEl.childNodes[i
 <H3><A NAME="77086"></A> XUL Parsing and the Document Object Model</H3>  <H3><A NAME="77086"></A> XUL Parsing and the Document Object Model</H3>
 <P>Mozilla runs XUL documents  <!--INDEX DOM (Document Object Model):XUL parsing and;XUL (XML-based User-interface Language):parsing, DOM and;parsing:XUL, DOM and --> through the Expat XML parser to check that they are well-formed. Expat is an XML parser library, written in C, that was integrated into Mozilla at the early stages of the code rewrite when the source was made open.  <P>Mozilla runs XUL documents  <!--INDEX DOM (Document Object Model):XUL parsing and;XUL (XML-based User-interface Language):parsing, DOM and;parsing:XUL, DOM and --> through the Expat XML parser to check that they are well-formed. Expat is an XML parser library, written in C, that was integrated into Mozilla at the early stages of the code rewrite when the source was made open.
 <P>During parsing, a content model based on the Document Object Model (DOM) is built, allowing access to the content in a way that facilitates dynamic manipulation. Once the XML tags are in the correct namespaces, Mozilla parses the document a second time to ensure that XUL tags themselves are valid. If this fails, or if the document does not conform to the syntax rules, an error appears in your window so you can address the problem.  <P>During parsing, a content model based on the Document Object Model (DOM) is built, allowing access to the content in a way that facilitates dynamic manipulation. Once the XML tags are in the correct namespaces, Mozilla parses the document a second time to ensure that XUL tags themselves are valid. If this fails, or if the document does not conform to the syntax rules, an error appears in your window so you can address the problem.
<P>The parsing process builds an internal tree structure that can be used as a handle for querying, modifying, and copying documents the structure represents. <A HREF="ch05.htm#44523">Chapter 5</A> describes in more detail the relationship between JavaScript (the main scripting engine used in Mozilla) and the DOM, and it goes further with examples of commonly used methods for querying and modifying a XUL document. To view that internal tree, you can use a tool called the DOM Inspector, which is a Mozilla application that lets you view and manipulate the document object model of any XUL file or web page. For more information about the DOM Inspector, see <A HREF="appb.htm#78077">Appendix B</A>.<P>The parsing process builds an internal tree structure that can be used as a handle for querying, modifying, and copying documents the structure 
 represents. <A HREF="ch05.html#44523">Chapter 5</A> describes in more detail the relationship between JavaScript (the main scripting engine used 
 in Mozilla) and the DOM, and it goes further with examples of commonly used methods for querying and modifying a XUL document. To view that internal tree, you can use a tool called the DOM Inspector, which is a Mozilla application that lets you view and manipulate the document object model of any XUL file or web page. For more information about the DOM Inspector, see <A HREF="appb.html#78077">Appendix B</A>.
 <H2><A NAME="77087"></A> Application Windows</H2>  <H2><A NAME="77087"></A> Application Windows</H2>
 <P><TT>&lt;window&gt;</TT> is just one of the  <!--INDEX STARTRANGE--XUL (XML-based User-interface Language):application windows;application windows:XUL;windows:XUL:application windows --> possible root elements of a XUL document, the others being <TT>&lt;overlay&gt;</TT>, <TT>&lt;dialog&gt;</TT>, <TT>&lt;page&gt;</TT>, and <TT>&lt;wizard&gt;</TT>. Overlays play an especially important role in managing and modularizing  <!--INDEX overlay element, XUL -->  <!--INDEX dialog element, XUL -->  <!--INDEX page element, XUL -->  <!--INDEX wizard element, XUL --> the code in your XUL application, so the section <A HREF="#77141">"Overlays</A>," later in this chapter, is dedicated to them.  <P><TT>&lt;window&gt;</TT> is just one of the  <!--INDEX STARTRANGE--XUL (XML-based User-interface Language):application windows;application windows:XUL;windows:XUL:application windows --> possible root elements of a XUL document, the others being <TT>&lt;overlay&gt;</TT>, <TT>&lt;dialog&gt;</TT>, <TT>&lt;page&gt;</TT>, and <TT>&lt;wizard&gt;</TT>. Overlays play an especially important role in managing and modularizing  <!--INDEX overlay element, XUL -->  <!--INDEX dialog element, XUL -->  <!--INDEX page element, XUL -->  <!--INDEX wizard element, XUL --> the code in your XUL application, so the section <A HREF="#77141">"Overlays</A>," later in this chapter, is dedicated to them.
 <P>The remaining root elements all have the XUL namespace and XUL window attributes and properties. All have a XUL <TT>document</TT> object. Yet, added features exist for each. Which element you choose for the XUL document depends on the purpose of the window. A <TT>&lt;window&gt;</TT> is typically top-level, a <TT>&lt;dialog&gt;</TT> is secondary, appearing above another window, a <TT>&lt;page&gt;</TT> is a document that appears in a frame, and a <TT>&lt;wizard&gt;</TT> stores a set of subsections for loading one at a time through a step-by-step process.  <P>The remaining root elements all have the XUL namespace and XUL window attributes and properties. All have a XUL <TT>document</TT> object. Yet, added features exist for each. Which element you choose for the XUL document depends on the purpose of the window. A <TT>&lt;window&gt;</TT> is typically top-level, a <TT>&lt;dialog&gt;</TT> is secondary, appearing above another window, a <TT>&lt;page&gt;</TT> is a document that appears in a frame, and a <TT>&lt;wizard&gt;</TT> stores a set of subsections for loading one at a time through a step-by-step process.
Line 334  Example 3-11<A NAME="77054"></A> Line 339  Example 3-11<A NAME="77054"></A>
 &lt;/treechildren&gt;  &lt;/treechildren&gt;
 &lt;/rule&gt;  &lt;/rule&gt;
 &lt;/template&gt;</PRE>  &lt;/template&gt;</PRE>
<P>For each entry or row in the browser history, the template extracts information from the datasource and renders it in a <TT>treecell</TT>. It then updates it each time a page is visited. For a more detailed discussion, refer to <A HREF="ch09.htm#97291">Chapter 9</A>.<P>For each entry or row in the browser history, the template extracts information from the datasource and renders it in a <TT>treecell</TT>. It 
 then updates it each time a page is visited. For a more detailed discussion, refer to <A HREF="ch09.html#97291">Chapter 9</A>.
 <H4><A NAME="77106"></A> Custom tree views</H4>  <H4><A NAME="77106"></A> Custom tree views</H4>
 <P>Custom views extend upon the static presentation  <!--INDEX trees:views:custom;views, tree views:custom --> of data in a tree with more flexibility, different ways to present the same data, and interfaces for defining behavior related to content. The functions include intercepting a <TT>treeitem</TT> selection and carrying out some functionality, populating or getting values from the tree, and returning the number of rows currently in the tree.  <P>Custom views extend upon the static presentation  <!--INDEX trees:views:custom;views, tree views:custom --> of data in a tree with more flexibility, different ways to present the same data, and interfaces for defining behavior related to content. The functions include intercepting a <TT>treeitem</TT> selection and carrying out some functionality, populating or getting values from the tree, and returning the number of rows currently in the tree.
 <P>The first thing you have to do to build a custom view is instantiate your <TT>tree</TT> and then associate a <TT>view</TT> object with it, commonly known as a view.  <P>The first thing you have to do to build a custom view is instantiate your <TT>tree</TT> and then associate a <TT>view</TT> object with it, commonly known as a view.
Line 428  The mozdev.org site provides free projec Line 434  The mozdev.org site provides free projec
 <P>Or you can use the <TT>value</TT> attribute when you're sure the text will not overflow. In this case, <TT>&lt;description&gt;</TT> is interchangeable with the <TT>&lt;label&gt;</TT> element for use in identifying other items in the UI:  <P>Or you can use the <TT>value</TT> attribute when you're sure the text will not overflow. In this case, <TT>&lt;description&gt;</TT> is interchangeable with the <TT>&lt;label&gt;</TT> element for use in identifying other items in the UI:
 <PRE>&lt;description value="Start a project today." /&gt;</PRE>  <PRE>&lt;description value="Start a project today." /&gt;</PRE>
 <H3><A NAME="77112"></A> Images</H3>  <H3><A NAME="77112"></A> Images</H3>
<P>XUL supports the display of images in the native web  <!--INDEX images:displaying;display:images;XUL (XML-based User-interface Language):images --> formats of JPEG, PNG, and GIF. Most images you will find in the Mozilla UI are GIF files, which retain the best quality when compressed. <A HREF="ch04.htm#37942">Chapter 4</A> discusses theme issues  <!--INDEX JPEG files;PNG files;GIG files --> and considerations in more detail. The basic syntax for displaying an image is:<P>XUL supports the display of images in the native web  <!--INDEX images:displaying;display:images;XUL (XML-based User-interface Language):images 
 --> formats of JPEG, PNG, and GIF. Most images you will find in the Mozilla UI are GIF files, which retain the best quality when compressed. <A HREF="ch04.html#37942">Chapter 4</A> discusses theme issues  <!--INDEX JPEG files;PNG files;GIG files --> and considerations in more detail. The basic syntax for displaying an image is:
 <PRE>&lt;image src="myImage.png" /&gt;</PRE>  <PRE>&lt;image src="myImage.png" /&gt;</PRE>
 <P>The <TT> <!--INDEX image element, XUL --> &lt;image&gt;</TT> element is analogous to the HTML <TT>&lt;img&gt;</TT> element. The image to be displayed is directly associated with the element using the <TT>src</TT> attribute. You can also use <TT>list-style-image</TT>, which is a CSS2 property used to associate an image with an element. To do this, you need a style <I>selector-</I>in this case, the <TT>id</TT>.  <P>The <TT> <!--INDEX image element, XUL --> &lt;image&gt;</TT> element is analogous to the HTML <TT>&lt;img&gt;</TT> element. The image to be displayed is directly associated with the element using the <TT>src</TT> attribute. You can also use <TT>list-style-image</TT>, which is a CSS2 property used to associate an image with an element. To do this, you need a style <I>selector-</I>in this case, the <TT>id</TT>.
 <PRE>&lt;image id="foo" /&gt;</PRE>  <PRE>&lt;image id="foo" /&gt;</PRE>
Line 670  This code allows quick access to the def Line 677  This code allows quick access to the def
 <TR><TD>  direction</TD>        <TD>  normal | reverse | inherit</TD>   <TD>  normal</TD>       <TD>  Determines the direction of the children in the box</TD></TR>  <TR><TD>  direction</TD>        <TD>  normal | reverse | inherit</TD>   <TD>  normal</TD>       <TD>  Determines the direction of the children in the box</TD></TR>
 <TR><TD>  ordinal-group</TD>    <TD>  &lt;integer&gt; | inherit</TD>    <TD>  1</TD>    <TD>  Controls the order in which widgets appear in a box</TD></TR></TABLE><P>  <TR><TD>  ordinal-group</TD>    <TD>  &lt;integer&gt; | inherit</TD>    <TD>  1</TD>    <TD>  Controls the order in which widgets appear in a box</TD></TR></TABLE><P>
   
<P>The attribute names in <A HREF="#77032">Table 3-4</A> (with the exception of <TT>style</TT>) are defined directly on the box. But there are also CSS versions of  <!--INDEX stylesheets:box attributes --> these properties that use the prefix <TT>box-pack</TT> becomes <TT>box-pack</TT> when it's defined in CSS, for example. These properties are not part of the CSS specification, so you may need to go one step further and use the format <TT>-moz-box-pack</TT>. These special extensions to CSS are described in the section <A HREF="ch04.htm#77083">"Special Mozilla Extensions</A>" in <A HREF="ch04.htm#37942">Chapter 4</A>.<P>The attribute names in <A HREF="#77032">Table 3-4</A> (with the exception of <TT>style</TT>) are defined directly on the box. But there are 
 also CSS versions of  <!--INDEX stylesheets:box attributes --> these properties that use the prefix <TT>box-pack</TT> becomes <TT>box-pack</TT> 
 when it's defined in CSS, for example. These properties are not part of the CSS specification, so you may need to go one step further and use the format <TT>-moz-box-pack</TT>. These special extensions to CSS are described in the section <A HREF="ch04.html#77083">"Special Mozilla Extensions</A>" in <A HREF="ch04.html#37942">Chapter 4</A>.
 <P>The most commonly used attributes  <!--INDEX orient attribute, boxes;align attribute, boxes;pack attribute, boxes --> are <TT>orient</TT>, <TT>align</TT>, and <TT>pack</TT>. The orientation of the children of a box can be either vertical or horizontal. The default is horizontal for a plain <TT>&lt;box&gt;</TT>, but not for all box containers (<TT>&lt;groupbox&gt;</TT> is vertical). The <TT>&lt;vbox&gt;</TT> and <TT>&lt;hbox&gt;</TT> conveniences were created to bypass the use of this attribute and increase box layout efficiency in the rendering phase.  <P>The most commonly used attributes  <!--INDEX orient attribute, boxes;align attribute, boxes;pack attribute, boxes --> are <TT>orient</TT>, <TT>align</TT>, and <TT>pack</TT>. The orientation of the children of a box can be either vertical or horizontal. The default is horizontal for a plain <TT>&lt;box&gt;</TT>, but not for all box containers (<TT>&lt;groupbox&gt;</TT> is vertical). The <TT>&lt;vbox&gt;</TT> and <TT>&lt;hbox&gt;</TT> conveniences were created to bypass the use of this attribute and increase box layout efficiency in the rendering phase.
 <P>Here is a look at how the pack and align properties can effect the layout of widgets. First, here is a bit of code with no constraints:  <P>Here is a look at how the pack and align properties can effect the layout of widgets. First, here is a bit of code with no constraints:
 <PRE>&lt;vbox style="width: 90px; height: 90px"&gt;  <PRE>&lt;vbox style="width: 90px; height: 90px"&gt;
Line 702  Figure 3-10<A NAME="77020"></A> Line 711  Figure 3-10<A NAME="77020"></A>
 <P><LI><!--INDEX listbox element, XUL --> &lt;listbox&gt;<P>  <P><LI><!--INDEX listbox element, XUL --> &lt;listbox&gt;<P>
 <P><LI><!--INDEX popup element, XUL --> &lt;popup&gt;<P>  <P><LI><!--INDEX popup element, XUL --> &lt;popup&gt;<P>
 <P><LI><!--INDEX statusbar element, XUL --> &lt;statusbar&gt;<P></UL>  <P><LI><!--INDEX statusbar element, XUL --> &lt;statusbar&gt;<P></UL>
<P>Descriptions of the tabbed box and the group box follow. Additional information on other box widgets can be found in the XUL element reference in <A HREF="appc.htm#72321">Appendix C</A>.<P>Descriptions of the tabbed box and the group box follow. Additional information on other box widgets can be found in the XUL element reference 
 in <A HREF="appc.html#72321">Appendix C</A>.
 <H4><A NAME="77129"></A> Tab box</H4>  <H4><A NAME="77129"></A> Tab box</H4>
 <P>Tab  <!--INDEX tab boxes;boxes:tab boxes --> boxes may contain only <TT> <!--INDEX tabs element, XUL --> &lt;tabs&gt;</TT> and <TT> <!--INDEX tabpanels element, XUL --> &lt;tabpanels&gt;</TT> elements, as shown in <A HREF="#77064">Example 3-16</A>. Beyond this, there is no restriction on the content that can go into the panels themselves. For the panels to display content properly, there have to be the same number of children and tabs in the tab panels.  <P>Tab  <!--INDEX tab boxes;boxes:tab boxes --> boxes may contain only <TT> <!--INDEX tabs element, XUL --> &lt;tabs&gt;</TT> and <TT> <!--INDEX tabpanels element, XUL --> &lt;tabpanels&gt;</TT> elements, as shown in <A HREF="#77064">Example 3-16</A>. Beyond this, there is no restriction on the content that can go into the panels themselves. For the panels to display content properly, there have to be the same number of children and tabs in the tab panels.
   
Line 830  Example 3-20<A NAME="77072"></A> Line 840  Example 3-20<A NAME="77072"></A>
 <H3><A NAME="77138"></A> Style</H3>  <H3><A NAME="77138"></A> Style</H3>
 <P>The <TT>style</TT> attribute allows you to  <!--INDEX style attribute;attributes:XUL:style attribute --> apply CSS style properties to your XUL element directly within the content. The attribute lets you access CSS properties (including <TT>width</TT>, <TT>height</TT>, <TT>min-width</TT>, <TT>min-height</TT>, <TT>max-width</TT>, and <TT>max-height</TT>), which give you more control over the size of your widget.  <P>The <TT>style</TT> attribute allows you to  <!--INDEX style attribute;attributes:XUL:style attribute --> apply CSS style properties to your XUL element directly within the content. The attribute lets you access CSS properties (including <TT>width</TT>, <TT>height</TT>, <TT>min-width</TT>, <TT>min-height</TT>, <TT>max-width</TT>, and <TT>max-height</TT>), which give you more control over the size of your widget.
 <PRE>&lt;button style="height: 20px; background-color: blue;" /&gt;</PRE>  <PRE>&lt;button style="height: 20px; background-color: blue;" /&gt;</PRE>
<P>Don't use the <TT>style</TT> attribute too often, though, especially if you want to have more than one theme for your application. See the section <A HREF="ch04.htm#77070">"Inline styles</A>" in <A HREF="ch04.htm#37942">Chapter 4</A> for information about how this attribute can make your application less modular and, for some, a better way to apply style to your XUL documents.<P>Don't use the <TT>style</TT> attribute too often, though, especially if you want to have more than one theme for your application. See the 
 section <A HREF="ch04.html#77070">"Inline styles</A>" in <A HREF="ch04.html#37942">Chapter 4</A> for information about how this attribute can make 
 your application less modular and, for some, a better way to apply style to your XUL documents.
 <H3><A NAME="77139"></A> Persistence</H3>  <H3><A NAME="77139"></A> Persistence</H3>
 <P>The <TT>persist</TT> attribute preserves the  <!--INDEX persist attribute;attributes:XUL:persist attribute --> state and appearance of a widget on an attribute-by-attribute basis. This feature is useful for properties that change or are set by users during a session, such as window size and positioning, splitter state, and the visibility of certain elements.  <P>The <TT>persist</TT> attribute preserves the  <!--INDEX persist attribute;attributes:XUL:persist attribute --> state and appearance of a widget on an attribute-by-attribute basis. This feature is useful for properties that change or are set by users during a session, such as window size and positioning, splitter state, and the visibility of certain elements.
 <PRE>&lt;splitter id="sidebar-splitter" collapse="before"  <PRE>&lt;splitter id="sidebar-splitter" collapse="before"
Line 863  persist="state hidden" align="center" or Line 875  persist="state hidden" align="center" or
 <P>Styles from overlays override styles from base XUL files, so be careful not to load master styles in an overlay.<P></BLOCKQUOTE>  <P>Styles from overlays override styles from base XUL files, so be careful not to load master styles in an overlay.<P></BLOCKQUOTE>
 <H4><A NAME="77143"></A> Dynamic loading</H4>  <H4><A NAME="77143"></A> Dynamic loading</H4>
 <P>The usual method for loading  <!--INDEX loading:overlays, dynamic loading;overlays:loading, dynamic loading;dynamic loading, overlays --> overlays, as outlined previously, is to include the overlay processing instruction in your XUL file. The dynamic loading of content is more subtle, but just as effective. Mozilla has a registry of overlays, in the form of an RDF datasource that lives in the <I>chrome</I> directory. These overlays live in the tree in a directory called <I>overlayinfo</I> under the <I>chrome</I> root.<A NAME="b317"></A><A HREF="#317">[*]</A> When a new package or component is registered, the overlays that come with it are loaded automatically.  <P>The usual method for loading  <!--INDEX loading:overlays, dynamic loading;overlays:loading, dynamic loading;dynamic loading, overlays --> overlays, as outlined previously, is to include the overlay processing instruction in your XUL file. The dynamic loading of content is more subtle, but just as effective. Mozilla has a registry of overlays, in the form of an RDF datasource that lives in the <I>chrome</I> directory. These overlays live in the tree in a directory called <I>overlayinfo</I> under the <I>chrome</I> root.<A NAME="b317"></A><A HREF="#317">[*]</A> When a new package or component is registered, the overlays that come with it are loaded automatically.
<P>Dynamic overlays are  <!--INDEX dynamic overlays;overlays:dynamic overlays --> commonly used to extend certain parts of the Mozilla application itself when new packages are installed that need access points, as do new language packages and themes, for instance. Certain menus in the UI, for example, are open for third-party authors to add items. Adding the name of your package to Mozilla's Tasks menu, for example, provides a convenient launching point and is handled with dynamic overlays. <A HREF="ch06.htm#15291">Chapter 6</A> provides more information on this topic, in the section <A HREF="ch06.htm#77076">"Adding the xFly application to the Mozilla Tools menu</A>."<P>Dynamic overlays are  <!--INDEX dynamic overlays;overlays:dynamic overlays --> commonly used to extend certain parts of the Mozilla application 
 itself when new packages are installed that need access points, as do new language packages and themes, for instance. Certain menus in the UI, for 
 example, are open for third-party authors to add items. Adding the name of your package to Mozilla's Tasks menu, for example, provides a convenient launching point and is handled with dynamic overlays. <A HREF="ch06.html#15291">Chapter 6</A> provides more information on this topic, in the section <A HREF="ch06.html#77076">"Adding the xFly application to the Mozilla Tools menu</A>."
 <H3><A NAME="77144"></A> Content Positioning</H3>  <H3><A NAME="77144"></A> Content Positioning</H3>
 <P>Content positioning is the order  <!--INDEX content:positioning;position:content positioning --> in which  <!--INDEX widgets:position;position:widgets --> widgets appear in the UI. Usually content is laid out in the order elements are defined in the XUL file. However, there are a couple of ways to override this ordering in XUL.  <P>Content positioning is the order  <!--INDEX content:positioning;position:content positioning --> in which  <!--INDEX widgets:position;position:widgets --> widgets appear in the UI. Usually content is laid out in the order elements are defined in the XUL file. However, there are a couple of ways to override this ordering in XUL.
 <P>Continuing with the example of the overlaid toolbar in the previous section, it is possible for both the base definition and the overlaid definition to have children. In this instance, the content is merged, with the original content appearing before the overlaid content by default:  <P>Continuing with the example of the overlaid toolbar in the previous section, it is possible for both the base definition and the overlaid definition to have children. In this instance, the content is merged, with the original content appearing before the overlaid content by default:
Line 940  xmlns="<A HREF="http://www.mozilla.org/k Line 954  xmlns="<A HREF="http://www.mozilla.org/k
 <P>The element here is <TT>link</TT>, the <TT>type</TT> is simple, and the locator is <TT>href</TT>.  <P>The element here is <TT>link</TT>, the <TT>type</TT> is simple, and the locator is <TT>href</TT>.
 <H2><A NAME="77151"></A> Building the Application Shell</H2>  <H2><A NAME="77151"></A> Building the Application Shell</H2>
 <P>Now that the  <!--INDEX application shell, building;shells:application shell, building --> main XUL widgets and some crucial concepts like the box model have been described, you can bring things together and create an <I>application shell</I>, a user interface that isn't (yet) hooked up to application code, but which can be re-used for different applications.  <P>Now that the  <!--INDEX application shell, building;shells:application shell, building --> main XUL widgets and some crucial concepts like the box model have been described, you can bring things together and create an <I>application shell</I>, a user interface that isn't (yet) hooked up to application code, but which can be re-used for different applications.
<P>The XUL in <A HREF="#77076">Example 3-22</A> extends  <!--INDEX xFly:shell;shells:xFly application --> the  <!--INDEX APIs (Application Programming Interfaces) Component Manager and:(see also xFly) --> xFly application work you've already done in <A HREF="ch02.htm#77048">Chapter 2</A>. It defines the interface for a viewer that will let you browse the examples in this book, giving xFly a measure of introspection. Examine the code closely in <A HREF="#77076">Example 3-22</A> to give yourself a feel for how the elements in the UI interact with each other to form something that is greater than the sum of its parts. Look particularly at how box elements are used such  <!--INDEX boxes:box elements --> as <TT>vbox</TT>, <TT>hbox</TT>, <TT>tabbox</TT>, and <TT>statusbar</TT>.<P>The XUL in <A HREF="#77076">Example 3-22</A> extends  <!--INDEX xFly:shell;shells:xFly application --> the  <!--INDEX APIs (Application 
 Programming Interfaces) Component Manager and:(see also xFly) --> xFly application work you've already done in <A HREF="ch02.html#77048">Chapter 2</A>. It defines the interface for a viewer that will let you browse the examples in this book, giving xFly a measure of introspection. Examine the code closely in <A HREF="#77076">Example 3-22</A> to give yourself a feel for how the elements in the UI interact with each other to form something that is greater than the sum of its parts. Look particularly at how box elements are used such  <!--INDEX boxes:box elements --> as <TT>vbox</TT>, <TT>hbox</TT>, <TT>tabbox</TT>, and <TT>statusbar</TT>.
   
 Example 3-22<A NAME="77076"></A>  Example 3-22<A NAME="77076"></A>
 <I>xFly application main workspace</I>  <I>xFly application main workspace</I>

Removed from v.1.1  
changed lines
  Added in v.1.2


FreeBSD-CVSweb <freebsd-cvsweb@FreeBSD.org>