Apple’s Interface Builder rocks

Interface Builder included with the Apple developer tools is as easy to use as VB but a far more powerful user interface tool.

I’ve never been fond of the user interface builders that I have used in the past, mostly because the layout managers in them (at least in Java) are so bad that you almost always have to resort to GridBagLayout to get it right. The UI builder in VB is good, but doesn’t help you much when you go to connect components, almost all of that is done in code. Also, its layout manager is at least as atrocious perhaps worse than most Java systems. Hard coded positions for things is a nightmare.

Apple’s Interface Builder aims to solve all that for the Cocoa (Apple’s newest UI framework) application developers. IB gives you ability to quickly create Aqua compliant user interfaces that are already hooked up and ready to go, just add business logic. I had played around with it before but never long enough to realize how powerful it was. This time I decided to try and build a complete application using the Cocoa-Java framework. Cocoa is much like the .NET libraries, it is accessible from multiple languages including Obj-C, Java, Python, Dylan, Ruby, and others. I haven’t found a Lisp one though so if someone knows of one I’d like to hear about it.

So how do you go about building an interface in IB? Everything is drag-n-drop including new windows. Drag a Window onto the desktop and it pops open waiting for more components. Whenever you drag a component onto a window little hints show up in the form of guides that tell you where Aqua design guidelines say things should go. I don’t even know what the guidelines are, I took its word for it and everything seemed nicely separated, sized, and centered. It’s almost fool proof, except that some of us, including myself, don’t really have any idea how to make a good UI. This will help you make one that is pleasing to the eye, but you have to make it easy to use. My application is little applet designed to help you cheat at scrabble, here is the UI that I ended up with:

Picture 1.pdf

The first textfield is for the letters you have in your tray, the first scroller is for the number of spaces open before the board letters, the second textfield is the letters on the board, and the second scroller is for the number of spaces open after the board letters. Obviously this isn’t the best possible user interface, the best one would just be a picture of the board a button that says “Next best play” but I don’t really want to go that far with it.

After you have drawn your interface most people now create a view controller. This is a class that manipulates the data from view, pokes at the model, and updates the view. In IB this is done by subclassing NSObject usually:
Picture 2.pdf

Once this is done you then add Outlets (fields in your class that hold references to components) and Actions (things that other components can activate). This model makes it very easy to build a decent MVC architecture without even trying. Now you instantiate one of these MyController objects and it adds it to your instances tab and then hook up the actions and outlets to the user interface:
Picture 3.pdf

This sets it up so that whenever the text in the textfield changes a method is invoked on MyController and I can then change the model which is updated and then I can put that back into the view. All ridiculously simple. It took me a bit to get my head around the Outlets/Actions concept mostly because I was just using IB without even reading the manual, but now that I have it firmly in my head building a UI couldn’t be much easier.

At the end of the day though I still have a Mac OS X specific application. It would be nice to have this exact tool in Java or something very similar. If someone knows of a good tool that is reliable and easy to use that generates Java Swing code, please send me a link. For those of you that have a Mac I’ll include here the application and the project:

App:Scrabble.dmgProject:ScrabbleProject.dmg