Introduction to Flex Chaim Sajnovsky DSP-IP

Agenda Introduction to Flex and IDE Hello World Bindable tags Bindable Input text Containers and layouts e-mail request form layout with containers Components and states adding states for navigation to email sample Data sources and Display Display XML Data in a DataGrid Flex and Air basic video player using Air

Introduction to Flex and IDE

Hello World

Bindable tags

Bindable Input text

Containers and layouts

e-mail request form layout with containers

Components and states

adding states for navigation to email sample

Data sources and Display

Display XML Data in a DataGrid

Flex and Air

basic video player using Air

Part I Why Flex? Flex IDE What is MXML? Anatomy of a Flex app Deployment Basic exercise: Hello World

Why Flex?

Flex IDE

What is MXML?

Anatomy of a Flex app

Deployment

Basic exercise: Hello World

Why Flex? With Flash MX, Adobe introduces a acronym: RIA (Rich Internet Application) But developers complain: We don't want to get messy with Flash graphics concept. We want a easy-to-learn tool as the tools we are used to work with. Flex 1 born in 2004, working with AS2 Flex 2 born in 2006, now with As3 Flex 3 born in 2008, full-fledged version Flex 3 Builder is the official IDE for Flex.

With Flash MX, Adobe introduces a acronym:

RIA (Rich Internet Application)

But developers complain: We don't want to get messy with Flash graphics concept. We want a easy-to-learn tool as the tools we are used to work with.

Flex 1 born in 2004, working with AS2

Flex 2 born in 2006, now with As3

Flex 3 born in 2008, full-fledged version

Flex 3 Builder is the official IDE for Flex.

Why Flex? Flex IDE areas MXML is a XML library-based language, with a library of specific tags for Flex. Everything you write on MXML, it's written in the background to AS3. To begin with it, just get a free developer Flex Builder 3 for learning at: http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3email

Flex IDE areas

MXML is a XML library-based language, with a library of specific tags for Flex.

Everything you write on MXML, it's written in the background to AS3.

To begin with it, just get a free developer Flex Builder 3 for learning at:

http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3email

Part II Getting your hands dirty: Coding AS3 in Flex MXML and AS3 Using the [Bindable] tag Debbuging Exercise: Binding Input text

Getting your hands dirty: Coding

AS3 in Flex

MXML and AS3

Using the [Bindable] tag

Debbuging

Exercise: Binding Input text

MXML and ActionScript Flex Class Library

How Flex works… XML/HTTP REST SOAP Web Services Browser J2EE Application Server Flex Data Services 2 Flash Player Web Server Existing Applications and Infrastructure Flex Builder IDE Flex Builder MXML ActionScript Flex Class Library Compile Data Data .swf .swf .swf

Coding As in a classic XML, code goes inside [CDATA] The tag is <mx:Script></mx:Script> Code can be inside or outside the application tags The [Bindable] tag says to Flex my data will be broadcasted through the app.

As in a classic XML, code goes inside [CDATA]

The tag is <mx:Script></mx:Script>

Code can be inside or outside the application tags

The [Bindable] tag says to Flex my data will be broadcasted through the app.

[CDATA] <mx:Script> <![CDATA[ public var myText:String = &quot;Welcome to Flex!&quot; ; function createMyName():String { var myFirstName:String = &quot;Charles&quot; ; var myLastName:String = &quot;Brown&quot; ; return myFirstName + &quot; &quot; + myLastName; } ]]> </mx:Script

<mx:Script>

<![CDATA[

public var myText:String = &quot;Welcome to Flex!&quot; ;

function createMyName():String

{

var myFirstName:String = &quot;Charles&quot; ;

var myLastName:String = &quot;Brown&quot; ;

return myFirstName + &quot; &quot; + myLastName;

}

]]>

</mx:Script

At the mxml... <mx:Label text=&quot;{addNumbers(2, 3)}&quot; id=&quot;myLabel&quot; /> References to AS3 goes between { } Easy, right? But we need to broadcast this AS3 functions to the general app, so.

<mx:Label text=&quot;{addNumbers(2, 3)}&quot; id=&quot;myLabel&quot; />

References to AS3 goes between { }

Easy, right? But we need to broadcast this AS3 functions to the general app, so.

Bindable <mx:Script> <![CDATA[ [Bindable] var myText:String = &quot;Welcome to Flex!&quot; ; function addSum(number1:Number, number2:Number): void { var sum:int = number1 + number2; myText = &quot;The sum of the numbers is&quot; + &quot; &quot; + sum; } ]]> </mx:Script>

<mx:Script>

<![CDATA[

[Bindable]

var myText:String = &quot;Welcome to Flex!&quot; ;

function addSum(number1:Number, number2:Number): void

{

var sum:int = number1 + number2;

myText = &quot;The sum of the numbers is&quot; + &quot; &quot; + sum;

}

]]>

</mx:Script>

Bindable Warning! Bindable is a tricky one: When you use the [Bindable] metadata tag before a public class definition, it only applies to public properties; it does not apply to private or protected properties, or to properties defined in any other namespace. You must insert the [Bindable] metadata tag before a nonpublic property to make it usable as the source for a data binding expression.

Warning!

Bindable is a tricky one:

When you use the [Bindable] metadata tag before a public class definition, it only applies to public properties; it does not apply to private or protected properties, or to properties defined in any other namespace. You must insert the [Bindable] metadata tag before a nonpublic property to make it usable as the source for a data binding expression.

Part III Containers Exercise: Create a simple e-mail request form layout with containers

Containers

Exercise: Create a simple e-mail request form layout with containers

Containers Layout containers Navigation States

Layout containers

Navigation

States

Layout Application container- Main Layout container- Absolute: You set the components location Horizontal: Automatically sets components horizontally Vertical: Automatically sets components vertically

Application container- Main

Layout container-

Absolute: You set the components

location

Horizontal: Automatically sets components horizontally

Vertical: Automatically sets components vertically

Part IV Components and states Exercise: taking our email form and adding states for navigation

Components and states

Exercise: taking our email form and adding states for navigation

Navigation Components for navigating the app.

Components for navigating the app.

States: How we make it without a timeline? With STATES.

How we make it without a timeline?

With STATES.

Part V Flex and XML Data sources XML in AS3 Displaying data Exercise: Loading an external Users list XML and displaying it in a DataGrid.

Flex and XML

Data sources

XML in AS3

Displaying data

Exercise: Loading an external Users list XML and displaying it in a DataGrid.

Adding dynamic Data Data sources XML loading:<mx:HTTPService> Data Grids

Data sources

XML loading:<mx:HTTPService>

Data Grids

HTTP services The way to load XML <mx:HTTPService id=&quot;bookData&quot; url=&quot;../assets/books.xml&quot; /> The 1 line simple tag to connect with Dynamic data...

The way to load XML

<mx:HTTPService id=&quot;bookData&quot; url=&quot;../assets/books.xml&quot; />

The 1 line simple tag to connect with Dynamic data...

HTTP services and Data grid <mx:DataGrid x=&quot;56&quot; y=&quot;250&quot; width=&quot;950&quot;/> <mx:DataGrid x=&quot;56&quot; y=&quot;250&quot; width=&quot;950&quot; dataProvider =  &quot;{bookData.lastResult.books.stock}&quot;/>

<mx:DataGrid x=&quot;56&quot; y=&quot;250&quot; width=&quot;950&quot;/>

<mx:DataGrid x=&quot;56&quot; y=&quot;250&quot; width=&quot;950&quot; dataProvider = 

&quot;{bookData.lastResult.books.stock}&quot;/>

Part VI Validating input data Flex and Air Exercise: Creating a basic video player with Flex and Air

Validating input data

Flex and Air

Exercise: Creating a basic video player with Flex and Air

More advanced Flex Validating input data Flex and AIR Final exercise: Video Player with AIR

Validating input data

Flex and AIR

Final exercise: Video Player with AIR

More advanced Flex Validating input data: <mx:StringValidator id=&quot; firstNameValidator &quot; source=&quot; { firstNameTextInput } &quot; property=&quot; text &quot; />

Validating input data:

<mx:StringValidator id=&quot; firstNameValidator &quot;

source=&quot; { firstNameTextInput } &quot;

property=&quot; text &quot; />

More advanced Flex

DSP-IP Contact information Flash/Flex Development Services : Yossi Cohen [email_address] 09-8850956, 054-5313092 Flash / Flex Courses & Seminars: Alona Ashkenazi [email_address] 09-8651933 www.dsp-ip.com Giborey Israel 20, POB 8323, Netanya Office Phone: 09-8850956, Fax: 050- 8962910

Flash/Flex Development Services :

Yossi Cohen

[email_address]

09-8850956, 054-5313092

Flash / Flex Courses & Seminars:

Alona Ashkenazi

[email_address]

09-8651933