Flex Book Club: Chapter 5

Learning The Basics of ScriptingPart 1

Topics Covered Today…

• Review Last week by finding examples of…– IDs– Inline ActionScript– Dot Notation– Assignment– Functions– Variables

• Objects, Classes and ActionScript…oh My!

ActionScript MXML

Today’s Process for Learning

• Tell the story, then live it.• Our Story has two characters…

As different as these guys are…

• Through a series of arguments, I am going to prove to you that MXML and ActionScript are actually the same thing.

ActionScript MXML

Argument 1: id’s are variable names

• MXML id’s are actually just variable names in ActionScript

ActionScript MXML

<mx:Button id=“myButton” />

var myButton:Button = new Button();

Argument 2: Inline ActionScript

• We can mix MXML and ActionScript with inline ActionScript when using event handlers.

ActionScript MXML

<mx:Button id=“myButton” click=“panel.label = ‘something’”/>

Razone Tres (Argument 3): Dot Notation

• Attributes in MXML are used the same way dot notation is with ActionScript properties.

ActionScript MXML

<mx:Panel id=“myPanel”label=“Something” />

myPanel.label = ‘Something’;

Argument 4: Assignment

• When assigning values to Properties or Attributes we use the equals sign (=), which is actually called the assignment operator.

ActionScript MXML

<mx:Panel id=“myPanel”label=“Something” />

myPanel.label = ‘Something’;

Argument 3/4 Rebuttal: Assignment Operations

• Earlier we saw an assignment to an event. How in Sam Hill do you do that with ActionScript???

ActionScript MXML

<mx:Button id=“myButton” click=“panel.label = ‘something’”/>

Argument 3/4 Rebuttal Rebuttal : Attributes in MXML

• Attributes in MXML actually encompass 3 things in ActionScript

ActionScript MXML

PropertiesProperties

Styles

Event Listeners

Question:

MXML

Yeah, yeah yeah…we get it. “They are the same thing.” But I have a question…If

MXML is so much more succinct, so much easier to write, and in general really hella friggin AWESOME. Why would anyone ever

write a line of ActionScript?

Answer:

ActionScript

MXML is Great for things like laying out what your app is going to look like. However, when it comes time to take action and DO

SOMETHING, MXML looks a lot like the Government in the middle of a credit crisis, Big Talk, No ACTION. That is why they

call is ActionScript afterall…

Getting into ActionScript with Variables

ActionScript

We’ve already seen examples of variables

all over the place used to store information…

public var userName = “Tom”

This is the keyword we

use to declare variables

This is the variable’s

name This is it’s value

Variable Data Types

ActionScript

You might have noticed in the past we did something like…

public var userName:String = “Tom”

This is the data type of the variable we are declaring is a String

That’s just a way of saying what kind of

data the variable holds

See page 54 in “Learning Flex 3” for a reference to all of the fundamental data types.

Functions

ActionScript

Functions, are pieces of code we create to re-use code, so we

don’t have to write it over again.

<mx:Script><![CDATA[

function createUser(){

}

]]</mx:Script>

If we put code between the brackets that creates a new

user, we can re-use that code by calling the method.

Function Parameters

ActionScript

We can also supply our functions with data to make them

more re-usable

<mx:Script><![CDATA[

function createUser(name){

}

]]</mx:Script>

In this case we supply the function with a name to assign

to a new user.

Function Parameters

ActionScript

Furthermore, we can give our function parameters some

default values, and give those

parameters data types.

function createUser(name:String = “Sam”){

}

In this case we say that the parameter has to be a String. Also if there is no

parameter supplied, name will be given the value of “Sam”

Alice…meet the Rabbit Hole

• It’s time to start talking about Objects and Object Oriented Programming.

You down with OOP?

Yeah you know ME!!!

Objects group together variables and functions.

I’m a frog object

ActionScript

We can make anything an object.

Cars, People, Buttons, even frogs!

var frog:Object = new Object();frog.color = “green”;frog.name = “Kermit De Frog”;

We’ll get to grouping in functions later.

A Class is a Blueprint for an object.

I’m a frog class

ActionScript

Think of classes as a way to make objects (or structured data)

re-usable

Public class Frog{ var name:String; var color:uint; …}

We can even put objects within classes.

ActionScript

Classes can help us, especially with code

completion in the Flex IDE!

Public class Pond{ var frog:Frog; var rock:Rock; var name:String;}

If we didn’t convince you before…

• Tags are classes• Lets check out “–keep”• Anything else?

ActionScript

The following facts should illustrate how

ActionScript and MXML are related…

References

• Cole, Alaric. Learning Flex 3 : Getting up to Speed with Rich Internet Applications. Danbury: O'Reilly Media, Incorporated, 2008.