LessonsIntermediate: Stacks, objects and dataLesson 25

Fields

Put text into fields and take it out, style any chunk of it, and use the palette's Label Field, Scrolling Field and Scrolling List Field for labels, long text and lists to choose from.

  • Intermediate
  • Lesson 25 of 83
  • About 13 minutes
  • 11 examples

A field is a container

A field holds text the user can read and, unless you lock it, edit: in Run mode, click into a field and type. In a script a field works like a variable: you put into it, put after it, read it, and use every chunk expression you know on it.

Build it with the Tools palette and the Property Inspector
  1. On a new card, drag a Field, make it wide, and name it Notes.
Message BoxType each line in the Message Box and press Return
put "one two three" into field "Notes"
put the number of words of field "Notes"
put "TWO" into word 2 of field "Notes"
put " four" after field "Notes"
put field "Notes"
Message Box (what each put shows)
3
one TWO three four

A field holding a number can be used in sums, and changed in place:

Build it with the Tools palette and the Property Inspector
  1. On a new card, drag a Field and name it Score. In Run mode, click into it and type 10.
  2. Drag a Standard Button beside it and name it Add 5.
ScriptThe script of button "Add 5", then in Run mode click it twice
on mouseUp
   add 5 to field "Score"
   put field "Score" * 2
end mouseUp
Message Box (what it shows after each click)
30
40

The field says 15 after the first click and 20 after the second, and the Message Box shows twice that.

Styling part of the text

Every text property can be set for a chunk of a field, not just the whole field: a word in bold, a line in another colour, a few characters bigger. By hand, select the text in Run mode and choose from the Text menu: Text > Bold, Text > Size, Text > Color. A script names the chunk. A field gives every line the same height unless its fixedLineHeight (the Inspector's Fixed line height, in Text) is false, so turn that off when some lines are bigger than others.

Build it with the Tools palette and the Property Inspector
  1. On a new card, drag a Field, make it big, and name it Poem. In the Property Inspector's Text section, turn off Fixed line height.
  2. In Run mode, type three lines into it: The rain in Spain, falls mainly, on the plain.
Message BoxType each line in the Message Box and press Return
set the textStyle of word 2 of line 1 of field "Poem" to "bold"
set the textSize of line 2 of field "Poem" to 24
set the textColor of line 3 of field "Poem" to "blue"
set the backgroundColor of word 2 of line 3 of field "Poem" to "yellow"
put the textStyle of word 2 of line 1 of field "Poem"
Message Box (what each put shows)
bold
Your card as the OXT-Beyond engine draws it
Your card: a field holding three lines: The rain in Spain with rain in bold, falls mainly in large type, and on the plain in blue with plain on yellow.

Text with its styles: htmlText

the text of a field is its plain characters. the htmlText is the same text with its styles, in a small dialect of HTML. You can read it to save a field's look, and set it to fill a field with styled text in one go.

Build it with the Tools palette and the Property Inspector
  1. On a new card, drag a Field, make it wide, name it Styled, and set its Text size to 18.
  2. In Run mode, type Some bold and italic and red. Double-click the word bold and choose Text > Bold, the word italic and choose Text > Italic, and the word red and choose Text > Color > Red.
Message BoxType each line in the Message Box and press Return
put the text of field "Styled"
put the htmlText of field "Styled"
Message Box (what each put shows)
Some bold and italic and red
<p>Some <b>bold</b> and <i>italic</i> and <font color="#FF0000">red</font></p>
Your card as the OXT-Beyond engine draws it
Your card: a field that reads Some bold and italic and red, each word in its style.

Label fields

Most text you see in a program that the user cannot change, titles, captions, a score, is a field with its border and background turned off and its text locked. The Tools palette has one ready made: the Label Field.

Build it with the Tools palette and the Property Inspector
  1. On a new card, drag a Label Field to the top, make it wide, and name it Title. In the Property Inspector's Text section set its Text size to 30, its Text style to bold and its Text align to left, and in Contents replace Label: with Weekly report.
  2. Drag a second Label Field under it, name it Caption, align it left, set its Text color (in Colors) to a slate grey, and make its contents Everything sold this week, by day.
Message BoxType each line in the Message Box and press Return
put the lockText of field "Title"
put the showBorder of field "Title"
put the opaque of field "Title"
Message Box (what each put shows)
true
false
false
Your card as the OXT-Beyond engine draws it
Your card: a large bold title Weekly report written straight onto the card, and a smaller grey caption below it.

Those three properties are all that makes a field a label, and you can set them on any field: Lock text, Show border and Opaque in the Inspector's Basic section. With lockText true the user cannot type into the field, and a click on it sends mouseUp to it like a button's.

Columns with tabs

A tab character moves the text on to the next tab stop. Set a field's tabStops (the Inspector's Tab stops, in its Table section) and lines with tabs between their parts line up as a table. In a script, set the itemDelimiter to tab and each column is an item.

Build it with the Tools palette and the Property Inspector
  1. On a new card, drag a Field to the top, make it nearly as wide as the card and about 90 points high, and name it Table. In the Property Inspector's Table section set its Tab stops to 150,300.
  2. Drag a Standard Button under it and name it Fill.
ScriptThe script of button "Fill", then in Run mode click it
on mouseUp
   put "Name" & tab & "Age" & tab & "Town" & return & \
         "Ada" & tab & "36" & tab & "London" & return & \
         "Alan" & tab & "41" & tab & "Manchester" into field "Table"
   set the textStyle of line 1 of field "Table" to "bold"
   set the itemDelimiter to tab
   put item 3 of line 3 of field "Table"
end mouseUp
Message Box (what it shows)
Manchester
Your card as the OXT-Beyond engine draws it
Your card: a field showing a small table with the columns Name, Age and Town in bold, and rows for Ada and Alan, with the Fill button below.

The backslashes join three lines of the script into one statement, as in Text and numbers. For bigger tables, with columns the user can sort and resize, drag a Data Grid from the palette: its own guide is in Help > Guides.

A list to choose from

A locked field whose listBehavior is true is a list: a click highlights a whole line. The palette's Scrolling List Field is one, with a scroll bar. the hilitedLine says which line is chosen (and setting it chooses one), and the selectedText gives its text.

Build it with the Tools palette and the Property Inspector
  1. On a new card, drag a Scrolling List Field, make it about 200 points wide and 90 high, and name it Fruit.
  2. In the Property Inspector's Contents section, replace Choice 1, Choice 2 and Choice 3 with Apple, Pear and Plum, a line each.
Message BoxType each line in the Message Box and press Return
set the hilitedLine of field "Fruit" to 2
put the hilitedLine of field "Fruit"
put the selectedText of field "Fruit"
Message Box (what each put shows)
2
Pear
Your card as the OXT-Beyond engine draws it
Your card: a scrolling list field of three fruits, Apple, Pear and Plum, with Pear highlighted.

A list field sends mouseUp when a line is clicked, so its own script can read the selectedText of me and act on the choice. Give the list this script, and click a fruit in Run mode:

ScriptThe script of field "Fruit"
on mouseUp
   put "You chose" && the selectedText of me
end mouseUp
Message BoxType each line in the Message Box and press Return, with the script above in place
set the hilitedLine of field "Fruit" to 3
send "mouseUp" to field "Fruit"
Message Box (what each put shows)
You chose Plum

The Message Box lines do what a click on Plum does: choose the line, then send mouseUp.

Long text: scrolling

A field with more text than fits needs a scroll bar: the palette's Scrolling Field has one, and on any field you can turn on Vertical scrollbar in the Inspector (the vScrollbar property). Its scroll property is how far down it is scrolled, in points.

Build it with the Tools palette and the Property Inspector
  1. On a new card, drag a Scrolling Field, make it about 260 points wide and 160 high, and name it Long.
  2. Drag a Standard Button beside it and name it Fill.
ScriptThe script of button "Fill", then in Run mode click it
on mouseUp
   repeat with i = 1 to 30
      put "Line" && i & return after tText
   end repeat
   put tText into field "Long"
   put the number of lines of field "Long"
end mouseUp
Message Box (what it shows)
30
Your card as the OXT-Beyond engine draws it
Your card: a field showing the first lines of a long list, Line 1, Line 2 and so on, with a scroll bar on its right, and the Fill button beside it.

Try it yourself

Make a list of the days of the week: drag a Scrolling List Field, name it Days, make it tall enough for seven lines, and type the days into its Contents, Monday first. Then, in the Message Box, choose Wednesday, make the weekend red, and put the chosen day.

Build it with the Tools palette and the Property Inspector
  1. Drag a Scrolling List Field, about 200 points wide and 140 high, and name it Days.
  2. In its Contents, type the days of the week from Monday to Sunday, a line each.
Show a solution
Message BoxType each line in the Message Box and press Return
set the textColor of line 6 to 7 of field "Days" to "red"
set the hilitedLine of field "Days" to 3
put the selectedText of field "Days"
Message Box (what each put shows)
Wednesday
Your card as the OXT-Beyond engine draws it
Your card: a list of the seven days of the week, Wednesday highlighted and Saturday and Sunday in red.

Words in this lesson

fieldtexthtmlTexttextStylelockTextlistBehaviorhilitedLineselectedTexttabStopsvScrollbarshowBorderLabel FieldScrolling FieldScrolling List FieldText menu

Each one finds every lesson that uses it. The Dictionary has the whole story of each, with its syntax and more examples.