Squeak
  links to this page:    
View this PageEdit this PageUploads to this PageHistory of this PageTop of the SwikiRecent ChangesSearch the SwikiHelp Guide
Eye Candy III
Last updated at 2:28 am UTC on 11 April 2007
Here's the look that we're going to work on next:

fancywork.gif A 200K GIF file which is a picture of the project. (I separated this out of the text for slow bandwidth users).

Different colors, fancy buttons, the whole nine yards. And I'm going tell you some extra stuff, like Morphic menus. For this example, your display should be set to a bit depth of 16.

Here's the changeset: eyecandy.cs
And here's a page with the code: Eye Candy III



There's a couple of things I'd like to talk about at this point. I'm changing the format a bit as our code base grows. First, as you have probably noticed, there is quite a bit of code in the changeset. Rather than go through each method by tedious method, I'm just going to point you to several interesting methods, and leave the rest for you to explore. Second, I'm going to talk about how I designed the 'Fancy Workspace' window. Also, throughout the text I will intersperse some things you need to think about when you are putting together your own user interfaces.

Let's look at the GradientButtonMorph first. If you remember back a couple of pages, when we created a button the initial color was gray at the top and black on the bottom, with black text. Obviously, this was way bad. Way bad for a couple of reasons. First, there is not enough contrast to indicate to the user that this is actually a control of some sort. Rule number 1: If you put a control on the screen, let people know that it is a control and not just some fancy decoration. You're taking up valuable screen real estate, advertise! Rule number 2: There's that whole people thing. As you know, a lot of folks (especially males) have varying degrees of color blindness, so you need to have light/dark contrast in addition to color contrast in your design. Also, you can get away with light to dark, but usually not dark to darker. So those gothic themes that you see that are variations of dark gray to black are just about invisible to a lot of folks. When you first saw the ButtonGradientMorph you thought, "This really sucks". You were right.

So the first fix is in GradientMorphButton #initialize where we assign the topColor to be lightGray and the bottomColor to be black. So try:

GradientButtonMorph new openInWorld

and you'll see a much shinier and brighter GradientButtonMorph smiling back at you. You may actually be able to read the text on the button now too.

Let's talk a little bit about sizing a button. Throughout the Morphic system you'll see things like: #extent: , #position: and #layoutChanged. These are usually located in the category "geometry". #position: places the Morph at a particular location in the World. #extent: sets the extent, or the size, of the Morphs bounding rectangle. #layoutChanged is sent to the Morph when someone has changed the geometry of the Morph, such as changed the bounding box. As an example, when we receive a #layoutChanged message in GradientButtonMorph, we recenter the label within the bounding box of the button.



The idea for the 'Fancy Workspace' is simple. Add a row of frequently used tool buttons at the top of a Workspace window. This idea is lifted from Stephen Travis Popes STP 12 tools. This implementation shows how to do a generic toolbar. You can just as easily substitue iconic buttons for the GradientButtonMorphs or draw a bitmap on top of the GradientButtonMorphs for an iconic toolbar if you want to.

Our old friend the AlignmentMorph is the container that holds the buttons, and is responsible for lining our ducks up in a row. We simply create an AlignmentMorph, with the orientation set to #horizontal, and add our buttons. This is done in WorkspacePane #addButtons. Also in #addButtons are several lines of the form:

button setBalloonText: 'Open up a System Browser window'

#setBalloonText: is a message which sets a Morphs balloon text. Ballon text is displayed if you allow the cursor to stay over a Morph for a little while. An exampl