1. Agency Overview0 0Presentation Title Flex Hands-On Experience Kristen Olsen kolsen@level-studios.com Web Systems Engineer September 27, 2008

2. Central Coast Code Camp Sponsors

3. Outline2  What is Flex?  MXML & ActionScript Overview  Components  Hello World Application  Demographics Application  Gallery Application  Q & A

4. What Is Flex?3 (What Are We Doing Here?)

5. What Is Flex?4 What Flex Is Not

6. What Is Flex?5 What Flex Is  Rich Internet Application Framework  Built using ActionScript and MXML  Generates compiled Flash binaries  Runs on any computer with Flash player

7. What Is Flex?6 Deployment (From Flex Builder Animated Overview)

8. What Is Flex?7 Deployment (From Flex Builder Animated Overview)

9. What Is Flex?8 Event Flow  Events are dispatched when an event occurs  Events are captured starting from the Stage going down through children  Events are targeted at the object that triggered the event  Events are bubbled up through the parent of the target object  Components can listen for specific events (From Flex Live Docs)

10. What Is Flex?9 Web Services

11. MXML10 MXML (Not Your Parent’s XML)

12. MXML11 Overview  User interface markup language based on XML  Used to layout components  Can reference components defined in either MXML or ActionScript  Properties on a tag reference property variables in component (Comic from aralbalkan.com)

13. MXML12 Example <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" layout="vertical” creationComplete="initApp()"> <![CDATA[ public function initApp():void { mainTxt.text = Greeter.sayHello(); } ]]> <mx:Label id="title" fontSize="24" fontStyle="bold” text='"Hello, world!" Example'/> (From the ActionScript Wikipedia Page)

14. MXML13 Example With CSS.error { color: #FF0000; font-size: 12; }.title { font-family: Courier; font-size: 18; } (From http://www.adobe.com/devnet/flex/articles/paradigm.html)

15. ActionScript14 ActionScript (Not Just For Superheroes)

16. ActionScript15 Overview  Object Oriented (packages, namespaces, objects, interfaces, etc.)  Type Checking (compile-time and runtime)  ECMAScript 4 Compliant (what JavaScript is based on) including E4X (XML parsing)  Event driven architecture (ActionScript Art by Tyler Egeto - http://blog.tyleregeto.com/?p=92)

17. ActionScript16 Example package com.example { import flash.text.TextField; import flash.display.Sprite; public class Greeter extends Sprite { public function Greeter() { var txtHello:TextField = new TextField(); txtHello.text = "Hello World"; addChild(txtHello); } (From the ActionScript Wikipedia Page)

18. Components17 Components (Everyone Loves Leftovers)

19. Components18 Overview  Building blocks of a Flex Application  Encapsulated pieces of functionality  Most frequently used are UI controls  Can be extended and joined together (From http://www.adobe.com/devnet/flex/articles/paradigm.html & http://flexsamples.blogspot.com/2008/06/flex-component-class-hierarchy.html)

20. Components19 Style Explorer (From http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html)

21. Components20 Component Explorer (From http://examples.adobe.com/flex3/componentexplorer/explorer.html)

22. Hello World21 Hello World (And Goodbye)

23. Hello World22 Hello World Example 1

24. Hello World23 Hello World Example 2

25. Hello World24 Hello World Example 3

26. Hello World25 Hello World Example 4

27. Hello World26 Hello World Example 5

28. Hello World27 Hello World Example 6

29. Hello World28 Hello World Example 7

30. Hello World29 Hello World Example 8

31. Hello World30 Hello World Demo (And Goodbye)

32. Demographics31 Demographics (Real Data for a Graphics Demo)

33. Demographics32 Demographics Example  If you have wireless:  http://10.10.0.191/~kolsen/flex-hands-on  If you have the CD:  There is a folder called “support-files”  For this example we will be using the file called “data.xml”

34. Demographics33 Demographics Example 1

35. Demographics34 Demographics Example 2

36. Demographics35 Demographics Example 3

37. Demographics36 Demographics Example 4

38. Demographics37 Demographics Example 5

39. Demographics38 Demographics Example 6

40. Demographics39 Demographics Example 7

41. Demographics40 Demographics Example 8

42. Demographics41 Demographics Example 9

43. Demographics42 Demographics Example 10

44. Demographics43 Demographics Example 11

45. Demographics44 Demographics Example 12

46. Demographics45 Demographics Example 13

47. Demographics46 Demographics Example 14

48. Demographics47 Demographics Example 15

49. Demographics48 Demographics Example 16

50. Demographics49 Demographics Example 17

51. Demographics50 Demographics Example 18

52. Demographics51 Demographics Example 19

53. Demographics52 Demographics Example 20

54. Demographics53 Demographics Example 21

55. Demographics54 Demographics Example 22

56. Demographics55 Demographics Example 23

57. Demographics56 Demographics Example 24

58. Demographics57 Demographics Example 25

59. Demographics58 Demographics Demo (Real Data for a Graphics Demo)

60. Gallery59 Gallery (More Ways to Show off Your Pets/Children)

61. Gallery60 Gallery Example  If you have wireless:  Make sure you can reach: http://10.10.0.191/~kolsen/gallery2  If you have the CD:  There is a folder under support_files called “gallery”  You will need to load in the XML data like we did in the demographics example and modify a few of the first steps

62. Gallery61 Gallery Example 1

63. Gallery62 Gallery Example 2

64. Gallery63 Gallery Example 3

65. Gallery64 Gallery Example 4

66. Gallery65 Gallery Example 5

67. Gallery66 Gallery Example 6

68. Gallery67 Gallery Example 7

69. Gallery68 Gallery Example 8

70. Gallery69 Gallery Example 9

71. Gallery70 Gallery Example 10

72. Gallery71 Gallery Example 11

73. Gallery72 Gallery Example 12

74. Gallery73 Gallery Example 13

75. Gallery74 Gallery Example 14

76. Gallery75 Gallery Example 15

77. Gallery76 Gallery Example 16

78. Gallery77 Gallery Example 17

79. Gallery78 Gallery Demo (More Ways to Show off Your Pets/Children)

80. Gallery79 More Information About Flex Flex Homepage: adobe.com/flexadobe.com/flex Adobe Tutorials: adobe.com/devnet/flex/videotrainingadobe.com/devnet/flex/videotraining Flex Community: flex.orgflex.org

81. Agency Overview80 All Hands - August Thank You. Questions? Kristen Olsen kolsen@level-studios.com Web Systems Engineer September 27, 2008