Roster

**I. Introduction**
media type="custom" key="7886093" align="center"

**II. Learning Objectives**
//**Knowledge**// //**Skills**//
 * Arrays
 * For loops
 * For each loops
 * Data providers
 * Iterate over arrays using for loops

**III. Concepts**
Let's say you you have a class called CarFactory for making cars. Maybe it looks like this: code format="actionscript3" package edu.nu.sesp {   public class CarFactory {       public function CarFactory{}
 * Arrays**

public function makeCar:Car{ var car:Car = new Car; car.speed = 0; car.color = "red"; return car; }   } } code As you can see, this isn't a very good car factory. The makeCar function only creates a single car. You could improve it by changing the makeCar function so that it creates several cars: code format="actionscript3" package edu.nu.sesp {   public class CarFactory {       public function CarFactory{}

public function makeCars:Array{ var cars:Array = new Array;

var car1:Car = new Car; car1.speed = 0; car1.color = "red"; cars[0] = car1;

var car2:Car = new Car; car2.speed = 0; car2.color = "red"; cars[1] = car2;

return cars; }

} } code This function uses an Array, which is just a list of objects. If you want to get or set the value of array at a given position, you can access it using the array index. The first item in the list is at position 0, the second is at 1, the third is at 2, and so on. 0 is the first positive integer, so we count from 0, not instead of 1, which is confusing at first.

Of course, even with an Array, this makeCars function still isn't much better. It would be nice if you could tell the makeCars function how many cars to make. Maybe something like this: code format="actionscript3" package edu.nu.sesp {   public class CarFactory {       public function CarFactory{}

public function makeCars(numCars:int):Array{ var cars:Array = new Array;

if(numCars >= 1){ var car1:Car = new Car; car1.speed = 0; car1.color = "red"; cars[0] = car1; }

if(numCars >= 2){ var car2:Car = new Car; car2.speed = 0; car2.color = "red"; cars[1] = car2; }

if(numCars >= 3){ var car3:Car = new Car; car3.speed = 0; car3.color = "red"; cars[2] = car3; }

return cars; }   } } code This is a slight improvement, but not by much. This will allow you to tell makeCars to create between 0 and 3 cars, but if you ask for 4 cars, the function breaks because it will only make at most 3 cars.

If you want to run a set of code multiple times, you should use a for loop like this: code format="actionscript3" package edu.nu.sesp {   public class CarFactory {       public function CarFactory{}
 * For loops**

public function makeCars(numCars:int):Array{ var cars:Array = new Array;

for(var i:int = 0; i < numCars; i++){ var car:Car = new Car; car.speed = 0; car.color = "red"; cars[i] = car; }

return cars; }

} } code The first line of the for loop has three parts:
 * The first part (var i:int = 0) before the first semi-colon is the //initializer//. This //initializer// code will be run only //one-time, before// the code inside the loop. In this case, we just create a variable i and sets it equal to 0.
 * The second part (i < numCars) is the //loop-test//. This part is run each time through the loop before the code inside the loop. If the condition in the loop test evaluates to //true//, then code inside the loop will be run. If the loop-test evaluates to false, the we finish the loop and move on to the next line of code after the loop.
 * The third part (i++) is the //counting expression.// The counting expression will be run every time through the loop, after the code inside the loop. In this case i++ will increase the value of i by 1. The counting expression is usually used to modify the variable in the initializer. Each time through the loop, the value of i increases until the loop-test (which checks if i gets too big) stops the loop.

There's another kind of for loop called a for-each loop that can be slightly more convenient to use in some cases. Let's say you want to write a method //paintCars// that takes an array of cars and gives them all a certain color. You could use a for each loop like this:
 * For each loops**

code format="actionscript3" package edu.nu.sesp {   public class CarFactory {       public function CarFactory{}

public function makeCars(numCars:int):Array{ var cars:Array = new Array;

for(var i:int = 0; i < numCars; i++){ var car:Car = new Car; car.speed = 0; car.color = "red"; cars[i] = car; }

return cars; }

public function paintCars(cars:Array, newColor:String):void{ for each(var car:Car in cars){ cars.color = newColor; }       }    } } code The for-each loop is designed especially for situations where you already have an array (or other type of list) of objects and you want to do something with each object in the list.

Many of Flex's GUI components, such as the List take data providers. The data provider defines the content that should be displayed in the GUI component. For example, the List component can take an ArrayColllection (very similar to an array) as it's data provider. You might put a bunch of strings in an ArrayCollection then set that as the data provider for the List component, which would then display the strings and allow you to click on them. You see an example of this later in the program.
 * Data providers**

**IV. Scenario**
**Evilizer**

Use Case 1. Display the list of henchmen 2. Dr. Horrible click on evilize button 3. The list of henchmen is shown with their new evil nicknames.

**V. Program**
code format="mxml"  

  Rob Mathilde Curt Kerry   

 <![CDATA[

private function loadNames:void {               var names:ArrayCollection = new ArrayCollection; for each(var name:String in _henchmen){ var evilName:String = "Evil " + name; names.addItem(evilName); }               _evilNames = names; }

]]>   </fx:Script> <s:List x="10" y="10" width="107" height="103" dataProvider="{_henchmen}" /> <s:Button x="125" y="47" label="Evilize &gt;" click="loadNames"/> <s:List x="202" y="10" width="107" height="103" dataProvider="{_evilNames}" /> </s:Application>

code

**VI. Self-explain (Try it!)**
Go over each line of the program and explain out loud to yourself what it does.

**VII. Program Walkthrough (Try it!)**
Follow these steps:
 * Create a new Flex project
 * Layout the interface, using two lists and a button
 * Create an ArrayCollection with all the names of all the henchmen in the Declarations section
 * Set the the names of the henchmen as the data provider for the first list
 * Create an event listener for the button
 * Inside the event listener, use a for each loop to iterate over the names in the henchmen names list adding "Evil" in front of each name. Set the list of evil names as the data provider for the second list

**VIII. On your own (Try it!)**
Do something interesting with arrays and for loops. For example. you could:
 * Give each henchman a random evil name. Make a list of Evil prefixes such as "Evil", "Obnoxious", "Dr." etc. Then, when you loop through your list of henchman names, loop through the prefixes to append. Try changing the length of the henchmen array (but not the prefix array) so that there are a different number of prefixes and henchmen.

**IX. Check Yourself**
Try answering these questions:
 * Create a function that calculates the first n numbers of the Fibonacci sequence: 1, 1, 2, 3, 5, 8, 13, 21 (where each number in the sequence is the sum of the previous numbers).
 * Create a 13x13 array representing the times tables from 0 to 12.