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 <?xml-stylesheet href="chrome://global/skin/" type="text/css">

5.1.2. Changing the Styles For installed files, you'll have to create or modify a manifest file and install the skin. Our find Files Dialog Example The new xml-stylesheet line is used to import the style sheet findfile.css

5.1.3. Importing Style Sheets Style import from XUL <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> Style import from CSS @import url(chrome://global/skin); All elements can be styled using CSS

5.2. 9.2 Styling a Tree

5.2.1. Styling the Tree Style added to the 'tree' element will apply to the entire tree Adding a style to the 'treecol' element does not cause the style to be applied to the column but only to the header body of the tree outer 'treechildren' The inner elements are just placeholders

5.2.2. Setting Properties use the 'properties' attribute on the rows or cells to set one or more named properties Can be used with static content e.g. <treerow properties="makeItBlue">

5.2.3. CSS Selectors for the Tree syntax <treechildren::-moz-tree-row(makeItBlue) { background-color: blue; } values I can check for multiple properties

5.2.4. Default Properties checked this property is set cells whose column is type="checkbox" focus this property is set if the tree currently has the focus. selected this property is set for rows or cells that are currently selected. current this property is set if the keyboard cursor is at the row. Only one row will have this property set at a time. hover this property is set if the mouse cursor is on the row. Only one row will have this property set at a time. container this property is set for rows or cells that have child rows. leaf this property is set for rows or cells that do not have child rows. open this property is set for rows or cells which are expanded. closed this property is set for rows or cells which are collapsed. primary this property is set for cells in the primary column. sorted this property is set for cells in the current sorted column. even this property is set for even numbered rows. odd 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. dragSession this property is set if something is currently being dragged. dropOn 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. dropBefore this property is set if the mouse pointer is hovering before the row currently being dragged over. dropAfter this property is set if the mouse pointer is hovering after the row currently being dragged over. progressNormal this property is set for progress meter cells. progressUndetermined this property is set for undeterminate progress meter cells. progressNon this property is set for non-progress meter cells. 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 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 set properties By supplying the functions Example 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 skin set of style sheets images behaviors that are applied to a XUL file I can change the look of a window without changing its functionality Firefox provides a skin by default I may download others The XUL for any skins is the same The style sheets and images used are different Described in CSS define The file classic.jar contains the skin definitions. The global direcotyr within this archive contains the main style definitions for how to display the various XUL elements. By changing these files, you can change the look of the XUL applications

5.3.2. Customize with userChrome.css If I place 'userChrome.css' in a directory called 'chrome' inside my user profile directory I can override setting without changing the archives themselves. The file 'userContent.css" customizes Web pages customizes chrome files E.g. menubar {background-color:red;}

5.3.3. Skin Packages Effect only one window Example Add a red border around the meuu commands in the bookmarks manager window 'list-style-image' property Can assign images to a button, checkbox and other elements

5.4. 9.4 Creating a Skin

5.4.1. A Simple Skin Creating a Custom Skin Package Adding Style Rules Example Code Rounding on the Tabs special Mozilla style rule The last rule only applies to tabs that have their 'selected' attribute set to true Adding Toolbar Icons It is somewhat difficult to distinguish the buttons on the toolbar from the commands on the menu. Mozilla Composer provides some icons for open and save buttons, which we'll just use here to save time. We can set the image for a button using the 'list-style-image' CSS property Other Changes code 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 Table of strings is created for each language Instead of hard-coding text directly into an application, each piece of text is only a reference into the string table SML provides entities which can be used for a similar purpose codes &lt &gt XML has a syntax which allow you to declare custom entities. I can use these so that the entity is replaced with its value, which can be a string of text Entities may be used whenever text occurs, including the values of attributes. Example

5.5.2. DTD Files Entities are declared in Document Type Definition (DTD) files Declare the syntax and semantics of a particular XML file but they also let you declare entities In the Mozilla chrome system find DTD files located in the 'locale' subdirectory non-installed chrome files Note Normally one DTD file per XUL file use in XUL add line add the locale to the chrome.manifest file, locale findfile en-US locale/

5.5.3. Declaring Entities syntax <!ENTITY findLabel "Find"> for Japanese <!ENTITY findLabel "検索"> Use entities for values that could be different in a different language

5.5.4. Changing the Find Files example xul code Each text string has been replaced by and entity reference. A DTD file has been included near the beginning of the XUL file Each entity that was added should be declared in the DTD file more note findfile.dtd

5.6. 9.6 Property Files

5.6.1. Properties Like DTD For message to be displayed from script

5.6.2. Stringbundles <stringbundleset id ="strbundles"> <stringbundle id="strings" src=""/> </stringbundleset> Getting a String from the Bundle 'getString' properties Text Formatting '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 As in HTML function

6.1.2. Specifying the Width and Height Example specified width and height <window width='400' height ='450' xmlns="">

6.1.3. Other Window Features Can use any of the pre-existing flags find in a Javascript reference May disable a feature by setting it to 'no' alwaysLowered The window will always appear behind other windows alwaysRaised The window will always appear above other windows centerscreen The window will be centered on the screen when opened. dependent 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. dialog The window is a dialog box, which may appear differently. modal The dialog is modal. The window that opened the modal window can't be interacted with until the modal window is closed. resizable The user can resize the window

6.1.4. See also DOM reference

6.2. 11.2 Creating Dialogs

6.2.1. Creating a Dialog openDialog() function is used to open a dialog related to open() displays a dialog instead of a window take additional arguments beyond the first three Example Pass Values back 'window.opener' property

6.2.2. The Dialog Element Example <dialog id="example" title="Dialog example" xmlns="" buttons ="accept, cancel" ondialogaccept="doOK()" ondialogcancel="return do Cancel();"> <script> function doOK() {alert("You pressed OK!"); return true; } function doCancel() { alert("You pressed Cancel!"); return true;} </script> <description value="Select a button"/> </dialog> The button attributes accept - an OK button cancel - a Cancel button help - a Help button disclosure - a disclosure button, which is used for showing more information values separated by commas Can set code to execute when the buttons are pressed Other useful attributes buttonlabelaccept buttonaccesskeyaccept defaultButton The buttons elements can be accessed with the following javascript

6.3. 11.3 Open and Save Dialogs

6.3.1. File pickers Is a dialog that allows the user to select a file Most commonly used for the Open and Save menu commands XPCOM interface 'nsIFilePicker' used to implement a file picker Note: file picker only works from chrome URLs THREE Modes 1. Open 2. Get Folder 3. Save Creating a file picker Need to create a file picker component and initialize it var nsIFilePicker =Components.interfaces.nsIFilePicker; var fp = Components.classes[";1"].createInstance(nsIFilePicker); fp.init(window, "Select a File", nsIFilePicker.modeOpen); Default directory and filters Two features you can set before displayed Getting the selected file show the dialog

6.4. 11.4 Creating a Wizard

6.4.1. The Wizard A wizard is a special type of dialog that contains a number of pages Buttons appear at bottom Each page contains a single question or a set of related questions After the last page, the operation is carried out. Often used to help the user perform a complex task 'wizard' element The pages of the wizard are created using the 'wizardpage' element. Note: wizards currently only work properly from chrome URLs. The 'description' attribute Attribute 'onwizardfinish'

6.4.2. Handling Page Changes wizard.onwizardfinish attribute Set it to a script wizardpage Attributes onpagerewound onpageadvanced You can use different code for each page. onpagehide onpageshow pageadvanced

6.5. 11.5 More Wizards

6.5.1. More Complex Wizard Navigation 'next' attribute wizard's goto() method

6.5.2. Wizard Functions wizard works like tabbed panel Property canAdvance canRewind currentPage

6.6. 11.6 Overlays

6.6.1. Using Overlays In simple application With only one window More sophisticated applicatons Contain many Common between each window When a window with an overlay is opened, the elements in both the window and the overlay with the same ids are combined together. The children of matching elements are added to the end of the set of children in the window's element. Attribute that are present on the overlay's elements will be applied to the window's elements. find files example import overlay syntax Simple help menu stored in an overlay Source need to include the DTD file Code use the overlay DTD file putting the attributes on the help menu in the overlay

6.6.2. Duplicate content window's content used overlay's content appended Example

6.6.3. Placing Overlaid Elements Allows you to overlay menus, toolbars and other widgets at the exact location wished. attribute 'insertbefore' 'insertafter' position

6.6.4. Removing elements 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 Note: This section talks about contents.rdf which ahs been replaced in Gecko 1.8 by Manifest Files Have the oerlays specify which windows that they apply to Example Add 'menu items' or 'toolbars' to Mozilla brower window. The Mozilla Mail application find files example 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 get data from outside datasources store resources such as bookmarks the history mail messages Mozilla provideds datasource for the above common data Use populate trees populate other XUL elements RDF specification

10.1.2. RDF/XML consist of a model graph representation of data XML Language used to represent RDF data. some similarities to the XUL header Instead of the 'window' element

10.1.3. RDF database Mozilla bookmarks example list may be hierarchical Each of the fields in an RDF database is a resource

10.1.4. RDF/XML file example three records described one for each animal Each RDF:Description tag The 'Seq' and 'li' elements specify that the records are in a list. The 'Seq' element URI generated from the example Name Species Class

10.2. 8.2 Templates

10.2.1. Populating elements Create Elements From data supplied by RDF Mozilla provided datasources Treeitems and Menuitems Usually populated with data. Obviously can use other elements Allow creation of elements based on RDF data Need to provide a simple template Simple Template Example Create a button for each top-level bookmark. Visual 'template' contains a single 'button' Container and Datasources Vertical Box Inside the Template The elements inside the template attribute More Examples This creates a vertical box with a button and a label for each bookmark. The button will have the name of the bookmark and the label will have the URL. 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. Code Example 3

10.2.2. How Templates are Built element that has a 'datasource' attribute Indicates the element is expected to be built from a template. Object 'Builder' Two different types of builders 1. Content Builder 2. Tree Builder

10.2.3. Rules 'rule' element Define a rule for each variation of elements Example By using two rules, we have allowed the contents of the template to be selectively generated. first 'rule' second 'rule' To get an attribute from the RDF namespace (rdf:type) Summary text

10.3. 8.3 Trees and Templates

10.3.1. Adding Datasources to Trees 'datasources' and 'ref' attribute to the 'tree' element. specify the datasource and root node to display Multiple rules can be used to indicate different content for different types of data. e.g. <tree datasource="rdf:history" ref="NC:HistoryByDate" flags="dont-build-content"> 'flags' attribute to the value dont-build-contend In the template will be one 'treecell' Template-built Tree Example The following example demonstrates a template-built tree, in this case for the file system. Image Explanation

10.3.2. Sorting Columns Tree which generate their data from a datasource have the optional ability to sort their data Sort Any Column This sorting feature is not available for trees with static content Although you can write a script to sort that data Set 'sortDirection' attribute value ascending descending natural 'sortActive' attribute Should be set to 'true' for one column style class 'sortDirectionIndicator' May use this on a column that can besorted. Cause a small triangle to appear on the column header that inidicates the direction of the sort. First attribute, 'sort' Set to an RDF property that is used as the sort key. Example

10.3.3. Persisting Column State persist which column is currently sorted Remembered between sessions Use attributes 'persist' Five attributes of Columns 1. 'width' 2. 'order' 3. 'visible' 4. which column is currently sorted 5. sort direction e.g. <treecol id="Date" label="Date" flex="1" class="sortDirectionIndicator" persist="width ordinal hidden sortAvtive sortDirection" sort="rdf:

10.3.4. Additional Rule Attributes Two additional attributes 1 iscontainer 2. isempty

10.4. 8.4 RDF Datasources

10.4.1. Other Mozilla Datasources Mozilla provides a number of other built-in datasources They work very similarly to the bookmarks, although the fields will be different in each case.

10.4.2. The History List rdf:history Date Name Page Referrer URL Visit Count Using the History List Example

10.4.3. Other Datasources Bookmarks(rdf:bookmarks) Files(rdf:files) 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 I can specified multiple datasources <tree datasources="rdf:bookmarks rdf:history animal.rdf" ref=NC:BookmarksRoot"> 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. rdf:null

10.4.5. Custom RDF Datasources Use my own RDF datasource storedin an RDF file local file remote file Just put the URL of the RDF file in the datasources attribute. Using RDF file Example Source RDF

10.5. 8.5 Advanced Rules

10.5.1. The Full Rule Syntax 'rule' tag child tags

10.5.2. Rule Conditions 'content' element It serves as a placeholder as the template builder iterates through the resources. 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. The root resource is the one specified by the ref attribute on the element containing the template. syntax 'member' element iterate through a set of child resources. RDF/XML fragment 'triple' element heck for the existence of a given triple (or assertion) in the RDF datasource like a property of a resource Add a weather prediction to the city datasource

10.5.3. Generating Content Complete Tree Example

10.5.4. Adding Additional Bindings 'bindings' element Final element you can add inside a 'rule' Example

10.6. 8.6 Persistent Data

10.6.1. Remembering State save state of a window across session E.g. The window should remember which toolbars are collapsed even after the user exits. localstore.rdf in the same directory as other user preferences. New nodeHolds state information about each window New nodeIt works with Mozilla user profiles, so that each user can have different settings. 'persistent' attribute add a 'persist' attribute

10.6.2. Our Find Files Example 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 Describes the behavior of a XUL widget e.g. a binding might be attached to a scroll bar XBL is an XML language The 'binding's element is the root element of an XBL

11.1.4. Binding Example This example creates a window with a single box. The box has been declared to have a class of okcancelbuttons. The box has been declared to have a class of okcancelbuttons.

11.2. 10.2 Anonymous Content

11.2.1. XBL Content Declaring Scrollbar Example Contains a single binding 'content' tag Filename Input Field Example

11.2.2. Override the Bound Element e.g. <scrollbar/> <scrollbar><button label="Overridden"/></scrollbar>

11.2.3. Using the Children Element When I want both the XBL content and the content provided by the XUL file to be displayed.' Added in place of the 'children' element. Handy when creating custom menu widgets. Example 'include' Attribute I wish to only include specific types of content Allow only certain elements to appear in the content. Its value should be set to a single tag name, or to a list of tags separated by vertical bars <children includes="button"/> Example Multiple Children Elements I can use multiple 'children' elements and have certain elements be placed in one location and other elements placed in another. By adding a 'include' attribute and setting it to a vertical bar-separted list of tags. Example

11.3. 10.3 XBL Attribute Inheritance

11.3.1. Attributes can be inherited

11.3.2. Inherited Attributes XBL allow us to build composite widgets while hiding their actual implementation. Add attributes to the bound elements that modify the inner elements. Example

11.4. 10.4 Adding Properties

11.4.1. The XBL Interface I can define my own properties for the elements I created. I can also add methods that can be called. Three types of items I can add Field are used to hold a simple value 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. Methods are functions which may be executed. 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. General syntax

11.4.2. Fields code A 'number' field has been defined in the binding, which stores the random number. The two extra buttons set and get the value of this field. The syntax is very similar to getting and setting the properties of HTML elemetns. In this example, no content has been placed inside either the XUL box or its definition in XBL, which is perfectly valid. Should assigned a default value

11.4.3. Properties Onget Attribute and Onset Attribute I can use the 'onget' and 'onset' attributes to have code execute when teh property is retrieved or modified. Each to the 'property' element and set its value to a script which either gets or sets the value of the property. example

11.4.4. Getter Element and Setter Element code The property in this example will only be able to hold integer values.

11.4.5. Readonly Attribute adding a 'readonly' attribute To the 'field' tag or 'property' tag and setting it to true Attmpting to set the value of a read-only property will fail

11.5. 10.5 Adding Methods

11.5.1. Methods example code A method declaration goes inside the implementation element, like the fields and properties do. Two type of child elements

11.5.2. Accessing the Anonymous Content 'getAnonymousNodes' method var value=document.getAnonymousNodes(element); Example code

11.5.3. Accessing from Inside the Anonymous Content 'getBindingParent' method 'parentNote' property go up by a single node. 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. Code

11.5.4. Constructors and Destructors Example Code

11.6. 10.6 Adding Event Handlers

11.6.1. Event Handlers I can trap the events and handle them in a special way I can add event handlers to the elements inside the content if needed. e.g. 'oncommand' handlers added to some button Handler Element Can add event handler to the entire contents Describe the action taken for a single event handler. I can use more than one handler if necessary. If an event does not match any of the 'handler' events, it is simply passed to the inner contnet as usual General handler syntax Handling Mouse Events Example Handling Key Events Example The modifier keys can be checked by adding a 'modifiers' attribute. syntax when the code in a handler is more complex

11.6.2. Handlers Example The content is a single textbox A field 'clipboard' has been added to it to store the clipboard contents. This does mean that the clipboard operations are limited to this single textbox. However, each one will have its own buffer. Three handlers added 1. Cut 2. Copy 3. Paste

11.7. 10.7 XBL Inheritance

11.7.1. Inheritance add 'extends' attribute to the 'binding' tag. Example Source

11.7.2. Autocompleting TextBoxes Adds extra event handling so that when a URL is typed, a menu pop up with possible completions. I can use it in my own application too. Just create a textbox with two extra attribute

11.8. 10.8 XBL Example

11.8.1. A Slideshow Element Content of the Slideshow Example Source XUL file Style Sheet used here page Property setPage method Constructor Additional Features The Final Code

12. 12. Installation

12.1. 12.1 Creating an Installer

12.1.1. XPInstall Packages XPInstall (a). XUL Windows (b). Scripts (c). Other Files Packaged into JAR files Single File Installer Simple Install Script (a) Download Package (b) Install (c) Mechanism

12.1.2. Install Triggers Global Object InstallTrigger function InstallTrigger.install()

12.1.3. XPI Archives must contain install.js xpi install.js JARS special zip file can use zip utility to view and add file

12.2. 12.2 Install Scripts

12.2.1. Creating an install script note: for FireFox Extension, install.js is replaced by install.rdf 1. specified what package and version is been installed 2. Use the install function to install the files and directories. Or remove files or directory e.g. uninstall portion of the program Indicated Only Allow process to be aborted if encounter error 3. Start the process of installing the necessary

12.2.2. The Component Registry Store Infomration about application File List Versions Other relevant info Hierarchy of keys and values Key

12.2.3. Install Initialization Install Object has a function initInstall() Set the directory files are installed (a) Simple (b) Advance New node

12.2.4. Setting Install Files addDirectory(); All content under the directory installed addFile(); File specified installed registerChrome(); registerChrome(Install.CONTENT | Install.DELAY_CHROME, getFolder(findDir, "content"); registerChrome(Install.SKIN | Install.DELAY_CHROME, getFolder(findDir, "skin"); registerChrome(Install.LOCALE | Install.DELAY_CHROME, getFolder(findDir, "locale"); DELAY_CHROME

12.2.5. Install Completion performInstall(); take no arg.

12.3. 12.3 Additional INstall Features

13. Mozilla XUL Tutorial