Introduction to Flex 4
Upcoming SlideShare
Loading in...5
×
 

Introduction to Flex 4

on

  • 2,174 views

 

Statistics

Views

Total Views
2,174
Views on SlideShare
2,173
Embed Views
1

Actions

Likes
1
Downloads
19
Comments
0

1 Embed 1

http://a0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Introduction to Flex 4 Introduction to Flex 4 Presentation Transcript

  • FooLabIntroduction to Flex 4ZendCon - October 19, 2011Anna Filina
  • Anna Filina FooLab• PHP Quebec - user group, organizer• ConFoo - non for profit 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