Introduction To Flex

50 %
50 %
Information about Introduction To Flex
Technology

Published on November 18, 2008

Author: DSPIP

Source: slideshare.net

Description

Introduction to Flex seminar. just the basics

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

Add a comment

Related presentations

Related pages

Introduction to Flex 2: ebook jetzt bei weltbild.de

eBook Shop: Introduction to Flex 2 als Download. Jetzt eBook sicher bei Weltbild runterladen & bequem mit Ihrem Tablet oder eBook Reader lesen.
Read more

Adobe Flex 4.6 * Introduction to Flex 4.6

Adobe® Flex® 4.6 introduces new features and continues to build upon the major architectural changes in Flex 4. If you are a new Flex developer, and have ...
Read more

Introduction to Flex - devarticles.com

Introduction to Flex (Page 1 of 5 ) What is Flex? Macromedia Flex is a presentation server that developers can use to build a new generation of Enterprise ...
Read more

Introduction to Flex 2 - Buchhandel.de - Roger Braunstein ...

Roger Braunstein - Introduction to Flex 2 - Buchhandel.de - Bücher lokal kaufen
Read more

New Product Introduction | Flex - Flextronics

Flex’s broad experience helps customers find the fastest, most efficient process to market for their new product introduction.
Read more

Introduction to FlexRay - Vector E-Learning

Module Introduction to FlexRay. By continuing to use this site you agree to the use of ... For more information and to find out how to change this click ...
Read more

Flex Vendor Portal Introduction GBS - India CONFIDENTIAL

3 Vendor Portal - Introduction Flex Supplier Portal is an Internet based Web application for the suppliers of Flex across the globe This portal can be ...
Read more

Introduction to Flex 2 - scribd.com

Introduction to Flex 2. Central Pennsylvania ColdFusion User Group March 7, 2006 darron@darronschall.com Outline • • • • • What is Flex?
Read more

Online Video Maker | Video Creation Software - Flixpress

Make Amazing Videos Online! Flixpress is an automated and easy to use online video maker, which creates professional-quality videos in minutes.
Read more

Introduction to Digiflex - UNI Digital

Introduction to Digiflex. UNI Packaging, in conjunction with Hewlett Packard, presents DIGIFLEX (digital flexible printing). With its fantastic quality ...
Read more