Day 2: Block Editors / Buttons and Labels

What We're Going to Learn Today

In today's tutorial, we are going to quickly repeat some of the Day 1 tutorial, and we are going to add buttons to 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.

Finally near the end of the page you will learn how to get the app on a real Android phone. Click here to go to that section.

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.

Connect Your Emulator

    1. Select Connect from the menu bar at the top of the page and click on Emulator to launch it.

    2. Once the Emulator is running go on to the next step.

Let's Start

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

  1. Under the Drawing and Animation section of the Palette, click and drag Canvas into the Viewer.

  2. Select Canvas1 in 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. Then drag Ball onto the 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. Click on the Blocks button to open the code blocks view

    2. Click on Ball1. A list of "Blocks" will appear.

    3. With your mouse, grab the when Ball1.EdgeReached block and drag it onto the board.

    4. Next, click Ball1 on the side again. Drag the call Ball1.Bounce block and snap it into when Ball1.EdgeReached

  1. Finally, click Variables on the side bar and drag and snap a blank get block into the edge connection on call Ball1.Bounce then click the down arrow and select edge.

In the Emulator the ball should be bouncing back and forth, left and right on your screen.

Buttons

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

  1. Click the Designer button to return to the Designer window.

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

Notice how every time we add a component from the palette 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.

    4. Look at your Emulator. Note that renaming the buttons did not change the buttons' labels. This is done by changing the buttons' text in the Properties window.

    5. In the Properties window change "Text for Button1" to Speed Up and "Text for Button 2" to Slow Down and check the Emulator to see what happened.

Try pressing the buttons on your 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. Click the Blocks button to open up the Blocks Editor.

  1. 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, click on the "Math" tab and drag out the + block 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 + block

    1. Go to Math and drag the number (0) block out and snap it into the right side of the + block. Click on the zero and change the value to 1.

    1. Try pressing the "Speed Up" button on your Emulator. When you press it, the Button_SpeedUp.Click block changes the Ball1.Speed to the current Ball1.Speed + 1. Look at the blocks and be sure you understand what is happening when you press the "Speed Up" 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. Once you do this you will have created these blocks for your two buttons:

    1. Press the "Speed Up" and "Speed Down" buttons. What happens to ball1 on your Emulator?

    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 in the Properties window or by giving them values in the blocks editor.

  1. Return to the Designer window by clicking the button on the upper right.

    1. Drag Label into the Viewer and place the label under the Button_SpeedDown. Drag another Label and put it under Label1.

    2. In the Properties window change the Text for Label1 to "Ball speed is:"

    1. Now go back to the Blocks Editor

    2. We want the text of Label2 to change 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 by clicking on Label2 in the Blocks window 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 by clicking on Ball1 and fit them into each of these new set Label2.Text blocks.

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

Getting the App on an Android Phone

    1. In the top menu click Build and select to build the app and either provide a QR code to get it on your phone (if you have a QR reader) or download to your computer as a file called somefilename.apk where "somefilename" is the name of your App Inventor project (Day2.apk for this project)

    1. If you chose to download the .apk, the file will appear in your Downloads folder.

    2. You can attach this file to an email that you send to your or a friend's phone.

    3. Look at your phone email and click the file name to download it to your phone. It should automatically install.

    4. Open your apps folder and look for "Day2" and run it.

    5. Congratulations, you made a real Android phone app!

Challenge Stuff

Here are some things to try.

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: 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 doesn't know the answer to this... yet.