Day 2: Block Editors / Buttons and Labels

What We're Going to Learn Today

In today's tutorial, we are going to repeat quickly some of the Day 1 tutorial. Today, we are going to add some buttons on the app. These buttons will change the speed and heading properties of the bouncing ball directly from the app instead of having to manually change them in the app inventor.

We are also going to add a text label which will show us the ball's current speed and heading.

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 Day2
4. Click on Day2 to open it
5. Open an emulator or connect your phone to app inventor using the MIT Companion App

Let's Start

We are going to quickly rebuild the bouncing ball app we made in Day 1.

1. Under the Drawing and Animation section of the Palette, click and drag Canvas from the Palette into the Viewer.
2. Select on Canvas1 on the Components window (it should be under Screen1)
3. Under the Properties window change Canvas1's Width and Height to 200px.
4. Under the Properties window change Canvas1's background color to green.
5. Under the Palette's Category Drawing and Animation, drag Ball onto the Viewer's Canvas1. Place the ball anywhere on the Canvas.
6. Ball1 should now be under Canvas1 on the Components window.
7. Select Ball1 on the Components window and change the speed property to 1.0 and the interval to 10.

Ball Bounce

It is time to make the ball bounce. The following steps are done exactly as they were in Day1.

1. Under Blocks, click on Ball1. A list of "Blocks" will appear.
2. With your mouse, grab the when Ball1.EdgeReached block and drag it onto the board.
3. Next, click Ball1 on the side again. Drag the call Ball1.Bounce block and snap it into when Ball1.EdgeReached
1. Finally, open the edge bubble and drag and snap the value edge piece into the call Ball1.Bounce

The ball1 should be bouncing back and forth, left and right on your screen.

Buttons

In Day1 we changed the speed of ball1 by changing its properties in the app inventor. Now we are going to make a button to do that for us.

1. Under the User Interface section of the Palette, click and drag Button from the Palette into the Viewer. Place the button under the green canvas.
2. Drag another button and put it under button1.

Notice how every time we add component from the pallet to the viewer it gets a number next to its name? If we added 3 more buttons what would they be called? It is important to know that we can rename these to whatever is useful for us. Renaming them helps us keep track of them for later. Let's rename them.

1. On the Components window, select Button1 and click "Rename."
2. Rename Button1 to Button_SpeedUp.
3. Rename Button2 to Button_SpeedDown.

1. Look at your phone. Note that renaming the buttons didn't change the text label on the buttons. To do that we need to change each button's Text property.
2. Change Button_SpeedUp's Text to "Speed Up"
3. Change Button_SpeedDown's Text to "Speed Down"

1. Try pressing the buttons on your emulator or phone. They don't do anything. Renaming components doesn't make them do things. We make things happen in the Blocks Editor.

Button Blocks / SpeedUp

1. Pull up the Blocks Screen.
2. Under Button_SpeedUp, drag the when Button_SpeedUp.click block and put it on the board.

1. Under Ball1, drag the set Ball1.Speed to block and snap it into when Button_SpeedUp.click

1. On the left, go to Math and drag the + block out and snap it into the set Ball1.Speed to block

1. Under Ball1, drag the Ball1.Speed value block and snap it into the left side of the +
   1. On the left, change to the "Built In" tab once again.
   2. Go to Math and drag the number block out and snap it into the right side fo the + block. Click on the numbers and change the value to 1.

1. Try pressing the "Speed Up" button on your emulator or phone. Do you see how when you Button_SpeedUp.Click the Ball1.Speed is set to + 1 whatever the current Ball1.Speed is? Look at the blocks and understand what is happening when you press the button.

Button Blocks / SpeedDown

Lets repeat the steps we followed for Button_SpeedUp for Button_SpeedDown.

This time, instead of doing +1, we want -1. Create this block set up:

1. Press the "Speed Up" and "Speed Down" buttons. What happens to ball1 on your emulator or phone?
2. Can you get the ball1 to stop moving? When ball1 isn't moving can you guess what the value of Ball1.Speed must be?

Labels

Labels handle text. You can change what text they display by changing the Text field on the properties window or by giving them values in the blocks editor.

1. Under the Basic section of the Palette, click and drag Label from the Palette into the Viewer. Place the label under the Button_SpeedDown.
2. Drag another label and put it under label1.
   1. Change the Text of Label1 to "Ball speed is:"

1. Pull up the Blocks Editor again
2. We want the text of Label2 to be changed to whatever the speed of ball1 is every time we click a button. This way we can see how fast it is moving.
3. Find the set Label2.Text block under the "My Blocks" tab on the left and add it to both the Button_SpeedUp.Click and Button_SpeedDown.Click blocks we've been working with.
1. Find Ball1.Speed blocks under "My Blocks" and fit them into each of these new set Label2.Text blocks.

1. What happens when you press the buttons now?
2. Notice the ball1 doesn't bounce if it has a negative speed?

Challenge Stuff

Here are some hard things to try to do. If you don't want to try any of these, or are finished:

Regular Challenge: Make two new buttons. One that increases ball1's heading by 10 and one that decreases it by 10 every time you click them.

Super Hard Challenge: Can you make it so you can fling the ball around by using your finger?

Super SUPER Hard Challenge: Having completed Regular Challenge, make a little game where you "drive" ball1 around the canvas collecting objects that increase your "score." This will take a lot of time and planning.

Developers Debugger Challenge: Figure out why the ball doesn't bounce when its speed has a negative value. Is there a solution or work around for this? Note: Mr. Incorvia does't know the answer to this... yet.

Middle School Android App Inventor Tutorials by Richard Incorvia is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.