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.
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.
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.
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: “0x80570001 (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?)
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
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…
Brilliant
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.
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.
This is great!
I vote for the automatic refresh of the UI a la “Real-time XUL Editor”
Thanks Mark for the zip. It’s work perfectly with XulRunner on Linux by executing “xulrunner application.ini”.
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?
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.
Thanks Myk — I updated xulexplorer-src.zip with the changes
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?
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.
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
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?
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! 🙂
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
Mark, you keep this up, it will be you at OSCON 2007 accepting the Grand Master Open Source Award. 🙂
fantastic! Installed for me using Wine in Linux without a hitch. A must have tool for extension developers.