What We're Going to Learn Today

In today's tutorial, we are going to learn about If Statements. We are also going to work with a list picker to make a calculator.

Getting Started

1. Go to the MIT App Inventor and log in using your google account
2. Click on "My Projects" on the top and then press the New button.
3. Name the new project Day3
4. Click on Day3 to open it
5. Open an emulator or connect your phone to app inventor using the MIT Companion App

1. Under the Palette, drag a label from the basic category and place it on the screen. Rename it "Title_Label" and set its Text property to "My Calc" and the FontSize to "18.0"
2. Drag a HorizontalArrangement under the Title_Label. Find it under the Layout category on the Palette.
3. Drag a textbox from the Palette into the HorizontalArrangement. Set its width to 50. Remove the text from "Hint" and check "Numbers Only"
4. Drag a Listpicker to the right of textbox1 into the HorizontalArrangement. Set its text property to "+"
5. Drag another textbox from the Palette into the HorizontalArrangement. Put it to the right of listpicker1. Set its width to 50. Remove the text from "Hint" and check "Numbers Only"
6. Drag a label to the right of textbox2 into the HorizontalArrangement. Set its text to "="
7. Drag a new label to the right of Label1 into the HorizontalArrangement. Set its text to "Result" and rename the component "Result_Label"
8. Finally, Add a button below the HorizontalArrangement. Rename this button "Calculate_Button" and set its text to "Calculate"

---

Listpicker

A listpicker creates a list of items for a user to... pick. We need to add these items to our listpicker.

1. Select Listpicker1
2. Add +, - (That is plus comma space minus) to the ElementsFromString property 
   
3. Add + to the Selection property
4. Look at your emulator or phone. Try typing text in the fields. Try using the ListPicker. Notice it doesn't change the symbol if you pick a new operator.

---

Blocks

Now we want our calculator to work. Lets add some blocks.

1. Find when Calculate_Button.Click do from My Blocks and drag it to the board
2. Find set Results_Label.text to and add it to when Calculate_Button.Click do
3. Add + from Math from the Built-In Blocks
4. Fill + with TextBox1.text and TextBox2.text

---

Listpicker

1. Enter some numbers in each text field and press the calculate button. Your app should add the numbers together and then set the Result_Label text to the answer.
2. If you press the + symbol you will see that you can pick -. However, selecting - doesn't do anything right now. Let's change that.
3. Return to the block editor.
4. We need the text that is displayed on the ListPicker1 to change when the user selects a new choice. Find when ListPicker1.AfterPicking do and drag it to the board.
5. Find the blocks set ListPicker1.Text to and ListPicker.Selection under ListPicker1 on the left and snap them into  when ListPicker1.AfterPicking do
6. ListPicker.Selection 's value is whatever the user has picked. Read the blocks and understand why the text changes.  when ListPicker1.AfterPicking do set ListPicker1.Text to ListPicker.Selection
7. Try clicking on ListPicker1 on your phone.
8. Notice now that, while the symbol changes, hitting the calculate button will only add the numbers and never subtract. We need the app to know what to do if + was changed to -

---

If-Then Statements

1. Remember that  ListPicker.Selection 's value is whatever the user has picked. We want the app to add numbers when the user selects + and subtract numbers when - is selected. To do this we need to use an If  block. Go to the Built-In tab on the left. Find the If  block under Control tab and add it to your  when Calculate_Button.Click do then snap your whole  set Results_Label.text to under the  If   like this: 
   
2. We need to fill in the "test" part of the of the  If   block.
3. Snap an = block into the test. = is a Math block. 
   
4. Now snap a  ListPicker.Selection and a text block into the equals. A text block is found under the Built-In tab. Click on the text box and change the text to +: 
   
5. Now, when you click the Calculate_Button, If the ListPicker1 selection is +, then the app will add the two numbers together.
6. Let us make subtraction work now. Rebuild the If block and its contents but change the text to -  and the +  math to - . (Tip, you can copy and paste blocks)

Test out your app. You should be able to add and subtract numbers now.