Want to read Slashdot from your mobile device? Point it at m.slashdot.org and keep reading!

 


Forgot your password?
Close
typodupeerror
Mozilla The Internet Education Programming Technology

A Good Resource for Learning XUL & Javascript? 82

Posted by Cliff from the ground-floor-learning dept.
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?"
This discussion has been archived. No new comments can be posted.

A Good Resource for Learning XUL & Javascript? More

A Good Resource for Learning XUL & Javascript?

Comments Filter:

  • OReilly book (Score:5, Informative)

    by mrblah ( 229865 ) on Tuesday December 28, 2004 @06:10PM (#11203300)
    There's an OReilly book [oreilly.com], if that helps.

    • Re:OReilly book (Score:5, Insightful)

      by jalefkowit ( 101585 ) <jason@jasonle f k o w i t z.com> on Thursday December 30, 2004 @04:37PM (#11221879) Homepage
      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 (Score:3, Informative)

    by LittleK ( 640585 ) on Tuesday December 28, 2004 @06:14PM (#11203347)
    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.

  • Roachfiend Tutorial (Score:3, Informative)

    by sunilonline ( 609351 ) on Tuesday December 28, 2004 @06:17PM (#11203372)
    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.

  • RAD With Mozilla, Bruce Perens OSS series (Score:5, Informative)

    by LOBOestepaRIO ( 829610 ) on Tuesday December 28, 2004 @06:19PM (#11203391) Journal
    It's fairly good, and available for free in PDF. http://phptr.com/promotion/1484?redir=1

  • XulPlanet (Score:5, Informative)

    by thasmudyan ( 460603 ) <thasmudyan@openB ... com minus author> on Tuesday December 28, 2004 @06:25PM (#11203460)
    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 (Score:5, Insightful)

      by Jerf ( 17166 ) on Tuesday December 28, 2004 @09:23PM (#11205176) Journal
      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.
      • I agree completely with you in regard to RDF and the whole idea of using Mozilla's data-management components. Mozilla/XUL should be looked at as a front-end only. Whatever method you use to get and store the data, simple javascript is the answer to manipulating it in memory. RDF, and all other XML-oriented data management techniques are incredibly overcomplicated and offer no special benefit, other than being able to say you are using "XML datasources".

        For web-based apps, XMLHttpRequest is a good way to h
      • If anyone happens to read this and is interested, I've created a sourceforge project [sourceforge.net] for it.

  • Dynamic menus (Score:5, Interesting)

    by Earlybird ( 56426 ) <slashdot AT purefiction DOT net> on Tuesday December 28, 2004 @06:34PM (#11203560) Homepage
    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.

    • If you find the answer to that one, I would be interested in knowing about your solution :)
    • Does this [mozdev.org] help?
    • What you need is appendItem [xulplanet.com] and friends, or such methods as "insertItemAt", "insertBefore" and "removeAllItems" for the menulist element [xulplanet.com], along with addEventListener [xulplanet.com].

      I agree that it is unfortunate there is no nice collection of HowTos for XUL/JS. To really document and explain all of the possibilities, it would take several books.
        • What you need is appendItem and friends, or such methods as "insertItemAt", "insertBefore" and "removeAllItems" for the menulist element, along with addEventListener.

        Alas, menulist has nothing to do with menus. Correct me if I'm wrong, but I believe menulist is the XUL equivalent of HTML select dropdowns; the elements used for window menus are menu, menubar, menuitem and so on.

        I'm starting to figure out how to do this with XUL in-memory datasources now, though; see the first example on this page [mozilla.org].

        • Why 'alas'?

          Yes, if you are referring strictly to toolbar menus, then menupopup [xulplanet.com] , as well as menu, menubar, etc... are the elements you need. These also have a nice list of Javascript methods that can be called, including 'insertBefore' and 'insertAfter', while many more methods such as 'appendChild' can be called on individual menuitem [xulplanet.com] elements in the menu.

          I personally shy away from RDF and the use of mozilla datasources, because they don't really offer that much of use to me. Their performance is not ve
    • SmartSearch [bengoodger.com] populates its menu from JavaScript (it grabs them out of your bookmarks, but you don't have to care about that part); you may want to look at its source. I assume example code is always good :)

      It makes a <menuitem> (via document.createElement) then appends it to a <menupopup>.

  • Essential XUL Programming (Score:4, Informative)

    by AlXtreme ( 223728 ) on Tuesday December 28, 2004 @06:34PM (#11203571) Homepage Journal
    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 (Score:5, Informative)

    by nitro322 ( 615518 ) on Tuesday December 28, 2004 @06:38PM (#11203608) Homepage
    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!
    • 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 (Score:3, Informative)

        by Curtman ( 556920 )
        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 Reference [huji.ac.il]
    • I would argue that Creating Applications with Mozilla is not much use to most people unless 1) there's a second edition somewhere or 2) that online edition *is* corrected from the original text and on its way to becoming the second edition. The first edition I bought was confusing and broken on the day it was published, so commenting that the API has moved on since then is no defense for the myriad things wrong with it.

      I suppose if you like "tutorials" that are all forward reference you might get something

    • And finally, the mother of all example sites

      The mother of all example sites would be over here [mozilla.org]. Unzip the extensions, and examples abound.
    • Creating Applications with Mozilla is listed here [theassayer.org] on theassayer.org, and a user-submitted review would be very welcome!
    • Just wanted to say thanks you, there was a few links there that I hadn't seen before. :)
  • Try Rapid Application Development with Mozilla by Nigel McFarlane, published by Prentice Hall.

    It goes pretty in depth and covers a lot of ground about a lot of the parts of XUL: XBL, XPCOM, XML, etc.

    I would recommend it highly.

  • Javascript, good for beginners and reference (Score:3, Informative)

    by CosmicDreams ( 23020 ) on Tuesday December 28, 2004 @07:45PM (#11204245) Journal
    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.
    • Would you care to share your tree code?
      • 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/gate

    • Reading this later I realize I should have creditied Mozilla's Javascript debugger. Without it I would not of discovered that I was passing a tree with the event and not a treeitem.

      The Javascript Console and Javascript debugger are essential for XUL development, in my opinion. They also come in handy for general web development as well, as they can accurately reveal and test javascript issues.

  • Javascript is nice, but (Score:3, Interesting)

    by Dracos ( 107777 ) on Tuesday December 28, 2004 @08:03PM (#11204472)

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

    • 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-featured scripting language, including the ability to use sockets, read/write files, run other executables, and in general do just about everything you would need to do for a XUL "front end" application. For more serious back-end integration, just use sockets to

  • LAME (Score:2, Insightful)

    by drfrog ( 145882 )
    propietary web browser language

    need i say more?
    • At risk of sounding like a hair-splitting Mozilla fanboy, I disagree.

      Mozilla offers a framework for building applications, which is why there's an entire O'Reilly book on the subject. One of the primary functions of the Mozilla application is that of a web browser, but it's not accurate to say that XUL is a proprietary web browser language. A bowser is just one of the many things you could create within that framework, as evidenced by the existence of mail and news, IRC, composer, calendar and other compon
      • so if its not proprietary how does one using IE or opera or whatever view these web based apps?

        they can't!

        ANY browser technology that segregates netizens based on applications for a piece of market share really removes themselves from what the net and 'cyberspace' mean, at least to me.

        Cyberspace being a form of communication that is ubiq, REGARDLESS of platform, or browser of choice

        • Re:LAME (Score:4, Insightful)

          by dn15 ( 735502 ) on Wednesday December 29, 2004 @04:32PM (#11212589)
          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.
        • Don't blame the browser, blame the coder.

          I started off building internal apps with full knowledge that I had some control over what browser they were going to be used with, but over time sibling aplications extended to the outside world and I didn't code down to standards. That was my mistake. I don't think any browser should be criticized for it's extra features (which is different from deviating from standards *cough* IE *cough*)

          The responsibility of universally accessible web based applications l
    • XUL was not intended to be a proprietary "web browser language". It was intended as a completely open-source, and open-standard way to create GUI components (mostly it was aimed at creating client-side applications, such as the browser itself). In that sense it is not, nor was ever intended to be a proprietary replacement for DOM/HTML. In fact, Mozilla/Firefox is more DOM/HTML compliant than any other browser available.

      I use XUL all the time in my work creating client-side touchscreen applications. I would
    • Parent is currently modded Insightful, and I just can't see why.

      1. proprietary? It's freely available. Maybe you meant it's not standardized?
      2. web browser? It's a UI definition language for the mozilla platform, nothing to do with browsers per se.

      • proprietary:

        just because its freely available doesnt mean its not proprietary.
        if third party developers use the same code base to build other applications of off then its still proprietary

        only when someone build an new XUL engine from the ground up will it start out on the road to being anything close to a standard

        I do concede though, that is the vision of XUL

        web browser:
        what is the mozilla platform?
        first and formost it is a suite of open source internet applications

        ok design your desktop in xul, i
        • eh... this may be splitting hairs again here, but
          isn't it possible to build a XUL engine from the ground up if you wanted to? I think that makes it distinctly *not* proprietary.... I mean,the w3c has all sorts of standards, some of which haven't even been implemented at all -- are they proprietary until at least two engines are built to handle them?

      • Moderator is currently metamoderated unfair.
        Satisfied? :)
    • " propietary web browser language "

      Nice troll, indeed :-)

  • You will want Ted's Extension Developer extension [mielczarek.org] if you're going to develop Mozilla (including Firefox/Thunderbird) extensions. Incredibly useful.

  • Go for... (Score:2, Interesting)

    by sabit666 ( 457634 )
    Laszlo
    http://www.openlaszlo.org/

  • Learn from code (Score:2, Informative)

    by Anonymous Coward
    I can't believe noone has said this:

    use [faser.net] the [mozdev.org] source [mozdev.org], luke [x25.se]!

    (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 (Score:5, Informative)

    by the quick brown fox ( 681969 ) on Thursday December 30, 2004 @12:37AM (#11216046)
    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.

  • There used to be a language specification on the netscape.com site, but where is it now? You should also read some things on Javascript and prototyping.
  • First you must understand how components work in mozilla. I read the book "Creating XPCOM Components" [mozilla.org] from the mozilla site. I found it a great resource. It explains the mozilla architecture, how to create extensions, install and deploy them, and interact with other components in mozilla. I think it is a great starting point. You must have some C++ knowledge to understand it.

  • Documentation the next challenge for Mozilla (Score:1, Interesting)

    by Anonymous Coward

    Right now the platform documentation hasn't been compiled into a form that's accessible for external (to the Mozilla project) developers.

    Now Firefox 1.0 is out, and the Mozilla / XUL runtime is speading, hopefully we'll see the Mozilla team setting up something approaching PHP's documentation (which is a big part of PHP's success as a technology for the masses). Part of that is having a supporting documentation team, willing to keep it complete and up-to-date. Spreadfirefox.com shows it's possible for Moz

Slashdot Top Deals

The hardest part of climbing the ladder of success is getting through the crowd at the bottom.

Close