Displaying a Color object as a user interface element in Pharo, a look under the hood

One of the things I want to be able to do in Pharo is build user interfaces so that non-programmers can interact with and use the programs that I am building to learn object-oriented programming. There are a few options for this but GUI support for Pharo doesn't have much documentation.

There is a chapter in a free book called Pharo by example which introduces us to some of the things we can do with Morphic in terms of user interface.

The first example given in the book was displaying a color. This is an extremely simple example.

I'm the kind of person who installs an npm package like sass and then spends a good while looking up what each of the dependencies are and whether they are needed.

So of course I over analysed everything under the hood of these very simple code snippets and shared it all below, now you know too, yayy!

Creating User Interface for the Color object

A 'morph' is a user interface representation of an object. Everything in Pharo is an object, and every object can be made into a 'morph', including the objects that you write yourself.

Message to turn Color object into UI with Morph in Pharo

Following a quick example, I turned a Color object into a morph 'user interface' element by adding a method to it called 'asMorph'. This method returns an instance of the 'Morph' class that is sent the current object as a message. The Morph class knows how to turn the object it is send into a user interface element. You can turn any object into a morph by writing a similar method. The steps I followed to add the 'asMorph' method to the Color class are:

1. I opened the System Browser (Command-b), then searched for 'Color' in the package list.
2. One of the results that showed up in the package list was 'Colors', so I clicked on that.
3. A list of all the classes belonging to the 'Colors' package appeared in the classes pane, 'Color' was one of the class names. I clicked on that.
4. A list of all of the methods belonging to the Color class appeared in the message pane. I clicked on the 'instance side' option which opened up a method template in the editor spanning the lower half of the System Browser screen.
5. Finally, I replaced the method template code with the following method and 'accepted' it by saving.

  asMorph
    ^ Morph new color: self

asMorph explanation

• The first line is the name of our method (called messages in Pharo because we send them as messages to objects that can 'recieve' them).
• The second line returns a new Morph object that is given the color value stored in the Color object we are sending this message to.

Displaying Color object as User Interface element

To display our Color object as a user interface element on the 'World' in Pharo, we can send the 'asMorph' message we wrote to an instance of the Color class that we write in the Playground.

  Color red asMorph openInWorld

The code above sends three messages to the Color class.

• red - the Color class has a set of default color names that it can recieve as messages, of which red is one. Behind the scenes, all default color method returns a registered color object. (I found this out by looking for the 'red' message in the class side methods of the Color class. It was listed under 'defaults'.
• asMorph - the asMorph message is the one that we defined on the Color class. It returns an instance of a Morph user interface for our Color object.
• openInWorld - the final message 'openInWorld' does just what it says. It opens the interface element in the World so that we can see it.

Yep, this is all the code did, and I spent an hour writing an in-depth explanation about it and actually had a ton of fun. Okay, time to step away from the computer...