Shane: categorizing

2013-02-24T23:22:14Z

categorizing

Wiseman at 20:18, 18 November 2009

2009-11-18T20:18:50Z

Wiseman: Created page with '=XUL= XUL (XML User-interface Language) is a markup language that describes the user interface. It is at the heart of Mozilla based browsers. Through XUL, you can defined input c…'

2009-07-17T03:49:37Z

Created page with '=XUL= XUL (XML User-interface Language) is a markup language that describes the user interface. It is at the heart of Mozilla based browsers. Through XUL, you can defined input c…'

New page

=XUL=
XUL (XML User-interface Language) is a markup language that describes the user interface. It is at the heart of Mozilla based browsers. Through XUL, you can defined input controls, toolbars, menus, dialogs, keyboard shortcuts and many more. XUL could be used for Mozilla/Firefox extensions or stand-alone applications. In fact, Firefox's interface is written in XUL. If the security permissions are enabled, you can also use XUL to remotely modify the interface of the browser.

You can access a XUL file just using regular URL. An alternative is to package several related files to a chrome package. There are two ways to create chrome packages, a JAR file and a chrome directory. The jar file is basically a ZIP file with chrome directory structure. Alternatively, you can directly put the chrome directory inside your browser's profile directory. Either way, chrome packages usually have three type of data: ''content'' (main windows, scripts etc.), ''skin'' (theme related files such as images, css etc.),, ''locale'' (local language related files).

If you have installed a chrome packages, you can access its XUL files directly using Firefox specific protocol (chrome://). For example, since Firefox user-interface is written in XUL, you can access its xul files using chrome:// protocol.
The typical format is
chrome://<package name>/<part>/<file.xul>

For example,
chrome://browser/content/browser.xul

will show you the main Firefox user-interface.

== Hello World in XUL ==

The following code displays ''Hello World'' message on the browser:

<code>
<pre>
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window
id="helloworld-window"
title="Hello World"
orient="horizontal"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<label value="Hello World!!! "/>

</window>
</pre>
</code>

In this code, the first two lines specify that this is an XML file and it uses a stylesheet. Then XML file specifies a ''window'' element. This will be the main container. Its attributes contain an id and title as well as its orientation. Also there is a specifial attribute

xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

This is a special attribute that informs the browser all its children are XUL.

This windows only child is a ''label'' with the value ''Hello World!!!''.

Once you have the above XUL file, you can load it in your firefox and observe its behavior.

== XUL Packages ==

The new file are added to they system using chrome packages. Packages are basically list of XUL files and supplementary material. Once a package is installed, the files can be accessed using ''chrome://'' protocol. Firefox becomes aware of installed packages through ''[http://developer.mozilla.org/en/docs/Chrome_Manifest manifest]'' files. The purpose of these files is to map the protocol access to the actual locations in the physcical disk. While Mozilla reads all manifest files under chrome directory, Firefox reads only extentions/*/chrome.manifest names. Manifest files have the keywords content, skin and locale for each type.
content package-name file-path

skin package-name skin-name file-path

locale package-name skin-name file-path

file-path could be a physicall directory ''file:///path-name-here'', or a JAR file, ''jar:<filename.jar>!/<path_in_archive>''.

===Installing XUL Packages===

Both XUL installation and extension installation uses the same technique. You first need to create an XPI file. This is basically a zip file with some specific files inside. Lets see an example installation of hello.xul (above)

In order to install hello.xul, we will install a dummy extension. First, create a directory (lets call it helloworld) and edit a new manifest file

helloworld/chrome.manifest
content helloworld chrome/

This tells Firefox that the package helloworld has its contents under ''chrome'' directory. Next create this directory under helloworld and copy your hello.xul there.
Finally, create ''[http://kb.mozillazine.org/Install.rdf install.rdf]'' file under helloworld directory.

''install.rdf'' is a specifal file that describes your extension. In the very basic format, you need at least the following:

install.rdf
<code>
<pre><?xml version="1.0"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:em="http://www.mozilla.org/2004/em-rdf#">

<Description about="urn:mozilla:install-manifest">

<em:id>{4f212b04-8063-11dc-8314-0800200c9a66}</em:id>
<em:name>Hello World </em:name>
<em:version>1.0</em:version>
<em:description>This is my hellow world</em:description>
<em:creator>Burchan</em:creator>


<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>0.9</em:minVersion>
<em:maxVersion>3.0</em:maxVersion>
</Description>
</em:targetApplication>

</Description>

</RDF>
</pre>
</code>

''<nowiki><em:id></nowiki>'' describes the unique id for your extension. There are several ID generators available. You can use a web based one, such as [http://www.famkruithof.net/uuid/uuidgen]. ''<nowiki><em:name></nowiki>'', ''<nowiki><em:version></nowiki>'', ''<nowiki><em:description></nowiki>'',
''<nowiki><em:description></nowiki>'',''<nowiki><em:creator></nowiki>'' are straight forward.
''<nowiki><em:targetApplication></nowiki>'' describes which applications can use this extension, all Mozilla.org tools have their unique ids.

At this step, your should have the following directory structure.
<code>
<pre>
helloworld
|-- chrome
| `-- hello.xul
|-- chrome.manifest
`-- install.rdf

</pre>
</code>

Inside helloworld directory, create a new zip file:
zip -r ../helloworld.xpi *

and open this file in Firefox. This will install your new extenstion. Now, you can reach your hello.xul with
chrome://helloworld/content/hello.xul
===Modifying Firefox ===

''chrome'' command ''overlay'' overwrites XUL pages with other XULs. The format is
overlay chrome://first-package chrome://overwrite-the-first-package

You can use this command to overwrite Firefox XUL files. For example,
content news_blogger chrome/content/
overlay chrome://browser/content/browser.xul chrome://news_blogger/content/news_blogger.xul

first defines a new chrome for ''news_blogger'' and then let its definitions replace existing firefox definitions. This way you can define new sidebars, toolboxes or context menus.

====Toolbox====

For toolboxes, you can use <toolbox element. After toolbox, you can define a toolbar in which you can put other items.
<code>
<pre>
<?xml version="1.0"?>
<overlay id="picture-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<toolbox id="navigator-toolbox">
<toolbar id="picture-toolbar" accesskey="T" class="chromeclass-toolbar" context="toolbar-context-menu" toolbarname="picture toolbar" hidden="false" persist="hidden">
<label id="picture-url" value="this is a test"/>
</toolbar>
</toolbox>
</overlay>

</pre>
</code>

====Sidebar====

You can define a sidebar using a second XUL file. The first XUL defines a menu item. In this case, it is attached to the View→Sidebar menu using the viewSidebarMenuid, which opens or closes ''News Blogger'' in the sidebar when activated. The menu item is then hooked up to a broadcaster via the observes attribute. The new broadcaster for the sidebar is overlaid into Firefox's main broadcaster set. The menu-item attributes are abstracted to the overlay simply to allow it to be used in more than one place.

<code>
<pre>
<?xml version="1.0"?>

<overlay id="news_bloggerOverlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<menupopup id="viewSidebarMenu">
<menuitem key="key_NewsSidebar" observes="viewNewsSidebar" />
</menupopup>

<broadcasterset id="mainBroadcasterSet">
<broadcaster id="viewNewsSidebar"

autoCheck="false"
type="checkbox"
group="sidebar"
sidebarurl="chrome://news_blogger/content/sidebar.xul"
sidebartitle="News Blogger"
oncommand="toggleSidebar('viewNewsSidebar');" />
</broadcasterset>

</overlay>
</pre>
</code>

Then in the second XUL, you can define the sidebar the way you want.

<code>
<pre>
<?xml version="1.0"?>

<page id="sbEmptySidebar" title="News Blogger;"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

...... your XUL elements are here......

</page>
</pre>
</code>

====Context Menu Changes====
You can add new context menu (right mouse button) items using ''overlay''
<code>
<pre>
<?xml version="1.0"?>

<overlay id="news_bloggerOverlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<popup id="contentAreaContextMenu" insertafter="context-searchselect">
<menuseparator id="menuseperator" />
<menuitem id="add_article" label="Add Article" oncommand="AddArticle(event); event.preventBubble()"/>
<menuitem id="add_picture" label="Add Picture " oncommand="AddPicture(event); event.preventBubble()"/>

</popup>
</overlay>

</pre>
</code>

This adds two new menu items just after a firefox defined item (context-searchselect). It also sets the function to be called when these items are selected.

==Adding Javascript==

You can add javascript after within ''window'',''overlay'' or ''page'' elements. You can also refer to an existing file.
<code>
<pre>
<script type="application/x-javascript" src="chrome://news_blogger/content/news_blogger.js"/>

<?xml version="1.0"?>

<overlay id="news_bloggerOverlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="chrome://news_blogger/content/news_blogger.js"/>

......
</pre>
</code>
==Adding HTML Elements==
If you want to use regular HTML elements, you need to include XHTML definition in your root tag.
<window id="topWindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml" >

Once you have included XHTML definitions, then you can put regular HTML elements using <html:TAG> and </html:TAG>. For example, you can define an ''input'' field.

<code>
<pre>
<html:input type="text" name="myinput"/>
</pre>
</code>

=Links=
[http://www.hevanet.com/acorbin/xul/top.xul Example set of XUL elements]

[http://www.xulplanet.com/references/elemref/ XUL Element References]

=Teams for this module =

Team 0: Ryan Allen Johns, Aaron Edward Jacobs Please use zoo.cse.wustl.edu

Team 1: Katherine T. Maschmeyer, Micah Scott Herstand Please use zoo.cse.wustl.edu

Team 2: Garrett F Eardley, Scott Zachary Bressler Please use zoo.cse.wustl.edu

Team 3: Daniel Edward Brewster, Gurnish Sahni Please use zoo.cse.wustl.edu

Team 4: Adam Glenn Berger, David Kaminsky Please use zoo.cse.wustl.edu

Team 5: Douglas James Hyde, Richard Zack Speyer Please use zoo.cse.wustl.edu

Team 6: Zachary Robert Dwiel, Jeremy Neil Friedman Please use zoo.cse.wustl.edu

Team 7: Timothy Felix Trinidad, Alan Jonathan Lundeen Please use oz.cse.wustl.edu

Team 8: Thomas Jerry Moore, Mamta Jaikumar Datwani Please use oz.cse.wustl.edu

Team 9: Simon Tam, Weston Joseph Haught Please use oz.cse.wustl.edu

Team 10: David Cassey Schainker, Lauren Miranda Jackson Please use oz.cse.wustl.edu

Team 11: Jeffery Tyrone Nelson, Mark Avram Lilien Please use oz.cse.wustl.edu

Team 12: Jeremy Wayne Williams, James Leslie Grady Please use oz.cse.wustl.edu

Team 13: Daniel Everett Harter, Justin Alante McClain, Helena Marie Wotring Please use oz.cse.wustl.edu

Team 14: Steven D Broner, Please use oz.cse.wustl.edu

Note that team 13 has three students and team 14 has one.

← Older revision		Revision as of 23:22, 24 February 2013
Line 259:		Line 259:

	[http://www.xulplanet.com/references/elemref/ XUL Element References]		[http://www.xulplanet.com/references/elemref/ XUL Element References]
		+
		+	[[Category:Former Content]]

← Older revision		Revision as of 20:18, 18 November 2009
Line 259:		Line 259:

	[http://www.xulplanet.com/references/elemref/ XUL Element References]		[http://www.xulplanet.com/references/elemref/ XUL Element References]
−
−
−
−
−
−	~~=Teams for this module =~~
−
−	~~Team 0: Ryan Allen Johns, Aaron Edward Jacobs Please use zoo.cse.wustl.edu~~
−
−	~~Team 1: Katherine T. Maschmeyer, Micah Scott Herstand Please use zoo.cse.wustl.edu~~
−
−	~~Team 2: Garrett F Eardley, Scott Zachary Bressler Please use zoo.cse.wustl.edu~~
−
−	~~Team 3: Daniel Edward Brewster, Gurnish Sahni Please use zoo.cse.wustl.edu~~
−
−	~~Team 4: Adam Glenn Berger, David Kaminsky Please use zoo.cse.wustl.edu~~
−
−	~~Team 5: Douglas James Hyde, Richard Zack Speyer Please use zoo.cse.wustl.edu~~
−
−	~~Team 6: Zachary Robert Dwiel, Jeremy Neil Friedman Please use zoo.cse.wustl.edu~~
−
−	~~Team 7: Timothy Felix Trinidad, Alan Jonathan Lundeen Please use oz.cse.wustl.edu~~
−
−	~~Team 8: Thomas Jerry Moore, Mamta Jaikumar Datwani Please use oz.cse.wustl.edu~~
−
−	~~Team 9: Simon Tam, Weston Joseph Haught Please use oz.cse.wustl.edu~~
−
−	~~Team 10: David Cassey Schainker, Lauren Miranda Jackson Please use oz.cse.wustl.edu~~
−
−	~~Team 11: Jeffery Tyrone Nelson, Mark Avram Lilien Please use oz.cse.wustl.edu~~
−
−	~~Team 12: Jeremy Wayne Williams, James Leslie Grady Please use oz.cse.wustl.edu~~
−
−	~~Team 13: Daniel Everett Harter, Justin Alante McClain, Helena Marie Wotring Please use oz.cse.wustl.edu~~
−
−	~~Team 14: Steven D Broner, Please use oz.cse.wustl.edu~~
−
−	~~Note that team 13 has three students and team 14 has one.~~

Firefox Extensions - Revision history

Shane: categorizing

Wiseman at 20:18, 18 November 2009

Wiseman: Created page with '=XUL= XUL (XML User-interface Language) is a markup language that describes the user interface. It is at the heart of Mozilla based browsers. Through XUL, you can defined input c…'