Exploring XUL

Starting to learn a new platform can be daunting. Especially, when it is as big as the Mozilla platform. The XUL tutorial and reference were exactly what I needed to start learning. However, I quickly found myself wanting to experiment with little XUL snippets just to see what they looked like at runtime. Or, I’d want to try applying some CSS to the elements. I decided to build a XULRunner application that provided a simple way to experiment with XUL. It also gave me a good hands-on project I could use to really start learning the platform.

The result is XUL Explorer. It’s a simple editor that can preview XUL on a tab or in a separate popup window. It has a list of code snippets (small fragments of XUL or JavaScript) that can be quickly inserted into the editor. The XUL can be load and saved to files. The JavaScript Error Console is available to help debug problems. The help menu is hooked to XUL information on MDC. There is even a simple “keyword” help lookup for XUL elements.

xulexplorer.png

I made an install (Windows only) that includes XULRunner 1.8.0.4, so you have everything you need to start using it. I am working on Mac and Linux installs too, but for now you can download the source. I did not package the source into JAR files. I wanted the code to be easy to access, in case anyone wants to see how it works or show me better ways of doing things.

Install: xulexplorer-setup.exe 5.6MB
Source: xulexplorer-src.zip

NOTE: If you want to use something online, check out the XUL editor on Ted Mielczarek’s website.

22 Comments

  1. Nickolay Ponomarev said,

    December 15, 2006 @ 6:47 am

    The idea and screenshot looks nice. Consider making the actual XULRunner application available (without the runtime – for those with XR already installed or not using Windows).

    I like how the default layout of the live XUL editor, where you don’t have to switch between tabs to see the rendering.

    And for me personally, it would be cool if this were available as a Firefox extension – makes it easier and faster to launch it.

  2. Nickolay Ponomarev said,

    December 15, 2006 @ 7:00 am

    After having actually run it:

    1. It would be nice to be able to make it update the preview as you type.
    2. For script errors, it would be nice to display an error icon somewhere so that I don’t have to keep the error console open.
    3. I got these exceptions, don’t know steps to reproduce:
    Error: [Exception... "Not enough arguments [nsIEditor.canUndo]” nsresult: “0×80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)” location: “JS frame :: chrome://explorer/content/controllers.js :: anonymous :: line 127″ data: no]
    Source File: chrome://explorer/content/controllers.js
    Line: 127

    Error: uncaught exception: [Exception... "Index or size is negative or greater than the allowed amount" code: "1" nsresult: "0x80530001 (NS_ERROR_DOM_INDEX_SIZE_ERR)" location: "chrome://explorer/content/explorer.js Line: 155"]

    4. Consider borrowing the default XUL text as in the live XUL editor (makes it easier to test stuff) and/or let user easily override it.
    5. snippet should include section by default.
    6. Snippets in general should be usable as inserted, IMO. For information on usage, one can look in the reference.
    6a. For testing stuff, I’d like to be able to insert more complete snippets. E.g. if I want to test something with , I need a with several s inside it, not just the alone.
    6b. Being able to add snippets would be nice.
    6c. What sort order do you use in the snippets listing?
    7. Why not use the default browser when opening documentation?
    8. Selecting New should use a default template and possibly have an option to select the template (see also 4).
    9. Selecting New should clear the preview tab and close the popup window if there is any. (Can I undo this?)

  3. Nickolay Ponomarev said,

    December 15, 2006 @ 7:11 am

    From a quick look at the code:

    10. You know you don’t need the “file:” in chrome.manifest.
    11. You miss the accesskeys in menu items (e.g. Alt+F,X doesn’t work)
    12. The common practice is to include the global stylesheet right in the XUL file (unless it’s an overlay), not @import it in you other CSS.
    13. about.xul has a

  4. Laurentj said,

    December 15, 2006 @ 9:25 am

    Why don’t you deliver only a zip of your app, without xulrunner ?? The main goal of Xulrunner, is to avoid to provide your app with Xulrunner binaries. I have already a xulrunner installed.. (and i am under linux). It’s a shame…

  5. pd said,

    December 15, 2006 @ 1:41 pm

    Brilliant

  6. robcee said,

    December 15, 2006 @ 3:13 pm

    ah, the enthusiastic voices of people who know better and would like you to do it their way. Nice work, Mark. As an introductory XULRunner project, that looks pretty sweet.

  7. Mark Finkle said,

    December 15, 2006 @ 5:12 pm

    Thanks for the feedback.

    I added the raw source for anyone who wants to try it on Linux or Mac. I will be looking into Nickolay’s feedback and making some changes. I’ll post an update soon.

  8. Sylvain said,

    December 15, 2006 @ 10:43 pm

    This is great!

    I vote for the automatic refresh of the UI a la “Real-time XUL Editor”

  9. Laurentj said,

    December 15, 2006 @ 10:49 pm

    Thanks Mark for the zip. It’s work perfectly with XulRunner on Linux by executing “xulrunner application.ini”.

  10. Myk Melez said,

    December 16, 2006 @ 1:12 am

    I’m using XULRunner 1.8.0.4 on Ubuntu Linux, and chatzilla runs fine on top of it, but when I unzip xulexplorer into a directory, copy xulrunner-stub into that directory, and then run it, I get the following error:

    Could not find compatible GRE between version 1.8 and 1.8.

    Anyone know what the problem might be?

  11. Myk Melez said,

    December 16, 2006 @ 1:18 am

    Hmm, I should have Googled before I posted. Per this comment, you just need to change MaxVersion from 1.8 to 1.8.0.* in application.ini. Mark, you might want to make this change in your bundle, since then it’ll remain compatible with minor updates to XULRunner.

  12. Mark Finkle said,

    December 16, 2006 @ 3:20 am

    Thanks Myk — I updated xulexplorer-src.zip with the changes

  13. pd said,

    December 16, 2006 @ 6:47 am

    what installer have you used?

    My understanding is that xulrunner does not provide installers for any platform (let alone all) though apps like Songbird have an installer of some sort for Linux and WIndows at least.

    is it fair to say that the main thing missing from the xulrunner platform is the ability to provide an installer that detects the presence (or lack thereof) of xulrunner/GRE on the on user’s system and possibly initiates a download if an appropriate version is not present?

  14. Cub said,

    December 16, 2006 @ 1:07 pm

    Very cool. When you start getting into the territory of needing to build a Mac Universal Binary of your app, let me know, or write a post about it. It is unexplored territory. I am curious to see other people bump up into it, and see what their opinions on it are.

  15. Richard Klein said,

    December 17, 2006 @ 4:33 am

    This is a great intro xul app. I’ve taken the liberty of moving the preview below the editor. I’ve also added a transaction manager listener so that the preview is updated live. you can see the source at http://thekleins.freeservers.com/uploads/XUL%20Explorer.zip

  16. pd said,

    December 17, 2006 @ 11:11 am

    There seems to be great potential for a project that could prove the catalyst that takes the Mozilla platform into the mainstream.

    Take Daniel Glazman’s post Nvu 1.0 work on xulrunner-based Composer, Joe Hewitt’s work on Firebug, Mark your own work here and surely the community might soon have the basics of a mozilla platform IDE?

    Or am I just dreaming?

    Surely it’s time XUL development took cross-platform, open source development where Firefox took the browser? Or is GTK considered good enough?

  17. beltzner said,

    December 17, 2006 @ 2:44 pm

    Mark – this is fantastic! I’ve been looking for something like this so that I can walk through my offline copy of the XUL Tutorial with a “monkey-see, monkey-do” tool that lets me get my hands dirty.

    I’d be keen to talk to you (offline, I’ll send you mail) about combining the offline tutorial and this tool to become a standalone “Learn XUL in 7 Days” product which guides the user through more advanced techniques and tricks with exercises, etc. My B.Ed is tingling! :)

  18. The Klein's said,

    December 17, 2006 @ 4:21 pm

    XUL Explorer…

    Mark Finkle has put together a nice little xulrunner app for exploring xul code snippets….

  19. Chris Cunningham said,

    December 17, 2006 @ 5:22 pm

    I did a quick NSIS-based install bundle which will play nicely with a system XULRunner (although I’m using my own arbitrary registry keys to track it):

    source: http://thumper.kicks-ass.org/xulapps/xulexplorer-net-bundle-setup.nsi
    app: http://thumper.kicks-ass.org/xulapps/XULExplorer%200.1%20Setup.exe

    I’ve got nearly a dozen XUL apps currently running on my system XULRunner right now. I can’t wait for Firefox and Thunderbird to join that list permanently.

    – Chris

  20. PJ Cabrera said,

    December 19, 2006 @ 1:48 am

    Mark, you keep this up, it will be you at OSCON 2007 accepting the Grand Master Open Source Award. :-)

  21. Mark Finkle’s Weblog » XUL Explorer 0.2 said,

    December 22, 2006 @ 1:52 am

    [...] I received a lot of feedback on XUL Explorer. It’s been a great learning experience for me as well. Here is a list of changes: [...]

  22. jose said,

    January 3, 2007 @ 2:35 am

    fantastic! Installed for me using Wine in Linux without a hitch. A must have tool for extension developers.

RSS feed for comments on this post