Flex ® 3 & Adobe ® Flex Builder ™ An introduction Rasheed Akhtar [email_address]

About Me Extensive experience with “normal” flash development using both AS2 and AS3 I’ve been working with Flex since Flex 2 was released (2006) Started off primarily with data visualization and then moved on to developing apps for streamlining business processes using Flex, Flash Remoting, .NET and SQL Server 2005 LinkedIn – http://www.linkedin.com/in/rasheedakhtar Twitter - http://twitter.com/rakhtar Email – [email_address] Rasheed Akhtar [email_address]

Extensive experience with “normal” flash development using both AS2 and AS3

I’ve been working with Flex since Flex 2 was released (2006)

Started off primarily with data visualization and then moved on to developing apps for streamlining business processes using Flex, Flash Remoting, .NET and SQL Server 2005

LinkedIn – http://www.linkedin.com/in/rasheedakhtar

Twitter - http://twitter.com/rakhtar

Email – [email_address]

Flex 3 What is Flex? It is a free, open source framework based on the Adobe Flash Runtime used to develop RIAs (rich Internet applications) RIAs - new kind of web experience that offer the ease of use/experience of a desktop application while providing the broad reach of web applications Flex application framework consists of MXML, ActionScript™ 3 (AS3), and the Flex class library. Developers use MXML to declaratively define the application user interface elements and use ActionScript for client logic and procedural control. Rasheed Akhtar [email_address]

What is Flex?

It is a free, open source framework based on the Adobe Flash Runtime used to develop RIAs (rich Internet applications)

RIAs - new kind of web experience that offer the ease of use/experience of a desktop application while providing the broad reach of web applications

Flex application framework consists of MXML, ActionScript™ 3 (AS3), and the Flex class library.

Developers use MXML to declaratively define the application user interface elements and use ActionScript for client logic and procedural control.

Why Flex? Business Case – Why RIAs? People know them and like them. Fifty-two percent of online consumers have used highly interactive applications like Google Maps. More importantly, the overwhelming majority of those who tried RIAs say that rich applications greatly enhance their Web experience. They enable tasks that HTML can’t. RIAs give companies a superior alternative to HTML for crafting customer interactions. That’s because RIAs provide a range of capabilities — like improved data visualization and streamlined processes — that go beyond the limitations imposed by HTML They get results. Firms that measure the business impact of their RIAs say that rich applications meet or exceed their goals (see Figure 2). As the RIA success stories of these early adopters become more widely known, site owners at mainstream companies also look to RIAs to boost online effectiveness. Source : “The Business Case For Rich Internet Applications” Forrester Research – March 12, 2007 Rasheed Akhtar [email_address]

Business Case – Why RIAs?

People know them and like them. Fifty-two percent of online consumers have used highly interactive applications like Google Maps. More importantly, the overwhelming majority of those who tried RIAs say that rich applications greatly enhance their Web experience.

They enable tasks that HTML can’t. RIAs give companies a superior alternative to HTML for crafting customer interactions. That’s because RIAs provide a range of capabilities — like improved data visualization and streamlined processes — that go beyond the limitations imposed by HTML

They get results. Firms that measure the business impact of their RIAs say that rich applications meet or exceed their goals (see Figure 2). As the RIA success stories of these early adopters become more widely known, site owners at mainstream companies also look to RIAs to boost online effectiveness.

Source : “The Business Case For Rich Internet Applications” Forrester Research – March 12, 2007

Why Flex? Business Case – Why RIAs (cont’d)? Rasheed Akhtar [email_address]

Business Case – Why RIAs (cont’d)?

Why Flex? Finally – why flex? Same reasons for using Flash over traditional HTML Flex applications run consistently across all major browsers and on the desktop Robust development environment (i.e. via Flex Builder 3 and Flex builder integration with Adobe Creative Suite) Why not just use flash? “ Traditional” programmers found it challenging to adapt to animation metaphor upon which the Flash Platform was originally designed (i.e. movieclips, frames, timeline, etc…) Flex minimizes this problem by providing a workflow and programming model that is familiar to these developers Rasheed Akhtar [email_address]

Finally – why flex?

Same reasons for using Flash over traditional HTML

Flex applications run consistently across all major browsers and on the desktop

Robust development environment (i.e. via Flex Builder 3 and Flex builder integration with Adobe Creative Suite)

Why not just use flash?

“ Traditional” programmers found it challenging to adapt to animation metaphor upon which the Flash Platform was originally designed (i.e. movieclips, frames, timeline, etc…)

Flex minimizes this problem by providing a workflow and programming model that is familiar to these developers

History Flex 1.0 & 1.5 (2004 - Macromedia) Primarily for enterprise market Priced around $15,000USD per CPU Java server based solution (J2EE, Tomcat, Jrun) that compiled MXML and Actionscript on-the-fly to SWF files i.e. MXML files placed on server and users requested MXML files directly that would output SWFs Flex Builder IDE based on Dreamweaver code base Rasheed Akhtar [email_address]

Flex 1.0 & 1.5 (2004 - Macromedia)

Primarily for enterprise market

Priced around $15,000USD per CPU

Java server based solution (J2EE, Tomcat, Jrun) that compiled MXML and Actionscript on-the-fly to SWF files

i.e. MXML files placed on server and users requested MXML files directly that would output SWFs

Flex Builder IDE based on Dreamweaver code base

History Flex 2 (2006 – Adobe) Licensing model overhauled Flex SDK (compilers/class library) available as free download Framework built upon AS3 and requires Flash Player 9 2 versions: Standard & Professional (includes data visualization library) No longer dependent on server side component Apps compiled locally as SWFs and placed on web server Server side software spun off as separate product called Flex Data Services 2 (LiveCycle Data Services) Flex Builder based on open source Eclipse platform Rasheed Akhtar [email_address]

Flex 2 (2006 – Adobe)

Licensing model overhauled

Flex SDK (compilers/class library) available as free download

Framework built upon AS3 and requires Flash Player 9

2 versions: Standard & Professional (includes data visualization library)

No longer dependent on server side component

Apps compiled locally as SWFs and placed on web server

Server side software spun off as separate product called Flex Data Services 2 (LiveCycle Data Services)

Flex Builder based on open source Eclipse platform

History & Future Flex 3 (2008 – Adobe) Flex 3 SDK open sourced Flex Builder enhancements included integration with Creative Suite, support for AIR (released at same time), and addition of profiling and refactoring tools Flex 4 (2009* – Adobe) Biggest change is to skinning/component architecture (i.e. Spark and FXG) FXG is XML-based graphics interchange format for the Flash Platform Foundation for Flash Catalyst Targets Flash Player 10 Rasheed Akhtar [email_address]

Flex 3 (2008 – Adobe)

Flex 3 SDK open sourced

Flex Builder enhancements included integration with Creative Suite, support for AIR (released at same time), and addition of profiling and refactoring tools

Flex 4 (2009* – Adobe)

Biggest change is to skinning/component architecture (i.e. Spark and FXG)

FXG is XML-based graphics interchange format for the Flash Platform

Foundation for Flash Catalyst

Targets Flash Player 10

Now building on Flex… Rasheed Akhtar [email_address]

Now building on Flex… Some quick sample sites: http://www.iexpenseonline.com/ https://www.photoshop.com/express/landing.html https://acrobat.com/ http://flex.org/showcase/ Rasheed Akhtar [email_address]

Some quick sample sites:

http://www.iexpenseonline.com/

https://www.photoshop.com/express/landing.html

https://acrobat.com/

http://flex.org/showcase/

Flex SDK MXML XML based declarative language to define User Interface Similar to XHTML Primarily used for user interface design Actionscript 3 Flex Class Library Everything in the mx.* packages Containers Controls Charting Components Rasheed Akhtar [email_address]

MXML

XML based declarative language to define User Interface

Similar to XHTML

Primarily used for user interface design

Actionscript 3

Flex Class Library

Everything in the mx.* packages

Containers

Controls

Charting Components

How Flex works Rasheed Akhtar [email_address]

Behind the Scenes Flex SDK contains 2 compilers mxmlc: application compiler (compiles to SWF) compc: component compiler (compiles to SWC) Compilers are invoked on MXML, Actionscript and asset files (images, SWF files, etc...) and result in respective file formats Rasheed Akhtar [email_address]

Flex SDK contains 2 compilers

mxmlc: application compiler (compiles to SWF)

compc: component compiler (compiles to SWC)

Compilers are invoked on MXML, Actionscript and asset files (images, SWF files, etc...) and result in respective file formats

Behind the Scenes MXML tags correspond to ActionScript classes or properties of classes. When compiler is invoked, Flex parses your MXMLtags and generates the corresponding ActionScript classes. It then compiles these ActionScript classes along with the “other” (user defined) Actionscript classes and assets into SWF bytecode which it stores in a SWF file. MXML: Actionscript: Result: <mx:Button id=&quot;myButton&quot; label=&quot;I'm a button!&quot; /> var myButton:Button; myButton = new Button(); myButton.label = &quot; I'm a button! &quot; ; addChild (myButton); Rasheed Akhtar [email_address]

MXML tags correspond to ActionScript classes or properties of classes.

When compiler is invoked, Flex parses your MXMLtags and generates the corresponding ActionScript classes.

It then compiles these ActionScript classes along with the “other” (user defined) Actionscript classes and assets into SWF bytecode which it stores in a SWF file.

MXML:

Actionscript:

Result:

Flex Builder 3 Demo Rasheed Akhtar [email_address]

MXML MXML documents are plain-text documents Should contain XML declaration encoding should be set to UTF-8 for best compatibility 2 types of root nodes available Application: <mx:Application ...> </Application> Components: any component tag other than application <mx:Canvas ...> </Canvas> <mx:Panel ...></Panel> Rasheed Akhtar [email_address]

MXML documents are plain-text documents

Should contain XML declaration

encoding should be set to UTF-8 for best compatibility

2 types of root nodes available

Application: <mx:Application ...> </Application>

Components: any component tag other than application

<mx:Canvas ...> </Canvas>

<mx:Panel ...></Panel>

MXML MXML uses namespaces (xmlns) http://www.adobe.com/2006/mxml default namespace for flex (contains manifest file for flex class mappings A namespace is a unique grouping of elements (flex libraries in this case) Namespaces map library classes and components to tags <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <mx:Application xmlns:mx=&quot; http://www.adobe.com/2006/mxml &quot; xmlns:components=&quot;components.*“ /> //Flex button <mx:Button id=&quot;myButton&quot; label=&quot;I'm a button!&quot; /> //custom button <components:Button id=&quot;myButton&quot; label=&quot;I'm a button!&quot; /> </mx:Application> Rasheed Akhtar [email_address]

MXML uses namespaces (xmlns)

http://www.adobe.com/2006/mxml default namespace for flex (contains manifest file for flex class mappings

A namespace is a unique grouping of elements (flex libraries in this case)

Namespaces map library classes and components to tags

Interactive MXML Declaring UI elements via MXML is useful but need to make it interactive 2 basic MXML features to create interactivity Event Handling Every component does “something” where it dispatches events MXML allows inline event handlers <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <mx:Application xmlns:mx=&quot; http://www.adobe.com/2006/mxml &quot; /> //Flex button <mx:Button id=&quot;myButton&quot; label=&quot;I'm a button!&quot; click=“Alert(‘ STOP! ’)&quot; /> </mx:Application> Rasheed Akhtar [email_address]

Declaring UI elements via MXML is useful but need to make it interactive

2 basic MXML features to create interactivity

Event Handling

Every component does “something” where it dispatches events

MXML allows inline event handlers

Interactive MXML Data Binding Used to link one component to another Automates changing of values of one object when the value of another object changes Several ways to utilize it. Simplest method is using curly brace {} syntax <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <mx:Application xmlns:mx=&quot; http://www.adobe.com/2006/mxml &quot; /> <mx:Vbox> <mx:Text id=&quot;output&quot; text=&quot; {input.text} &quot; /> <mx:TextInput id=&quot;input&quot; /> </mx:Vbox> </mx:Application> Rasheed Akhtar [email_address]

Data Binding

Used to link one component to another

Automates changing of values of one object when the value of another object changes

Several ways to utilize it. Simplest method is using curly brace {} syntax

Containers Containers can hold other containers (nested containers) or controls Components defined within a container are called children 2 categories of containers: Layout containers: control sizing/positioning of their children Navigator containers: control user movement/navigation among multiple child containers Flex offers wide variety of containers: Canvas Panel Tile TitleWindow Hbox Vbox Rasheed Akhtar [email_address]

Containers can hold other containers (nested containers) or controls

Components defined within a container are called children

2 categories of containers:

Layout containers: control sizing/positioning of their children

Navigator containers: control user movement/navigation among multiple child containers

Flex offers wide variety of containers:

Canvas

Panel

Tile

TitleWindow

Hbox

Vbox

Containers - Layout All containers except Canvas container support automatic (box-based) layout Do not need to specify position for children of container Layout handled by selecting container type, specifying properties on container and order of container’s children Hbox does horizontal box layout, Vbox does vertical box layout, etc... Layout rules executed when container created and when children are added or removed Canvas container (and optionally Application/Panel containers) use absolute layout Explicitly set x,y positions of container’s children Support constraint based layout Containers support scroll bars Rasheed Akhtar [email_address]

All containers except Canvas container support automatic (box-based) layout

Do not need to specify position for children of container

Layout handled by selecting container type, specifying properties on container and order of container’s children

Hbox does horizontal box layout, Vbox does vertical box layout, etc...

Layout rules executed when container created and when children are added or removed

Canvas container (and optionally Application/Panel containers) use absolute layout

Explicitly set x,y positions of container’s children

Support constraint based layout

Containers support scroll bars

Controls Flex natively provides approx 34+ controls Many open source custom controls (and control libraries) available from the community Controls are UI components Most controls have MXML API for declaring control, properties and events Actionscript API for calling methods and setting properties at runtime Customizable appearance (styles/skinning) Rasheed Akhtar [email_address]

Flex natively provides approx 34+ controls

Many open source custom controls (and control libraries) available from the community

Controls are UI components

Most controls have

MXML API for declaring control, properties and events

Actionscript API for calling methods and setting properties at runtime

Customizable appearance (styles/skinning)

Controls Data entry controls Used to enter data or display plain text or HTML formatted text Examples: Label, Text, TextInput, TextArea, RichTextEditor, etc... Buttons Examples: Button, LinkBar, ButtonBar, etc... List Controls Examples: List, Horizontal List, TileList, etc... Tree and Grid Controls Examples: Tree, DataGrid, OLAPDataGrid Other Controls Examples: Alert, SWFLoader, ColorPicker, etc... Rasheed Akhtar [email_address]

Data entry controls

Used to enter data or display plain text or HTML formatted text

Examples: Label, Text, TextInput, TextArea, RichTextEditor, etc...

Buttons

Examples: Button, LinkBar, ButtonBar, etc...

List Controls

Examples: List, Horizontal List, TileList, etc...

Tree and Grid Controls

Examples: Tree, DataGrid, OLAPDataGrid

Other Controls

Examples: Alert, SWFLoader, ColorPicker, etc...

Controls Data provider controls Use input data from a data provider Data provider is a collection of objects (similar to array) Provide layer of abstraction so multiple controls can use one data provider (model/view separation) Too many controls to go into detail See Flex Framework Diagram Worth checking out Flex 3 Component Explorer: http://examples.adobe.com/flex3/componentexplorer/explorer.html Rasheed Akhtar [email_address]

Data provider controls

Use input data from a data provider

Data provider is a collection of objects (similar to array)

Provide layer of abstraction so multiple controls can use one data provider (model/view separation)

Too many controls to go into detail

See Flex Framework Diagram

Worth checking out Flex 3 Component Explorer:

http://examples.adobe.com/flex3/componentexplorer/explorer.html

Note Both containers/controls can be extended to make customer controls/containers Because framework is open source you can see actual classes used to make framework and borrow/modify as necessary Rasheed Akhtar [email_address]

Both containers/controls can be extended to make customer controls/containers

Because framework is open source you can see actual classes used to make framework and borrow/modify as necessary

Charting Components Only available with professional version Libraries are not open sourced Provides 9 types of charts: Area, Bar, Bubble, Candlestick, Column, HLOC Chart, Line, Pie, Plot Charts can be extended to provide interactivity Charts can also be styled/skinned to customize appearance Charts can have variety of effects applied Rasheed Akhtar [email_address]

Only available with professional version

Libraries are not open sourced

Provides 9 types of charts:

Area, Bar, Bubble, Candlestick, Column, HLOC Chart, Line, Pie, Plot

Charts can be extended to provide interactivity

Charts can also be styled/skinned to customize appearance

Charts can have variety of effects applied

Styling (CSS) Controls modified through style properties Can also be styled using CSS (inline and external stylesheets) Similar concept to HTML CSS (i.e. syntax and certain CSS attributes are the same) however Flex CSS does not support all of the HTML CSS layout options (i.e. x, y, width, height, etc... ) Style Explorer: http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html Rasheed Akhtar [email_address]

Controls modified through style properties

Can also be styled using CSS (inline and external stylesheets)

Similar concept to HTML CSS (i.e. syntax and certain CSS attributes are the same) however Flex CSS does not support all of the HTML CSS layout options (i.e. x, y, width, height, etc... )

Style Explorer: http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html

Styling (CSS) Styling can also be done at runtime using StyleManager and Actionscript StyleManager is singleton class that allows access/modification of styles Very powerful – app can completely change visual appearance at runtime import mx.styles.StyleManager; : : StyleManager.getStyleDeclaration(&quot;Button&quot;).setStyle(&quot;fontSize&quot;,24); Rasheed Akhtar [email_address]

Styling can also be done at runtime using StyleManager and Actionscript

StyleManager is singleton class that allows access/modification of styles

Very powerful – app can completely change visual appearance at runtime

Skinning Refers to changing the way a component looks by replacing the assets that make up visual appearance 2 approaches Graphical skinning Use of bitmap/vector graphics to change component appearance Skin import wizard allows for easily importing skin created in other CS products (based on naming conventions) Programmatic skinning Graphics drawn via Actionscript to change appearance Great Flex Skinning resource: http://www.scalenine.com/ Rasheed Akhtar [email_address]

Refers to changing the way a component looks by replacing the assets that make up visual appearance

2 approaches

Graphical skinning

Use of bitmap/vector graphics to change component appearance

Skin import wizard allows for easily importing skin created in other CS products (based on naming conventions)

Programmatic skinning

Graphics drawn via Actionscript to change appearance

Great Flex Skinning resource: http://www.scalenine.com/

Final Thoughts… Flex framework is massive and also very powerful Working to bridge the gap between designer and developer workflow using innovative products/techniques Many additional topics around building Flex Apps that deserver their own sessions Application State Application frameworks Backend connectivity Etc… Rasheed Akhtar [email_address]

Flex framework is massive and also very powerful

Working to bridge the gap between designer and developer workflow using innovative products/techniques

Many additional topics around building Flex Apps that deserver their own sessions

Application State

Application frameworks

Backend connectivity

Etc…

Resources Adobe Devnet: http://www.adobe.com/devnet/flex/ Learn Flex in a week http://www.adobe.com/devnet/flex/videotraining/ Flex Help: Getting started with Flex http://learn.adobe.com/wiki/display/Flex/Getting+Started Flex Examples: http://blog.flexexamples.com/ Flex.org http://flex.org/ Rasheed Akhtar [email_address]

Adobe Devnet:

http://www.adobe.com/devnet/flex/

Learn Flex in a week

http://www.adobe.com/devnet/flex/videotraining/

Flex Help: Getting started with Flex

http://learn.adobe.com/wiki/display/Flex/Getting+Started

Flex Examples:

http://blog.flexexamples.com/

Flex.org

http://flex.org/