Intro to Flex

FooLab Introduction to Flex 4 ZendCon - October 19, 2011
Anna Filina

FooLab Anna Filina • PHP Quebec - user group, organizer
• ConFoo - non for proﬁt Web conference, organizer • FooLab Inc. - IT solutions for businesses, vice- president • I write code 2

FooLab Outline • What is Flex? • Basic principles and
syntax • Skins, states and transitions • Mobile 3

FooLab What is Flex? • Open source framework • ActionScript
3 and MXML • Browser, desktop or mobile • Flash Builder or free compiler 4

FooLab Components 5

FooLab Get Data From Server

FooLab Ajax response decorate HTMLElement 7 request decorate HTMLElement

FooLab Flex response var Label List Chart 8 Your own
request

FooLab Data Binding Example 9 <root> <item title="Ratatouille"></item> <item title="Wall
E"></item> </root> --------------------------------------------------------------- <s:HTTPService url="http://api.com/movies" id="api" /> <s:List source="{api.lastResult.root.item}" labelField="title" /> api.send();

FooLab 10 Data Binding Example

FooLab 11 Data Binding Example http://amazon.com

FooLab Request Payload api.send( { query: "php books", lang: "en"
} ); 12

FooLab Syntax

FooLab 14 MXML <s:Application> ... </s:Application> <fx:Script> </fx:Script> <s:Button></s:Button> HTML
<html> <body></body> </html> <script></script> <button></button>

FooLab 15 JavaScript var foo = "lab"; foo.Lab = function()
{ ... }; this.getBar = function() {}; object.getBar(); ActionScript var foo:String = "lab"; package foo { class Lab {} } function get bar():int {}; object.bar;

FooLab ArrayCollection 16 a.filterFunction = a.sort =

FooLab Spark Skins, States and Transitions

FooLab Spark • Component architecture • States (over, disabled, etc.)
• State can affect behavior and appearance • Skins can be created in Adobe apps • Flash XML Graphics (FXG) 18

FooLab Flash XML Graphics 19

FooLab Flash XML Graphics <Rect width="70" height="25" > <fill> <SolidColor
color="0xE2E2E2" /> </fill> </Rect> 20

FooLab MXML Graphic as Skin 21 <s:Button skinClass="skins.MySkin" label="Click Me"
/> --------------------------------------------------------------- <s:Rect width="70" height="25" width.over="90">...</s:Rect> <s:Label id="lbl" />

FooLab Transitions <s:transitions> <s:Transition fromState="up" toState="over"> <s:Resize target="{rect}"/> </s:Transition> </s:transitions>
22

FooLab CSS 23 .myClass { width: 200; } #myId Button:over
{ color: #ff8800; }

FooLab Goodies Out-of-the-Box Fun Stuff

FooLab 25 Drag & Drop <s:List dragEnabled="true" /> <s:List dropEnabled="true"
/>

FooLab 26 Layout Constraints left="0" right="150"

FooLab Navigator Containers 27

FooLab 28 Navigator Containers <s:TabBar dataProvider="{stack}" /> <mx:ViewStack id="stack"> <s:NavigatorContent
label="Movie">...</s:NavigatorContent> <s:NavigatorContent label="Cast">...</s:NavigatorContent> </mx:ViewStack>

FooLab Mobile Applications 29

FooLab 30 Mobile Applications <s:ViewNavigatorApplication firstView="views.HomeView" /> --------------------------------------------------------------- <s:View title="ZendCon
Speakers"> <s:Button label="Next" click="navigator.pushView(SpeakerView, speaker)" /> </s:View> --------------------------------------------------------------- <s:View title="Speaker"> <s:Label text="{data.name}" /> </s:View>

FooLab Mobile Applications • Tabbed or View-Based • BlackBerry Tablet,
iOS, Android • Respond to gestures (swipe, rotate, zoom, etc.) 31

FooLab 32 @afilina • Please leave feedback: http://joind.in/3758 (slides will
be posted here) • Documentation: http://www.adobe.com/devnet/flex/documentation.html • Video Tutorials: http://www.adobe.com/devnet/flex/videotraining.html • Slides and code: http://foolab.ca/conf/zendcon-2011-flexintro.zip

Intro to Flex

Intro to Flex

Anna Filina
PRO

More Decks by Anna Filina

Other Decks in Programming

Featured

Transcript

FooLab Introduction to Flex 4 ZendCon - October 19, 2011

FooLab Anna Filina • PHP Quebec - user group, organizer

FooLab Outline • What is Flex? • Basic principles and

FooLab What is Flex? • Open source framework • ActionScript

FooLab Components 5

FooLab Get Data From Server

FooLab Ajax response decorate HTMLElement 7 request decorate HTMLElement

FooLab Flex response var Label List Chart 8 Your own

FooLab Data Binding Example 9 <root> <item title="Ratatouille"></item> <item title="Wall

FooLab 10 Data Binding Example

FooLab 11 Data Binding Example http://amazon.com

FooLab Request Payload api.send( { query: "php books", lang: "en"

FooLab Syntax

FooLab 14 MXML <s:Application> ... </s:Application> <fx:Script> </fx:Script> <s:Button></s:Button> HTML

FooLab 15 JavaScript var foo = "lab"; foo.Lab = function()

FooLab ArrayCollection 16 a.filterFunction = a.sort =

FooLab Spark Skins, States and Transitions

FooLab Spark • Component architecture • States (over, disabled, etc.)

FooLab Flash XML Graphics 19

FooLab Flash XML Graphics <Rect width="70" height="25" > <fill> <SolidColor

FooLab MXML Graphic as Skin 21 <s:Button skinClass="skins.MySkin" label="Click Me"

FooLab Transitions <s:transitions> <s:Transition fromState="up" toState="over"> <s:Resize target="{rect}"/> </s:Transition> </s:transitions>

FooLab CSS 23 .myClass { width: 200; } #myId Button:over

FooLab Goodies Out-of-the-Box Fun Stuff

FooLab 25 Drag & Drop <s:List dragEnabled="true" /> <s:List dropEnabled="true"

FooLab 26 Layout Constraints left="0" right="150"

FooLab Navigator Containers 27

FooLab 28 Navigator Containers <s:TabBar dataProvider="{stack}" /> <mx:ViewStack id="stack"> <s:NavigatorContent

FooLab Mobile Applications 29

FooLab 30 Mobile Applications <s:ViewNavigatorApplication firstView="views.HomeView" /> --------------------------------------------------------------- <s:View title="ZendCon

FooLab Mobile Applications • Tabbed or View-Based • BlackBerry Tablet,

FooLab 32 @aﬁlina • Please leave feedback: http://joind.in/3758 (slides will