Squeak Tutorial

First Steps: Displaying Text on the Screen

Before we continue to explain the use of the MVC graphical user interface, we discuss a topic, that we will need for further progress: Classes that are used to format and to display text. Some of the following examples do not open a view, but display some text directly on the top left corner of the display screen. For best results, you should place your workspace view on the right half of the screen.

To begin, we put a string into a workspace. To do that, evaluate this example with: 'do it':

 | string |
 string := 'Are you happy with Squeak?'.
 Workspace new
    contents: string;
    openLabel: 'Display a String:'

This is simple, in fact too simple to be very useful. A String has no display properties and is therefore displayed with a default font. To influence display properties, we have to use a Text. This is also simple because we can easily convert a string into a text:

 | text |
 text := 'Are you happy with ' asText.
 text := text, ('Squeak' asText allBold), '?'.
 Workspace new
    contents: text;
    openLabel: 'Use of Text:'

Here, we convert the strings into instances of Text. This allows us to display the word "Squeak" in bold. In the next example, we display the word 'Squeak' in red:

 | text |
 text := 'Are you happy with ' asText.
 text := text, ('Squeak' asText addAttribute: TextColor red), '?'.
 Workspace new
    contents: text;
    openLabel: 'Use of Text:'

A DisplayText is used to display stylished text. The following example uses a passage from one of the wonderful poems of John Keats (1795-1821):

 | text dt |
  text := 'A thing of beauty is a joy for ever:
its loveliness increases; it will never
Pass into nothingness; but still will keep
A bower quiet for us, and a sleep
Full of sweet dreams, and health, and quiet breathing.' asText.

  dt := DisplayText text: text
                    textStyle: TextStyle default copy.
  dt foregroundColor: Color black
     backgroundColor: Color lightBlue.
  dt displayAt: 10 @ 10.

A DisplayText applies a TextStyle to a Text to create a visual representation. It takes a foreground color and a background color to display the text using the given text style.

A TextStyle is essentially a font family. The default Squeak image provides six different text styles. These text style should not be changed. For use, a text style should be copied from one of the available templates.

To display a text centered, we use a copy of the default TextStyle that we prepare for centered text display:

 | text dt |
  text := 'A thing of beauty is a joy for ever:
Its loveliness increases; it will never
Pass into nothingness; but still will keep
A bower quiet for us, and a sleep
Full of sweet dreams, and health, and quiet breathing.' asText.

  dt := DisplayText text: text
                    textStyle: (TextStyle default copy centered).
  dt foregroundColor: Color black
     backgroundColor: Color lightBlue.
  dt displayAt: 10 @ 10.

To use a larger font, we add a default font index to the fresh copy of the TextStyle that we will use:

 | string text style dt |
  string := 'A thing of beauty is a joy for ever:
Its loveliness increases; it will never
Pass into nothingness; but still will keep
A bower quiet for us, and a sleep
Full of sweet dreams, and health, and quiet breathing.'.

  text := Text string: string
               attribute: TextEmphasis normal.

  style := TextStyle default copy.
  style defaultFontIndex: (style fontIndexOfSize: 21).

  dt := DisplayText text: text
                    textStyle: style.
  dt foregroundColor: Color black
     backgroundColor: Color lightBlue.
  dt displayAt: 10 @ 10.

We can also write:

 | text dt |
  text := 'A thing of beauty is a joy for ever:
Its loveliness increases; it will never
Pass into nothingness; but still will keep
A bower quiet for us, and a sleep
Full of sweet dreams, and health, and quiet breathing.' asText.

  text addAttribute: TextAlignment centered.
  dt := DisplayText text: text
                      textStyle: (TextStyle default copy).
  dt foregroundColor: Color black
     backgroundColor: Color lightBlue.
  dt displayAt: 10 @ 10.

For the next examples, we need a longer text. Please copy this into a workspace:

'Non exiguum temporibus habemus, sed multum perdidimus. Satis longa vita et in maximarum rerum consummationem large data est, si tota bene collocaretur; sed ubi per luxam ac neglegentiam diffluit, ubi nulli bonae rei impenditur, ultima demum necessitate cogente quam ire non intelleximus transisse sentimus.' asText.

(This text is taken from Seneca's 'Ad Paulinum de brevitate vitae' - On the Shortness of Life. Here is a translation:
It is not that we have a short space of time, but that we waste much of it. Life is long enough, and it has been given in sufficiently generous measure to allow the accomplishment of the very greatest things if the whole of it is well invested. But when it is squandered in luxury and carelessness, when it is devoted to no good end, forced at last by the ultimate necessity we perceive that it has passed away before we were aware that it was passing.)

Note that the text that you copied into the workspace does not contain line breaks. When you resize the workspace, the entire text is recomposed to fit into the workspace. This requires the computation of linebreaks and this is a feature that DisplayText does not offer. We have to use a Paragraph.

Here is a first attempt:

 | text para clipRect style |
 clipRect := (0 @ 0 extent: 300 @ 300).
 text := <insert example text here>.
 text addAttribute: (TextAlignment centered).
 style := TextStyle default copy.
 style firstIndent: 10;
       restIndent: 10;
       rightIndent: 10;
       leading: 3.
 para := Paragraph withText: text
            style: style
            compositionRectangle: clipRect
            clippingRectangle: clipRect
            foreColor: Color black
            backColor: Color lightRed.

 para displayOn: Display.

The messages firstIndent: restIndent: and rightIndent: are used to set the left and the right margin. The left margin has to be set separately for the first line; this conforms to typographical tradition.

To increase or to reduce the vertical distance between two lines, you use leading:. The default text style has leading 2, which means that two pixel of vertical space are inserted between two lines.

Paragraph is a quite sophisticated structure. It is therefore not a surprise that its creation requires a method with six arguments. Note that the real number of setable properties is even greater: The text style alone has several setable properties.

We can do even more. In the following example, we display the passage 'Satis longa vita et in maximarum rerum consummationem large data est' in blue:

 | text para clipRect style pos1 pos2 |
 clipRect := (0 @ 0 extent: 300 @ 300).
 text := <insert example text here>.
 text addAttribute: (TextAlignment centered).
 pos1 := text findString: 'Satis'
              startingAt: 1.
 pos2 := text findString: ','
              startingAt: pos1 + 1.
 text addAttribute: (TextColor blue)
      from: pos1
      to: pos2 - 1.
 style := TextStyle default copy.
 style firstIndent: 10;
       restIndent: 10; 
       rightIndent: 10.
 para := Paragraph withText: text
            style: style
            compositionRectangle: clipRect
            clippingRectangle: clipRect
            foreColor: Color black
            backColor: Color lightRed.
 
 para displayOn: Display.

Here we use the method findString:startingAt: to find the positions of the word 'Satis' and of the ','.

What we have learned

A Text adds character appearance information to the characters of a String.
A TextStyle specifies a font and some typesetting properties.
Text attributes override the default attributes of a TextStyle for some characters of a text.
A DisplayText uses the data of a TextStyle to display Text. A DisplayText does not wrap lines.
A Paragraph displays a piece of text. Like a DisplayText, a Paragraph uses the typesetting properties of a TextStyle. Unlike a DisplayText, a Paragraph wraps a text into lines that fit into a composition rectangle.

Contents