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

23 Aug 2019

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

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.

pharo dev environment screenshot with color object displayed as user interface element

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...