flex book club chapter 5
DESCRIPTION
TRANSCRIPT
![Page 1: Flex Book Club Chapter 5](https://reader038.vdocuments.net/reader038/viewer/2022102922/54631f9fb1af9f936c8b5307/html5/thumbnails/1.jpg)
Flex Book Club: Chapter 5
Learning The Basics of ScriptingPart 1
![Page 2: Flex Book Club Chapter 5](https://reader038.vdocuments.net/reader038/viewer/2022102922/54631f9fb1af9f936c8b5307/html5/thumbnails/2.jpg)
Topics Covered Today…
• Review Last week by finding examples of…– IDs– Inline ActionScript– Dot Notation– Assignment– Functions– Variables
• Objects, Classes and ActionScript…oh My!
![Page 3: Flex Book Club Chapter 5](https://reader038.vdocuments.net/reader038/viewer/2022102922/54631f9fb1af9f936c8b5307/html5/thumbnails/3.jpg)
ActionScript MXML
Today’s Process for Learning
• Tell the story, then live it.• Our Story has two characters…
![Page 4: Flex Book Club Chapter 5](https://reader038.vdocuments.net/reader038/viewer/2022102922/54631f9fb1af9f936c8b5307/html5/thumbnails/4.jpg)
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
![Page 5: Flex Book Club Chapter 5](https://reader038.vdocuments.net/reader038/viewer/2022102922/54631f9fb1af9f936c8b5307/html5/thumbnails/5.jpg)
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();
![Page 6: Flex Book Club Chapter 5](https://reader038.vdocuments.net/reader038/viewer/2022102922/54631f9fb1af9f936c8b5307/html5/thumbnails/6.jpg)
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’”/>
![Page 7: Flex Book Club Chapter 5](https://reader038.vdocuments.net/reader038/viewer/2022102922/54631f9fb1af9f936c8b5307/html5/thumbnails/7.jpg)
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’;
![Page 8: Flex Book Club Chapter 5](https://reader038.vdocuments.net/reader038/viewer/2022102922/54631f9fb1af9f936c8b5307/html5/thumbnails/8.jpg)
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’;
![Page 9: Flex Book Club Chapter 5](https://reader038.vdocuments.net/reader038/viewer/2022102922/54631f9fb1af9f936c8b5307/html5/thumbnails/9.jpg)
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’”/>
![Page 10: Flex Book Club Chapter 5](https://reader038.vdocuments.net/reader038/viewer/2022102922/54631f9fb1af9f936c8b5307/html5/thumbnails/10.jpg)
Argument 3/4 Rebuttal Rebuttal : Attributes in MXML
• Attributes in MXML actually encompass 3 things in ActionScript
ActionScript MXML
PropertiesProperties
Styles
Event Listeners
![Page 11: Flex Book Club Chapter 5](https://reader038.vdocuments.net/reader038/viewer/2022102922/54631f9fb1af9f936c8b5307/html5/thumbnails/11.jpg)
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?
![Page 12: Flex Book Club Chapter 5](https://reader038.vdocuments.net/reader038/viewer/2022102922/54631f9fb1af9f936c8b5307/html5/thumbnails/12.jpg)
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…
![Page 13: Flex Book Club Chapter 5](https://reader038.vdocuments.net/reader038/viewer/2022102922/54631f9fb1af9f936c8b5307/html5/thumbnails/13.jpg)
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
![Page 14: Flex Book Club Chapter 5](https://reader038.vdocuments.net/reader038/viewer/2022102922/54631f9fb1af9f936c8b5307/html5/thumbnails/14.jpg)
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.
![Page 15: Flex Book Club Chapter 5](https://reader038.vdocuments.net/reader038/viewer/2022102922/54631f9fb1af9f936c8b5307/html5/thumbnails/15.jpg)
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.
![Page 16: Flex Book Club Chapter 5](https://reader038.vdocuments.net/reader038/viewer/2022102922/54631f9fb1af9f936c8b5307/html5/thumbnails/16.jpg)
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.
![Page 17: Flex Book Club Chapter 5](https://reader038.vdocuments.net/reader038/viewer/2022102922/54631f9fb1af9f936c8b5307/html5/thumbnails/17.jpg)
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”
![Page 18: Flex Book Club Chapter 5](https://reader038.vdocuments.net/reader038/viewer/2022102922/54631f9fb1af9f936c8b5307/html5/thumbnails/18.jpg)
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!!!
![Page 19: Flex Book Club Chapter 5](https://reader038.vdocuments.net/reader038/viewer/2022102922/54631f9fb1af9f936c8b5307/html5/thumbnails/19.jpg)
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.
![Page 20: Flex Book Club Chapter 5](https://reader038.vdocuments.net/reader038/viewer/2022102922/54631f9fb1af9f936c8b5307/html5/thumbnails/20.jpg)
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; …}
![Page 21: Flex Book Club Chapter 5](https://reader038.vdocuments.net/reader038/viewer/2022102922/54631f9fb1af9f936c8b5307/html5/thumbnails/21.jpg)
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;}
![Page 22: Flex Book Club Chapter 5](https://reader038.vdocuments.net/reader038/viewer/2022102922/54631f9fb1af9f936c8b5307/html5/thumbnails/22.jpg)
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…
![Page 23: Flex Book Club Chapter 5](https://reader038.vdocuments.net/reader038/viewer/2022102922/54631f9fb1af9f936c8b5307/html5/thumbnails/23.jpg)
References
• Cole, Alaric. Learning Flex 3 : Getting up to Speed with Rich Internet Applications. Danbury: O'Reilly Media, Incorporated, 2008.