Get Started. It's Free
or sign up with your email address
XUL by Mind Map: XUL

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. &lt

5.5.1.4.2. &gt

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.

12.3. 12.3 Additional INstall Features

13. Mozilla XUL Tutorial