XUL Designer

Must-have tools for development on Mozilla

2005-02-13T15:10:00.000+02:00

Just in case someone interested in developing on Mozilla doesn't already know about these tools:

DOM Inspector: Useful for HTML and XUL developers alike, as it lets you see the DOM tree and tells you everything you want to know about the elements in the DOM. Very handy when you're constructing your document on the fly.
Venkman: Indispensable debugging tool for javascript. Learning how to use Venkman will be worth it, trust me.

There are also a couple of handy environment variables a developer should know about, Getting Started at Mozillazine Knowledge Base Extension Development page explains them. The whole KB is a good resource.

Robert O'Callahan on re-inventing the wheel

2005-02-12T00:23:00.000+02:00

I firmly believe a XUL IDE should use XUL as the UI language. It's all about image: If developers look at XUL and see that the IDE is built using java (or whatever), what does that tell them?... Mozilla is a great platform, and that message should be underlined, not undermined.

However, using an existing framework (like Eclipse) to do the heavy lifting is probably a very good idea. Robert O'Callahan wrote wisely on the subject on Mozcreator mailing list in August 2004:

One of the big chunks is a framework for managing project resources like files, JARs, etc. You can have different types of editors for each resource, you can store metadata (like build preferences) anywhere in the resource tree, there's a compare framework to do diffs of resources, export and import them, etc. Eclipse offers very nice integration with version control systems such as CVS and others.
Another piece that's very powerful is the editor framework. It makes it pretty easy to do syntax highlighting, fancy margin annotations, autocomplete, hooks for incremental builds when you change a small part of a text file, code templates, and much more.
[...]
I know I'm always tempted to build new frameworks myself from scratch, because it feels like you have more control and it's more fun to write code than to learn someone else's big framework. When I start fresh it's also easy to imagine that I'll do a better job of avoiding mistakes and bloat that the last project. But building on something like Eclipse has its advantages. You get the benefits of someone else's ongoing investment; in this case, a team continually developing and improving the Eclipse core. Eclipse also has mindshare advantages; lots of users, and IBM's investing a lot of money in getting universities to use Eclipse for both teaching and research and development. And I don't think Eclipse is that hard to learn; there are a huge number of plugins out there for all kinds of things, with source code. Lastly, even if you end up not using Eclipse, I urge you to study it. The guys who built it have a long history of building IDEs and know more about that subject than you or I. You'd learn a lot from them, and whatever you do build will be better for it.
(source)

Amen to that.

Working on a proof-of-concept

2005-02-11T22:20:00.000+02:00

I've started work on a proof-of-concept drag'n'drop designer for XUL. Things I'm interested in testing:

How does a drag'n'drop interface work in designing UIs with XUL, a box-model user interface language?
What kind of cursor/selection systems could be used to leverage the unique aspects of the box-model? Copying ideas from some absolute-positioning Forms Designer won't work here.

I'm not going for a real IDE, so anything outside of those study goals that accidentally gets implemented, will be more or less 'placeholder'. I do want to have some elements of a 'Design Environment' present, since a d'n'd designer canvas can't exist in a vacuum - e.g. an Element Attribute Inspector and Undo/Redo are needed.

I'm not going to research 'prior art' much beforehand, I want to see if my own ideas on this are any good...

Some design details:

Although designing XUL is box-oriented design, the pure boxes (<box>, <hbox>, <vbox>, <bbox>) are actually not interesting to the developer. I believe normally the developer should not have to mess with boxes - they should be automatically inserted, modified and removed.
Cursor location (or a drag'n'drop target) is defined as
- bool invertedOrientation,
- bool beforeSibling,
- node sibling,
In other words the cursor is any border of any element.
There are four types of elements (GUI-wise):
- box elements were mentioned before.
- basic elements can be d'n'd manipulated.
  Example: Button
- container elements can be d'n'd manipulated, but are not useful by themselves. They need other elements inside them.
  Example: Menulist
- ingredient elements can only live inside specific containers, and cannot be d'n'd manipulated (or the d'n'd functionality is different from other elements). They can be manipulated by other means, e.g. a Menulist might have context menu choice add menuitem.
  Example: menuitem

I won't try to support the whole XUL widget set, but I will try to implement examples of each of the element classes I mentioned.

Development environment for XUL?

2005-02-03T16:29:00.000+02:00

This is a list of XUL IDE/Designer/Editor projects I've stumbled upon. If you know of any others, please let me know.

Vixen

"The Visual XUL Environment"
A 'statement of intent' written in (probably) September 2000 by Ben Goodger. This guy Ben seems to have decided to use his time on some obscure web browser project since writing that ;) Anyway, there's also a Requirements page.
No releases, no code.

XULBuilder

"A graphic editor to build and render XUL interfaces [...] designed to use absolute positioning, allowing users to drag and drop widgets to any desired position".
Seems to be java-based.
A claimed alpha release in 2003, but no files to download, except in CVS. Looks abandoned.

XULMaker

"A visual XUL application builder".
Uses javascript and XUL.
Version 0.51 XPIs released in August 2004. Does not work with Mozilla 1.7 and upwards or in Firefox.

MozCreator

"A cross-platform, java-based development environment for the Mozilla platform"
M1 (alpha) release in January 2005

Xcube

"the definitive IDE for XUL"
Seems to be js+XUL based
Started January 2005. No releases, files available on CVS.

Launch!

2005-02-03T13:46:00.000+02:00