A Brief Intro to Adobe Flex

1,625 views

Published on

Created at the release time of Flex 3. Presented to Bradley University Interactive media students in the fall of 2008.

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

  • Be the first to like this

No Downloads
Views
Total views
1,625
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
65
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide










































































































  • A Brief Intro to Adobe Flex

    1. 1. Intro to Adobe Flex A brief introduction to Adobe’s RIA development tool.
    2. 2. What is Flex?
    3. 3. What is Flex? • Flex is a a cross-platform development framework for creating Rich Internet Applications (RIAs).
    4. 4. What is Flex? • Flex is a a cross-platform development framework for creating Rich Internet Applications (RIAs). • A component based tool that you can use to develop apps that run using the Flash Player or Adobe Air.
    5. 5. What is Flex? • Flex is a a cross-platform development framework for creating Rich Internet Applications (RIAs). • A component based tool that you can use to develop apps that run using the Flash Player or Adobe Air. • Adobe Flex Builder™ software is an Eclipse™ based IDE for developing RIAs
    6. 6. What is Flex? • Flex is a a cross-platform development framework for creating Rich Internet Applications (RIAs). • A component based tool that you can use to develop apps that run using the Flash Player or Adobe Air. • Adobe Flex Builder™ software is an Eclipse™ based IDE for developing RIAs • A competitor or compliment to AJAX, JavaFX, Silverlight (depends who you ask and in what context)
    7. 7. What is Flex? • Flex is a a cross-platform development framework for creating Rich Internet Applications (RIAs). • A component based tool that you can use to develop apps that run using the Flash Player or Adobe Air. • Adobe Flex Builder™ software is an Eclipse™ based IDE for developing RIAs • A competitor or compliment to AJAX, JavaFX, Silverlight (depends who you ask and in what context) • Very cool
    8. 8. What isn’t Flex?
    9. 9. What isn’t Flex? • It’s not a timeline based animation tool
    10. 10. What isn’t Flex? • It’s not a timeline based animation tool • It’s not expensive - It’s actually available for students for free and also as an open source plug-in for Eclipse
    11. 11. What isn’t Flex? • It’s not a timeline based animation tool • It’s not expensive - It’s actually available for students for free and also as an open source plug-in for Eclipse • It’s not a server-side language
    12. 12. What isn’t Flex? • It’s not a timeline based animation tool • It’s not expensive - It’s actually available for students for free and also as an open source plug-in for Eclipse • It’s not a server-side language • It’s not an answer for everything
    13. 13. Origins of Flex
    14. 14. Origins of Flex • Flex 1 and 1.5 were server based languages where MXML was compiled/executed at request time, like ColdFusion or PHP
    15. 15. Origins of Flex • Flex 1 and 1.5 were server based languages where MXML was compiled/executed at request time, like ColdFusion or PHP • Built in Eclipse, compiled on the server
    16. 16. Origins of Flex • Flex 1 and 1.5 were server based languages where MXML was compiled/executed at request time, like ColdFusion or PHP • Built in Eclipse, compiled on the server • It was expensive
    17. 17. Origins of Flex • Flex 1 and 1.5 were server based languages where MXML was compiled/executed at request time, like ColdFusion or PHP • Built in Eclipse, compiled on the server • It was expensive • Adobe saw value in the Flash Platform, bought Macromedia and has embraced the framework, version 3 has just launched with 4 not too far behind.
    18. 18. Origins of Flex • Flex 1 and 1.5 were server based languages where MXML was compiled/executed at request time, like ColdFusion or PHP • Built in Eclipse, compiled on the server • It was expensive • Adobe saw value in the Flash Platform, bought Macromedia and has embraced the framework, version 3 has just launched with 4 not too far behind. • Opensourced in 2007. SDK/Compiler can be downloaded and snapped into Eclipse for free.
    19. 19. Origins of Flex • Flex 1 and 1.5 were server based languages where MXML was compiled/executed at request time, like ColdFusion or PHP • Built in Eclipse, compiled on the server • It was expensive • Adobe saw value in the Flash Platform, bought Macromedia and has embraced the framework, version 3 has just launched with 4 not too far behind. • Opensourced in 2007. SDK/Compiler can be downloaded and snapped into Eclipse for free. • Education version is also free
    20. 20. Current State of Flex
    21. 21. Current State of Flex • Growing quickly: • Developers are embracing MXML and AS3. • The player has nearly a 95% penetration rate. • Dependable and Fast: Flex content looks like Flex content on every browser. • Easy to debug - Compile time errors, profiler, refactoring support
    22. 22. Current State of Flex • Growing quickly: • Developers are embracing MXML and AS3. • The player has nearly a 95% penetration rate. • Dependable and Fast: Flex content looks like Flex content on every browser. • Easy to debug - Compile time errors, profiler, refactoring support • Flex blogs, books, tutorials and conferences are exploding
    23. 23. Current State of Flex • Growing quickly: • Developers are embracing MXML and AS3. • The player has nearly a 95% penetration rate. • Dependable and Fast: Flex content looks like Flex content on every browser. • Easy to debug - Compile time errors, profiler, refactoring support • Flex blogs, books, tutorials and conferences are exploding • Flex related job listings are also exploding
    24. 24. Basics of Flex
    25. 25. Basics of Flex • Runs in the Flash Player or AIR
    26. 26. Basics of Flex • Runs in the Flash Player or AIR • Tag based markup MXML serves as the basis for Flex projects
    27. 27. Basics of Flex • Runs in the Flash Player or AIR • Tag based markup MXML serves as the basis for Flex projects • MXML is a custom XML namespace, looks like <mx:MyTag></mx:MyTag>
    28. 28. Basics of Flex • Runs in the Flash Player or AIR • Tag based markup MXML serves as the basis for Flex projects • MXML is a custom XML namespace, looks like <mx:MyTag></mx:MyTag> • Component based development: Containers/Layout Components, UI Elements, Data Connectors, more
    29. 29. Basics of Flex • Runs in the Flash Player or AIR • Tag based markup MXML serves as the basis for Flex projects • MXML is a custom XML namespace, looks like <mx:MyTag></mx:MyTag> • Component based development: Containers/Layout Components, UI Elements, Data Connectors, more • Actionscript 3 can be used to add behaviors or other interactivity not covered by MXML
    30. 30. Basics of Flex • Runs in the Flash Player or AIR • Tag based markup MXML serves as the basis for Flex projects • MXML is a custom XML namespace, looks like <mx:MyTag></mx:MyTag> • Component based development: Containers/Layout Components, UI Elements, Data Connectors, more • Actionscript 3 can be used to add behaviors or other interactivity not covered by MXML • Supports common OOP practices like MVC patterns, code behind, etc.
    31. 31. Basic of Flex Continued
    32. 32. Basic of Flex Continued • MXML components can be brought onto the canvas via the GUI similar to Dreamweaver or VisualStudio • Markup can be written by hand with code assist, too. Again, similar to Dreamweaver or VisualStudio • MXML components have attributes that allow for modification of appearance or behavior • Components can be extended for additional capabilities or reuse via MXML or AS or a combo of both. • Containers control layout (Canvas, Vertical Box, Horizontal Box) • UI components display data, control interactivity or display states or other visual feedback (Datagrids, lists, buttons, selects menus, radio buttons, etc.) • Data components load or send data (Services, XML, Remoting, etc) • Other tags include: Script, Style, etc. • Tags can be nested similar to HTML/XML
    33. 33. Designing Interfaces in Flex
    34. 34. Designing Interfaces in Flex • CSS can be used to style the components • Flash, PNGs, and JPGs can be used to skin the components, too • Illustrator, Photoshop, Fireworks, Flash all have component design sets to assist in UI skinning • Constraint based layouts and percentage based placements make polished, uniform layouts much easier
    35. 35. My First Flex App: Hello World
    36. 36. My First Flex App: Hello World <?xml version="1.0" encoding="utf-8"?>
    37. 37. My First Flex App: Hello World <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    38. 38. My First Flex App: Hello World <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Label x="10" y="10" text="Output" id="output"/>
    39. 39. My First Flex App: Hello World <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Label x="10" y="10" text="Output" id="output"/> <mx:Button x="10" y="36" label="Click Me" click="{output.text = 'Hello World'}"/>
    40. 40. My First Flex App: Hello World <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Label x="10" y="10" text="Output" id="output"/> <mx:Button x="10" y="36" label="Click Me" click="{output.text = 'Hello World'}"/> </mx:Application>
    41. 41. My First Okay Flex App: Hello World from XML
    42. 42. My First Okay Flex App: Hello World from XML <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ //my favorite little random function - seed with floor and ceiling and it brings back a random integer from the range public function randRange(min:Number, max:Number):Number { var randomNum:Number = Math.floor(Math.random() * (max - min + 1)) + min; return randomNum; } ]]> </mx:Script> <mx:XML id="myXML" xmlns=""> <greetings> <greeting>Hola Mundo</greeting> <greeting>Hello World</greeting> <greeting>Ciao Mondo</greeting> <greeting>Hallo welt</greeting> <greeting> </greeting> </greetings> </mx:XML> <mx:Label x="10" y="10" text="Output" id="output"/> <mx:Button x="10" y="36" label="Click Me" click="{output.text = myXML.greeting[randRange(0, 4)].valueOf()}"/> </mx:Application>
    43. 43. My First More Okay Flex App: Hello World from External XML
    44. 44. My First More Okay Flex App: Hello World from External XML <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ //my favorite little random function - seed with floor and ceiling and it brings back a random integer from the range public function randRange(min:Number, max:Number):Number { var randomNum:Number = Math.floor(Math.random() * (max - min + 1)) + min; return randomNum; } ]]> </mx:Script> <mx:XML id="myXML" source="externalXML.xml" xmlns="" /> <mx:Label x="10" y="10" text="Output" id="output"/> <mx:Button x="10" y="36" label="Click Me" click="{output.text = myXML.greeting[randRange(0, 4)].valueOf()}"/> </mx:Application>
    45. 45. More Flex Info • adobe.com/flex • flex.org • weblogs.macromedia.com/mxna • opensource.adobe.com • visualrinse.com • 30onair.com
    46. 46. Enough yakking, let’s code • Cross your fingers • Stick around to heckle and get some freebies

    ×