Great News!

I was told yesterday afternoon that I had been nominated to become a dojo committer! I was really excited. It was something that I'd been interested in possibly doing, but didn't really think that it would happen as quick as it did.

The guys in the dojo community are very easy to work with and helpful. I'm very excited to be a part of this project.

Dojo 1.1.0

Looks like the Dojo guys have finally released version 1.1.0 of their toolkit.

I'm pretty excited for this release - since it has some of my form widgets (in dojox.form) in it. The community has been really great, and I love helping out with it. It feels good to contribute back.

Dojo Book Dashboard Widget (for Mac OSX)

I have been wanting a dashboard widget that indexes the pages for the Dojo Book so that I can quickly access items without needing to pull up the pages...well, I finally caved and wrote one myself. You can get it from http://www.toonetown.com/projects/downloads/DojoBook.zip

This was thrown together, quite literally, in about an hour - using Dashcode. I even used a custom-built version of dojo to generate the tree widget in the dashboard widget. I was pretty impressed with how easily it all came together - the biggest pain was getting the list of links in to the tree.

Now, the hard part will be keeping it up to date.

Let me know if you find this useful - and if you have any suggestions for improving on it.

Styleable Dropdown - Part II

After blogging about the Styleable Dropdown, I decided that it appeared a bit too complicated - so I decided to simplify it a bit (and also reuse more of the built-in functionality of Dojo).

Here is the new class:

dojo.provide("toonetown.dijit.form.DropDownSelect");

dojo.require("dijit.form.Button");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dijit.Menu");
dojo.require("dojo.data.ItemFileReadStore");

dojo.declare("toonetown.dijit.form.DropDownSelect", dijit.form.DropDownButton, {
	store: null,
	dropDown: null,
	hasDownArrow: true,
	_isPopulated: false,
	_lastValue: "",
	onChange: function(){},
	_getValueField: function(){ return "value"; },
	_getItemByValue: function(value){
		var ret = null;
		this.store.fetch({query: {value: value}, onComplete: function(i, r){
			if (i.length && i[0]) ret = i[0];
		}});
		return ret;
	},
	postMixInProperties: function(){
		this.inherited(arguments);
		dijit.form.ComboBoxMixin.prototype.postMixInProperties.apply(this, arguments);
		this.dropDown = new dijit.Menu();
		dojo.place(dojo.doc.createElement("span"), this.srcNodeRef, "first");
	},
	postCreate: function(){
		this._menuItemClick(this.value);
		this.inherited(arguments);
	},
	_menuItemClick: function(item){
		var str = (typeof item == "string"),
			i = str ? this._getItemByValue(item) : item,
			val = i ? i.value : null;
		if (!val || val == this._lastValue)
			return;
		this.setValue(val);
		this.setLabel(i.name);
		this._lastValue = val;
		if (!str) this.onChange(val);
	},
	_toggleDropDown: function(){
		var _this = this, dropDown = _this.dropDown;
		if (dropDown && !dropDown.isShowingNow && !_this._isPopulated)
		{
			_this.store.fetch({
				onItem:function(i){
					dropDown.addChild(new dijit.MenuItem({
										label: i.name,
										onClick: function(){ 
											_this._menuItemClick(i);
										}}));
				}, 
				onComplete: function(){
					_this._isPopulated = true;
					toonetown.dijit.form.DropDownSelect.superclass._toggleDropDown.call(_this);
				}
			});
			return;			
		}
		this.inherited(arguments);
	}
});

Isn't code reuse nice? :)

Dojo widget - Styleable Dropdown

I guess it's official now - we need to be using dojo for our development at work, so I've been trying to learn it. There are quite a few things that I like about it, and so I thought I'd start posting some of my findings as I come across them.

Today's topic - a Styleable Dropdown.

At the Ajax Experience this year, there was a presentation by Aaron Gustafson from A List Apart where he discussed various techniques for styling forms. Most form elements can be styled just fine using CSS, however, the <select> tag is not selectable. In order to do such a thing, you need to use some kind of javascript-based solution which uses elements *other* than a select.

Dojo is great at creating widgets - it's probably what it does the best, so I thought it would be a great exercise in learning dojo to create a widget that turns something like this:

<select dojoType="toonetown.dijit.form.StyleableDropdown>
	<option value="opt1">First Option</option>
	<option value="opt2">Second Option</option>
</select>

Into something that can be styled. This should be something fairly easy to do using "Dojo Magic" (Majik? Mojo? Dojic?)

The first thing I tried was to use some existing dojo widgets (dijits). First off, I tried using a dijit.form.FilteringSelect. It did one part of what I wanted by taking a <select> as its input. The problem is that it's not very stylable, and is more geared to the "ComboBox" style of doing things (allows for text entry).

What I really wanted was a dijit.form.DropDownButton - that's styleable just like I would want it, however it didn't take a <select> tag as its input. (It's kind of picky in how its input needs to be structured).

So, I ended up creating a custom widget - extended from dijit.form.DropDownButton. Efforts to make it extended from dijit.form.FilteringSelect proved too complex. The final result follows.

dojo.provide("toonetown.dijit.form.DropDownSelect");
dojo.require("dijit.form.Button");
dojo.require("dijit.Menu");
dojo.require("dojo.data.ItemFileReadStore");
dojo.declare("toonetown.dijit.form.DropDownSelect", dijit.form.DropDownButton, {
	store: null,
	dropDown: null,
	_isPopulated: false,
	_lastOption: "",
	onChange: function(){},
	postMixInProperties: function(){
		this.inherited(arguments);
		var span = dojo.doc.createElement("span"), selItem = null;
		if (!this.store)
		{
			var items = dojo.query("> option", this.srcNodeRef).map(function(node){
					node.style.display="none";
					return { value: node.getAttribute("value"), name: String(node.innerHTML) };
			});
			this.store = new dojo.data.ItemFileReadStore({data: {identifier:"value", items:items}});
			if(items && items.length && !this.value)
			{
				selItem = items[this.srcNodeRef.selectedIndex != -1 ? this.srcNodeRef.selectedIndex : 0];
			}
		}
		this._initSelect(selItem, span);
		if (!this.dropDown)
		{
			this.dropDown = new dijit.Menu();
		}
		dojo.place(span, this.srcNodeRef, "first");
	},
	_initSelect: function(item, span){
		if (item)
		{
			this.value = item.value;
			span.innerHTML = item.name;
		}
		else if (this.store)
		{
			var _this = this;
			this.store.fetch({onComplete: function(i, r){ 
				if (i.length && i[0]) _this._initSelect(i[0], span);
			}});
		}
	},
	_menuItemClick: function(item){
		var val = item.value;
		if (this._lastOption != val)
		{
			this.setValue(val);
			this.setLabel(item.name);
			this._lastOption = val;
			this.onChange(val);
		}
	},
	_loadCallback: function(items, request){
		var dropDown = this.dropDown, _this = this;
		if (!dropDown) { return; }
		dojo.forEach(items, function(item){
			dropDown.addChild(new dijit.MenuItem({
					label: item.name,
					onClick: function(){ _this._menuItemClick(item);}}));
		});
		_this._isPopulated = true;
		toonetown.dijit.form.DropDownSelect.superclass._toggleDropDown.call(this);
	},
	_toggleDropDown: function(){
		var dropDown = this.dropDown;
		if (dropDown && !dropDown.isShowingNow && !this._isPopulated)
		{
			this.store.fetch({onComplete:dojo.hitch(this, "_loadCallback")});
			return;			
		}
		this.inherited(arguments);
	}
});

This fulfills all my requirements - now I just need to work on styling it - and probably marking it up too... :) I just figured I'd post it to my blog, as was also suggested at the Ajax Experience.

GLib Universal Binary Framework

OK - so in the spirit of "If you can't find it, build it yourself", I finally got around to setting up a universal binary build of glib. It builds into a mac os framework.

Just download the file http://www.toonetown.com/projects/downloads/GLibFramework-2.12.3.zip, as well as version 2.12.3 of glib from gtk.org. Unzip the framework file and you will have a "macos" folder. Place that folder at the top level of the untarred glib sources and open up the file macos/GLibFramework/GLibFramework.xcodeproj in xcode and build!

This is the first step to my ultimate goal of getting WireShark to compile natively - as a universal binary. :)

Java-Readline on Mac OS X Update

EDIT 11-30-2006: The binary files linked below are now compiled as Universal Binaries. I have no access to an Intel machine, so I would appreciate it if someone could test it and post a comment on how it worked. In order to compile as universal binaries, you must have the latest version of XCode installed, and follow the instructions in red below

DarwinPorts is a great project, but I hate using when I don't have to. Mac OS X (at least Tiger does) comes with a readline compatibity already installed - so I have updated these instructions so that you can create a java-readline installation WITHOUT installing DarwinPorts.

The steps are a bit more involved...but here they are:

Download the libreadline-java source from the project site.

Unpackage.

In the source root, edit Makefile and make the following changes:

• Add JAVA_HOME = /Library/Java/Home below the line # Operating system dependent
• Make the JAVANATINC variable read $(JAVA_HOME)/include
• Change LD_LIBRARY_PATH to be DYLD_LIBRARY_PATH

Now, edit src/native/Makefile and change the following:

• Change the LIBPATH variable to be empty
• Change the CFLAGS to -isysroot /Developer/SDKs/MacOSX10.4u.sdk -arch i386 -arch ppc -fno-common -DMAC_OS
• Change $(CC) -shared (OBJECTS) $(LIBPATH) $($(TG)_LIBS) -o $@ to $(CC) -bundle -flat_namespace -isysroot /Developer/SDKs/MacOSX10.4u.sdk -arch i386 -arch ppc $(OBJECTS) $(LIBPATH) $($(TG)_LIBS) -o $@
• change the JavaReadline_LIBS variable to be -lreadline -ltermcap

Now, you need to edit src/native/org_gnu_readline_Readline.c and make the following changes:

• On lines 98, 114, 213, and 224, change #ifdef JavaReadline to #if defined JavaReadline && !defined MAC_OS
• On lines 216, 235, and 475, change #ifdef JavaEditline to #if defined JavaEditline || defined MAC_OS

Now, you can run make, and you will end up with libJavaReadline.so and libreadline-java.jar.

Rename libJavaReadline.so to libJavaReadline.jnilib.

Move libJavaReadline.jnilib and libreadline-java.jar to /Library/Java/Extensions to install it and have it available to all java processes.

To test, run java test.ReadlineTest from the command line.

Have fun! Now, you can install HenPlus on Mac OS X easily!

If you are lazy, you can try out the pre-compiled binaries that I have available here - after unzipping, just move the two files (not the entire folder) into your /Library/Java/Extensions directory. NOTE: these *may* only work on OS X 10.4 and up - I have only tested them on that platform, and they are *not* universal binaries - PPC only.

Java-Readline on Mac OS X Howto

EDIT: I have updated these instructions so that you can build using the already-installed readline libs that come with OS X (at least Tiger). See the new instructions here.

I have been trying to get java-readline compiled on mac os, and there were references to a blog entry on it, but the entry is now gone.  I found it on archive.org, and here are the instructions I used to get it running:

Using darwinports, do: port install readline

In the source root, edit Makefile and make the following changes:

• Add JAVA_HOME = /Library/Java/Home below the line # Operating system dependent
• Make the JAVANATINC variable read $(JAVA_HOME)/include
• Change LD_LIBRARY_PATH to be DYLD_LIBRARY_PATH

Now, edit src/native/Makefile and change the following:

• Add -I/opt/local/include to the end of the INCLUDES variable.
• Change the LIBPATH variable to be -L/opt/local/lib
• Change the CFLAGS variable to -fno-common
• Change $(CC) -shared $(OBJECTS) $(LIBPATH) $($(TG)_LIBS) -o $@ to $(CC) -bundle -flat_namespace $(OBJECTS) $(LIBPATH) $($(TG)_LIBS) -o $@

You should now be able to run make and get libJavaReadline.so and libreadline-java.jar. You'll need to rename libJavaReadline.so to libJavaReadline.jnilib.

I put both of these in /Library/Java/Extensions, which makes the library available to all Java processes that are started as you. Make sure everything works by running java test.ReadlineTest from the command line.

Callisto

Yeah - I'm finally downloading the newest version of Eclipse - Callisto!

I'm so happy!

Mac Development

OK - so I just have to say that developing on the Mac is actually quite an enjoyable experience. It's very easy, and XCode is quite a decent IDE.

I also like how it seems to be a perfect blend of stability and flexibility.