PaintPot Demonstration

Instructional Day 3

Topic Description:  Students will observe the teacher building an entire app from beginning to end

The students will be able to:
  • explain the role of the component designer, block editor, and phone/emulator
  • understand the role of problem decomposition - that it is important to break a larger problem into smaller parts and solve one part at a time
  • understand the event-driven nature of App Inventor programming
  • understand that variables contain values and make programs easier to modify later
Outline of the lesson:
  • Engage: Demonstration of PaintPot app (5 minutes)
  • Explain: Teacher demonstrates the creation of PaintPot (40 minutes)
  • Evaluate: Students answer questions about PaintPot and App Inventor programming or write a short description of PaintPot (5 minutes)

  • Computer with App Inventor installed and hooked up to projector
  • PaintPot app
Lesson details:
  1. Introduction: have a fully-functional version of PaintPot (including part 2) built, open, and projected so students can see it. For this you can either use a projector connected to a computer with the app running on the emulator or you can use a document projector and the app on a phone. Show the interface. Ask students to predict what you should do to make it work and what will happen when you do. Then demonstrate the app.
  2. Follow the PaintPot tutorial to demonstrate how to create the app. Demonstrate problem decomposition by first describing how you will break up the program into parts to create it:
    1. Create a new project. From the designer, open the block editor and open the emulator. Remind students that they saw these three parts on the handout of HelloPurr.
    2. Create the interface:
      1. For each of the three color buttons, drag the button component onto the screen, change the text attribute to the name of the color and the background color to the color then rename the button in the components list. 
      2. Add a HorizontalArrangement component, set the width to Fill Parent, change the name to ThreeButtons, and drag the three buttons into it. The button components are now indented under the HorizontalArrangement in the components list, showing they are subcomponents. The buttons appear on the emulator. 
      3. Add a canvas component under the horizontal arrangement. Change its name to DrawingCanvas, set its width to Fill Parent, and its Height to 300 pixels. Change the background image to either the kitty.png from the HelloPurr tutorial or to another image such as one selected by the students. Make sure the image is around 300X300 pixels. 
      4. Finally add a button under the canvas, name it ButtonWipe, and change the Text attribute to "Wipe".
    3. Point out that while we have a good interface, there is no functionality. Clicking on the buttons or drawing on the canvas in the emulator does not do anything. This is because there are no commands for the computer other than what the app should look like. Switch to the Blocks Editor and point out that there are no blocks. Ask students what events should happen. As they generate each idea, program it and show that it works:
      1. Wipe button event handler. Drag out the when ButtonWipe.Click block. From the DrawingCanvas drawer, drag the call DrawingCanvas.Clear block into the do section of the eventhandler. 
      2. Color button event handlers. For each button, drag out the when [button].Click block. Insert the set DrawingCanvas.PaintColor to block and add the appropriate color either from the Built-In colors drawer or by clicking on the background. 
      3. Touch event handler to draw a small circle when the canvas is touched. Drag out the when DrawingCanvas.Touched block. Explain the name blocks x, y, and touchedSprite: they get the information of where the touch occurred and what was touched. New value blocks appear in the My Definitions drawer that correspond to the name blocks; they set the information of where something should happen. Drag call DrawingCanvas.DrawCircle into the event handler and insert the value x and value y blocks so that the circle will appear where the person touched. Set the radius (r) as 5 or some number chosen by the students; you can experiment to see what they prefer, demonstrating that the program updates immediately.
      4. Drag event handler to draw a line when a finger is dragged along the canvas. Drag out the when DrawingCanvas.Dragged block. A drag looks like a giant curved line but is actually a lot of tiny straight lines, so the event handler keeps track of where the line started originally (start), where the most recent line segment started (prev) and where the finger is (current). Use DrawingCanvas.DrawLine with the values prevX, prevY, currentX, and currentY.
    4. Add two new buttons to have different size dots. 
      1. Go back to the designer and add two buttons for Big Dots and Small Dots. You can put these into a new HorizontalArrangement containing the Wipe button.
      2. The size of the dot is set in the DrawingCanvas.Touched event, when DrawingCanvas.DrawCircle has its radius (r) set. The radius can only have one value, so we need to use a variable. Explain that variables are names that can have multiple values. From the Built-In column's Definitions drawer, use def variable blocks to create a variable for dotsize and set it to 2. Change the touch event handler so DrawingCanvas.DrawCircle has a radius of dotsize rather than 5. Discuss code generalizability and the benefits of creating variables for small and big. 
      3. Create event handlers for when the ButtonBig and ButtonSmall are clicked to set the dotsize to either the larger radius or smaller radius. 
      4. The final program should look approximately like this:

  3. Wrap up: 
    1. Ask students to explain the role of the component designer, block editor, and phone/emulator. What does each do? How does adding a component affect the block editor? The phone or emulator? How does creating a block of code change the designer? The phone? Does interacting with the phone change the program? 
    2. Ask students why it is better to have variables for big and small rather than just hard-coding the values (A: to make it easier to modify later). 
    3. Make sure students understand that dotsize must be hard-coded initially (rather than using either variable small or big) because you cannot predict the order of initialization - dotsize may exist before small or big does. This is a downside of App Inventor over imperative languages.  
  4. Optional homework or writing exercise: The program has a bug: if you start drawing before pressing any of the paint buttons, the paint color will be black; but after you choose a color, there's no way to get back to black. Have students write down how they would solve the problem. 
    Alternatively, have students describe what is happening in PaintPot in the designer, the blocks editor, and the phone; this should reinforce the differences between interface, functionality, and user experience.