The Simplest Thing That Can Possibly Work

Today we start from the beginning all over again. From now on, I'll be taking Fridays to post a series of How To posts. But, instead of the previous madness of going into architectural details first, we'll instead go from the top down, explaining things as we go. Oh, and this week I'm one day early because I'm off this Friday.

As with every tool and language, the first thing everyone wants to see is a brain dead Hello World application. Far be it for me to disappoint.

And, since Smalltalk is supposed to be E-Z, we'll do it in 3 lines of code... we could do it in 2, but we don't want to show off.

Step One: Create A UserInterface

In Widgetry, your working environment is a UserInterface. So, the first thing we want to do, is create a UserInterface subclass. I'll use the browser's (none) package for my work:

	Smalltalk defineClass: #HelloWorld
		superclass: #{Widgetry.UserInterface}
		indexedType: #none
		private: false
		instanceVariableNames: ''
		classInstanceVariableNames: ''
		imports: 'private Widgetry.*'
		category: '(none)'

That's line 1.

To see if what we've done is working, we can write the following in a workspace, and "Do it":

	HelloWorld open

Here's what you should see if you're running Windows XP... The window adornments will be different depending on your platform.

Step Two: Add the Hello World text as a DisplayLabel

The UserInterface framework of Widgetry, has a series of methods that get called automatically when opening a UserInterface. Today, we'll just concentrate on one of these: #createInterface

#createInterface has the following comment in the UserInterface:

	"Here the user can override to add code to actually create and add panes to the user interface"

So, in our HelloWorld class, we'll add an instance method called, createInterface. If you want, you can add a protocol by the name "interface building" and add this method there. Here's the code:

	createInterface

		| displayLabel |
		displayLabel := DisplayLabel string: 'Hello World'.
		self addComponent: displayLabel

That's lines 2 and 3 (well, if you include the name of the method and the declaration of the temporary variable, it's 2, 3, 4 and 5)

Now that we're done with our Hello World program (yes, it's that simple), we can see if it works by evaluating our workspace code:

	HelloWorld open

And here is what it looks like:

Details

We created a DisplayLabel by sending the class creation message #string: and passing in a string. That's pretty straight forward.

We then send the #addComponent: passing the DisplayLabel we just made. This is an important bit of framework.

Widgetry has a standard API that allows you to add panes to other panes. There are panes, such as a DisplayLabel that don't allow you to add other panes to them, and others that do. In this case, we are really adding the DisplayLabel pane to the main window. UserInterface has a lot of ease of use methods that make getting and adding and manipulating panes that are in the main window easy.

In general, any pane that can have sub-panes, such as the Window in our case, responds to the message #addComponent:.

Our DisplayLabel displayed in the upper left hand corner of the main window. By default, all panes are created with a layout object in them, called a Frame, which puts itself in the upper left hand corner of whatever pane it is put into.

Also by default, the area that a pane takes is 0. There are two exceptions, and DisplayLabel is one of them. The other is a DisplayImage, which we'll get to in a later posting.

In general though, you'll want to change the layout object (again called a Frame in Widgetry parlance) if you want it to be seen. The DisplayLabel, being that it has a string, can figure out for itself what the minimal area is to display itself. So we don't have to do anything, and our Hello World work is done.

Extra Credit

If we wanted to, we could have written our createInterface in one line of slightly more obfuscated Smalltalk code:

	self addComponent: (DisplayLabel string: 'Hello World').

That seems like cheating, doesn't it? It does to me, particularly when I'm trying to do a How To, and not a hackathon.

But that's not the extra credit for today. Today's extra credit is to make our DisplayLabel sit in the middle of the window. Here's the createInterface method that does that:

	createInterface

		| displayLabel |
		displayLabel := DisplayLabel string: 'Hello World'.
		displayLabel frame: AlignmentFrame new.
		self addComponent: displayLabel

We can see what it looks like by again evaluating our workspace code:

	HelloWorld open

And here is what it now looks like:

Isn't that pretty?

And So It GoesSames