Or working offline with the local server: Once you have the App Inventor running type into your browser

Transcription

1 App Inventor Tutorial 10 Calculator This tutorial will help you develop a calculator using If statements and a ListPicker. You will be asked to enter 2 numbers, Number1 and Number2. When you have entered your numbers, select the function from the ListPicker and click on the Calculate button. The answer to the sum will be calculated and displayed by the app. The ListPicker will allow you to select from one of the following functions: +, -, x, /. Step 1: Open App Inventor To work online: Go to Use your google account details to log in. Or working offline with the local server: Once you have the App Inventor running type into your browser When you are taken to the app inventor page create a new project. This window will appear. Give the project the name Calculator and click OK. The project is now added and you will be taken to the designer screen. 1

2 Step 2: Build the Interface of Calculator From the Palette Panel drag a Label over and place on your screen. Rename it Title_Label. Set the FontSize to 18.0 Set the Text Property to My Calc. 2

3 Go to the Palette Panel. Click on Screen arrangement and drag a HorizontalArrangement onto your screen below the Title_Label My Calc. Drag a textbox into the HorizontalArrangement. Remove the text from Hint Select the Numbers Only checkbox. Set its width to 50 pixels. 3

4 From the Palette Panel, under the Basic category drag a ListPicker over to the HorizontalArrangement, to the right of the TextBox1. Set the Text Property for the ListPicker to +. Drag another TextBox into the HorizontalArrangement. Place this to the right of the ListPicker. Remove the text from Hint Select the Numbers Only checkbox Set the width to 50 pixels 4

5 Drag a label into the HorizontalArrangement to the right of TextBox2. Rename the label Equals_Label. Set the Text Property to =. Drag another label over to the right of the Equals_Label. Set the Text Property to Result and rename the component Result_Label. 5

6 From the Palette Panel drag a button over to the screen and place it below the HorizontalArrangement. Rename the button Calculate_Button and set the Text Property to Calculate. The ListPicker creates a list of items. The user can select from the options in this list. We need to add the +, -, x, / to our list. Under the Components Panel select ListPicker1. In the Properties Panel, under ElementsFromString add +, -, x, / (+ comma space - comma space x comma space /). Add + to the Selection Property. 6

7 Step 3: Add the functionality to the Interface Once the interface is ready we can set the functionality of the components. What we want to happen can be described in the following steps: 1. The user enters 2 numbers in the text boxes 2. The user selects a function (+,-,x,/) 3. The user clicks on the calculate button and the result is displayed. The functionality of the program (step 3) is added by using the Blocks Editor - Along the top of your App Inventor panel you will notice a button which says 'Open the Blocks Editor'. Click on this button ListPicker Functionality We need the text that is displayed on the ListPicker1 to change when the user selects a new choice. From the My Blocks tab click on ListPicker1. Select the (when ListPicker1.AfterPicking do) piece and drag it onto the board. From the My Blocks tab click on ListPicker, Select the (set ListPicker1.Text to) piece and connect this to the (when ListPicker1.AfterPicking do) piece. From the My Block tab click on ListPicker. Select the ListPicker1.Selection piece and connect this to the (set ListPicker1.Text to) piece. The ListPicker block is shown below. 7

8 If-Then Statements Remember that the value of the ListPicker is the value that the user has selected. We want the app to add the numbers together when the user selects the +, to subtract the numbers when the use selects -,to multiply the numbers when the user selects the x and to divide the numbers when the user selects the /. To do this we need to use an If block. From the My Blocks tab, click on Calculate_Button. Drag the (when Calculate_Button.Click do) piece onto the board. Go to the Built-In tab, click Control and drag the If block onto the board. Insert the If block into the (when Calculate_Button.Click do) piece. Under the My Blocks tab, click on Result_Label. Drag the (set Result_Label.Text to) piece onto the board. Connect the (set Result_Label.Text to) piece to the then-do part of the If block. From the Built-In tab, click on Math and drag the + piece onto the board. Add this piece to the (set Result_Label.Text to) piece. 8

9 From the My Blocks tab, click on TextBox1 and drag over the TextBox1.Text piece. From the My Blocks tab, click on TextBox2 and drag over the TextBox2.Text piece. Add the TextBox1.Text piece to the first gap in the + piece. Add the TextBox1.Tex2 piece to the 2 nd gap in the + piece. We need to fill in the test part of the If block. From the Built-In tab, click on Math and drag a = piece over to the board. Connect the = piece to the test part of the If block. From the My Blocks tab, click on ListPicker and drag the ListPicker1.Selection piece to the board. Add this piece to the 1 st empty space in the = block. 9

10 From the Built-In tab, click on Text and drag a text piece over to the board. Change the text on this piece to +. Add this piece to the 2 nd empty space in the equals block. The complete block for the add function is shown below. When the Calculate_Button is pressed and the ListPicker is set to +, the app will add the 2 numbers together. We need to repeat this process for the subtract, multiply and divide functions. Rebuild the If block but change the text piece to -, x and /. Also, remember to change the math pieces. The finished block is shown below. 10

11 Test your app by connecting to the emulator or your device. You should be able to add, subtract, multiply and divide your numbers. 11