Squeak
  links to this page:    
View this PageEdit this PageUploads to this PageHistory of this PageTop of the SwikiRecent ChangesSearch the SwikiHelp Guide
Exercise: construct a launcher window with an AlignmentMorph
Last updated at 9:31 am UTC on 28 July 2020
Note: This page is extracted from the page about The AlignmentMorph.
The topic is the construction of a launcher window by direct manipulation in Morphic.


Because graphical user interfaces are based on geometry, Morphic provides some container type Morphs to help 'line up' its submorphs. AlignmentMorph is one of them.

Though the class Morph with proper configuration can do the same as the AlingmentMorph, AlingmentMorph has some interesting default values already set.


As an example,let's build a simple window launcher type of application.

Let's practice first. Execute:

 myLauncher := AlignmentMorph new openInWorld.

then:

 myLauncher addMorph: ( SimpleButtonMorph new).
 myLauncher addMorph: ( SimpleButtonMorph new).
 myLauncher addMorph: ( SimpleButtonMorph new).
 myLauncher addMorph: ( SimpleButtonMorph new).
 myLauncher addMorph: ( SimpleButtonMorph new).

this gives us five buttons all labeled 'Flash'. And they're laid out horizontally. Let's switch that real quick. Ctrl click on the AlignmentMorph to bring up the menu. Select 'orientation...' Currently it's set on horizontal, so let's switch that to vertical. Select 'vertical'. The buttons switch to a vertical alignment! All automagically.

Let's resize the AlignmentMorph to enclose the buttons. Command click the AlignmentMorph, and grab the yellow resize handle. Notice that when you shrink the AlignmentMorph, the smallest you can go is the rectangle that contains all of the buttons.

One of the cool things about Morphic is that the system is live while we're working. You can grab any Morph you see on the screen and inspect, explore, or send messages to it. Let's see how we might use the Explorer.

First select the top 'Flash' button. We do this by Command clicking on the button. The first click brings up the topmost Morph, which is the AlignmentMorph. Do another Command click on the button. Now click on the red menu handle to bring up the Flash buttons menu. From the menu, select 'debug' then 'explore'. At this point, you should have an Explorer open on the screen. Click on the triangle to the left of 'root: ...' to see the contents of the button.

Let's rename the button. Make sure that 'root: a SimpleButtonMorph ... ' is selected (highlighted).

Go to the bottom pane of the Explorer, and type: self label: 'Browser', and do-it (Command D). Notice the name of the button on the screen changes, and the AlignmentMorph changes its size to accommodate this. We could also have done this from the button's menu. Bring up the button's menu, and select 'change label'. And type in the name that you want.

The Explorer is a powerful tool that not only explores the Morphic world, but also allows you to send messages to different objects in the system. Just remember that 'self' refers to the currently selected object in the upper pane.

We want action, and we want it now !!!

Select the 'root: a SimpleButtonMorph ... ' in the Explorer. In the lower pane type
 self target: Browser'
and do-it.

Now type
 self actionSelector: #openBrowser

and do-it.

Now type
 self actWhen: #buttonUp
Click the triangle on the top line of the Explorer, then again to refresh the browser. The target: should read 'Browser', the actionSelector: should be 'openBrowser', and actWhen: should be #buttonUp. In other words, when the buttonUp event is triggered, we are going to send the message #openBrowser to the class Browser, i.e. Browser openBrowser.

Go up to the Browser button and click it. And up pops a Code Browser !



Back to page The AlignmentMorph.


Exercise: construct a launcher window - version 2

See also Example - aMorph addMorph: anotherMorph (no layout and TableLayout)

tagBeginner