This is a step-by-step tutorial for creating a simple calculator that calculates the area of a circle, given the radius of the circle (PI * r * r).
Aim
This tutorial introduces the Text Object with Input and Dynamic text properties and the Math Object. It also uses the on(press) Button Event developed in the previous tutorial.
.swi file
"calculator.swi"
| 1. | Continue from the previous tutorial or load the file "button1.swi" and save as "mycalculator.swi"
|
| 2. | Insert a Text Object using the Text Tool or the Menu items Insert | Text. Name the new Text Object radius, tick the 'Target' checkbox and set to the text type to Input in the Text Panel
|
3. Select the "Advanced Options" for this Text Object and set the option for 'Black Border with White Background'
as shown below
Note: The handles around the Text Object change once the type is changed to an Input Text Object
| 4. | Clear the 'Text' field, so the Object appears as an empty input field. Select right justification, as shown below:
|
| 5. | Create a Dynamic Text Object to display the result of the calculation by using the Text Tool or Insert | Text to insert a Text Object. Name the new Text Object "area", tick the 'Target' checkbox and set to the text type to Dynamic in the Text Panel. Clear the text so that an empty text field is displayed and select right justification. Use the Selection Tool to stretch the text field using the cross-shaped handles, as shown below. The advanced settings will be the same as those selected for the previous Text Object and do not need to be altered at this stage
|
| 6. | Use the Text Tool or Insert | Text to insert some Static text ("area" and "radius") to be used as headings
|
Note:
| · | If the text has a line border around it, use the 'Advanced...' button to turn the border off
|
| · | Although the new Text Objects appear in the 'Outline' Panel with the same names as the previously inserted Text Objects, a conflict will not occur at the Scripting level as the new Text Objects are not Scripting Objects (they are unnamed and do not have the 'Target' checkbox set)
|
| 7. | Use the Select Tool to re-arrange the Objects as shown below:
|
| 8. | Modify the on(press) Button Event function to calculate the area of the circle when the button is pressed. Select the button then select the 'Script' Panel. Right-click on the trace statement within the on (press) function and select Statements | name = expr;
|
| For the 'Target:' parameter, select area (the Dynamic Text Object added in step 5) from the pull-down list.
|
| For the 'Name:' parameter, select Text | text from the pull-down list.
|
| Leave the operator as "=".
|
| Enter the formula "Math.PI * radius.text * radius.text" in the formula area
|
Note: "Math.PI" is case sensitive. "PI" could also have been used
| 9. | Test the calculator by reselecting the 'Layout' Panel and press the 'Play' button (fonts may appear to change because system fonts are used). Enter the number 2 into the 'radius' text field and click the '=' button. The following should be displayed in the 'Layout' Panel.
|
|
|
Analysis
The input Text Object radius is a Scripting Object. It is used to allow the entry of the input parameter, radius, the radius of a circle.
Within the script, the input value can be accessed via the name "radius.text". "radius" is the name of the Object, "text" is the property that contains the entered value.
When the button is pressed, the script contained within the button on(press) Event Handler is executed. This results in the calculation Math.PI * radius.text * radius.text being placed into "area.text", the text property of a Dynamic Text Object named "area". This results in the display of the calculated value.
Note: The area of a circle is given by the formula "PI * r * r"