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. 5. Events and Scripts
3.1. 5.1 Adding Event Handlers
3.2. 5.2 More Event Handlers
3.3. 5.3 Keyboard Shortcuts
3.4. 5.4 Focus and Selection
3.5. 5.5 Commands
3.6. 5.6 Updating Commands
3.7. 5.7 Broadcasters and Observers
4. 7. Trees
4.1. 7.1 Trees
4.2. 7.2 More Tree Features
4.3. 7.3 Custom Tree Views
4.4. 7.4 Tree View Details
4.5. 7.5 Tree Box Objects
5. 9. Skins and Locales
5.1. 9.1 Adding Style Sheets
5.1.1. Style Sheets
5.1.1.1. <?xml-stylesheet href="chrome://global/skin/" type="text/css">
5.1.2. Changing the Styles
5.1.2.1. For installed files, you'll have to create or modify a manifest file and install the skin.
5.1.2.2. Our find Files Dialog Example
5.1.2.2.1. The new xml-stylesheet line is used to import the style sheet
5.1.2.2.2. findfile.css
5.1.3. Importing Style Sheets
5.1.3.1. Style import from XUL
5.1.3.1.1. <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
5.1.3.2. Style import from CSS
5.1.3.2.1. @import url(chrome://global/skin);
5.1.3.2.2. All elements can be styled using CSS
5.2. 9.2 Styling a Tree
5.2.1. Styling the Tree
5.2.1.1. Style added to the 'tree' element will apply to the entire tree
5.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
5.2.1.3. body of the tree
5.2.1.3.1. outer 'treechildren'
5.2.1.3.2. The inner elements are just placeholders
5.2.2. Setting Properties
5.2.2.1. use the 'properties' attribute
5.2.2.1.1. on the rows or cells to set one or more named properties
5.2.2.1.2. Can be used with static content
5.2.2.1.3. e.g. <treerow properties="makeItBlue">
5.2.3. CSS Selectors for the Tree
5.2.3.1. syntax
5.2.3.1.1. <treechildren::-moz-tree-row(makeItBlue) { background-color: blue; }
5.2.3.1.2. values
5.2.3.1.3. I can check for multiple properties
5.2.4. Default Properties
5.2.4.1. checked
5.2.4.1.1. this property is set cells whose column is type="checkbox"
5.2.4.2. focus
5.2.4.2.1. this property is set if the tree currently has the focus.
5.2.4.3. selected
5.2.4.3.1. this property is set for rows or cells that are currently selected.
5.2.4.4. current
5.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.
5.2.4.5. hover
5.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.
5.2.4.6. container
5.2.4.6.1. this property is set for rows or cells that have child rows.
5.2.4.7. leaf
5.2.4.7.1. this property is set for rows or cells that do not have child rows.
5.2.4.8. open
5.2.4.8.1. this property is set for rows or cells which are expanded.
5.2.4.9. closed
5.2.4.9.1. this property is set for rows or cells which are collapsed.
5.2.4.10. primary
5.2.4.10.1. this property is set for cells in the primary column.
5.2.4.11. sorted
5.2.4.11.1. this property is set for cells in the current sorted column.
5.2.4.12. even
5.2.4.12.1. this property is set for even numbered rows.
5.2.4.13. odd
5.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.
5.2.4.14. dragSession
5.2.4.14.1. this property is set if something is currently being dragged.
5.2.4.15. dropOn
5.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.
5.2.4.16. dropBefore
5.2.4.16.1. this property is set if the mouse pointer is hovering before the row currently being dragged over.
5.2.4.17. dropAfter
5.2.4.17.1. this property is set if the mouse pointer is hovering after the row currently being dragged over.
5.2.4.18. progressNormal
5.2.4.18.1. this property is set for progress meter cells.
5.2.4.19. progressUndetermined
5.2.4.19.1. this property is set for undeterminate progress meter cells.
5.2.4.20. progressNon
5.2.4.20.1. this property is set for non-progress meter cells.
5.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.
5.2.5. Setting Properties for the RDF-built Trees
5.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.
5.2.6. Setting Properties for the Custom View
5.2.6.1. set properties
5.2.6.1.1. By supplying the functions
5.2.6.2. Example
5.2.6.2.1. Make every fourth row have blue text
5.2.7. Example style sheet
5.3. 9.3 Modifying the Default Skin
5.3.1. Skin Basics
5.3.1.1. skin
5.3.1.1.1. set of style sheets
5.3.1.1.2. images
5.3.1.1.3. behaviors that are applied to a XUL file
5.3.1.2. I can change the look of a window without changing its functionality
5.3.1.3. Firefox provides a skin by default
5.3.1.3.1. I may download others
5.3.1.4. The XUL for any skins is the same
5.3.1.4.1. The style sheets and images used are different
5.3.1.5. Described in CSS
5.3.1.5.1. define
5.3.1.6. The file classic.jar
5.3.1.6.1. contains the skin definitions.
5.3.1.6.2. The global direcotyr within this archive contains the main style definitions for how to display the various XUL elements.
5.3.1.6.3. By changing these files, you can change the look of the XUL applications
5.3.2. Customize with userChrome.css
5.3.2.1. If I place 'userChrome.css' in a directory called 'chrome' inside my user profile directory
5.3.2.1.1. I can override setting without changing the archives themselves.
5.3.2.2. The file 'userContent.css"
5.3.2.2.1. customizes Web pages
5.3.2.3. customizes chrome files
5.3.2.4. E.g.
5.3.2.4.1. menubar {background-color:red;}
5.3.3. Skin Packages
5.3.3.1. Effect only one window
5.3.3.2. Example
5.3.3.2.1. Add a red border around the meuu commands in the bookmarks manager window
5.3.3.3. 'list-style-image' property
5.3.3.3.1. Can assign images to a button, checkbox and other elements
5.4. 9.4 Creating a Skin
5.4.1. A Simple Skin
5.4.1.1. Creating a Custom Skin Package
5.4.1.2. Adding Style Rules
5.4.1.2.1. Example Code
5.4.1.3. Rounding on the Tabs
5.4.1.3.1. special Mozilla style rule
5.4.1.3.2. The last rule only applies to tabs that have their 'selected' attribute set to true
5.4.1.4. Adding Toolbar Icons
5.4.1.4.1. It is somewhat difficult to distinguish the buttons on the toolbar from the commands on the menu.
5.4.1.4.2. Mozilla Composer provides some icons for open and save buttons, which we'll just use here to save time.
5.4.1.4.3. We can set the image for a button using the 'list-style-image' CSS property
5.4.1.5. Other Changes
5.4.1.5.1. code
5.4.1.5.2. minor changes to the spacing around the items, by setting margins.
5.4.2. Creating a Global Skin
5.5. 9.5 Localization
5.5.1. Entities
5.5.1.1. Table of strings is created for each language
5.5.1.2. Instead of hard-coding text directly into an application, each piece of text is only a reference into the string table
5.5.1.3. SML provides entities which can be used for a similar purpose
5.5.1.4. codes
5.5.1.4.1. <
5.5.1.4.2. >
5.5.1.5. XML has a syntax which allow you to declare custom entities.
5.5.1.5.1. I can use these so that the entity is replaced with its value, which can be a string of text
5.5.1.5.2. Entities may be used whenever text occurs, including the values of attributes.
5.5.1.5.3. Example
5.5.2. DTD Files
5.5.2.1. Entities are declared in Document Type Definition (DTD) files
5.5.2.2. Declare the syntax and semantics of a particular XML file
5.5.2.2.1. but they also let you declare entities
5.5.2.3. In the Mozilla chrome system
5.5.2.3.1. find DTD files located in the 'locale' subdirectory
5.5.2.3.2. non-installed chrome files
5.5.2.3.3. Note
5.5.2.4. Normally one DTD file per XUL file
5.5.2.5. use in XUL
5.5.2.5.1. add line
5.5.2.6. add the locale to the chrome.manifest file,
5.5.2.6.1. locale findfile en-US locale/
5.5.3. Declaring Entities
5.5.3.1. syntax
5.5.3.1.1. <!ENTITY findLabel "Find">
5.5.3.2. for Japanese
5.5.3.2.1. <!ENTITY findLabel "検索">
5.5.3.3. Use entities for values
5.5.3.3.1. that could be different in a different language
5.5.4. Changing the Find Files example
5.5.4.1. xul code
5.5.4.1.1. Each text string has been replaced by and entity reference.
5.5.4.1.2. A DTD file has been included near the beginning of the XUL file
5.5.4.1.3. Each entity that was added should be declared in the DTD file
5.5.4.1.4. more note
5.5.4.2. findfile.dtd
5.6. 9.6 Property Files
5.6.1. Properties
5.6.1.1. Like DTD
5.6.1.2. For message to be displayed from script
5.6.2. Stringbundles
5.6.2.1. <stringbundleset id ="strbundles">
5.6.2.2. <stringbundle id="strings" src="strings.properties"/>
5.6.2.3. </stringbundleset>
5.6.2.4. Getting a String from the Bundle
5.6.2.4.1. 'getString' properties
5.6.2.5. Text Formatting
5.6.2.5.1. 'getFormattedString()' method
5.6.3. Escape non-ASCII Charaters
6. 11. Specialized Window Types
6.1. 11.1 Features of a Window
6.1.1. Creating Another Window
6.1.1.1. As in HTML
6.1.1.1.1. window.open() function
6.1.2. Specifying the Width and Height
6.1.2.1. Example specified width and height
6.1.2.1.1. <window width='400' height ='450' xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
6.1.3. Other Window Features
6.1.3.1. Can use any of the pre-existing flags
6.1.3.1.1. find in a Javascript reference
6.1.3.1.2. May disable a feature by setting it to 'no'
6.1.3.2. alwaysLowered
6.1.3.2.1. The window will always appear behind other windows
6.1.3.3. alwaysRaised
6.1.3.3.1. The window will always appear above other windows
6.1.3.4. centerscreen
6.1.3.4.1. The window will be centered on the screen when opened.
6.1.3.5. dependent
6.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.
6.1.3.6. dialog
6.1.3.6.1. The window is a dialog box, which may appear differently.
6.1.3.7. modal
6.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.
6.1.3.8. resizable
6.1.3.8.1. The user can resize the window
6.1.4. See also DOM window.open() reference
6.2. 11.2 Creating Dialogs
6.2.1. Creating a Dialog
6.2.1.1. openDialog() function is used to open a dialog
6.2.1.1.1. related to open()
6.2.1.1.2. displays a dialog instead of a window
6.2.1.1.3. take additional arguments beyond the first three
6.2.1.1.4. Example
6.2.1.2. Pass Values back
6.2.1.2.1. 'window.opener' property
6.2.2. The Dialog Element
6.2.2.1. Example
6.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();">
6.2.2.1.2. <script> function doOK() {alert("You pressed OK!"); return true; }
6.2.2.1.3. function doCancel() { alert("You pressed Cancel!"); return true;} </script>
6.2.2.1.4. <description value="Select a button"/>
6.2.2.1.5. </dialog>
6.2.2.2. The button attributes
6.2.2.2.1. accept - an OK button
6.2.2.2.2. cancel - a Cancel button
6.2.2.2.3. help - a Help button
6.2.2.2.4. disclosure - a disclosure button, which is used for showing more information
6.2.2.2.5. values separated by commas
6.2.2.2.6. Can set code to execute when the buttons are pressed
6.2.2.3. Other useful attributes
6.2.2.3.1. buttonlabelaccept
6.2.2.3.2. buttonaccesskeyaccept
6.2.2.3.3. defaultButton
6.2.2.4. The buttons elements
6.2.2.4.1. can be accessed with the following javascript
6.3. 11.3 Open and Save Dialogs
6.3.1. File pickers
6.3.1.1. Is a dialog that allows the user to select a file
6.3.1.2. Most commonly used for the Open and Save menu commands
6.3.1.3. XPCOM interface 'nsIFilePicker'
6.3.1.3.1. used to implement a file picker
6.3.1.4. Note: file picker only works from chrome URLs
6.3.1.5. THREE Modes
6.3.1.5.1. 1. Open
6.3.1.5.2. 2. Get Folder
6.3.1.5.3. 3. Save
6.3.1.6. Creating a file picker
6.3.1.6.1. Need to create a file picker component and initialize it
6.3.1.6.2. var nsIFilePicker =Components.interfaces.nsIFilePicker;
6.3.1.6.3. var fp = Components.classes["@mozilla.org/filepicker;1"].createInstance(nsIFilePicker);
6.3.1.6.4. fp.init(window, "Select a File", nsIFilePicker.modeOpen);
6.3.1.7. Default directory and filters
6.3.1.7.1. Two features you can set before displayed
6.3.1.8. Getting the selected file
6.3.1.8.1. show the dialog
6.4. 11.4 Creating a Wizard
6.4.1. The Wizard
6.4.1.1. A wizard is a special type of dialog that contains a number of pages
6.4.1.1.1. Buttons appear at bottom
6.4.1.1.2. Each page contains a single question or a set of related questions
6.4.1.1.3. After the last page, the operation is carried out.
6.4.1.2. Often used to help the user perform a complex task
6.4.1.3. 'wizard' element
6.4.1.3.1. The pages of the wizard are created using the 'wizardpage' element.
6.4.1.3.2. Note: wizards currently only work properly from chrome URLs.
6.4.1.3.3. The 'description' attribute
6.4.1.3.4. Attribute 'onwizardfinish'
6.4.2. Handling Page Changes
6.4.2.1. wizard.onwizardfinish attribute
6.4.2.1.1. Set it to a script
6.4.2.2. wizardpage Attributes
6.4.2.2.1. onpagerewound
6.4.2.2.2. onpageadvanced
6.4.2.2.3. You can use different code for each page.
6.4.2.2.4. onpagehide
6.4.2.2.5. onpageshow
6.4.2.2.6. pageadvanced
6.5. 11.5 More Wizards
6.5.1. More Complex Wizard Navigation
6.5.1.1. 'next' attribute
6.5.1.1.1. wizard's goto() method
6.5.2. Wizard Functions
6.5.2.1. wizard works like
6.5.2.1.1. tabbed panel
6.5.2.2. Property
6.5.2.2.1. canAdvance
6.5.2.2.2. canRewind
6.5.2.2.3. currentPage
6.6. 11.6 Overlays
6.6.1. Using Overlays
6.6.1.1. In simple application
6.6.1.1.1. With only one window
6.6.1.2. More sophisticated applicatons
6.6.1.2.1. Contain many
6.6.1.2.2. Common between each window
6.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.
6.6.1.3.1. The children of matching elements are added to the end of the set of children in the window's element.
6.6.1.3.2. Attribute that are present on the overlay's elements will be applied to the window's elements.
6.6.1.4. find files example
6.6.1.4.1. import overlay syntax
6.6.1.5. Simple help menu stored in an overlay
6.6.1.5.1. Source
6.6.1.5.2. need to include the DTD file
6.6.1.5.3. Code use the overlay
6.6.1.5.4. DTD file
6.6.1.5.5. putting the attributes on the help menu in the overlay
6.6.2. Duplicate content
6.6.2.1. window's content used
6.6.2.2. overlay's content appended
6.6.2.3. Example
6.6.3. Placing Overlaid Elements
6.6.3.1. Allows you to overlay menus, toolbars and other widgets at the exact location wished.
6.6.3.2. attribute
6.6.3.2.1. 'insertbefore'
6.6.3.2.2. 'insertafter'
6.6.3.2.3. position
6.6.4. Removing elements
6.6.4.1. Example
6.6.5. Can be used to separate common content
6.7. 11.7 Cross Package Overlays
6.7.1. Applying Overlays to other Packages
6.7.1.1. Note: This section talks about contents.rdf which ahs been replaced in Gecko 1.8 by Manifest Files
6.7.1.2. Have the oerlays specify which windows that they apply to
6.7.1.3. Example
6.7.1.3.1. Add 'menu items' or 'toolbars' to Mozilla brower window.
6.7.1.3.2. The Mozilla Mail application
6.7.1.3.3. find files example
6.7.1.3.4. Mozilla Example Detailed
6.7.2. Apply overlays to files that don't import them.
7. 3. More Layout Elements
7.1. 3.1 Stacks and Decks
7.2. 3.2 Stack Positioning
7.3. 3.3 Tabboxes
7.4. 3.4 Grids
7.5. 3.5 Content Panels
7.6. 3.6 Splitters
8. 4. Toolbars and Menus
8.1. 4.1 Toolbars
8.2. 4.2 Simple Menu Bars
8.3. 4.3 More Menu Features
8.4. 4.4 Popup Menus
8.5. 4.5 Scrolling Menus
9. 6. Document Object Model
9.1. 6.1 Document Object Model
9.2. 6.2 Modifying a XUL Interface
9.3. 6.3 Manipulating Lists
9.4. 6.4 Box Objects
9.5. 6.5 XPCOM Interfaces
9.6. 6.6 XPCOM Examples
10. 8. RDF and Templates
10.1. 8.1 Introduction to RDF
10.1.1. Resource Description Framework
10.1.1.1. get data from outside datasources
10.1.1.2. store resources such as
10.1.1.2.1. bookmarks
10.1.1.2.2. the history
10.1.1.2.3. mail messages
10.1.1.2.4. Mozilla provideds datasource for the above common data
10.1.1.3. Use
10.1.1.3.1. populate trees
10.1.1.3.2. populate other XUL elements
10.1.1.4. RDF specification
10.1.2. RDF/XML
10.1.2.1. consist of a model
10.1.2.1.1. graph representation of data
10.1.2.2. XML Language
10.1.2.2.1. used to represent RDF data.
10.1.2.3. some similarities to the XUL header
10.1.2.3.1. Instead of the 'window' element
10.1.3. RDF database
10.1.3.1. Mozilla bookmarks example
10.1.3.1.1. list may be hierarchical
10.1.3.1.2. Each of the fields in an RDF database is a resource
10.1.4. RDF/XML file example
10.1.4.1. three records described
10.1.4.1.1. one for each animal
10.1.4.1.2. Each RDF:Description tag
10.1.4.2. The 'Seq' and 'li' elements
10.1.4.2.1. specify that the records are in a list.
10.1.4.2.2. The 'Seq' element
10.1.4.3. URI generated from the example
10.1.4.3.1. Name
10.1.4.3.2. Species
10.1.4.3.3. Class
10.2. 8.2 Templates
10.2.1. Populating elements
10.2.1.1. Create Elements
10.2.1.1.1. From data supplied by RDF
10.2.1.1.2. Mozilla provided datasources
10.2.1.2. Treeitems and Menuitems
10.2.1.2.1. Usually populated with data.
10.2.1.2.2. Obviously can use other elements
10.2.1.3. Allow creation of elements based on RDF data
10.2.1.3.1. Need to provide a simple template
10.2.1.4. Simple Template Example
10.2.1.4.1. Create a button for each top-level bookmark.
10.2.1.4.2. Visual
10.2.1.4.3. 'template' contains a single 'button'
10.2.1.5. Container and Datasources
10.2.1.5.1. Vertical Box
10.2.1.6. Inside the Template
10.2.1.6.1. The elements inside the template
10.2.1.6.2. attribute
10.2.1.7. More Examples
10.2.1.7.1. This creates a vertical box with a button and a label for each bookmark.
10.2.1.7.2. The button will have the name of the bookmark and the label will have the URL.
10.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.
10.2.1.7.4. Code
10.2.1.7.5. Example 3
10.2.2. How Templates are Built
10.2.2.1. element that has a 'datasource' attribute
10.2.2.1.1. Indicates the element is expected to be built from a template.
10.2.2.1.2. Object 'Builder'
10.2.2.2. Two different types of builders
10.2.2.2.1. 1. Content Builder
10.2.2.2.2. 2. Tree Builder
10.2.3. Rules
10.2.3.1. 'rule' element
10.2.3.1.1. Define a rule for each variation of elements
10.2.3.2. Example
10.2.3.2.1. By using two rules, we have allowed the contents of the template to be selectively generated.
10.2.3.2.2. first 'rule'
10.2.3.2.3. second 'rule'
10.2.3.2.4. To get an attribute from the RDF namespace (rdf:type)
10.2.3.2.5. Summary text
10.3. 8.3 Trees and Templates
10.3.1. Adding Datasources to Trees
10.3.1.1. 'datasources' and 'ref' attribute to the 'tree' element.
10.3.1.1.1. specify the datasource and root node to display
10.3.1.1.2. Multiple rules can be used to indicate different content for different types of data.
10.3.1.1.3. e.g. <tree datasource="rdf:history" ref="NC:HistoryByDate" flags="dont-build-content">
10.3.1.1.4. 'flags' attribute to the value dont-build-contend
10.3.1.2. In the template
10.3.1.2.1. will be one 'treecell'
10.3.1.3. Template-built Tree Example
10.3.1.3.1. The following example demonstrates a template-built tree, in this case for the file system.
10.3.1.3.2. Image Explanation
10.3.2. Sorting Columns
10.3.2.1. Tree which generate their data from a datasource have the optional ability to sort their data
10.3.2.1.1. Sort
10.3.2.1.2. Any Column
10.3.2.2. This sorting feature is not available for trees with static content
10.3.2.2.1. Although you can write a script to sort that data
10.3.2.3. Set 'sortDirection' attribute value
10.3.2.3.1. ascending
10.3.2.3.2. descending
10.3.2.3.3. natural
10.3.2.4. 'sortActive' attribute
10.3.2.4.1. Should be set to 'true' for one column
10.3.2.5. style class 'sortDirectionIndicator'
10.3.2.5.1. May use this on a column that can besorted.
10.3.2.5.2. Cause a small triangle to appear on the column header that inidicates the direction of the sort.
10.3.2.6. First attribute, 'sort'
10.3.2.6.1. Set to an RDF property that is used as the sort key.
10.3.2.7. Example
10.3.3. Persisting Column State
10.3.3.1. persist which column is currently sorted
10.3.3.1.1. Remembered between sessions
10.3.3.2. Use attributes
10.3.3.2.1. 'persist'
10.3.3.3. Five attributes of Columns
10.3.3.3.1. 1. 'width'
10.3.3.3.2. 2. 'order'
10.3.3.3.3. 3. 'visible'
10.3.3.3.4. 4. which column is currently sorted
10.3.3.3.5. 5. sort direction
10.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
10.3.4. Additional Rule Attributes
10.3.4.1. Two additional attributes
10.3.4.1.1. 1 iscontainer
10.3.4.1.2. 2. isempty
10.4. 8.4 RDF Datasources
10.4.1. Other Mozilla Datasources
10.4.1.1. Mozilla provides a number of other built-in datasources
10.4.1.2. They work very similarly to the bookmarks, although the fields will be different in each case.
10.4.2. The History List
10.4.2.1. rdf:history
10.4.2.1.1. Date
10.4.2.1.2. Name
10.4.2.1.3. Page
10.4.2.1.4. Referrer
10.4.2.1.5. URL
10.4.2.1.6. Visit Count
10.4.2.2. Using the History List Example
10.4.3. Other Datasources
10.4.3.1. Bookmarks(rdf:bookmarks)
10.4.3.2. Files(rdf:files)
10.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.
10.4.4. Composite Datasources
10.4.4.1. I can specified multiple datasources
10.4.4.2. <tree datasources="rdf:bookmarks rdf:history animal.rdf" ref=NC:BookmarksRoot">
10.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.
10.4.4.3. rdf:null
10.4.5. Custom RDF Datasources
10.4.5.1. Use my own RDF datasource storedin an RDF file
10.4.5.1.1. local file
10.4.5.1.2. remote file
10.4.5.1.3. Just put the URL of the RDF file in the datasources attribute.
10.4.5.2. Using RDF file Example
10.4.5.2.1. Source
10.4.5.2.2. RDF
10.5. 8.5 Advanced Rules
10.5.1. The Full Rule Syntax
10.5.1.1. 'rule' tag
10.5.1.1.1. child tags
10.5.2. Rule Conditions
10.5.2.1. 'content' element
10.5.2.1.1. It serves as a placeholder as the template builder iterates through the resources.
10.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.
10.5.2.1.3. The root resource is the one specified by the ref attribute on the element containing the template.
10.5.2.1.4. syntax
10.5.2.2. 'member' element
10.5.2.2.1. iterate through a set of child resources.
10.5.2.2.2. RDF/XML fragment
10.5.2.3. 'triple' element
10.5.2.3.1. heck for the existence of a given triple (or assertion) in the RDF datasource
10.5.2.3.2. like a property of a resource
10.5.2.3.3. Add a weather prediction to the city datasource
10.5.3. Generating Content
10.5.3.1. Complete Tree Example
10.5.4. Adding Additional Bindings
10.5.4.1. 'bindings' element
10.5.4.1.1. Final element you can add inside a 'rule'
10.5.4.1.2. Example
10.6. 8.6 Persistent Data
10.6.1. Remembering State
10.6.1.1. save state of a window across session
10.6.1.1.1. E.g. The window should remember which toolbars are collapsed even after the user exits.
10.6.1.2. localstore.rdf
10.6.1.2.1. in the same directory as other user preferences.
10.6.1.2.2. New nodeHolds state information about each window
10.6.1.2.3. New nodeIt works with Mozilla user profiles, so that each user can have different settings.
10.6.1.3. 'persistent' attribute
10.6.1.3.1. add a 'persist' attribute
10.6.2. Our Find Files Example
10.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.
10.6.3. Save the state of a XUL window
11. 10. Bindings
11.1. 10.1 Introduction to XBL
11.1.1. XUL's sister language
11.1.2. eXtensible Bindings Language
11.1.3. Bindings
11.1.3.1. Describes the behavior of a XUL widget
11.1.3.1.1. e.g. a binding might be attached to a scroll bar
11.1.3.2. XBL is an XML language
11.1.3.2.1. The 'binding's element is the root element of an XBL
11.1.4. Binding Example
11.1.4.1. This example creates a window with a single box.
11.1.4.2. The box has been declared to have a class of okcancelbuttons.
11.1.4.3. The box has been declared to have a class of okcancelbuttons.
11.2. 10.2 Anonymous Content
11.2.1. XBL Content
11.2.1.1. Declaring Scrollbar Example
11.2.1.1.1. Contains a single binding
11.2.1.1.2. 'content' tag
11.2.1.2. Filename Input Field Example
11.2.2. Override the Bound Element
11.2.2.1. e.g. <scrollbar/> <scrollbar><button label="Overridden"/></scrollbar>
11.2.3. Using the Children Element
11.2.3.1. When I want both the XBL content and the content provided by the XUL file to be displayed.'
11.2.3.2. Added in place of the 'children' element.
11.2.3.3. Handy when creating custom menu widgets.
11.2.3.3.1. Example
11.2.3.4. 'include' Attribute
11.2.3.4.1. I wish to only include specific types of content
11.2.3.4.2. Allow only certain elements to appear in the content.
11.2.3.4.3. Its value should be set to a single tag name, or to a list of tags separated by vertical bars
11.2.3.4.4. <children includes="button"/>
11.2.3.4.5. Example
11.2.3.5. Multiple Children Elements
11.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.
11.2.3.5.2. By adding a 'include' attribute and setting it to a vertical bar-separted list of tags.
11.2.3.5.3. Example
11.3. 10.3 XBL Attribute Inheritance
11.3.1. Attributes can be inherited
11.3.2. Inherited Attributes
11.3.2.1. XBL allow us to build composite widgets while hiding their actual implementation.
11.3.2.2. Add attributes to the bound elements that modify the inner elements.
11.3.2.2.1. Example
11.4. 10.4 Adding Properties
11.4.1. The XBL Interface
11.4.1.1. I can define my own properties for the elements I created.
11.4.1.2. I can also add methods that can be called.
11.4.1.3. Three types of items I can add
11.4.1.3.1. Field are used to hold a simple value
11.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.
11.4.1.3.3. Methods are functions which may be executed.
11.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.
11.4.1.3.5. General syntax
11.4.2. Fields
11.4.2.1. code
11.4.2.1.1. A 'number' field has been defined in the binding, which stores the random number.
11.4.2.1.2. The two extra buttons set and get the value of this field.
11.4.2.1.3. The syntax is very similar to getting and setting the properties of HTML elemetns.
11.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.
11.4.2.1.5. Should assigned a default value
11.4.3. Properties
11.4.3.1. Onget Attribute and Onset Attribute
11.4.3.1.1. I can use the 'onget' and 'onset' attributes to have code execute when teh property is retrieved or modified.
11.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.
11.4.3.1.3. example
11.4.4. Getter Element and Setter Element
11.4.4.1. code
11.4.4.1.1. The property in this example will only be able to hold integer values.
11.4.5. Readonly Attribute
11.4.5.1. adding a 'readonly' attribute
11.4.5.1.1. To the 'field' tag or 'property' tag and setting it to true
11.4.5.1.2. Attmpting to set the value of a read-only property will fail
11.5. 10.5 Adding Methods
11.5.1. Methods
11.5.1.1. example code
11.5.1.1.1. A method declaration goes inside the implementation element, like the fields and properties do.
11.5.1.1.2. Two type of child elements
11.5.2. Accessing the Anonymous Content
11.5.2.1. 'getAnonymousNodes' method
11.5.2.1.1. var value=document.getAnonymousNodes(element);
11.5.2.1.2. Example code
11.5.3. Accessing from Inside the Anonymous Content
11.5.3.1. 'getBindingParent' method
11.5.3.2. 'parentNote' property
11.5.3.2.1. go up by a single node.
11.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.
11.5.3.3.1. Code
11.5.4. Constructors and Destructors
11.5.4.1. Example Code
11.6. 10.6 Adding Event Handlers
11.6.1. Event Handlers
11.6.1.1. I can trap the events and handle them in a special way
11.6.1.2. I can add event handlers to the elements inside the content if needed.
11.6.1.2.1. e.g. 'oncommand' handlers added to some button
11.6.1.3. Handler Element
11.6.1.3.1. Can add event handler to the entire contents
11.6.1.3.2. Describe the action taken for a single event handler.
11.6.1.3.3. I can use more than one handler if necessary.
11.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
11.6.1.3.5. General handler syntax
11.6.1.4. Handling Mouse Events
11.6.1.4.1. Example
11.6.1.5. Handling Key Events
11.6.1.5.1. Example
11.6.1.5.2. The modifier keys can be checked by adding a 'modifiers' attribute.
11.6.1.5.3. syntax when the code in a handler is more complex
11.6.2. Handlers Example
11.6.2.1. The content is a single textbox
11.6.2.2. A field 'clipboard' has been added to it to store the clipboard contents.
11.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.
11.6.2.3. Three handlers added
11.6.2.3.1. 1. Cut
11.6.2.3.2. 2. Copy
11.6.2.3.3. 3. Paste
11.7. 10.7 XBL Inheritance
11.7.1. Inheritance
11.7.1.1. add 'extends' attribute to the 'binding' tag.
11.7.1.1.1. Example Source
11.7.2. Autocompleting TextBoxes
11.7.2.1. Adds extra event handling so that when a URL is typed, a menu pop up with possible completions.
11.7.2.2. I can use it in my own application too.
11.7.2.2.1. Just create a textbox with two extra attribute
11.8. 10.8 XBL Example
11.8.1. A Slideshow Element
11.8.1.1. Content of the Slideshow
11.8.1.1.1. Example Source
11.8.1.1.2. XUL file
11.8.1.1.3. Style Sheet used here
11.8.1.1.4. page Property
11.8.1.1.5. setPage method
11.8.1.1.6. Constructor
11.8.1.1.7. Additional Features
11.8.1.1.8. The Final Code
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.