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

Introduction to Flex 4

Embed Size (px)

Citation preview

Page 1: Introduction to Flex 4

FooLab

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

Page 2: Introduction to Flex 4

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

Page 3: Introduction to Flex 4

FooLabOutline

• What is Flex?

• Basic principles and syntax

• Skins, states and transitions

• Mobile

3

Page 4: Introduction to Flex 4

FooLabWhat is Flex?

• Open source framework

• ActionScript 3 and MXML

• Browser, desktop or mobile

• Flash Builder or free compiler

4

Page 5: Introduction to Flex 4

FooLabComponents

5

Page 6: Introduction to Flex 4

FooLab

Get Data From Server

Page 7: Introduction to Flex 4

FooLabAjax

response

decorate

HTMLElement

7

request

decorate

HTMLElement

Page 8: Introduction to Flex 4

FooLabFlex

response

var

Label List Chart

8

Your own

request

Page 9: Introduction to Flex 4

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();

Page 10: Introduction to Flex 4

FooLab

10

Data Binding Example

Page 11: Introduction to Flex 4

FooLab

11

Data Binding Example

http://amazon.com

Page 12: Introduction to Flex 4

FooLabRequest Payload

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

12

Page 13: Introduction to Flex 4

FooLab

Syntax

Page 14: Introduction to Flex 4

FooLab

14

MXML

<s:Application> ...</s:Application>

<fx:Script> </fx:Script>

<s:Button></s:Button>

HTML

<html> <body></body></html>

<script></script>

<button></button>

Page 15: Introduction to Flex 4

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;

Page 16: Introduction to Flex 4

FooLabArrayCollection

16

a.filterFunction = a.sort =

Page 17: Introduction to Flex 4

FooLab

SparkSkins, States and Transitions

Page 18: Introduction to Flex 4

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

Page 19: Introduction to Flex 4

FooLabFlash XML Graphics

19

Page 20: Introduction to Flex 4

FooLabFlash XML Graphics

<Rect width="70" height="25" > <fill> <SolidColor color="0xE2E2E2" /> </fill></Rect>

20

Page 21: Introduction to Flex 4

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" />

Page 22: Introduction to Flex 4

FooLabTransitions

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

22

Page 23: Introduction to Flex 4

FooLabCSS

23

.myClass { width: 200;}

#myId Button:over { color: #ff8800;}

Page 24: Introduction to Flex 4

FooLab

GoodiesOut-of-the-Box Fun Stuff

Page 25: Introduction to Flex 4

FooLab

25

Drag & Drop

<s:List dragEnabled="true" />

<s:List dropEnabled="true" />

Page 26: Introduction to Flex 4

FooLab

26

Layout Constraints

left="0"right="150"

Page 27: Introduction to Flex 4

FooLabNavigator Containers

27

Page 28: Introduction to Flex 4

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>

Page 29: Introduction to Flex 4

FooLabMobile Applications

29

Page 30: Introduction to Flex 4

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>

Page 31: Introduction to Flex 4

FooLabMobile Applications

• Tabbed or View-Based

• BlackBerry Tablet, iOS, Android

• Respond to gestures (swipe, rotate, zoom, etc.)

31

Page 32: Introduction to Flex 4

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