XUL/E – What If

WPF is the coolest thing an MFC programmer has ever seen. Of course, developers who have been working with declarative markups (HTML, SVG, XUL or Laszlo) and RAD form builders (Delphi and VB) are not hyperventilating. Sure, its nice that Microsoft has introduced a development platform that is actually easy to use, but such platforms have been around a while. Now, WPF/E is ready to take rich internet application (RIA) development by storm. Its not the first (XUL, Flash, Flex and Laszlo are not betas), but Microsoft’s entry is not to be taken lightly.

The WPF/E hype and the quest for a non-Adobe SVG viewer in Internet Explorer (IE) made me to start to wonder what it would take to get Mozilla’s platform running in IE. Turns out, it’s easier than I thought:

  1. Get XULRunner on your Windows machine.
    (From Mozilla or as part of my XUL Explorer)
  2. Register the Mozilla ActiveX control
  3. Mark control “Safe” or Tweak IE’s security.
    (You can register and mark the control safe using this patch)
  4. Done!

This could even be made easier (zero steps) by creating a CAB file for XULRunner and adding code to the Mozilla ActiveX control to mark itself “safe”.

Control Setup using Patch

  1. Unzip the patch files to wherever you installed XULRunner. If you just installed XUL Explorer, XULRunner is in a subfolder.
  2. Execute “mozactivex-reg.bat”

For those of you wondering about the “patch”. It simply registers the Mozilla ActiveX control and then adds 2 registry keys to the control that tell Windows that the Mozilla control is “Safe for initialization” and “Safe for scripting”. See this Microsoft page for more information.

XUL/E Samples
These samples can be run in Firefox (any platform) and IE (windows). Make sure you have installed and configured the Mozilla ActiveX control. The difference between these links and the ones on a previous post is that these are displayed using a special “viewer” HTML page.

Note: If using IE7, the yellow information bar will prompt you to let the Mozilla ActiveX control run. In IE6, you will see a dialog prompt.

Not only can you create rich clients in IE using XUL, but you can also view SVG in IE! As always, feedback, comments and new ideas are welcome.

Extension Hacks Wanted

A large part of my job at Mozilla is trying to make life easier for extension developers. In order to do my best, I need to understand the pains of extension developers. Up to now, I have been writing various types of extensions myself (sidebars, statusbars and components) to try to understand what an extension developer goes through. I even download extensions just to look at the code, trying to find comments like “hack” or “sucks”. But really, that’s not enough. So now I am asking extension developers directly:

What can Mozilla do to make writing extensions easier?

The title of this post mentions hacks, but I am interested in all aspects of extension development:

  • Tutorials
  • Installation / Updating
  • Using frozen XPCOM interfaces/ components/ services
  • Intergating into Firefox/ Thunderbird UI code
  • Protecting against version to version breakage
  • Documented best practices (or lack of)
  • Anything else (extension related)

Feel free to leave comments on this post (preferred) or send to mark dot finkle at gmail dot com

XUL Clippings

I thought I’d pull together some simple XUL examples you could load into XUL Explorer. It might help you get started using XUL Explorer. It may also help first-timers begin to see how XUL can be used to create a UI. Sometimes starting from scratch can be a hurdle.

Note: These are simply XUL files and if you’re using Firefox (or another XUL enabled browser), clicking the links will open the files in the browser instead of downloading to your machine. Right-click on the links and pick “Save Link As…” to save them to your machine.

XUL Explorer 0.2

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:

  • Preview tab has been removed. The preview pane now appears below the editor pane. Previewing in a popup window is still available.
  • Option to automatically update the preview as the editor changes. (Thanks to Richard Klein)
  • Indicator in the statusbar shows errors. Double-click to display Error Console.
  • Option to specify the snippet used to load the editor on startup.
  • Option to include a user snippet file. The snippets are merged with the builtin snippets at startup.
  • File > New allows user to pick any “Template” snippet, as well as blank.
  • Simple XUL Checker can be used to ‘validate’ the XUL snippet. This is fairly basic for now: It checks for legal element and attribute names, including allowed attributes for a given element.
  • More than a few bug fixes

xulexplorer-02.png

Here are some things I am considering for the future:

  • Support attribute value checking where appropiate (boolean and enumerated values) – XUL Checker
  • Support “best practice” checks such as: using of commands and keys, strings in DTDs and so on – XUL Checker
  • Multi file support (probably use a tab for each file/editor).
  • Venkman support
  • Support extension creation – perhaps by using Test mode

Keep the feedback coming!

Install: xulexplorer-setup-0.2.exe 5.7MB
Source: xulexplorer-src-0.2.zip

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.

Code Snippets – Get Your Code Snippets

If you’re new to Firefox extension or XULRunner programming, one of the first things you may want to do is find a good tutorial to help get a “hello world” project bootstrapped. Mozilla Developer Center (MDC) has more than a few to help you get started: Firefox Sidebar, Firefox Statusbar, XULRunner Application. We are working to get more on the way too.

The next thing you may need is small code snippets to help show you how to do common things. Things you probably already know how to do in another language or framework. You just need to know how to do it with XUL, JavaScript and XPCOM. You should definitely check out the Code Snippets section on the MDC. There is also an Example Code section on Mozillazine.

If there is something you want to know how to do, but it’s not on the MDC yet, let me know. Also, for any of you experienced Mozilla developers out there, go check out the code snippets and please add some of your own. Just keep the code snippet short and sweet, we’re not writing a full sample extension or application. If you do want to write a large sample extension or application, create a full blown tutorial.

Reboot

I recently accepted a job offer from Mozilla Corporation. Today, I start working as an extension evangelist / consultant – helping extension developers be more successful, productive and happy.

Mozilla has some really smart people and cool technologies. I can’t wait to get started.

Update: He really is a special guy. Thanks Mike.