Objectives

• Learn about the Canvas component and its x-y coordinate system.
• Learn how to code an app that lets the user draw lines and circles.
• Learn about event parameters and function call parameters

Outline

1. Demonstrate the canvas component and the drawing functions.

2. Students build “PaintPot”

3. PaintPot: Conceptualize

4. PaintPot: Customize

Preparation

Print out copies of the Conceptualize and Customize worksheet.

https://docs.google.com/document/d/1Z2qInms4ljksa_y-1DmwfjvloaeCL_s2DZbwKFwVNsY/

1. Demonstrate the Canvas Component and Drawing Functions (15)

• Drag out a canvas component.
• Demonstrate that you should set its width to “fill parent” and height to some fixed number (e.g., 300)
• Add a button below the canvas and program the Button.Click to draw a circle at a fixed place. Introduce the term “Function parameter” for the x,y, and radius of the Canvas.DrawCircle function.
• Demonstrate drawing a circle where the user clicks using the Canvas.Touched event.
• Optional/Alternative: have the students read/view the learning nugget: appinventor.org/Drawing

2. Students build “PaintPot”(45)

Ask the students to build PaintPot using the book chapter tutorial: http://www.appinventor.org/PaintPot2 or the video http://www.appinventor.org/paintpot2-steps

Optionally, ask the students to create a portfolio page and post the PaintPot app on it. You may want to do this to ensure students complete these tasks and/or for the students to have a record of their work. But you might also want to only require “publishing” for creative projects.

3. Concepts (45)

a. Ask the students to read/watch the following Learning Nuggets:

  http://appinventor.org/Drawing

  http://www.appinventor.org/Variables

Optionally, you can go over the concepts in these nuggets in a lesson.

b. Small group discussion of concepts/terminology (45)

Hand out the document below and ask the students to form groups of two or three to discuss. After a few minutes, lead a full-class discussion of the first few questions, then repeat the process.

Conceptualize and Customize Worksheet:

https://docs.google.com/document/d/1Z2qInms4ljksa_y-1DmwfjvloaeCL_s2DZbwKFwVNsY/

The worksheet presents some difficult terminology. Here are some simple ways to define the terms:

variable-- a named memory cell

component property-- a named memory cell that is part of a component

function call parameter-- information a function (e.g., DrawCircle) needs to do its job.

event parameter-- information the system provides to an event handler about the event.

4. Customization Exercise

The first two exercise push the students to think about user interface issues, e.g., giving feedback to the user when one of the color buttons is chosen.

The second introduces the TextBox component in the task of allowing the user to enter any number for the circle size.

The third reinforces the difference between a variable and a property-- the task asks that the size of lines be modifiable. LizeSize is a property of Canvas, whereas there is no such property for circle size (hence the need for the dotSize variable).