Button

**I. Introduction** Dr. Horrible can't take on just any old henchman. One must be of a certain moral fiber. He needs you to implement a on-line screening application to reject unqualified recruits.

media type="custom" key="7737619" align="left"

II. Learning Objectives
//**Key messages:**//
 * **Objects** - programs are made up of objects. Objects have data (variables including other objects) and behavior (functions). You can make more than one copy of an object.
 * **Class** - a class is the code that defines an object (i.e., a class of objects). Each class goes in a separate file. By analogy, the class defining a "Prius" would be the engineers blueprint for that kind of car.
 * **Instance** - an instance is a single copy of an object. By analogy, an instance of a Prius would be the car sitting in my garage.
 * **Variables** - a variable is just an instance of object with a name. By analogy, "myPrius" would be variable that refers to the Prius sitting in my garage. You can change the value of a variable. By analogy, I could sell my 2008 Prius an buy a 2010 Prius and "myPrius" would now refer to the 2010 Prius.
 * **Assignment operator** - to set the value of a variable, you use the "="
 * **Functions** - functions are like macros. A function defines a set of multiple lines of code that can be re-run by calling the function. If variables are nicknames you give to objects, functions are nicknames you give to sets of code. Functions can take variables as input. This allows you to change, a.k.a. parameterize the behavior of the function without rewriting it. Functions can also return a variable as output.
 * **Events** - events are messages that are passed between objects. More precisely, an object can dispatch an event when something happens (e.g., like the user clicking a button) and an one or more event handlers (functions) can receive the event and so something in response.
 * **Button** - you know what a button is, but we'll show you what a Button object looks like in MXML.
 * **String** - String is what text is called in actionscript. For some reason programmers decided that text should be called a string (of characters).

//**Skills.** By the end of the lesson, you'll be able to...//
 * Create buttons
 * Assign values to variables
 * Create functions to handle button events

III. Concepts
We're going to start using some programming terminology now, but **DON'T PANIC.** It may take a little while for it to start to making sense. We just want to get you warmed up so you can start sounding like a programmer.

Objects, Classes, and Instances, Oh my!
The first word you need to learn is **Object**. Objects are the "nouns" of a program. Pretty much everything in a program is an object. For example, the Label you made in the Hello World program is an object, an Application is an object, a Button is an object, and so on, even your "Hello World!" program itself is an object. Each file in your program pretty much defines a single object. We sometimes like to distinguish the between the **Class** (the file where your object is defined) and an **Instance** of an object (a particular copy of the object). By analogy, let's say you have a "Toyota Prius" object. The Toyota Prius class would be the blueprint for the car, and a Toyota Prius instance would be the particular Toyota Prius sitting in my garage, which is just one of many copies. We're not actually going to make an Object from scratch for a while, but can see now that you're already used objects in your Hello World program! Each object can have it's own variables (data) and functions (behavior).

Variables
Variables are just object instances with their own nickname. So how do you make a variable? In MXML you create an instance of an object when you add a to your MXML file: code format="mxml" 

code

code format="mxml"  Hello World!  code In actionscript you create object instances with the "=" sign: code format="actionscript3" var someText:String = "Hello World";

var myButton:Button; myButton = new Button;

var myEcoMobile:Prius = new Prius; code See that "var" in the actionscript code? The //var// stands for //variable.// A variable is just an instance of an object with its own name, e.g., //myEcoMobile//. It's a variable because, just like in algebra, it has a name and we can change it's value.

Functions
Functions are just a bunch of lines of code put together that you can run again and again, like a macro. You can make your function more flexible by letting it take variables for input. Functions can also return a variable as output. A function looks like this: code format="actionscript3" function drive(speed:Number, direction:String):void{ // ... some stuff ... } code The name of this function is //drive// and it takes the variables //speed// and //direction// as input and doesn't return any output, i.e., the output is //void//. The input variables for the function are called the function's //parameters//.

Dot notation
So how do you use an the variables and functions of an object (which is just another variable)? In Actionscript, Java, and C++ it's called //dot notation//, like this: code format="actionscript3" myPrius.speed = 55;                      // set the speed of the prius to 55,  it's the law

var currentSpeed:Number = myPrius.speed; // save the speed of the prius into another variable

var myPrius.drive(55, "North");          // call the drive function, and give it 55 and "North" as input code In MXML, you can't really call functions, but you can set the value of an object's variables like so: code  code So there you have it. That's about two-thirds of the programming language grammar right there (we'll look at the other third, control statements, in the next lesson). Every program you will write will be more and more complex combination of the syntax above. One final concept ...

IV. Scenario
Your task: write a 1-question quiz program.

**Evil Henchman Screen Program**

Use Case 1. Ask potential henchman the Purity Test question 2. Potential henchman answers the question 3. Give potential henchman feedback

V. Program
Here's the program you will write: code format="mxml"  

  

 <![CDATA[

protected function button1_clickHandler(event:MouseEvent):void{ _feedback = "Wrong!"; }

protected function button2_clickHandler(event:MouseEvent):void{ _feedback = "Right!"; }

protected function button3_clickHandler(event:MouseEvent):void{ _feedback = ""; }

]]>   

   <s:Button x="101" y="143" label="Reset" click="button3_clickHandler(event)"/> <s:TextArea x="10" y="57" height="23" text="{_feedback}" width="251"/> </s:Application>

code

VI. Self-explain (Try it!)
Walk through each line of the program and try explaining what each line does. Here are a few hints for things we haven't talked about:
 * MXML puts GUI objects between other GUI tags, and non-GUI objects in their own special section between the <Declarations> tag.
 * You can use actionscript in an MXML file by putting it between a <Script> tag
 * The //click// in <Button> is an Event, not a variable, e.g., click="button1_clickHandler(event)". We'll talk about that later. For now, just know that when the user clicks on a Button, button1_clickHandler(event) will be run.

VII. Program Walkthrough (Try it!)
To create the Button program, try the following steps.
 * Create a Flex project
 * Lay out the interface: question, 2 buttons, label
 * Create click handlers for buttons (will automatically generate functions and script tag)
 * Create a variable called feedback
 * Fill in the event handlers
 * Test it
 * Export the project
 * Upload the binary

VIII. On your own (Try it!)
Try creating a guessing game, e.g., guess a number between 1-5, with buttons for each option.

- were you able to construct the program?
- do you feel the learning objectives were met? - what questions do you have?