Get Started. It's Free
or sign up with your email address
Rocket clouds
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. 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. &lt

9.5.1.4.2. &gt

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.

12.3. 12.3 Additional INstall Features

13. Mozilla XUL Tutorial