Contents
In this tutorial you will learn about how to use dialog boxes
John McGuinn
Dialog boxes
There are three main types of Dialog boxes
that are used in the Open University (OU) M206 courses LearningWorks
version of Smalltalk
There are 2 further methods that add additional features to request:
These are
- request:initialAnswer:
- request:initialAnswer:onCancel:
Obviously all keyword messages. The big difference is that
they are all class methods, rather than instance methods
that you have mainly used to date.
The only class methods that you have used so far is new,
as in
aFrog :=Frog new
By now you should be familiar with sending instance messages
to instances of a class.
There is a difference with class messages, they are sent
to the class, not an instance of the
class.
Note how in
aFrog := Frog new
new is sent to the class Frog
It is the same with dialog boxes. Note in the table below how
all the dialog class messages are sent to the class Dialog.
Bear this in mind. In later M206 chapters you will start to
work with class variables, and class methods in the Date class.
Your experience with dialog boxes will help.
| Syntax
|
Example
or comment |
Button(s)
|
Answers
|
| Dialog warn:'string' |
Dialog warn: 'This is a message'
|
OK |
nil |
| Dialog warn:
variable |
Using a variable representing
a string |
|
|
| Dialog warn:'string',
variable |
Using
a string and a variable representing a string. The comma is concatenating
the two |
| Dialog confirm: 'string' |
Dialog Confirm: 'Are you over
18?' |
Yes
No |
true
false |
| aVariable
:=Dialog confirm: |
true or false
will be assigned to the variable, depending on whether
the Yes or No being button clicked |
( Dialog
confirm:'string')
ifTrue: [code evaluated if condition
is true]
ifFalse: [code evaluated if
condition is false] |
( Dialog confirm:'string')
ifTrue: [^'Yes clicked']
ifFalse: [^'No clicked']
Because the answer is true or false, can be
used similar to acondition expression |
| Dialog request: 'string'
|
Dialog request: 'Enter Name'
An Input box is provided for user input |
OK
Cancel |
Contents of Input box
" I.e. an empty string |
| Dialog request:
'string' initialAnswer:'string' |
Dialog request: 'Enter age'
initialAnswer: '18'
Places default text in the input box. |
OK
Cancel |
Contents of Input box
" I.e. an empty string |
Dialog request:
initialAnswer:
onCancel:[ ] |
Dialog request: 'string' initialAnswer:'string'
onCancel: [a block of code ]
The block of code may be a simple string, or a series of
expressions. |
OK
Cancel |
Contents of Input box
Depends on the code in a block code. |
Exercise 1. Dialog
warn:
To me this dialog warn box is misnamed, it should be called
dialog information box. This is the simplest of the dialog boxes
and is used to inform the user about something. It contains
an OK Action button, that must be clicked for the user to continue.
| Example |
Required code in the Workspace of M206 LearningWorks |
 |
Dialog warn: 'Example of a "Dialog warn:
box" ' |
The class method
warn: aString
is a class method of the class Dialog, hence the use of Dialog
to state the class.
The method is used as follows,
Dialog warn: aString
The comment for the method is
"Present the message string
to the user. Continue processing when the user hits the 'OK'
box or types cr."
It is always useful to look at the comments of any new
methods introduced by the OU course.
Unfortunately the LearningWorks M206 Class browser in Learningbook
16, which covers dialogs prevents you from viewing the Dialog
class, you need to use LearningBook 22 or later to do this.
Evaluate the following in the Workspace.
Dialog warn: 'This
message is on one line'
Note that
This message is on one line
is enclosed in a pair of ' single quotes '
The pair of single quotes denotes that a string is
in between them.
An empty
stringcan be written by placing 2 single quotes
next to each other ''
You can notuse 1 set of double quotes ". They
may look the same on the printed page or on the screen but to
Smalltalk they are different
Question 1a. What is the
answer in the Display Pane.
Note that this is always the answer
of Dialog warn:
Top of Page
Exercise. 2 & 3.
withCRs
Evaluate the following in the Workspace of LearningBook 16
of LearningWorks.
Dialog warn: ('This message is\','
on two lines') withCRs
Question 2. Examine the
expressions in exercise 1 and 2. Write down the additional code
that is required to place the exercise 2 message onto 2 lines.
Exercise 3.
Evaluate the following in the Workspace of LearningBook 16 of LearningWorks.expression in the Workspace, and note
that the display is on a single line.
Dialog warn: 'This message is on three
lines'
Amend the expression so that only 2 words are displayed on each
line as follows.
This message
is on
three lines
Question 3. Test your
amended expression and write down the correct solution
Top of Page
asNumber
asNumber is a unary message.
The comment for the asNumber
method of class CharacterArray is
"Answer the number created by
interpreting the receiver as the string representation of a
number. First remove any leading separators."
Plain English. Answers with a number starting with a suitable
string.
It is useful to compare asNumber with printString,
where the effect is almost the opposite.
Plain English. Answers with a string starting with a number
(or some other object).
One or both these methods are often required when dealing with
numerical data and dialog boxes
Enter the following expressions into the Workspace and evaluate
them. Check that they answer as stated
| Enter
expression |
Comments |
Will answer
with |
| 1234 |
Answers with a number |
1234 |
| '1234' |
Answers with a string |
'1234' |
| '1234'
asNumber |
Answers with a number |
1234 |
Write down what you expect as answers from the following 6
expressions.
Pay particular attention to any unexpected results
Evaluate them to check your answers
| Expression |
Expected
Answer |
Actual
Answer after evaluation |
| '12' asNumber
|
Question 6a.
|
|
| '0034' as number |
Question 6b.
|
|
| ' 56' as number |
Question 6c.
|
|
| ' 78abc' as number
|
Question 6d.
|
|
| 'a 89' as number |
Question 6e.
|
|
| ' 3 57' as number
|
Question 6f.
|
|
Combining asNumber with
printString (printString was introduced in Lesson
1 )
Some methods work on strings, others on numbers. The use
of asNumber or printString allow the use of
other methods that could not normally be used. |
| 2 + 3 printString asNumber |
|
|
| ('65' asNumber) printString |
|
|
| ('2 + 3' asNumber) printString |
|
|
Top of Page
TMA preparation
You have arrived at the stage of the course where you have to
work out things for yourself.
Lets complicate the dialogs- a self test - sorry only some answers
given on this.
Often there is a question that requires a rather complex use of
dialogs.
Mock TMA Question
This questions requires the use of 2 dialog boxes, one where the
user inputs their age, and another where the user is informed
of their age next year. The input dialog should prompt the user
to Enter your age, or click cancel to exit. The default
number in the input box should be 0 (zero).
Clicking cancel should terminate the expression series and answer
with a string Cancel button pressed.
If the user clicks the OK button without entering an age then
the dialog box should re-display itself. (Don't worry if the position
of the box is different). When an age is entered another dialog
box should display the string Your age next year will befollowed
by the new calculated age. The expression should answer with the
new calculated age.
With a question like this, it is easier if you rewrite the
question split into simple steps. There will be many ways
of writing the expressions required, and even more ways of splitting
the question into simple steps
- Each step should be evaluated, and made to work correctly
before moving on to the next step.
- Before you add code for the next step, copy and paste the
code from the previous step, then add the code to this copy.
This keeps an uncorrupted record of code that worked.
- You are working in the workspace for this question,
but a similar technique can be used in methods, where
code can be copied and pasted before adding additional
code. In this case the original code must be placed within
comments.
- Add the expression(s) required for the next step. Any error
that occurs should be fairly easy to trace.
- Check the syntax of the added code.
- Check that the added code has been entered into the
correct position, in relation to the previous working
code.
- Check that any required periods are in the correct place.
- Your steps can contain some of your thoughts, things to
watch for, possible problems etc.
Simple Steps
- Do a simple dialog box with prompt Enter your age
that allows user input.
- Alter this to get rid of the rubbish that appears in
input box of the dialog.
- Assign the dialog answer to a variable, myAge.
Remember to declare the variable.
- myAge has been declared, assigned a value but not
used, use the variable to get rid of the warning. Note
this step may not be noticed until step 3 is evaluated.
- Calculation:- 1 can only be added to a number.
- Do the output dialog box. A string is required
for the calculated age. Concatenation also required.
Possible order of precedence.
- Obtain the correct answer. Note:- You may be surprised at
the current answer.
- Alter prompt. Enter your age, or click cancel to exit.
If the Cancel button is clicked, the program should answer
with the string Cancel button pressed.
- The user does not enter their age and clicks the OK button
make the dialog box will reappear.
Step 1
In this TMA preparation you are asked to Enter your age
using a suitable dialog box and prompt.
Question 3b. Which dialog
box would you use to obtain a user input.
Question 3c. If the user types
in 21 , state what the answer will be, and the class of the answer.
Evaluate and inspect to check your answer.
Step 2
Now use the request:initialAnswer: method to get rid of
the rubbish that appears in the input box. The dialog should display
a default 0, that's a zero, in the input box.
If you get an Unhandled exception: Message not understood: #asString
You have probably forgot that dialog boxes only accept strings,
you need to either use:-
a string rather than the integer 0 or send the message printString
to the 0.
Individually try both of these solutions.
As can be seen after evaluating the code required for Question
3c. a number is inputted but the answer is a string. It depends
what is required next as to whether the string answer is acceptable.
If you require a number rather than a string it is easy to send
a message to the string to obtain an answer of a number class.
Question 3d. What is that
message.
Amend your workspace expression so that the answer is a number.
Step 3
Sometimes it helps if the answer is stored in a temporary variable,
this usually depends on what is going to happen next.
Store the user input into a variable named myAge. See Dialog
confirm: in the table above for an example.
Remember to declare the temporary variable using the pair of
| |
A warning will appear to say the variable is not used, click
on continue, enter 21, note the answer.
Step 4
Amend the expression to an expression series by placing
myAge on the next line, with the required period between the
lines.
Note the same answer '21'
Step 5
In order to do the next bit you require a number rather than
a string so you need to send a message to the string to obtain
a numerical answer so that you can do the calculation, then
another message must be sent because dialog boxes require a
string.
Step 6
Output the following in a suitable dialog box
Your age next year will be 22. The calculated age is concatenated
as a string
The actual age displayed should be the age inputted by the user
+ 1. Think about order of precedence when doing this part.
Step 7
Check the answer in the Answer pane. Work out why you are getting
this answer. Clue do a search of this page for nil.
Add additional code that will give the correct answer
Step 8
Amend the expression series so that the prompt reads. Enter
your age, or click cancel to exit.
If the Cancel button is clicked, the program should answer with
the string Cancel button pressed..
Step 9
Amend the series expression so that if the user does not enter
their age and clicks the OK button the dialog box will reappear.
The code for this step is very easy, but does require some thought.
- Think which method you are going to use to control the repetitions
- Think what you will use for the test, would you use myAge=0
, myAge='0' , or myAge asNumber=0
- This will depend on exactly where you used asNumber
in order to change the entered age to a number.
- Think very carefully where you are going to place the code.
- The condition is going to be placed before the user
enters their age. This requires some thought
- myAge must be set to a value before the condition.
This can be done with either a simple assignment,
the easy option, or can be set by an additional input
type dialog box, more complicated, bearing in mind
the onCancel:
- Carefully, work out where the end ] will be placed.
- Think of what parts of the code are required within
the block.
- This may be easier to do on a code printout. Highlight
the code that will appear within the block that is
to be possibly repeated.
- Think about where this end ] is placed in
relation to any periods or other block markers etc.,
rem:
Because this method was part of a TMA question, direct answers
are not given. By the use of Self Tests, you should be able
to work the answers out yourself.
The use of this method does require the knowledge of many
of the basic concepts of Smalltalk. Your knowledge of these
concepts will be probed. This may be a good time to do some
revision of some of the basics.
This will be your decision.
Self Test . Is rem:
a unary,
binary or keyword message selector? . If you use this
link return to here
The clue to this is the : colon.
As stated before previously, it is always useful to look up
a method in the Full Class Browser to see what it is likely
to do, and how to use it.
Note: The following techniques can be used for examining
most methods.
- Checking which class or classes the method is in.
Remember the receiver must be able to understand the message
being sent to it.
- Reading and understanding the comments.
- Reading the code, this may be useful for obtaining
useful snippets of code, or may be totally beyond you.
This does depend on the method.
- Reading the code may suggest further checking of additional
methods.
The Class browser will allow you to do this, if you
know the class the method is in.
If you do not know the class the method is in, then the Full
Class Browser is much better to use.
If the LB you are using does not have a Full Class Browser
then Add one....How to Add a Full Class
Browser
also read How to find a method in
the Full Class BrowserThen return to here
Exercise 7 a. Use the
find button in the Full Class Browser to find
rem: now. Don't forget to type in the : (colon)
Note the class that the method is in. This gives you
a good clue to the use of the method.
The comment goes even further and actually gives you
examples.
The examples shows
- How the method works, up to, but not including the=sign,
and
- The answer, after the=sign, that will be returned .
You may like to copy and paste the heading and comment into
your own personnel method list (Tip 2 in the Hints and Tips
Page), for future reference.
Evaluate the first example, 9
rem: 4 in the Workspace. What is the answer?.
It is not obvious, but it is possible to work out the calculation
that has taken place to result in this answer.
Reading the code you will see the use of another method, quo:
Look up quo:in the class browser now. Note that quo:
is a method in 4 different Classes, this can be seen in the
top pane. Check this now!. Look at the version for integer
This method provides further information, and we can now deduce
what rem: should answer with, and the calculation that has taken
place to produce this answer.
In the comment of quo: you will see a mention of receiver
and argument
You should by now be fully familiar with these 2
words, along with various other words listed below.
Self Test.In the expression9
rem: 4 what is the
- Receiver.
- Argument.
- Message selector
- Message.
- Keyword.
- Expression.
- Precedence. 9 rem: 4 is a very simple expression. Would
you be happy with the rules of precedence if 9 rem: 4 was
made more complicated by replacing the numbers with Smalltalk
expressions that would give you things like:
- The balance of an account.
- The width of an object.
- The height of a hoverFrog
- A calculation such as 1 + 4 * 2
If you are not happy with or not sure about any
of your answers to the above 7 questions it is totally pointless
to carry on. You MUST fully understand these key concepts.
Decide if you require to revise.
If required, revise the following
now. About 1 hour to do the lot
Then return here.
- Terminology
|Precedence
|
- OU Chapter 6, Sector 2.1, pages 7-8. Using messages to
make objects do things.
- OU Chapter 6, Sector 5, pages 16-19. All of this sector
on Message arguments
- OU Chapter 8, Sector 4, pages 7-8. Recap of terminology.
- OU Chapter 14, Sector 3, pages 9-12. Syntax semantics
and precedence.
Now work out your answers to the following expressions in
the table. Then check your answer by evaluation.
| Work out
the answer that will be returned |
expression |
Evaluate
and check your answer |
| |
9 rem: 1 |
|
| |
9 rem: 2 |
|
| |
9 rem: 3 |
|
| 1 |
9 rem: 4 |
1 |
| |
9 rem: 5 |
|
| |
9 rem: 6 |
|
| |
9 rem: 7 |
|
| |
9 rem: 8 |
|
| |
9 rem: 9 |
|
| |
9 rem: 10 |
|
| |
9 rem: 11 |
|
You may be surprised by the last 2 answers, but they are still
the remainder of the expression
Exercise 7 c. Evaluate
7 rem: 5
in the Workspace, and check the answer is 2
Mathematically 1 + 3 * 2=7 and 2 + 3 * 3 - 6=5.
Now replace 7 and 5 with 1 + 3 * 2 and 2 + 3 * 3 - 6 respectively
Exercise 7 c. Evaluate
1 + 3 * 2 rem: 2
+ 3 * 3 - 6 in the Workspace, and check the answer
is now 8 and not 2.
This is because Smalltalk follows different rules from maths
(and most of the other programming languages).
Self Test. What are these
rules called?
Exercise
7 d. Using your knowledge from the above revision,
and a little maths. you should now be able to alter
1 + 3 * 2 rem:
2 + 3 * 3 - 6 so that you obtain the required answer
of 2.
- Use the same numbers
- Use the same signs
- Do not alter the order of the numbers
- Alter the expression so that it answers with 2
- Clue 1. Make the receiver evaluate to 7
- Clue 2. Make the parameter evaluate to 5
Top of Page
How to Add
a Full Class Browser
- Hold down the left mouse button with the pointer over the
Page button.
- Slide the pointer over Add... and release.
- Click on Full Class Browser.
How to find a Method
in the Full Class Browser
- Hold down the left mouse button with the pointer over the
Find button.
- Slide the pointer over Implementors of method...and
release.
- Type in the method name, including the : (colon)
if a keyword method.
- Click OK
Top of Page
| Return to rem:
|
How to find
Examples of a Method in the Full Class Browser
- Hold down the left mouse button with the pointer over the
Find button.
- Slide the pointer over References to method...and
release.
- Type in the method name, including the : (colon)
if a keyword method.
- Click OK
| |Top of Page |
Answers
Answer 1a. Nil
Answer 1b. Only a Dialog
request: allows a user input
Answer 2. Place ( )brackets
around the expression, add \', ' where
you require the new line, and withCRs
after the closing bracket
Answer 3. Dialog warn: ('This message\','is on
\','three lines') withCRs
Answer 3b. You should
learn what the 3 main dialog boxes, warn, confirm, and request,
do. The one required is request:. There are 3 request dialog
boxes. You will start with the most simple, request: . You will
amend this, in the next step, to request:initialAnswer: and
finally, request:initialAnswer:onCancel:
Answer 3c. The answer will
be '21' a string. Class byteString
Answer 3d. You are on your
own now
Answer 4a. Is your name John
Answer 4b. Nil
Answer 4c. Temporary variables
are not displayed in the Variable list window, but instance
variables and local variables are.
Answer 4d. Because the temporary
variable was discarded a Dialog box is displayed with the message
myName is undeclared.
Click on Cancel
Answer 5 a. (i). A Dialog
box appears " My name is never use"
(ii). Click on proceed. Remember temporary variables
only last for the duration of the expression series, which
is now only 1 line, the temporary variable myName is declared
and immediately discarded.
(iii) The evaluation answers nil
Answer 5 b.In the evaluation
of line 2. myName :='John'.
the compiler detects that myName is not declared, and a Dialog
box appears "My name is is undeclared".
click create it. The evaluation answers with 'John'
and a local variable myName is created.
the local variable appears in the variable list window
Answer 5 c. Is your name
John is displayed in the Dialog box, and answers nil
Answer 5 d. Unlike the
answer to question 4b, myName is now a local variable and the
evaluation answers with 'John'
| Previous
Tutorial 12. Control Structures | Next
Tutorial 39 OpenGUI |
|
