FLEX-2 ActionScriptFLEX-2 ActionScript

Web 2.0 and Rich Internet Applications

Prof. Suthikshn Kumar

Programming Flex2 Programming Flex2

• Chap 1: Introduction to Flex• Chap 2: Building Applications with Flex Framework• Chap 3: MXML• Chap 4: ActionScript• Chap 5: Framework Fundamentals• Chap 6: Managing Layout• Chap 7: Working with UI Components• Chap 12: Working with Data

ActionScriptActionScript• Language Overview• Objects and Classes• Packages and Namespaces• Variables and Scope• Case Sensitivity and General Syntax rules• Operators• Conditional, Looping• Functions, Nested Functions• Functions as Objects• Function Scope• OO programming in ActionScript• Classes, Interfaces, Working with String objects• Working with arrayts• Erreor Handling in ActionScript• Try/Catch• Working with XML

Flex FrameworkFlex Framework

• Written using ActionScript• Defines controls, containers and managers designed to

simplify building rich internet applications.• The Flex class library consists of following categories:

– Form Controls: buttons, text inputs, text areas, lists, radio buttons, checkboxes, combo boxes

– Menu controls: popup menus and menu bars– Meda components: images, audio, vide– Layout containers: User layout containers to place contents within

a screen . Build sophisticated layouts with grids, forms, boxes, canvases and more.

– Data components and Data binding: connectors that simplify remote procedure calls, data models to hold the data that is returned, and data binding to associate form control data with data models.

Flex FrameworkFlex Framework

• Formatters and Validators• Cursor Management: Cursor appearance is changed

inorder to notify users of waiting on a response from data service

• State Management: • Effects: Animations such as fades, zooms, blurs and

glows• History management: back and forward buttons• Drag and drop management• Tool tips: Add tool tips to user elements• Style Management: Directly or using CSS

Flex ElementsFlex Elements

• Flex framework includes core set of languages and libraries that are the basis pf any flex application.– MXML: is an XML based markup language that

describes the screen layout. Form controls, media playback controls, effects, transistions, data models, data binding

– ActionScript: Programming language understood by Flash Player. ActionScript can respond to events such as mouseclicks.

Flex Application FrameworkFlex Application Framework

How Flex WorksHow Flex Works

How Flex Applications WorkHow Flex Applications Work

Source

Action Script

MXML

Assets ( PNG, GIF etc.)

ActionScript + Generated ActionScript

Assets (PNG, GIF)

Code Gen Flash Player

AVM2 Bytecode + Assets

ActionScript BasicsActionScript Basics

• Familiar syntax– Similar to C++, Java, C#, JavaScript

• Dynamic Language, Weak Typing– Similar to ColdFusion– Variables can hold any type

• Support for Strong Typing– Can bind variable to specific data type– Faster code execution– Easier to develop

• More help from compiler• Easier to find bugs via Flash Debug Player and type errors

ActionScript Basics – Part 2ActionScript Basics – Part 2

• Strong typing– Uses “strict” compilation mode

• Enabled by default• Best practice

– var value:Number;– function f( param1:String ):Number { … }

• The * datatype– Any type– http://www.darronschall.com/weblog/archives/000210.cfm

ActionScript Basics – part 3ActionScript Basics – part 3

• Visibility Modifiers– public

• Accessible to anyone

– private• Only accessible inside the class (current .mxml file)

– protected• Accessible inside the class and subclasses

– internal• Only accessible to classes in the same package• Default value (when visibility is omitted)

ActionScriptActionScript• ActionScript is the object-oriented programming language used for Flex

development.

• Like JavaScript,ActionScript 3.0 is an implementation of ECMAScript,the international standardized

• programming language for scripting. • However, because it is an implementation of the latest ECMAScript proposal,

actionScript provides many capabilities not common in the versions of JavaScript supported by most browsers.

• At development time, actionScript 3.0 adds support for strong typing,interfaces,delegation,namespaces,error handling,and ECMAScript for XML (E4X).

• At runtime,the most significant difference between JavaScript and ActionScript is that ActionScript is just-in-time compiled to native machine code by Flash Player.

• As a result, it can provide much higher performance and more efficient memory management than interpreted JavaScript.

• Flex developers use ActionScript to write client-side logic, such as event listeners and call-back functions, r to define custom types for the client application.

SyntaxSyntax

VariablesVariables• In ActionScript 3.0,every object is defined by a class.A class can be

thought of as a template or a blueprint for a type of object.• Class definitions can include variables and constants,whichhold data

values,and methods,which are functions that encapsulate behavior bound to the Class

• The values stored in properties can be primitive values or other objects.Primitive valuesare numbers,strings,or Boolean values.

• var someObj:Object;• var someObj;• ActionScript 3.0,however,introduces the concept of untyped

variables,which can be• designated in the following two ways:• var someObj:*;• var someObj;• An untyped variable is not the same as a variable of type Object.The

key difference is thatuntyped variables can hold the special value undefined ,while a variable of type Object cannot hold that value.

VariableVariable

Understanding variable scopeUnderstanding variable scope

• The scope of a variable is the area of your code where the variable can be accessed by a lexical• reference.• A global variable is one that is defined in all areas of your code,whereas a local• variable is one that is defined in only one part of your code.• In ActionScript 3.0,variables are always scoped to the function or class in which they are declared.• A global variable is a variable that you define outside of any function or class definition.

• For example,the following code creates a global variable strGlobal by declaring it outside of any function.• The example shows that a global variable is available both inside and outside the function definition.

– var strGlobal:String ="Global";– function scopeTest ()– {– trace(strGlobal);//Global– }– scopeTest();– trace(strGlobal);//Global

• You declare a local variable by declaring the variable inside a function definition.• The smallest area of code for which you can define a local variable is a function definition.

• A local variable declared within a function will exist only in that function.For example,if you declare a variable named str2 within a function named localScope(),that variable will not be available outside the function.

SyntaxSyntax