XUL
by Michael H
1. 1. Simple Elements
1.1. 1.1 Creating a Window
1.2. 1.2 Adding Buttons
1.3. 1.3 Adding Labels and Images
1.4. 1.4 Input Controls
1.5. 1.5 Numeric Controls
1.6. 1.6 List Controls
1.7. 1.7 Progress Meters
1.8. 1.8 Adding HTML Elements
1.9. 1.9 Using Spacers
1.10. 1.10 More Button Features
2. 2. The Box Model
2.1. 2.1 The Box Model
2.2. 2.2 Element Positioning
2.3. 2.3 Box Model Details
2.4. 2.4 Groupboxes
2.5. 2.5 Adding More Elements
3. 3. More Layout Elements
3.1. 3.1 Stacks and Decks
3.2. 3.2 Stack Positioning
3.3. 3.3 Tabboxes
3.4. 3.4 Grids
3.5. 3.5 Content Panels
3.6. 3.6 Splitters
4. 4. Toolbars and Menus
4.1. 4.1 Toolbars
4.2. 4.2 Simple Menu Bars
4.3. 4.3 More Menu Features
4.4. 4.4 Popup Menus
4.5. 4.5 Scrolling Menus
5. 5. Events and Scripts
5.1. 5.1 Adding Event Handlers
5.2. 5.2 More Event Handlers
5.3. 5.3 Keyboard Shortcuts
5.4. 5.4 Focus and Selection
5.5. 5.5 Commands
5.6. 5.6 Updating Commands
5.7. 5.7 Broadcasters and Observers
6. 6. Document Object Model
6.1. 6.1 Document Object Model
6.2. 6.2 Modifying a XUL Interface
6.3. 6.3 Manipulating Lists
6.4. 6.4 Box Objects
6.5. 6.5 XPCOM Interfaces
6.6. 6.6 XPCOM Examples
7. 7. Trees
7.1. 7.1 Trees
7.2. 7.2 More Tree Features
7.3. 7.3 Custom Tree Views
7.4. 7.4 Tree View Details
7.5. 7.5 Tree Box Objects
8. 8. RDF and Templates
8.1. 8.1 Introduction to RDF
8.1.1. Resource Description Framework
8.1.1.1. get data from outside datasources
8.1.1.2. store resources such as
8.1.1.2.1. bookmarks
8.1.1.2.2. the history
8.1.1.2.3. mail messages
8.1.1.2.4. Mozilla provideds datasource for the above common data
8.1.1.3. Use
8.1.1.3.1. populate trees
8.1.1.3.2. populate other XUL elements
8.1.1.4. RDF specification
8.1.2. RDF/XML
8.1.2.1. consist of a model
8.1.2.1.1. graph representation of data
8.1.2.2. XML Language
8.1.2.2.1. used to represent RDF data.
8.1.2.3. some similarities to the XUL header
8.1.2.3.1. Instead of the 'window' element
8.1.3. RDF database
8.1.3.1. Mozilla bookmarks example
8.1.3.1.1. list may be hierarchical
8.1.3.1.2. Each of the fields in an RDF database is a resource
8.1.4. RDF/XML file example
8.1.4.1. three records described
8.1.4.1.1. one for each animal
8.1.4.1.2. Each RDF:Description tag
8.1.4.2. The 'Seq' and 'li' elements
8.1.4.2.1. specify that the records are in a list.
8.1.4.2.2. The 'Seq' element
8.1.4.3. URI generated from the example
8.1.4.3.1. Name
8.1.4.3.2. Species
8.1.4.3.3. Class
8.2. 8.2 Templates
8.2.1. Populating elements
8.2.1.1. Create Elements
8.2.1.1.1. From data supplied by RDF
8.2.1.1.2. Mozilla provided datasources
8.2.1.2. Treeitems and Menuitems
8.2.1.2.1. Usually populated with data.
8.2.1.2.2. Obviously can use other elements
8.2.1.3. Allow creation of elements based on RDF data
8.2.1.3.1. Need to provide a simple template
8.2.1.4. Simple Template Example
8.2.1.4.1. Create a button for each top-level bookmark.
8.2.1.4.2. Visual
8.2.1.4.3. 'template' contains a single 'button'
8.2.1.5. Container and Datasources
8.2.1.5.1. Vertical Box
8.2.1.6. Inside the Template
8.2.1.6.1. The elements inside the template
8.2.1.6.2. attribute
8.2.1.7. More Examples
8.2.1.7.1. This creates a vertical box with a button and a label for each bookmark.
8.2.1.7.2. The button will have the name of the bookmark and the label will have the URL.
8.2.1.7.3. The new elements that are created are functionally no different from ones that you put directly in the XUL file. The 'id' attribute is added to every element created through a 'template' which is set to a value which identifies the resource. You can use this to identify the resource.
8.2.1.7.4. Code
8.2.1.7.5. Example 3
8.2.2. How Templates are Built
8.2.2.1. element that has a 'datasource' attribute
8.2.2.1.1. Indicates the element is expected to be built from a template.
8.2.2.1.2. Object 'Builder'
8.2.2.2. Two different types of builders
8.2.2.2.1. 1. Content Builder
8.2.2.2.2. 2. Tree Builder
8.2.3. Rules
8.2.3.1. 'rule' element
8.2.3.1.1. Define a rule for each variation of elements
8.2.3.2. Example
8.2.3.2.1. By using two rules, we have allowed the contents of the template to be selectively generated.
8.2.3.2.2. first 'rule'
8.2.3.2.3. second 'rule'
8.2.3.2.4. To get an attribute from the RDF namespace (rdf:type)
8.2.3.2.5. Summary text
8.3. 8.3 Trees and Templates
8.3.1. Adding Datasources to Trees
8.3.1.1. 'datasources' and 'ref' attribute to the 'tree' element.
8.3.1.1.1. specify the datasource and root node to display
8.3.1.1.2. Multiple rules can be used to indicate different content for different types of data.
8.3.1.1.3. e.g. <tree datasource="rdf:history" ref="NC:HistoryByDate" flags="dont-build-content">
8.3.1.1.4. 'flags' attribute to the value dont-build-contend
8.3.1.2. In the template
8.3.1.2.1. will be one 'treecell'
8.3.1.3. Template-built Tree Example
8.3.1.3.1. The following example demonstrates a template-built tree, in this case for the file system.
8.3.1.3.2. Image Explanation
8.3.2. Sorting Columns
8.3.2.1. Tree which generate their data from a datasource have the optional ability to sort their data
8.3.2.1.1. Sort
8.3.2.1.2. Any Column
8.3.2.2. This sorting feature is not available for trees with static content
8.3.2.2.1. Although you can write a script to sort that data
8.3.2.3. Set 'sortDirection' attribute value
8.3.2.3.1. ascending
8.3.2.3.2. descending
8.3.2.3.3. natural
8.3.2.4. 'sortActive' attribute
8.3.2.4.1. Should be set to 'true' for one column
8.3.2.5. style class 'sortDirectionIndicator'
8.3.2.5.1. May use this on a column that can besorted.
8.3.2.5.2. Cause a small triangle to appear on the column header that inidicates the direction of the sort.
8.3.2.6. First attribute, 'sort'
8.3.2.6.1. Set to an RDF property that is used as the sort key.
8.3.2.7. Example
8.3.3. Persisting Column State
8.3.3.1. persist which column is currently sorted
8.3.3.1.1. Remembered between sessions
8.3.3.2. Use attributes
8.3.3.2.1. 'persist'
8.3.3.3. Five attributes of Columns
8.3.3.3.1. 1. 'width'
8.3.3.3.2. 2. 'order'
8.3.3.3.3. 3. 'visible'
8.3.3.3.4. 4. which column is currently sorted
8.3.3.3.5. 5. sort direction
8.3.3.3.6. e.g. <treecol id="Date" label="Date" flex="1" class="sortDirectionIndicator" persist="width ordinal hidden sortAvtive sortDirection" sort="rdf:http://home.netscape.com/WEB-rdf#LastModifiedDate
8.3.4. Additional Rule Attributes
8.3.4.1. Two additional attributes
8.3.4.1.1. 1 iscontainer
8.3.4.1.2. 2. isempty
8.4. 8.4 RDF Datasources
8.4.1. Other Mozilla Datasources
8.4.1.1. Mozilla provides a number of other built-in datasources
8.4.1.2. They work very similarly to the bookmarks, although the fields will be different in each case.
8.4.2. The History List
8.4.2.1. rdf:history
8.4.2.1.1. Date
8.4.2.1.2. Name
8.4.2.1.3. Page
8.4.2.1.4. Referrer
8.4.2.1.5. URL
8.4.2.1.6. Visit Count
8.4.2.2. Using the History List Example
8.4.3. Other Datasources
8.4.3.1. Bookmarks(rdf:bookmarks)
8.4.3.2. Files(rdf:files)
8.4.3.2.1. The files datasource is an example of a datasource that determines its resources only when necessary. We don't want every file in the filesystem to be determined before the data is displayed. Instead, only the files and directories that the tree element (or other elements) will need to display at a given time will be determined.
8.4.4. Composite Datasources
8.4.4.1. I can specified multiple datasources
8.4.4.2. <tree datasources="rdf:bookmarks rdf:history animal.rdf" ref=NC:BookmarksRoot">
8.4.4.2.1. This example reads the resources from the bookmarks, history and the animals.rdf file. They are combined into a single composite datasource and can be used as if they were one.
8.4.4.3. rdf:null
8.4.5. Custom RDF Datasources
8.4.5.1. Use my own RDF datasource storedin an RDF file
8.4.5.1.1. local file
8.4.5.1.2. remote file
8.4.5.1.3. Just put the URL of the RDF file in the datasources attribute.
8.4.5.2. Using RDF file Example
8.4.5.2.1. Source
8.4.5.2.2. RDF
8.5. 8.5 Advanced Rules
8.5.1. The Full Rule Syntax
8.5.1.1. 'rule' tag
8.5.1.1.1. child tags
8.5.2. Rule Conditions
8.5.2.1. 'content' element
8.5.2.1.1. It serves as a placeholder as the template builder iterates through the resources.
8.5.2.1.2. It specifies the name of a variable in which is placed a reference to the root resource while the conditions are analyzed for a match.
8.5.2.1.3. The root resource is the one specified by the ref attribute on the element containing the template.
8.5.2.1.4. syntax
8.5.2.2. 'member' element
8.5.2.2.1. iterate through a set of child resources.
8.5.2.2.2. RDF/XML fragment
8.5.2.3. 'triple' element
8.5.2.3.1. heck for the existence of a given triple (or assertion) in the RDF datasource
8.5.2.3.2. like a property of a resource
8.5.2.3.3. Add a weather prediction to the city datasource
8.5.3. Generating Content
8.5.3.1. Complete Tree Example
8.5.4. Adding Additional Bindings
8.5.4.1. 'bindings' element
8.5.4.1.1. Final element you can add inside a 'rule'
8.5.4.1.2. Example
8.6. 8.6 Persistent Data
8.6.1. Remembering State
8.6.1.1. save state of a window across session
8.6.1.1.1. E.g. The window should remember which toolbars are collapsed even after the user exits.
8.6.1.2. localstore.rdf
8.6.1.2.1. in the same directory as other user preferences.
8.6.1.2.2. New nodeHolds state information about each window
8.6.1.2.3. New nodeIt works with Mozilla user profiles, so that each user can have different settings.
8.6.1.3. 'persistent' attribute
8.6.1.3.1. add a 'persist' attribute
8.6.2. Our Find Files Example
8.6.2.1. This will cause the x and y position of the window and the width and height of the window to be saved.
8.6.3. Save the state of a XUL window
9. 9. Skins and Locales
9.1. 9.1 Adding Style Sheets
9.1.1. Style Sheets
9.1.1.1. <?xml-stylesheet href="chrome://global/skin/" type="text/css">
9.1.2. Changing the Styles
9.1.2.1. For installed files, you'll have to create or modify a manifest file and install the skin.
9.1.2.2. Our find Files Dialog Example
9.1.2.2.1. The new xml-stylesheet line is used to import the style sheet
9.1.2.2.2. findfile.css
9.1.3. Importing Style Sheets
9.1.3.1. Style import from XUL
9.1.3.1.1. <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
9.1.3.2. Style import from CSS
9.1.3.2.1. @import url(chrome://global/skin);
9.1.3.2.2. All elements can be styled using CSS
9.2. 9.2 Styling a Tree
9.2.1. Styling the Tree
9.2.1.1. Style added to the 'tree' element will apply to the entire tree
9.2.1.2. Adding a style to the 'treecol' element does not cause the style to be applied to the column but only to the header
9.2.1.3. body of the tree
9.2.1.3.1. outer 'treechildren'
9.2.1.3.2. The inner elements are just placeholders
9.2.2. Setting Properties
9.2.2.1. use the 'properties' attribute
9.2.2.1.1. on the rows or cells to set one or more named properties
9.2.2.1.2. Can be used with static content
9.2.2.1.3. e.g. <treerow properties="makeItBlue">
9.2.3. CSS Selectors for the Tree
9.2.3.1. syntax
9.2.3.1.1. <treechildren::-moz-tree-row(makeItBlue) { background-color: blue; }
9.2.3.1.2. values
9.2.3.1.3. I can check for multiple properties
9.2.4. Default Properties
9.2.4.1. checked
9.2.4.1.1. this property is set cells whose column is type="checkbox"
9.2.4.2. focus
9.2.4.2.1. this property is set if the tree currently has the focus.
9.2.4.3. selected
9.2.4.3.1. this property is set for rows or cells that are currently selected.
9.2.4.4. current
9.2.4.4.1. this property is set if the keyboard cursor is at the row. Only one row will have this property set at a time.
9.2.4.5. hover
9.2.4.5.1. this property is set if the mouse cursor is on the row. Only one row will have this property set at a time.
9.2.4.6. container
9.2.4.6.1. this property is set for rows or cells that have child rows.
9.2.4.7. leaf
9.2.4.7.1. this property is set for rows or cells that do not have child rows.
9.2.4.8. open
9.2.4.8.1. this property is set for rows or cells which are expanded.
9.2.4.9. closed
9.2.4.9.1. this property is set for rows or cells which are collapsed.
9.2.4.10. primary
9.2.4.10.1. this property is set for cells in the primary column.
9.2.4.11. sorted
9.2.4.11.1. this property is set for cells in the current sorted column.
9.2.4.12. even
9.2.4.12.1. this property is set for even numbered rows.
9.2.4.13. odd
9.2.4.13.1. this property is set for odd numbered rows. This property, along with the even property allow you to set, for example, alternating colors for each row.
9.2.4.14. dragSession
9.2.4.14.1. this property is set if something is currently being dragged.
9.2.4.15. dropOn
9.2.4.15.1. if a drag is occuring over the tree, this property is set for the row currently being dragged over, as long as the mouse pointer is hovering over the row.
9.2.4.16. dropBefore
9.2.4.16.1. this property is set if the mouse pointer is hovering before the row currently being dragged over.
9.2.4.17. dropAfter
9.2.4.17.1. this property is set if the mouse pointer is hovering after the row currently being dragged over.
9.2.4.18. progressNormal
9.2.4.18.1. this property is set for progress meter cells.
9.2.4.19. progressUndetermined
9.2.4.19.1. this property is set for undeterminate progress meter cells.
9.2.4.20. progressNon
9.2.4.20.1. this property is set for non-progress meter cells.
9.2.4.21. The properties are set for rows or cells in rows with the necessary state. For columns and cells, one additional property, the id of the column or column the cell is in will be set.
9.2.5. Setting Properties for the RDF-built Trees
9.2.5.1. For RDF-built trees, you can use the same syntax. However, you will often set the properties based on values in the datasource.
9.2.6. Setting Properties for the Custom View
9.2.6.1. set properties
9.2.6.1.1. By supplying the functions
9.2.6.2. Example
9.2.6.2.1. Make every fourth row have blue text
9.2.7. Example style sheet
9.3. 9.3 Modifying the Default Skin
9.3.1. Skin Basics
9.3.1.1. skin
9.3.1.1.1. set of style sheets
9.3.1.1.2. images
9.3.1.1.3. behaviors that are applied to a XUL file
9.3.1.2. I can change the look of a window without changing its functionality
9.3.1.3. Firefox provides a skin by default
9.3.1.3.1. I may download others
9.3.1.4. The XUL for any skins is the same
9.3.1.4.1. The style sheets and images used are different
9.3.1.5. Described in CSS
9.3.1.5.1. define
9.3.1.6. The file classic.jar
9.3.1.6.1. contains the skin definitions.
9.3.1.6.2. The global direcotyr within this archive contains the main style definitions for how to display the various XUL elements.
9.3.1.6.3. By changing these files, you can change the look of the XUL applications
9.3.2. Customize with userChrome.css
9.3.2.1. If I place 'userChrome.css' in a directory called 'chrome' inside my user profile directory
9.3.2.1.1. I can override setting without changing the archives themselves.
9.3.2.2. The file 'userContent.css"
9.3.2.2.1. customizes Web pages
9.3.2.3. customizes chrome files
9.3.2.4. E.g.
9.3.2.4.1. menubar {background-color:red;}
9.3.3. Skin Packages
9.3.3.1. Effect only one window
9.3.3.2. Example
9.3.3.2.1. Add a red border around the meuu commands in the bookmarks manager window
9.3.3.3. 'list-style-image' property
9.3.3.3.1. Can assign images to a button, checkbox and other elements
9.4. 9.4 Creating a Skin
9.4.1. A Simple Skin
9.4.1.1. Creating a Custom Skin Package
9.4.1.2. Adding Style Rules
9.4.1.2.1. Example Code
9.4.1.3. Rounding on the Tabs
9.4.1.3.1. special Mozilla style rule
9.4.1.3.2. The last rule only applies to tabs that have their 'selected' attribute set to true
9.4.1.4. Adding Toolbar Icons
9.4.1.4.1. It is somewhat difficult to distinguish the buttons on the toolbar from the commands on the menu.
9.4.1.4.2. Mozilla Composer provides some icons for open and save buttons, which we'll just use here to save time.
9.4.1.4.3. We can set the image for a button using the 'list-style-image' CSS property
9.4.1.5. Other Changes
9.4.1.5.1. code
9.4.1.5.2. minor changes to the spacing around the items, by setting margins.
9.4.2. Creating a Global Skin
9.5. 9.5 Localization
9.5.1. Entities
9.5.1.1. Table of strings is created for each language
9.5.1.2. Instead of hard-coding text directly into an application, each piece of text is only a reference into the string table
9.5.1.3. SML provides entities which can be used for a similar purpose
9.5.1.4. codes
9.5.1.4.1. <
9.5.1.4.2. >
9.5.1.5. XML has a syntax which allow you to declare custom entities.
9.5.1.5.1. I can use these so that the entity is replaced with its value, which can be a string of text
9.5.1.5.2. Entities may be used whenever text occurs, including the values of attributes.
9.5.1.5.3. Example
9.5.2. DTD Files
9.5.2.1. Entities are declared in Document Type Definition (DTD) files
9.5.2.2. Declare the syntax and semantics of a particular XML file
9.5.2.2.1. but they also let you declare entities
9.5.2.3. In the Mozilla chrome system
9.5.2.3.1. find DTD files located in the 'locale' subdirectory
9.5.2.3.2. non-installed chrome files
9.5.2.3.3. Note
9.5.2.4. Normally one DTD file per XUL file
9.5.2.5. use in XUL
9.5.2.5.1. add line
9.5.2.6. add the locale to the chrome.manifest file,
9.5.2.6.1. locale findfile en-US locale/
9.5.3. Declaring Entities
9.5.3.1. syntax
9.5.3.1.1. <!ENTITY findLabel "Find">
9.5.3.2. for Japanese
9.5.3.2.1. <!ENTITY findLabel "検索">
9.5.3.3. Use entities for values
9.5.3.3.1. that could be different in a different language
9.5.4. Changing the Find Files example
9.5.4.1. xul code
9.5.4.1.1. Each text string has been replaced by and entity reference.
9.5.4.1.2. A DTD file has been included near the beginning of the XUL file
9.5.4.1.3. Each entity that was added should be declared in the DTD file
9.5.4.1.4. more note
9.5.4.2. findfile.dtd
9.6. 9.6 Property Files
9.6.1. Properties
9.6.1.1. Like DTD
9.6.1.2. For message to be displayed from script
9.6.2. Stringbundles
9.6.2.1. <stringbundleset id ="strbundles">
9.6.2.2. <stringbundle id="strings" src="strings.properties"/>
9.6.2.3. </stringbundleset>
9.6.2.4. Getting a String from the Bundle
9.6.2.4.1. 'getString' properties
9.6.2.5. Text Formatting
9.6.2.5.1. 'getFormattedString()' method
9.6.3. Escape non-ASCII Charaters
10. 10. Bindings
10.1. 10.1 Introduction to XBL
10.1.1. XUL's sister language
10.1.2. eXtensible Bindings Language
10.1.3. Bindings
10.1.3.1. Describes the behavior of a XUL widget
10.1.3.1.1. e.g. a binding might be attached to a scroll bar
10.1.3.2. XBL is an XML language
10.1.3.2.1. The 'binding's element is the root element of an XBL
10.1.4. Binding Example
10.1.4.1. This example creates a window with a single box.
10.1.4.2. The box has been declared to have a class of okcancelbuttons.
10.1.4.3. The box has been declared to have a class of okcancelbuttons.
10.2. 10.2 Anonymous Content
10.2.1. XBL Content
10.2.1.1. Declaring Scrollbar Example
10.2.1.1.1. Contains a single binding
10.2.1.1.2. 'content' tag
10.2.1.2. Filename Input Field Example
10.2.2. Override the Bound Element
10.2.2.1. e.g. <scrollbar/> <scrollbar><button label="Overridden"/></scrollbar>
10.2.3. Using the Children Element
10.2.3.1. When I want both the XBL content and the content provided by the XUL file to be displayed.'
10.2.3.2. Added in place of the 'children' element.
10.2.3.3. Handy when creating custom menu widgets.
10.2.3.3.1. Example
10.2.3.4. 'include' Attribute
10.2.3.4.1. I wish to only include specific types of content
10.2.3.4.2. Allow only certain elements to appear in the content.
10.2.3.4.3. Its value should be set to a single tag name, or to a list of tags separated by vertical bars
10.2.3.4.4. <children includes="button"/>
10.2.3.4.5. Example
10.2.3.5. Multiple Children Elements
10.2.3.5.1. I can use multiple 'children' elements and have certain elements be placed in one location and other elements placed in another.
10.2.3.5.2. By adding a 'include' attribute and setting it to a vertical bar-separted list of tags.
10.2.3.5.3. Example
10.3. 10.3 XBL Attribute Inheritance
10.3.1. Attributes can be inherited
10.3.2. Inherited Attributes
10.3.2.1. XBL allow us to build composite widgets while hiding their actual implementation.
10.3.2.2. Add attributes to the bound elements that modify the inner elements.
10.3.2.2.1. Example
10.4. 10.4 Adding Properties
10.4.1. The XBL Interface
10.4.1.1. I can define my own properties for the elements I created.
10.4.1.2. I can also add methods that can be called.
10.4.1.3. Three types of items I can add
10.4.1.3.1. Field are used to hold a simple value
10.4.1.3.2. Properties can also be used to hold a value but may have code execute when an attempt is made to retrieve or modify the value.
10.4.1.3.3. Methods are functions which may be executed.
10.4.1.3.4. All three are defined within an 'implementation' element, which should be a child of the 'binding' element. Within the implementation, I define individual field, property, and method elements, one for each one that I want.
10.4.1.3.5. General syntax
10.4.2. Fields
10.4.2.1. code
10.4.2.1.1. A 'number' field has been defined in the binding, which stores the random number.
10.4.2.1.2. The two extra buttons set and get the value of this field.
10.4.2.1.3. The syntax is very similar to getting and setting the properties of HTML elemetns.
10.4.2.1.4. In this example, no content has been placed inside either the XUL box or its definition in XBL, which is perfectly valid.
10.4.2.1.5. Should assigned a default value
10.4.3. Properties
10.4.3.1. Onget Attribute and Onset Attribute
10.4.3.1.1. I can use the 'onget' and 'onset' attributes to have code execute when teh property is retrieved or modified.
10.4.3.1.2. Each to the 'property' element and set its value to a script which either gets or sets the value of the property.
10.4.3.1.3. example
10.4.4. Getter Element and Setter Element
10.4.4.1. code
10.4.4.1.1. The property in this example will only be able to hold integer values.
10.4.5. Readonly Attribute
10.4.5.1. adding a 'readonly' attribute
10.4.5.1.1. To the 'field' tag or 'property' tag and setting it to true
10.4.5.1.2. Attmpting to set the value of a read-only property will fail
10.5. 10.5 Adding Methods
10.5.1. Methods
10.5.1.1. example code
10.5.1.1.1. A method declaration goes inside the implementation element, like the fields and properties do.
10.5.1.1.2. Two type of child elements
10.5.2. Accessing the Anonymous Content
10.5.2.1. 'getAnonymousNodes' method
10.5.2.1.1. var value=document.getAnonymousNodes(element);
10.5.2.1.2. Example code
10.5.3. Accessing from Inside the Anonymous Content
10.5.3.1. 'getBindingParent' method
10.5.3.2. 'parentNote' property
10.5.3.2.1. go up by a single node.
10.5.3.3. The children of an element placed in the XUL file can be retrieved in the normal way and don't move even if you use the 'children' tag.
10.5.3.3.1. Code
10.5.4. Constructors and Destructors
10.5.4.1. Example Code
10.6. 10.6 Adding Event Handlers
10.6.1. Event Handlers
10.6.1.1. I can trap the events and handle them in a special way
10.6.1.2. I can add event handlers to the elements inside the content if needed.
10.6.1.2.1. e.g. 'oncommand' handlers added to some button
10.6.1.3. Handler Element
10.6.1.3.1. Can add event handler to the entire contents
10.6.1.3.2. Describe the action taken for a single event handler.
10.6.1.3.3. I can use more than one handler if necessary.
10.6.1.3.4. If an event does not match any of the 'handler' events, it is simply passed to the inner contnet as usual
10.6.1.3.5. General handler syntax
10.6.1.4. Handling Mouse Events
10.6.1.4.1. Example
10.6.1.5. Handling Key Events
10.6.1.5.1. Example
10.6.1.5.2. The modifier keys can be checked by adding a 'modifiers' attribute.
10.6.1.5.3. syntax when the code in a handler is more complex
10.6.2. Handlers Example
10.6.2.1. The content is a single textbox
10.6.2.2. A field 'clipboard' has been added to it to store the clipboard contents.
10.6.2.2.1. This does mean that the clipboard operations are limited to this single textbox. However, each one will have its own buffer.
10.6.2.3. Three handlers added
10.6.2.3.1. 1. Cut
10.6.2.3.2. 2. Copy
10.6.2.3.3. 3. Paste
10.7. 10.7 XBL Inheritance
10.7.1. Inheritance
10.7.1.1. add 'extends' attribute to the 'binding' tag.
10.7.1.1.1. Example Source
10.7.2. Autocompleting TextBoxes
10.7.2.1. Adds extra event handling so that when a URL is typed, a menu pop up with possible completions.
10.7.2.2. I can use it in my own application too.
10.7.2.2.1. Just create a textbox with two extra attribute
10.8. 10.8 XBL Example
10.8.1. A Slideshow Element
10.8.1.1. Content of the Slideshow
10.8.1.1.1. Example Source
10.8.1.1.2. XUL file
10.8.1.1.3. Style Sheet used here
10.8.1.1.4. page Property
10.8.1.1.5. setPage method
10.8.1.1.6. Constructor
10.8.1.1.7. Additional Features
10.8.1.1.8. The Final Code
11. 11. Specialized Window Types
11.1. 11.1 Features of a Window
11.1.1. Creating Another Window
11.1.1.1. As in HTML
11.1.1.1.1. window.open() function
11.1.2. Specifying the Width and Height
11.1.2.1. Example specified width and height
11.1.2.1.1. <window width='400' height ='450' xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
11.1.3. Other Window Features
11.1.3.1. Can use any of the pre-existing flags
11.1.3.1.1. find in a Javascript reference
11.1.3.1.2. May disable a feature by setting it to 'no'
11.1.3.2. alwaysLowered
11.1.3.2.1. The window will always appear behind other windows
11.1.3.3. alwaysRaised
11.1.3.3.1. The window will always appear above other windows
11.1.3.4. centerscreen
11.1.3.4.1. The window will be centered on the screen when opened.
11.1.3.5. dependent
11.1.3.5.1. The window will always appear relative to the window that opened it. If the window that opened the new window is moved, the new window is moved relative to it.
11.1.3.6. dialog
11.1.3.6.1. The window is a dialog box, which may appear differently.
11.1.3.7. modal
11.1.3.7.1. The dialog is modal. The window that opened the modal window can't be interacted with until the modal window is closed.
11.1.3.8. resizable
11.1.3.8.1. The user can resize the window
11.1.4. See also DOM window.open() reference
11.2. 11.2 Creating Dialogs
11.2.1. Creating a Dialog
11.2.1.1. openDialog() function is used to open a dialog
11.2.1.1.1. related to open()
11.2.1.1.2. displays a dialog instead of a window
11.2.1.1.3. take additional arguments beyond the first three
11.2.1.1.4. Example
11.2.1.2. Pass Values back
11.2.1.2.1. 'window.opener' property
11.2.2. The Dialog Element
11.2.2.1. Example
11.2.2.1.1. <dialog id="example" title="Dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" buttons ="accept, cancel" ondialogaccept="doOK()" ondialogcancel="return do Cancel();">
11.2.2.1.2. <script> function doOK() {alert("You pressed OK!"); return true; }
11.2.2.1.3. function doCancel() { alert("You pressed Cancel!"); return true;} </script>
11.2.2.1.4. <description value="Select a button"/>
11.2.2.1.5. </dialog>
11.2.2.2. The button attributes
11.2.2.2.1. accept - an OK button
11.2.2.2.2. cancel - a Cancel button
11.2.2.2.3. help - a Help button
11.2.2.2.4. disclosure - a disclosure button, which is used for showing more information
11.2.2.2.5. values separated by commas
11.2.2.2.6. Can set code to execute when the buttons are pressed
11.2.2.3. Other useful attributes
11.2.2.3.1. buttonlabelaccept
11.2.2.3.2. buttonaccesskeyaccept
11.2.2.3.3. defaultButton
11.2.2.4. The buttons elements
11.2.2.4.1. can be accessed with the following javascript
11.3. 11.3 Open and Save Dialogs
11.3.1. File pickers
11.3.1.1. Is a dialog that allows the user to select a file
11.3.1.2. Most commonly used for the Open and Save menu commands
11.3.1.3. XPCOM interface 'nsIFilePicker'
11.3.1.3.1. used to implement a file picker
11.3.1.4. Note: file picker only works from chrome URLs
11.3.1.5. THREE Modes
11.3.1.5.1. 1. Open
11.3.1.5.2. 2. Get Folder
11.3.1.5.3. 3. Save
11.3.1.6. Creating a file picker
11.3.1.6.1. Need to create a file picker component and initialize it
11.3.1.6.2. var nsIFilePicker =Components.interfaces.nsIFilePicker;
11.3.1.6.3. var fp = Components.classes["@mozilla.org/filepicker;1"].createInstance(nsIFilePicker);
11.3.1.6.4. fp.init(window, "Select a File", nsIFilePicker.modeOpen);
11.3.1.7. Default directory and filters
11.3.1.7.1. Two features you can set before displayed
11.3.1.8. Getting the selected file
11.3.1.8.1. show the dialog
11.4. 11.4 Creating a Wizard
11.4.1. The Wizard
11.4.1.1. A wizard is a special type of dialog that contains a number of pages
11.4.1.1.1. Buttons appear at bottom
11.4.1.1.2. Each page contains a single question or a set of related questions
11.4.1.1.3. After the last page, the operation is carried out.
11.4.1.2. Often used to help the user perform a complex task
11.4.1.3. 'wizard' element
11.4.1.3.1. The pages of the wizard are created using the 'wizardpage' element.
11.4.1.3.2. Note: wizards currently only work properly from chrome URLs.
11.4.1.3.3. The 'description' attribute
11.4.1.3.4. Attribute 'onwizardfinish'
11.4.2. Handling Page Changes
11.4.2.1. wizard.onwizardfinish attribute
11.4.2.1.1. Set it to a script
11.4.2.2. wizardpage Attributes
11.4.2.2.1. onpagerewound
11.4.2.2.2. onpageadvanced
11.4.2.2.3. You can use different code for each page.
11.4.2.2.4. onpagehide
11.4.2.2.5. onpageshow
11.4.2.2.6. pageadvanced
11.5. 11.5 More Wizards
11.5.1. More Complex Wizard Navigation
11.5.1.1. 'next' attribute
11.5.1.1.1. wizard's goto() method
11.5.2. Wizard Functions
11.5.2.1. wizard works like
11.5.2.1.1. tabbed panel
11.5.2.2. Property
11.5.2.2.1. canAdvance
11.5.2.2.2. canRewind
11.5.2.2.3. currentPage
11.6. 11.6 Overlays
11.6.1. Using Overlays
11.6.1.1. In simple application
11.6.1.1.1. With only one window
11.6.1.2. More sophisticated applicatons
11.6.1.2.1. Contain many
11.6.1.2.2. Common between each window
11.6.1.3. When a window with an overlay is opened, the elements in both the window and the overlay with the same ids are combined together.
11.6.1.3.1. The children of matching elements are added to the end of the set of children in the window's element.
11.6.1.3.2. Attribute that are present on the overlay's elements will be applied to the window's elements.
11.6.1.4. find files example
11.6.1.4.1. import overlay syntax
11.6.1.5. Simple help menu stored in an overlay
11.6.1.5.1. Source
11.6.1.5.2. need to include the DTD file
11.6.1.5.3. Code use the overlay
11.6.1.5.4. DTD file
11.6.1.5.5. putting the attributes on the help menu in the overlay
11.6.2. Duplicate content
11.6.2.1. window's content used
11.6.2.2. overlay's content appended
11.6.2.3. Example
11.6.3. Placing Overlaid Elements
11.6.3.1. Allows you to overlay menus, toolbars and other widgets at the exact location wished.
11.6.3.2. attribute
11.6.3.2.1. 'insertbefore'
11.6.3.2.2. 'insertafter'
11.6.3.2.3. position
11.6.4. Removing elements
11.6.4.1. Example
11.6.5. Can be used to separate common content
11.7. 11.7 Cross Package Overlays
11.7.1. Applying Overlays to other Packages
11.7.1.1. Note: This section talks about contents.rdf which ahs been replaced in Gecko 1.8 by Manifest Files
11.7.1.2. Have the oerlays specify which windows that they apply to
11.7.1.3. Example
11.7.1.3.1. Add 'menu items' or 'toolbars' to Mozilla brower window.
11.7.1.3.2. The Mozilla Mail application
11.7.1.3.3. find files example
11.7.1.3.4. Mozilla Example Detailed
11.7.2. Apply overlays to files that don't import them.
12. 12. Installation
12.1. 12.1 Creating an Installer
12.1.1. XPInstall Packages
12.1.1.1. XPInstall
12.1.1.1.1. (a). XUL Windows
12.1.1.1.2. (b). Scripts
12.1.1.1.3. (c). Other Files
12.1.1.1.4. Packaged into JAR files
12.1.1.2. Single File Installer
12.1.1.3. Simple Install Script
12.1.1.3.1. (a) Download Package
12.1.1.3.2. (b) Install
12.1.1.3.3. (c) Mechanism
12.1.2. Install Triggers
12.1.2.1. Global Object InstallTrigger
12.1.2.1.1. function InstallTrigger.install()
12.1.3. XPI Archives
12.1.3.1. must contain install.js
12.1.3.2. xpi
12.1.3.2.1. install.js
12.1.3.2.2. JARS
12.1.3.2.3. special zip file
12.1.3.2.4. can use zip utility to view and add file
12.2. 12.2 Install Scripts
12.2.1. Creating an install script
12.2.1.1. note: for FireFox Extension, install.js is replaced by install.rdf
12.2.1.2. 1. specified what package and version is been installed
12.2.1.3. 2. Use the install function to install the files and directories. Or remove files or directory e.g. uninstall portion of the program
12.2.1.3.1. Indicated Only
12.2.1.3.2. Allow process to be aborted if encounter error
12.2.1.4. 3. Start the process of installing the necessary
12.2.2. The Component Registry
12.2.2.1. Store Infomration about application
12.2.2.1.1. File List
12.2.2.1.2. Versions
12.2.2.1.3. Other relevant info
12.2.2.2. Hierarchy of keys and values
12.2.2.2.1. Key
12.2.3. Install Initialization
12.2.3.1. Install Object has a function
12.2.3.1.1. initInstall()
12.2.3.2. Set the directory files are installed
12.2.3.2.1. (a) Simple
12.2.3.2.2. (b) Advance
12.2.3.3. New node
12.2.4. Setting Install Files
12.2.4.1. addDirectory();
12.2.4.1.1. All content under the directory installed
12.2.4.2. addFile();
12.2.4.2.1. File specified installed
12.2.4.3. registerChrome();
12.2.4.3.1. registerChrome(Install.CONTENT | Install.DELAY_CHROME, getFolder(findDir, "content");
12.2.4.3.2. registerChrome(Install.SKIN | Install.DELAY_CHROME, getFolder(findDir, "skin");
12.2.4.3.3. registerChrome(Install.LOCALE | Install.DELAY_CHROME, getFolder(findDir, "locale");
12.2.4.3.4. DELAY_CHROME
12.2.5. Install Completion
12.2.5.1. performInstall();
12.2.5.1.1. take no arg.