A Good Resource for Learning XUL & Javascript?

RJabelman asks: "I'm trying to write a Mozilla extension, but I can't find a decent resource to learn from. Tutorials abound for packaging up an extension, and the web's littered with Javascript snippets to pretty up a web page, but there seems to be very little authoritative information for doing serious work with Javascript, XUL and Mozilla (and more specifically, manipulating XML). I can find my one true resource for every other language or API I've learned: but not this. Can anyone point me to theirs?"

Comments

OReilly book

[mrblah]

There's an OReilly book, if that helps.

A start

[LittleK]

You can always start at mozilla and xulplanet

mozilla
xulplanet

As for the more advanced stuff, I'm not sure where.

Re:A start

[Curtman]

mozillaZine is a great resource too. Especially the knowledge base , forum, and #mozillazine on irc.mozilla.org

Roachfiend Tutorial

[sunilonline]

A few seconds with google brought up this tutorial: http://extensions.roachfiend.com/howto.php

It's targeted for Firefox extensions, but should serve your purpose pretty well.

Re:Roachfiend Tutorial

[sunilonline]

XULplanet also looks like a good resource to me.

RAD With Mozilla, Bruce Perens OSS series

[LOBOestepaRIO]

It's fairly good, and available for free in PDF. http://phptr.com/promotion/1484?redir=1

XulPlanet

[thasmudyan]

Try XulPlanet, it's the only resource on XUL that is actually working, for me at least. In my company, we're regularly delivering apps with XUL as a frontend and all developers use XulPlanet.

On the down side, welcome to the land of magic and wonder, where arcane bugs haunt the long forgotten planes of DOM...

Essential XUL Programming

[AlXtreme]

Grabbed a copy of Essential XUL Programming a few years back, it was quite ahead of its time and a good way to start off imo. The Open XUL Alliance has some more recent additions, might be worth a look.

Nothing a quick google-search wouldn't pick up. But that hasn't stopped ask /. in the past, I guess.

XUL links

[nitro322]

If you're just starting out with XUl, you may want to brish up on your JavaScript first. Although XUL itself is a rather straightforward markup language (albeit with many, many quirks), in order to make your app actually do anything, you'll need to write some JavaScript to control it. There are many, many Javascript resources out there, and I also recommend JavaScript: The Definitive Guide from O'Reilly.

Once you have that down, here are a few XUL sites I recommend:

Creating Application with Mozilla - Online version of O'Reilly's book. Great resource for beginners to follow through, but some of the examples no longer work due to changes in the APIs since the books release.

XUL Planet - An excellene resource for XUL developers of any level. This site contains a great tutorial for getting started and becoming familiar with the environment, as well as a definitive reference guide for XUL and XPCOM objects and functions.

XUL Planet Forum - This forum is also housed at the XUL Planet website, but it deserves separate mention. This is the only forum/newsgroup/list I've been able to find that's still active and populated with friendly and helpful souls. I've received helped there several times on problems I'd been working on for weeks or months.

There are also a few XUL-related newsgroups on mozilla's usenet server (eg, news://news.mozilla.org:563/netscape.public.dev.xu l), though not too many people use those groups anymore.

There's also Mozilla official XUL Programmer's Reference. This is a great reference resource, but it's not geared for beginners.

And finally, the mother of all example sites: http://www.hevanet.com/acorbin/xul/top.xul If you can't figure out how something work, this most likely has a working example.

Good luck!

Re:XUL links

[Curtman]

isn't there an official Javascript reference on the net?

Devedge used to be the place, but AOL seems to have killed it. See bugzilla.mozilla.org #264184. (Their bugzilla doesn't allow referals from slashdot)

Mirrors here:
JavaScript Guide
JavaScript Reference

Javascript, good for beginners and reference

[CosmicDreams]

For Javascript I have that O'reily's The definitive Guide on Javascript to be exeptional. I mostly use it today for referencing specfic methods and functions, but it's also a good book to start with.

With XUL nearly all of the dynamic aspects are controlled by javascript, so its good to get a good grounding in that subject before you start in with the XUL tags.

I recently coded an XUL tree that loads links at the click event. Sounds easy but it took me a long time to figure out how to bubble up the right event.

The only way I figured it out was with the help of that javascript book.

Re:Javascript, good for beginners and reference

[CosmicDreams]

Sure, here's the entire page. Note that the page consists of a menubar, checkbox, tree, and iframe. The menubar is dynamically built by XUL's use of RDF datasources. All of this was built based off what I learned from XULPlanet's tutorials and examples.

Actual urls have been removed to protect my friends from slashdotting.

<?xml version="1.0"?>

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

<window id="child-recurse-menus"
xmlns="http://www.mozilla.org/keymaster/gatekeeper /there.is.only.xul">

<script type="application/x-javascript">
<!-- /*
loadURL takes an event and pulls a new url from it. Then it loads that new url into the mainpage iFrame.

loadURL2 takes a tree object then walks through it to find the treeitem that caused the event. Then it pulls the new url from the treeitem and loads that url into the mainpage iFrame.
*/
function loadURL(event) {
var contentFrame = document.getElementById('contentFrame');
var url = event.target.getAttribute('value');

if (url) contentFrame.setAttribute('src', url);
}
function loadURL2(tree) {
var contentFrame = document.getElementById('contentFrame');
var index = tree.currentIndex - 1;
var treeitem = tree.lastChild.firstChild.firstChild.childNodes.it em(index);
var url = treeitem.id;

if (url) contentFrame.setAttribute('src', url);
}
-->
</script>

<toolbox>

<menubar id="menubar" datasources="mozmain.rdf" ref="RDFref" oncommand="loadURL(event);">
<template>
<rule parent="menubar">

<menu uri="rdf:*" label="rdf:rdfURLandREFgoeshere" id="topmenu"/>
</rule>
<rule iscontainer="true">
<menupopup>
<menu uri="rdf:*" label="sameRDFandREF" id="submenu"/>
</menupopup>
</rule>
<rule>
<menupopup>

<menuitem uri="rdf:*" label="nameFromRDF" value="valueFromRDF" />
</menupopup>
</rule>
</template>
</menubar>
<toolbar id="toolbar">
<checkbox label="Help"/>
</toolbar>
</toolbox>

<box flex="1">

<!-- OK HERE STARTS THE TREE STUFF --->
<box>
<tree id="tree" flex="1" seltype="single" width="150" height="200" onselect="loadURL2(event.target);">
<treecols>
<treecol id="name" label="Members" primary="true" flex="1"/>
</treecols>

<treechildren>
<treeitem container="true" open="true" label="Nullset" position="1">

<treechildren>
<treeitem id="friend1" label="bbarker"/>
<treeitem id="friend2" label="kefka"/>
<treeitem id="friend3" label="Kagewaiidesu"/>
<treeitem id="friend4" label="luckyboy"/>
<treeitem id="friend5" label="gandalf"/>
<treeitem id="friend6" label="tangent"/>
<treeitem id="friend7" label="katana"/>
<treeitem id="friend8" label="acetate"/>

<treeitem id="friend9" label="cosmicdreams"/>
<treeitem id="friend10" label="jawz"/>
</treechildren>
</treeitem>
</treechildren>
</tree>
</box>

<iframe id="contentFrame" src="mainpage" flex="1" />

</box>

</window>

If you have any questions please ask.

Re:Dynamic menus

[Earlybird]

Apparently XUL templates is the way to go, but I don't know how to supply the datasource implemented with JavaScript.

Learn from code

[Anonymous Coward]

I can't believe noone has said this:

use the source, luke!

(links blatantly stolen from the mozilla amazon link page)

But seriously, disassemble other peoples code is the best way to learn. See how they do thing. Javascript is easy enough to understand and there are millions of tutorials on the subject alone, but if you want to see how it interacts with XUL applications this is your best bet. And hey, all those applications are zero install and can run in the browser, how cool isn't that!? =P

documentation sucks

[the quick brown fox]

I spent a few months this year writing probably one of the most complicated and hairy Firefox extensions out there. The documentation in XUL-land, including (or especially) the books, is pretty poor. There's plenty of info, but an astonishing amount of it is outdated, and there's nobody to tell you what pages are outdated and what pages are not. There are pages on mozilla.org that are years old and say "this information is subject to change, watch this space".

For example, the most difficult thing for me was trying to figure out how to package up my XUL/JS in a form that Firefox would take it. All the tutorials talked about install.js, installed-chrome.txt, and regxpcom, all of which are outdated. (Hint: Since Firefox 0.9, install.rdf is the key to the whole thing, so any tutorial that doesn't mention it is outdated.)

Once you've gotten the basics (probably by reading the O'Reilly book--the Nigel MacFarlane book may have a lot of useful info, but it was so poorly written I couldn't get through it), you really want to do yourself a favor and install Venkman, the Javascript debugger. The only place I've been able to find that has this little gem for Firefox is here.

Then, as you inevitably run into walls trying to get things done in the browser, cozy up to the source. There's not much you can do with XUL/JS that hasn't already been done in the Firefox source, and the search tools available on LXR will often lead you right to them.

And here are some source files you're definitely going to need to look at:
browser main window
browser menus and commands
browser main logic

Also, shamelessly unzip and dissect other people's XPI's; they probably won't mind anyway.