Pluggable Morphs Demo
Last updated at 2:00 pm UTC on 30 May 2018
2018
Elaboration of PluggableTextMorph demo 1.
2008
General Information
If you are looking for some information concerning pluggable morphs, perhaps this set of simple demos will show you how to use them.
This project was created in order to ease the understanding this stuff. (NOTE: An error is thrown when loading the project into Squeak5.1-16548, however, the code does get loaded. 20170330. Loads fine into Squeak6.0alpha-17058)
It shows you how to use:
- PluggableButtonMorph
- PluggableTextMorph
- PluggableListMorph
- PluggableMultiColumnListMorph
Project file:
Instruction for loading it into Squeak
With Squeak web-browser plugin you may find it online: PluggableMorphsDemo
All categories provided by this project are put to `Demo' package.
Details about the Demo
When you open the project, you can see several morphs placed around.
- Some of them (one yellow and several blue TextMorphs) contain various hints about what the project is about.
- Some of them (several green SimpleButtonMorphs) start the particular demos.
The recommended order in which it is recommended to study the demos is :
- ButtonDemo1 (the easiest of all demos)
- ButtonDemo2
- ButtonDemo3
- TextDemo1
- TextDemo2
- TextDemo3
- ListDemo1
- ListDemo2 (the most complex of all demos)
You may first try to run the demos and see what they are about and then you can browse the appropriate code to find out how it works.
The first two demos show what can be done with PluggableButtonMorph.
ButtonDemo1
The first demo can be started with the ButtonDemo1 label. It will invoke the ButtonDemo1 class>>example method. The code shows you how you can create a PluggableButtonMorph instance which when it is pressed will send a message with given unary selector to a given target.
The button is constructed in the following way:
b := PluggableButtonMorph
on: [Transcript show: 'something'; cr]
getState: nil
action: #value.
b label: 'show ''something'' on Transcript!'.
b position: 100 @ 200; openInWorld
During the object construction we have specified the following two important things:
- the target of the message (in our case it is a block context object).
- the action selector which is sent to the target when user presses the button (in our case it is #value selector)
NOTE: Please ignore the parameter after keyword getState: for now. It will be explained in one of the following demos.
The second command sets up the constant label of the button.
The third command positions and shows the button in the world.
ButtonDemo2
The second demo can be started with the ButtonDemo2 label. It will invoke the ButtonDemo2 class>>example method. This demo is somewhat similar to the previous one. We also specify some sort of target, selector to be sent to it. Look at the code which creates the PluggableButtonMorph instance:
model := ButtonDemo2Object new.
button := PluggableButtonMorph on: model getState: nil action: #act label: #asString.
button position: 100 @ 220; openInWorld.
Druring the PluggableButtonMorph instance construction we specify the following three things:
- the target model
- the action selector #act
- and special kind of selector #asString which will be sent to the target after the button is pressed (and the action selector is sent to the target) to querry the button's label. It is thus possible to reflect the model's state in a button's label.
NOTE: Please ignore the parameter after keyword getState: for now. It will be explained in one of the following demos.
ButtonDemo3
It demonstrates how you can create a button whose color will reflect model's internal state. It is constructed as follows:
example
b := PluggableButtonMorph
on: Switch new turnOff
getState: #isOn
action: #switch
label: nil.
b label: 'some constant label'.
b onColor: Color red offColor: Color lightGreen.
b position: 100 @ 240.
b openInWorld.
The selector #isOn will be used to ask the model whether the button should be "on-colored" or "off-colored".
The following three demos demonstrate the PluggableTextMorph
PluggableTextMorph demo 1
TextDemo2
Similar to the previous demo but when the user yellow-clicks the PluggableTextMorph, some menu appears. If you want to see how this can be achieved, you might want to look at the TextDemo2 class>>example method. Notice the #menu parameter of PluggableTextMorph constructor. It determines the selector of the message wich will be sent to the model when user yellow-clicks that morph.
Related methods:
- TextDemo2Object>>menu: gets some menu object as a parameter and makes some changes with it (add some new menu items to it). It determines which selectors should be sent to the model when particular menu item is chosen.
- TextDemo2Object>>perform:orSendTo: ...... this is a trick, you need this sort of thing in order the messages specified in a TextDemo2Object>>menu: concerning the particular menu items should be sent to the model object.
- TextDemo2Object>>first ..... will be called when user chooses the first menu item
- TextDemo2Object>>second ..... will be called when user chooses the second menu item
- TextDemo2Object>>third ...... will be called when user chooses the third menu item
Menu can also be added in the similar way to the other pluggable morphs.
TextDemo3
It is similar to TextDemo1 but the PluggableTextMorphs are configured in such a way that the user may accept the contents of the PluggableTextMorph not only with Alt+S but also with Enter.
Related methods:
- TextDemo3 class>>example ..... notice the usage of acceptOnCR: method.
ListDemo1
It shows how you can create pluggable list morph
Related stuff:
ListDemo2
It shows how you can create multi-column pluggable list morph
Related stuff:
author: Matej Kosik (contact me if you if you have suggestions or complains concerning this demo)
PluggableMorphsDemo-0001.pr