Intro to Adobe Flex

A brief introduction to Adobe’s RIA development tool.
What is Flex?
What is Flex?	

• Flex is a a cross-platform development framework for creating Rich Internet Applications (RIAs).
What is Flex?	

• Flex is a a cross-platform development framework for creating Rich Internet Applications (RIAs).


• A c...
What is Flex?	

• Flex is a a cross-platform development framework for creating Rich Internet Applications (RIAs).


• A c...
What is Flex?	

• Flex is a a cross-platform development framework for creating Rich Internet Applications (RIAs).


• A c...
What is Flex?	

• Flex is a a cross-platform development framework for creating Rich Internet Applications (RIAs).


• A c...
What isn’t Flex?
What isn’t Flex?

• It’s not a timeline based animation tool
What isn’t Flex?

• It’s not a timeline based animation tool


• It’s not expensive - It’s actually available for students...
What isn’t Flex?

• It’s not a timeline based animation tool


• It’s not expensive - It’s actually available for students...
What isn’t Flex?

• It’s not a timeline based animation tool


• It’s not expensive - It’s actually available for students...
Origins of Flex
Origins of Flex

• Flex 1 and 1.5 were server based languages where MXML was compiled/executed at request time, like
  Col...
Origins of Flex

• Flex 1 and 1.5 were server based languages where MXML was compiled/executed at request time, like
  Col...
Origins of Flex

• Flex 1 and 1.5 were server based languages where MXML was compiled/executed at request time, like
  Col...
Origins of Flex

• Flex 1 and 1.5 were server based languages where MXML was compiled/executed at request time, like
  Col...
Origins of Flex

• Flex 1 and 1.5 were server based languages where MXML was compiled/executed at request time, like
  Col...
Origins of Flex

• Flex 1 and 1.5 were server based languages where MXML was compiled/executed at request time, like
  Col...
Current State of Flex
Current State of Flex

• Growing quickly:


   • Developers are embracing MXML and AS3.


   • The player has nearly a 95%...
Current State of Flex

• Growing quickly:


   • Developers are embracing MXML and AS3.


   • The player has nearly a 95%...
Current State of Flex

• Growing quickly:


   • Developers are embracing MXML and AS3.


   • The player has nearly a 95%...
Basics of Flex
Basics of Flex	

• Runs in the Flash Player or AIR
Basics of Flex	

• Runs in the Flash Player or AIR


• Tag based markup MXML serves as the basis for Flex projects
Basics of Flex	

• Runs in the Flash Player or AIR


• Tag based markup MXML serves as the basis for Flex projects


• MXM...
Basics of Flex	

• Runs in the Flash Player or AIR


• Tag based markup MXML serves as the basis for Flex projects


• MXM...
Basics of Flex	

• Runs in the Flash Player or AIR


• Tag based markup MXML serves as the basis for Flex projects


• MXM...
Basics of Flex	

• Runs in the Flash Player or AIR


• Tag based markup MXML serves as the basis for Flex projects


• MXM...
Basic of Flex Continued
Basic of Flex Continued

• MXML components can be brought onto the canvas via the GUI similar to Dreamweaver or VisualStud...
Designing Interfaces in Flex
Designing Interfaces in Flex

• CSS can be used to style the components


• Flash, PNGs, and JPGs can be used to skin the ...
My First Flex App: Hello World
My First Flex App: Hello World

  <?xml version="1.0" encoding="utf-8"?>
My First Flex App: Hello World

   <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2...
My First Flex App: Hello World

   <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2...
My First Flex App: Hello World

   <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2...
My First Flex App: Hello World

   <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2...
My First Okay Flex App: Hello World from XML
My First Okay Flex App: Hello World from XML

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www....
My First More Okay Flex App: Hello World from External XML
My First More Okay Flex App: Hello World from External XML

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:m...
More Flex Info

• adobe.com/flex


• flex.org


• weblogs.macromedia.com/mxna


• opensource.adobe.com


• visualrinse.com

...
Enough yakking, let’s code

• Cross your fingers


• Stick around to heckle and get some freebies
A Brief Intro to Adobe Flex
Upcoming SlideShare
Loading in...5
×

A Brief Intro to Adobe Flex

1,282

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,282
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
64
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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×