---

Appendix E The Figures ¶

Figure 1.1

My first interface

Figure 1.2

My first window

Figure 2.1

Basic use of LayoutMorph

Figure 2.2

Adding padding

Figure 2.3

Adding gap

Figure 2.4

Separation of 10 is both gap and padding of 10

Figure 2.5

Default alignment

Figure 2.6

Center alignment

Figure 2.7

Top alignment

Figure 2.8

Using proportionalWidth

Figure 2.9

Evenly spaced

Figure 2.10

Nested LayoutMorphs

Figure 2.11

Morph borders

Figure 3.1

Halo of a LayoutMorph

Figure 3.2

Halo and descriptions on each icon functions

Figure 3.3

Actions to explore sub-morph and owner relations

Figure 3.4

The chain of owners of a morph

Figure 3.5

Morph’s methods to manipulate properties

Figure 3.6

A morph’s properties

Figure 3.7

location update according to scale, position and rotation

Figure 3.8

Pixel detection illustrated

Figure 4.1

A pop up menu to inform

Figure 4.2

A pop up menu to answer Yes or No

Figure 4.3

A pop up menu to select among two choices

Figure 4.4

A pop up menu to select among several choices

Figure 4.5

A selection menu without title

Figure 4.6

A button to invoke a selection menu

Figure 4.7

A selection menu open

Figure 4.8

Result of the user selection in the menu

Figure 4.9

A StringRequestMorph open

Figure 4.10

User Interaction Demo

Figure 4.11

List Demo

Figure 4.12

Memory color game

Figure 6.1

A label squeezed to 20 characters

Figure 6.2

A squeezed label given some more space

Figure 6.3

A text entry with a squeezed label

Figure 6.4

A text entry with a regular label

Figure 6.5

Text entries associated with labels

Figure 6.6

Access to the controls of a label group

Figure 6.7

A greeting dialog

Figure 6.8

A group of check button

Figure 6.9

Our enhanced dialog to select color with radio buttons

Figure 6.10

A Drop down button of image morphs

Figure 6.11

A smiley decorated with a ’Be Happy’ slogan’

Figure 6.12

The greeting label decorated with two quick buttons

Figure 6.13

Content packs in Cuis-Smalltalk

Figure 6.14

Request an ImageMorph from a graphic file

Figure 6.15

Get a picture as an icon and paint it in red

Figure 7.1

Command pattern diagram (for ease of reading the App prefix is removed)

Figure 7.2

A balloon text indicates this segment can be selected

Figure 7.3

No balloon text indicates this circle can’t be selected

Figure 7.4

Point A was selected, it can’t be selected again nor the segment AB, but point B can

Figure 7.5

States sequence of the Select tool

Figure C.1

Top to down