Introduction to Flex 4

FooLabIntroduction to Flex 4ZendCon - October 19, 2011Anna Filina

Anna Filina FooLab• 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

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

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

Components FooLab 5

FooLabGet Data From Server

Ajax FooLab request response decorate decorate HTMLElement HTMLElement 7

Flex FooLab request response var Label List Chart Your own 8

Data Binding Example FooLab<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(); 9

Data Binding Example FooLab 10

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

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

FooLabSyntax

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

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

ArrayCollection FooLab a.filterFunction = a.sort = 16

FooLabSparkSkins, States and Transitions

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

Flash XML Graphics FooLab 19

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

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

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

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

FooLabGoodiesOut-of-the-Box Fun Stuff

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

Layout Constraints FooLableft="0"right="150" 26

Navigator Containers FooLab 27

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

Mobile Applications FooLab 29

Mobile Applications FooLab<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> 30

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

@afilina FooLab• 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 32

Introduction to Flex 4

by Anna Filina on Oct 18, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 1

Statistics

Introduction to Flex 4 — Presentation Transcript