Introduction to Flex 4
-
Upload
anna-filina -
Category
Technology
-
view
1.968 -
download
3
Transcript of Introduction to Flex 4
FooLab
Introduction to Flex 4ZendCon - October 19, 2011Anna Filina
FooLabAnna Filina
• PHP Quebec - user group, organizer
• ConFoo - non for profit Web conference, organizer
• FooLab Inc. - IT solutions for businesses, vice-president
• I write code
2
FooLabOutline
• What is Flex?
• Basic principles and syntax
• Skins, states and transitions
• Mobile
3
FooLabWhat is Flex?
• Open source framework
• ActionScript 3 and MXML
• Browser, desktop or mobile
• Flash Builder or free compiler
4
FooLabComponents
5
FooLab
Get Data From Server
FooLabAjax
response
decorate
HTMLElement
7
request
decorate
HTMLElement
FooLabFlex
response
var
Label List Chart
8
Your own
request
FooLabData 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
FooLabRequest 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;
FooLabArrayCollection
16
a.filterFunction = a.sort =
FooLab
SparkSkins, States and Transitions
FooLabSpark
• Component architecture
• States (over, disabled, etc.)
• State can affect behavior and appearance
• Skins can be created in Adobe apps
• Flash XML Graphics (FXG)
18
FooLabFlash XML Graphics
19
FooLabFlash XML Graphics
<Rect width="70" height="25" > <fill> <SolidColor color="0xE2E2E2" /> </fill></Rect>
20
FooLabMXML 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" />
FooLabTransitions
<s:transitions> <s:Transition fromState="up" toState="over"> <s:Resize target="{rect}"/> </s:Transition> </s:transitions>
22
FooLabCSS
23
.myClass { width: 200;}
#myId Button:over { color: #ff8800;}
FooLab
GoodiesOut-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"
FooLabNavigator 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>
FooLabMobile 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>
FooLabMobile 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