App Inventor: Lab 2 – Simple Calculator

App Inventor: Lab 2 – Simple Calculator
A. Notes
Developers often need to modify both text and numeric data.
Math operations – App Inventor
Every programming language provides a base set of math operators. The basic math operations can be
found in the Math drawer in the Blocks Editor. Many other math operations are available in the Math
drawer as well.
Text operations – App Inventor
The App Inventor text (strings) methods are located in the Text drawer in the Blocks Editor. The text
method allows the programmer to add specific text to the program. There are many other text methods
such as join or make text that will allow you to manipulate text strings.
B. Learning Objectives
In this lab you will learn how to use:
• Components
o Basic
TextBox – obtain input from users and display output to others
Label – identifies items on the screen
Button – will be used to allow the user to input what math operation they wish to
use
Math Operators – used to calculate mathematical calculations
o Screen Arrangements
HorizontalArrangement - position GUI components horizontally
o Other Stuff
TextToSpeech – convert text to speech for output to the user
• Blocks/Methods
o Math library
addition / subtraction / multiplication / division
o Text library
join – used to concatenate or joining 2 text values to create a new text string
make text – alternative block for joining any number of text strings
Page 1 of 3

C. Application Description
This application is a simple calculator. The user should be able to initially Add and Subtract two numbers.
The application should then be extended for more operations and features (see extensions at the end of the
assignment).
A sample screen for the initial operations of the simple Addition and Subtraction Calculator is provided:
Additional Instructions
• There should be an event processing sequence for each button. This means that when each button
is done, a series of events will take place. The sample block sequence for the Addition button
event processing is shown below.
• In this example, the application not only displays the answer in text field, but also tells the
computer to speak the answer to the user using the TextToSpeech library. To use the
TextToSpeech feature, go to the Component Designer, look under the “Other Stuff” palette and
drag it onto your application – it will be a Non-visible component.
In the btnAdd block above you may notice that the Text property of a text box named lblResults is
being modified using a math operation. You will find these Math operations within the Blocks Editor.
Page 2 of 3

Your first step should be to design your user interface and decide on the application logic.
Here is a sample user interface design. Textboxes are used for
user input and to show the result of the calculation. In the
example to the right you will notice that there are 2 different
textboxes for the 2 numbers to be inputted by the user as well as
a textbox to show the output which is the result of the
calculation. There are also two buttons to allow the user to
choose whether they wish to add or subtract.
The labels and textbox placement can be controlled using the
Screen Alignment components (HorizontalArrangement,
VerticalArrangement or TableArrangement). To place
components in fixed locations you should:
• drag arrangement components onto the viewer
• place the GUI components the desired location
D. Tasks
Development typically follows many cycles of design, code, and
test. Complete each of these phases.
Phase 1
Implement the Add/Subtract operations using 2 different
textboxes for input values and test your application.
Phase 2
Add the features for Multiplication and Division and a Clear button to erase all of the textboxes to start
inputting new numbers.
Phase 3
Add a feature to have the result spoken to the user.
Page 3 of 3