Introduction to Flex 4

2,643 views
2,388 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,643
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
25
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Introduction to Flex 4

  1. 1. FooLabIntroduction to Flex 4ZendCon - October 19, 2011Anna Filina
  2. 2. 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
  3. 3. Outline FooLab• What is Flex?• Basic principles and syntax• Skins, states and transitions• Mobile 3
  4. 4. What is Flex? FooLab• Open source framework• ActionScript 3 and MXML• Browser, desktop or mobile• Flash Builder or free compiler 4
  5. 5. Components FooLab 5
  6. 6. FooLabGet Data From Server
  7. 7. Ajax FooLab request response decorate decorate HTMLElement HTMLElement 7
  8. 8. Flex FooLab request response var Label List Chart Your own 8
  9. 9. 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
  10. 10. Data Binding Example FooLab 10
  11. 11. Data Binding Example FooLab http://amazon.com 11
  12. 12. Request Payload FooLabapi.send( { query: "php books", lang: "en" }); 12
  13. 13. FooLabSyntax
  14. 14. FooLabHTML MXML<html> <s:Application> <body></body> ...</html> </s:Application><script></script> <fx:Script> </fx:Script><button></button> <s:Button></s:Button> 14
  15. 15. 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
  16. 16. ArrayCollection FooLab a.filterFunction = a.sort = 16
  17. 17. FooLabSparkSkins, States and Transitions
  18. 18. 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
  19. 19. Flash XML Graphics FooLab 19
  20. 20. Flash XML Graphics FooLab<Rect width="70" height="25" > <fill> <SolidColor color="0xE2E2E2" /> </fill></Rect> 20
  21. 21. 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
  22. 22. Transitions FooLab<s:transitions> <s:Transition fromState="up" toState="over"> <s:Resize target="{rect}"/> </s:Transition></s:transitions> 22
  23. 23. CSS FooLab.myClass { width: 200;}#myId Button:over { color: #ff8800;} 23
  24. 24. FooLabGoodiesOut-of-the-Box Fun Stuff
  25. 25. Drag & Drop FooLab<s:List dragEnabled="true" /><s:List dropEnabled="true" /> 25
  26. 26. Layout Constraints FooLableft="0"right="150" 26
  27. 27. Navigator Containers FooLab 27
  28. 28. 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
  29. 29. Mobile Applications FooLab 29
  30. 30. 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
  31. 31. Mobile Applications FooLab• Tabbed or View-Based• BlackBerry Tablet, iOS, Android• Respond to gestures (swipe, rotate, zoom, etc.) 31
  32. 32. @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

×