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?"

OReilly book

There's an OReilly book [oreilly.com], if that helps.

Re:OReilly book

Yes, there is. And it sucks.

I bought that #*#$@ing book when it first came out. And proceeded to waste prodigious amounts of time trying to make even the simplest code samples from it work. It turned out that the code samples were riddled with typos that made them un-runnable.

The book is, quite honestly, a waste of your time and money. Maybe they've since gone back and fixed the errors, but considering that it's still in the 1st edition (which targeted Mozilla 1.0 -- god only knows how much has changed between that and Firefox 1.0) I seriously doubt it.

A start

You can always start at mozilla and xulplanet

mozilla [mozilla.org]
xulplanet [xulplanet.com]

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

Re:A start

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

Roachfiend Tutorial

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

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

Re:Roachfiend Tutorial

XULplanet [xulplanet.com] also looks like a good resource to me.

RAD With Mozilla, Bruce Perens OSS series

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

XulPlanet

Try XulPlanet [xulplanet.com], 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...

Re:XulPlanet

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

Yeah, I dug into Mozilla development gung ho over the past year or so, and I've completely abandoned it... well, I'm in the process of creating a replacement XBL, but after that's done, I'm out. In painfully slow succession, I've tried in a serious way Moz's RDF support, XUL, and XBL, and in every case I have rapidly exceeded their capabilities (to the tune of segfaults) and gone back to JS + DOM. (For RDF, I now dump out my data as a JS file and use XMLHttpRequest to retrieve it and "eval" to run it; this is what Google Suggest uses. I beat them by about a month, I know others beat them by more :-) but it works and you'll be stunned how fast it is, even for many kilobytes of data; by far the fastest solution I've found [slashdot.org], even independent of the fact that loading any sort of XML in Moz causes a huge stall of some kind and tends to cause crashes and memory leaks in nothing flat.)

I'm preparing a series of half rants, half detailed indictments on why the Mozilla specific technologies are not just poorly implemented at the moment for any task other than being a web browser, but why Javascript + DOM is usually, on the balance, a superior solution. ("On the balance" means that while my JS implementation of XBL is neither a subset nor a superset of "true" XBL, on the whole the benefits level out in favor of my JS implementation... and if I were willing to go pure Moz instead of cross-platform it would be a total win.) I don't want to repeat them here in toto, but, well, that's actually the basic argument: Me, a single schmoe, can replicate most of XBL in a couple of weeks, in Javascript, and it is actually much more reliable too, for reasons that will only make sense if you used Moz's XBL support for anything serious, like widgets that can load remote data or include other widgets in interesting ways. How much time has been spent on XBL, which is still behind?

Unless you need a XUL widget like "popup" that has no good HTML replacement, you're just better off with JS and DOM. Most people don't understand how powerful JS really is, and I've found it to be surprisingly speedy, too.

(To show I'm not just spouting off randomly, here is my current XBL in JS implementation [jerf.org]. Still in development, but it oughta show I'm serious about this, and even now I'm finding it more pleasing to work with overall than real XBL. What stops me from releasing the rants right now is, well, there's some writing to be done yet, but instead of just bitching I want to have some constructive solutions as well; xbl.js is a big part of that, and right now I'm working on the POPUP element because I need that for my app. Ranting is great but I find they are even more powerful when they are not purely negative.)

Details forthcoming at a later date, but next time you're reaching for XUL or XBL, if it isn't for a Mozilla extension, stop and make sure you don't really want to do it in cross-platform JS + DOM. See, the thing is, those libraries are well tested and optimized in a variety of situations; I'm not encountering bugs hourly like I felt like I was in Moz.

Finally, to preempt some of the obvious responses, I'm not saying XBL or something was a bad idea; in fact the idea is so good I'm re-implementing it. I'm saying the implementation right now is so dodgy it isn't worth playing with when there is another less cool, but more functional, alternative available today in the form of JS + DOM.... and what advantages XUL or XBL have over my JS implementation are only a few small hooks away from being exposed to the JS as well.

Dynamic menus

The XUL/Mozilla/Firefox documentation is scattered all over the place. You survive on bits [orablogs.com] and pieces [ibm.com], little tutorials [roachfiend.com] someone cooked up on their own time, the Mozilla reference [xulplanet.com], existing extensions, etc. Documentation is often written for the old Mozilla suite, and thus out of date with respect to, say, Firefox' new extension-loading conventions.

What I want to know, which nobody seems to document, is how to create menus dynamically in Firefox. Instead of specifying the menus statically in XML, I want to create them at runtime -- specifically, I want to create a top-level menu item and populate its submenu at runtime based on HTTP queries or something similar. I know it's possible, but I have not figured out how.

Re:Dynamic menus

If you find the answer to that one, I would be interested in knowing about your solution :)

Re:Dynamic menus

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

Re:Dynamic menus

Thanks, I already knew about it. But it doesn't provide all the pieces of the puzzle.

Essential XUL Programming

Grabbed a copy of Essential XUL Programming [xulbook.com] a few years back, it was quite ahead of its time and a good way to start off imo. The Open XUL Alliance [sourceforge.net] 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

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 [mozdev.org] - 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 [xulplanet.com] - 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 [xulplanet.com] - 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 [mozilla.org]. 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 [hevanet.com] If you can't figure out how something work, this most likely has a working example.

Good luck!

Re:XUL links

Instead of having to buy a book, isn't there an official Javascript reference on the net? Sort of like how php.net/manual is the definitive reference on PHP, is there anything like that for Javascript?

Re:XUL links

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 [huji.ac.il]
JavaScript [huji.ac.il]

Javascript, good for beginners and reference

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

Would you care to share your tree code?

Re:Javascript, good for beginners and reference

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.

Javascript is nice, but

When will we be able to write XUL apps in PHP, like can be done with Perl, Python, and Ruby?

Re:Javascript is nice, but

Don't underestimate Javascript. In some ways, Javascript is actually a more elegant and well-thought-out language than PHP. See Crockford's [crockford.com] rant.

Many *implementations* of Javascript are lacking, but Mozilla applications turn Javascript into a full-feature

LAME

propietary web browser language

need i say more?

Re:LAME

so if its not proprietary how does one using IE or opera or whatever view these web based apps?

That's the thing, they're not supposed to because we're not talking about making web-based apps at all. We're talking about creating software within a framework that also happens to be host to a web browser. You could write something that extends the browser's functionality but you could also write something that has nothing to do with browsing at all and doesn't even need to access the Internet. If appropriate you could spin it off as a separate app that does not integrate browsing functionality, like the Sunbird project.

documentation sucks

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 [mozillazine.org].

Then, as you inevitably run into walls trying to get things done in the browser, cozy up to the source [mozilla.org]. 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 [mozilla.org]
browser menus and commands [mozilla.org]
browser main logic [mozilla.org]

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