Posted on

Much Ado about XULRunner

Yes, there has been a lot of talk about the Mozilla platform lately. This is to be expected considering the hype generated around Sliverlight and Apollo platforms. Most of the discussion is coming from well meaning developers, using (or trying to use) the Mozilla platform to build products. Developers who want to see the open Mozilla platform flourish in the face of closed competitors. I have a special interest in the platform too, its how I ended up working at Mozilla, so I also want to see it succeed.

Yes, Mozilla made an official announcement (Mitchell’s pre-announcement, Shaver’s preemptive-response) about the plan for XULRunner, a physical manifestation of the Mozilla platform. The announcement contains a lot of information and covers many aspects of the Mozilla platform. Mitchell discusses how the platform will be used internally, to how Mozilla will respond to the platform runtimes from Microsoft and Adobe, and everything in-between. The plan specifically covers:

  1. XUL as Language
  2. XULRunner to Support Firefox and Browsing
  3. XULRunner to Support Other Applications
  4. Stand-Alone XULRunner

Yes, there have been a few “sky is falling” responses to the official announcement. It’s my opinion that the responses have been focused too much on one item in the announcement:

The Mozilla Foundation does not plan to invest in a pre-packaged or stand-alone XULRunner at this time. We plan to re-evaluate this as we approach the release of Mozilla 2.

This quote is part of the Stand-Alone XULRunner plan (#4). The news that Mozilla will not be packaging a system-level version of XULRunner is disappointing to some people. I, too, would like to see such a product, but I think people are severely underestimating the amount of work required to make it happen. A shared, system-level component is not an easy thing to do. When multiple applications share a runtime, versioning and upgrading needs to work almost magically, or some applications will break.

Personally, I am far more interested in the first 3 points. There is some really positive information in the other points:

  • Mozilla will continue to invest in XUL. Just look at the XUL section on the Firefox 3 for Developers page. Development focus is primarily on the needs of Firefox, but should also address broader needs (“Specific examples of how this works in practice have been the inclusion of thread-safety patches and graphics patches beyond Firefox requirements …”)
  • Mozilla will continue to develop XULRunner as a platform for delivering Firefox. Anyone tracking the Mozilla 2 development knows that Firefox and XULRunner will be the primary projects. Just because Firefox will not be delivered with a shared, system-level XULRunner does not mean Firefox will not be built on XULRunner.
  • Mozilla will work with XUL application developers to help move the XULRunner platform forward. This includes working on features and bugs that no only add value to Firefox (and Mozilla projects) but also external projects. Downloadable builds of XULRunner will still be available.

XULRunner is not dead. Do not believe words to the contrary. Its time the XULRunner community begins to focus its efforts to move the platform forward and provide less negative, stop energy.

Posted on

XUL Explorer Status

Its been a while since XUL Explorer has been updated. However, I have been using it more than ever and I have been keeping a list of things that I’d like to see added. The good news is XUL Explorer is now hosted in Mozilla’s SVN repository. More good news is we created a wiki page to help track and guide development. Even more good news is that Cesar Oliviera has joined Developer Relations as a summer intern to help work on developer tools.

We are currently working on adding Venkman (JavaScript debugger) and DOM Inspector to the XUL Explorer bundle. Cesar also created a Linux tar bundle, so installing on Linux will be easier.

Feel free to use the wiki Talk page to discuss XUL Explorer features and roadmap.

Posted on

Report from CHI 2007

I was part of a session at CHI 2007 on Thursday titled “User Interface Description Languages: XUL & XAML.” The session covered some of the benefits of declarative UIs, especially with respect to the designer/developer iterative process. Scott Stanfield and myself demonstrated building UIs in XAML and XUL, respectively. We tried to show how easy it was to create and modify UI prototypes. Also, how the prototype markup could be used by developers to create the production UI, even while designers tweaked pieces along the way.

I was a little nervous coding up a prototype UI in front of the filled room, but everyone did a great job of helping me with my spelling errors and missing end tags. Someone referred to it as “pair programming on a massive scale.” It was fun and I’d be glad to do it again.

Thanks to Scooter Morris for putting it together. Here’s a link to my slideshow and prototype XUL UI (requires Firefox 3 alpha or XULRunner 1.9 alpha for the new timepicker and slider controls).

Posted on

XUL with a Ribbon

I was just goofing around, trying to see what spiffy new UI patterns we could make using XUL. I thought I’d try creating an Office 2007 ribbon style toolbar. My current result is shown here:

xul-ribbon.png

I had my mouse over the “cut” button, therefore it is highlighted. Couple of points:

  • I need to add images to the selected tab to give it a rounded look.
  • I have not added any gradients to the ribbon because its harder than it should be. We should add something to CSS to make this easier.
  • I want to add more control types to the example. A dropdown button will be really easy. It will also be easy to add the dialog launchers too
  • I have already started to think about the XBL version of this 🙂 .
Posted on

Tapestry – Yahoo Mail on XUL

I came across an interesting application of XUL and the new Yahoo email web services via Ryan Kennedy. The application is called Tapestry and its a neat little XUL-based email client. From Ryan’s post:

One person in particular, Gopal, was already building something with the web service. I had been in contact with him previously over email and had heard about his application. He invited me down to his desk to have a look and to help debug a few things. What I saw caused my jaw to drop. Gopal had built a XUL interface to Yahoo! Mail using the web service for communication with the backend. It was fast, it was pretty and he had managed to pull off client-side message threading.

Gopal’s post has more details on how he built Tapestry, as well as links to code. Very cool!

tapestry.png

Posted on

What’s New on MDC

Just thought I’d point out some new content appearing on the Mozilla Developer Center (MDC).

  • Saving Canvas to a File: Given a canvas element and a destinstion file path, this code snippet saves the contents of the canvas to a PNG file. The code could easily be tweaked to become a general purpose “download to file” instead of only handling canvas elements.
  • XUL Control Guide: This is a handy quick guide to the various XUL control elements. In addition to a picture of the control, there are also links to reference and tutorial information.
  • Observing the Download Manager: This snippet shows how you can observe the various notifications of the download manager.
  • Troubleshooting XPCOM Registration: When component registration fails its currently very difficult to figure out the cause. This article steps through a few troubleshooting tips you can use to find the problem. We hope to get better tracing and debugging of component registration failures in Firefox 3.
Posted on

XUL Explorer – Mac DMG

I finally spent some time to make a DMG for XUL Explorer. It doesn’t have fancy background images, but it seems to work. One thing that surprised me was the size, even when compressed – 18MB. Also, I find it hard to believe that the “standard” way of distributing software for the Mac is a disk image that the user needs to “drag-n-drop” on the Applications folder. Anyway.

Once installing XUL Explorer on my Mac, I did notice how poor the UI fit in with the Mac look. I’ll be working on that. I should have a Linux archive ready soon too.

Mac DMG: xulexplorer-0.3.dmg

Posted on

XUL Clippings – Midas Rich Text Editor

How to create a rich text or HTML WYSIWYG type editor in Mozilla has come up a few times so I thought a post was in order. Mozilla has a rich text editing system (called Midas) and an API similar to Internet Explorer’s. Mozilla, like Internet Explorer, supports the ability to make an entire document editable by setting the designMode property of the document object. Once in design mode, the document can be manipulated using various DHTML commands.

The API for interacting with the document is:

  • document.execCommand – Executes the given command.
  • document.queryCommandEnabled – Determines whether the given command can be executed on the document in its current state.
  • document.queryCommandIndeterm – Determines whether the current selection is in an indetermined state.
  • document.queryCommandState – Determines whether the given command has been executed on the current selection.
  • document.queryCommandValue – Determines the current value of the document, range, or current selection for the given command.

The most typical way to create a rich text editor in a XUL document is to use the element. In an HTML document, you would use the

You use JavaScript to turn on design mode:


var editor; /* global var */
function onload() {
  editor = document.getElementById("edit");
  editor.contentDocument.designMode = "on";
  setTimeout(function() { editor.contentWindow.focus(); }, 100);
}

window.addEventListener("load", onload, false);

You use the API to send commands to the document:


function toggleBold() {
  editor.contentDocument.execCommand("bold", false, null);
}

function toggleItalic() {
  editor.contentDocument.execCommand("italic", false, null);
}

function alignLeft() {
  editor.contentDocument.execCommand("justifyleft", false, null);
}

function alignRight() {
  editor.contentDocument.execCommand("justifyright", false, null);
}

I found a document that discusses the differences between the Mozilla and Internet Explorer rich editing systems.

I created simple XUL and HTML clippings to demonstrate the system. You can open the HTML clipping in a Mozilla compatible browser. You can download the XUL clipping and open it in XUL Explorer. Right-click on the link and pick “Save Link As” to save it to your machine.

midas-editor.xul
midas-iframe.html

Posted on

CHI 2007

Looks like I am headed to CHI 2007 to participate in a session on user interface description languages. The session will explore the use of markup language UI’s (such as XUL, XAML and Flex) in prototyping user interfaces before handing them off for system integration. This could allow the interaction designer/engineer to become a more integral part of the iterations in the development cycle.

I’ll be demonstrating using XUL to create a mockup user interface. Scott Stanfield will be building the same interface in XAML. Hopefully, we’ll get people interested in using UI markup.

Session Info:
User Interface Description Languages: XUL & XAML
Thursday 11:30AM – 1:00PM

Scott Stanfield, Vertigo Software
Mark Finkle, Mozilla Corporation

Update: Fixed times and added link to session

Posted on

XUL Explorer 0.3

After getting sidetracked for a while, I have finally made some progress on XUL Explorer. I have been tinkering around with the editor and integrating the XUL validator. I also reorganized the code a little so I could support sidebars in the future.

xulexplorer.png

I have been trying to stick with the XUL as much as possible. Anyone who has worked with the editor would probably tell me it’s a lost cause, but it’s also been quite a learning experience. I have added tabbed editing by dynamically creating elements inside a . It seems to work well. I make use of the tab-close-button and even change tab image if the editor is modified.

editor-tabs.png

You are prompted to save a modified editor when closing the editor or the application. One thing I have not been able to add was a way to display the current cursor position (row, column). I am still looking into it.

I rearranged the UI a little because of the tabbed editors. The preview pane is no longer below the editor. It was taking room away from the editor, so I added a code/preview toggle. I removed the “Insert Snippet” button from the Snippet Sidebar, but added drag-and-drop as a method of inserting snippets. Double-clicking a snippet also inserts it.

I added a Messages pane at the bottom of the workspace to display output from the, incrementally improved, XUL validator. I’ll probably make more use of the Messages pane in the future.

messages-pane.png

Next up for XUL Explorer:

  • Property Sidebar – Will display the structure of the XUL as a tree and properties of the selected element in a grid. Most likely, it will also allow users to insert/delete XUL elements.
  • Wizards/Generators – Will walk the user through creating XUL files, JavaScript XPCOM, extensions and XULRunner applications. For extensions and application wizards, I really need to add a Project Sidebar.
  • Project Sidebar – Will show the bundle of files needed to support extensions and wizards.

Overall, this project is still giving me lots of Mozilla stuff to play with and learn. And it’s fun.

Keep the feedback coming!

The install is still Windows only. I failed to get a Mac DMG file assembled yet, but I just got some tips on IRC. I am hoping to get Mac and Linux installs someday.

Install: xulexplorer-setup-0.3.exe 4.9MB
Source: xulexplorer-src-0.3.zip