0
Introduction to                                 Flex RIA                                                    SABARINATHAN  ...
Talk Coverage                                 40%                                                   RIA                   ...
Quick Look . . .             Rich Internet Applications (RIA)                  Why Flashplatform ?                Flash Pl...
RIA :           Rich Internet Applications4   | Introduction to Flex RIA          |   Talks @ Chennai Flex User Group
Flash Back                                   Remote Scripting, by Microsoft, circa 1998                                 X ...
What is RIA ?     “Rich Internet Applications (RIAs) are web-based applications that have a much               more robust...
Typical RIA Architecture                                                            Ease of Use                           ...
Former RIA Organization                                 Vendor               Client Tech                                 A...
RIA Frameworks                                                                       UltraLightClient                     ...
Areas of RIA      Financial Services      Auto Dealerships      Mortgage Firms      Customer survey forms      Email ...
Statistics:           Why Flash Platform?11 | Introduction to Flex RIA    |   Talks @ Chennai Flex User Group
Positive Notes    “While the <video> tag is a big step forward for open standards, the Adobe Flash Platform      will cont...
HTML 5 vs Flash : Ryan’s Comparison13 | Introduction to Flex RIA            |   Talks @ Chennai Flex User Group
Statistics                                 Live Stats                                 Players / Plug-ins Domination     ...
Live Stats                      Flash Player / Plug-in                            Silverlight                             ...
Players / Plug-ins Domination                                Source: Google Trends on 8th Nov 201016 | Introduction to Fle...
Frameworks Trend                                Source: Google Trends on 8th Nov 201017 | Introduction to Flex RIA        ...
Adobe’s RIA:           Flash Platform Technologies18 | Introduction to Flex RIA            |   Talks @ Chennai Flex User G...
Technology Stack       Tools            Flash Catalyst           Flash Professional   Flash / Flex Builder                ...
Flex Introduction                            ADOBE FLEX®                                A highly productive, free open sou...
Flex Flashback                                              Macromedia Flex Server 1.0 and 1.5 (2004)                     ...
Flex Environment   Two languages                                                                    Flash Builder IDE    ...
Flex Work Flow23 | Introduction to Flex RIA   |   Talks @ Chennai Flex User Group
MXML: Macromedia XML24 | Introduction to Flex RIA     |   Talks @ Chennai Flex User Group
MXML application  s:Application                 <?xml version="1.0" ?>                                <s:Application>     ...
MXML Contd…                                MXML Application            <Application>              <WebService id=“ws” wsdl...
MXML Contd…                                MXML - Components            <Application>              <WebService id=“ws” wsd...
MXML Contd…                                      MXML - id            <Application>              <WebService id=“ws” wsdl=...
MXML Contd…                                MXML - Properties            <Application>              <WebService id=“ws” wsd...
MXML Contd…                                  MXML - Events            <Application>              <WebService id=“ws” wsdl=...
MXML Contd…                                  MXML - Binding            <Application>              <WebService id=“ws” wsdl...
Action Script32 | Introduction to Flex RIA   |   Talks @ Chennai Flex User Group
Introduction to Action Script     ECMA-262 edition and ECMA-4 complaint     Versions             Action Script 1.0 – 20...
Action Script contd…   package   {        import flash.display.Sprite;        import flash.text.TextField;           publi...
Action Script contd…<mx:Panel title=“firstApplication">     <mx:TextArea id=“note1"/>     <mx:Button label=“Submit” onclic...
Inside Flex36 | Introduction to Flex RIA   |   Talks @ Chennai Flex User Group
Flex Compilation                                           mxmlc compiler process                                         ...
Flex Components                                and more                                           Image Courtesy: Adobe.co...
Flex Back End                    HTTP Services                        RemoteObject                   Web Services         ...
Sample Flash Platform RIA applications40 | Introduction to Flex RIA               |   Talks @ Chennai Flex User Group
Let’s get started . . .41 | Introduction to Flex RIA   |   Talks @ Chennai Flex User Group
Take a Look42 | Introduction to Flex RIA   |   Talks @ Chennai Flex User Group
Adobe AIR43 | Introduction to Flex RIA   |   Talks @ Chennai Flex User Group
Adobe AIR                                                  Adobe® AIR® is a cross-operating system runtime that           ...
Introduction   Adobe Integrated Runtime (AIR) – previously codenamed “Apollo”   Cross-OS application engine that enables...
AIR Stack ( Architecture )                                Source: Adobe.com46 | Introduction to Flex RIA                  ...
Flex and Adobe AIR AIR-enabled Flex Capabilities           Native OS drag and drop support           Multi-windowed appl...
Flash Player and Adobe AIR                                Web   Desktop48 | Introduction to Flex RIA                   |  ...
3D Components49 | Introduction to Flex RIA   |   Talks @ Chennai Flex User Group
ILOG Elixir                                Ilog Elixir 3D OnlineDemo50 | Introduction to Flex RIA                         ...
Fusion Charts                                Fusion Online Demo51 | Introduction to Flex RIA                        |   Ta...
amCharts                                AmCharts Online Demo52 | Introduction to Flex RIA                          |   Tal...
Flex Hero : Mobile Apps53 | Introduction to Flex RIA        |   Talks @ Chennai Flex User Group
Available Options                    Adobe Flash Builder - "Burrito“   Flex SDK “Hero”54 | Introduction to Flex RIA       ...
References & resources     Flex Developer Center            http://www.adobe.com/devnet/flex/     Adobe® Flex™ 3 Languag...
Thank you!                                            Let’s Discuss . . .                                riahunter        ...
Upcoming SlideShare
Loading in...5
×

Flex Introduction

3,138

Published on

Note: I moved to http://mywebground.com/ so http://sabaritheflexian.com is no longer in us by me.
Introduction to Flex. This presentation is for beginners who wants to dive into the awesome platform called Adobe Flash / Flex. It also talks about RIA, Adobe Flex and AIR.

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

No Downloads
Views
Total Views
3,138
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
184
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Flex Introduction"

  1. 1. Introduction to Flex RIA SABARINATHAN RIA Developer http://sabaritheflexian.com riahunter Talks @ Chennai Flex User Group ( CFUG )1 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  2. 2. Talk Coverage 40% RIA 10% Flex and Action Script 25% AIR 5% Flex Hero 20% Demo2 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  3. 3. Quick Look . . . Rich Internet Applications (RIA) Why Flashplatform ? Flash Platform Technologies Inside Flex MXML Action Script Adobe AIR 3D Components Flex Hero Intro3 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  4. 4. RIA : Rich Internet Applications4 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  5. 5. Flash Back Remote Scripting, by Microsoft, circa 1998 X Internet, by Forrester Research in October 2000 Rich (Web) Clients Rich Web Application White Paper by Macromedia (Adobe) - 20025 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  6. 6. What is RIA ? “Rich Internet Applications (RIAs) are web-based applications that have a much more robust feel and functionality to them than standard web based applications.” Traditional HTML, and the accompanying technology surrounding standard web pages, are being pushed to the limits of their capabilities. Leveraging RIAs allows web applications to have desktop application usability inside a web browser! Source : Microsoft.com6 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  7. 7. Typical RIA Architecture Ease of Use Enhanced User Experience Reduced Server Load Lost Data Light Weight Faster Processing time AJAX (Asynchronous JavaScript And XML) Source : Microsoft.com7 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  8. 8. Former RIA Organization Vendor Client Tech Adobe XDP JS, XML, PDF AltioLive XML, Applet DreamFactory XML Droplets Java Servlet Isomorphics DHTML, XML Laszlo Flash, XML Macromedia Central Flash Macromedia Flex Flash, XML Nexaweb Java+XUL Q-link XML,XForms8 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  9. 9. RIA Frameworks UltraLightClient Ample Google Web Toolkit Silverlight Adobe Flash / Flex Curl ZK JavaFX OpenLaszlo Bindows9 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  10. 10. Areas of RIA  Financial Services  Auto Dealerships  Mortgage Firms  Customer survey forms  Email forms  Video Distribution (branding/licensing)  Remote training services  Customer service (live two-way video, chat & assistance)  Virtual Desktop Environments  CRM/ERP front-end applications ... the applications are limitless…10 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  11. 11. Statistics: Why Flash Platform?11 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  12. 12. Positive Notes “While the <video> tag is a big step forward for open standards, the Adobe Flash Platform will continue to play a critical role in video distribution," said Yong in YouTube blog. -http://apiblog.youtube.com/2010/06/flash-and-html5-tag.html HTML5 Can’t Exist Without the Flash Platform : Ryan Stewart Blog Post  http://www.streaminglearningcenter.com/articles/flash-player-cpu-hog-or-hot-tamale-it-depends-.html  http://www.engadget.com/2010/03/10/html5-vs-flash-comparison-finds-a-few-surprises-settles-few-de/  http://techcrunch.com/2010/02/05/the-future-of-web-content-html5-flash-mobile-apps/  http://thenextweb.com/apple/2010/05/14/html5-vs-flash-what-you-havent-heard/12 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  13. 13. HTML 5 vs Flash : Ryan’s Comparison13 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  14. 14. Statistics  Live Stats  Players / Plug-ins Domination  Frameworks Trend14 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  15. 15. Live Stats Flash Player / Plug-in Silverlight Statistics collected from 19,409,973 daily unique browsers across 147 sites over the past 30 days From www.riastats.com (08th Nov 2010)15 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  16. 16. Players / Plug-ins Domination Source: Google Trends on 8th Nov 201016 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  17. 17. Frameworks Trend Source: Google Trends on 8th Nov 201017 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  18. 18. Adobe’s RIA: Flash Platform Technologies18 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  19. 19. Technology Stack Tools Flash Catalyst Flash Professional Flash / Flex Builder Clients Frameworks AIR Flash Player Flex Servers/Services Live Cycle DS ColdFusion Flash Media Server Services19 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  20. 20. Flex Introduction ADOBE FLEX® A highly productive, free open source framework for building expressive web applications that deploy consistently on all major browsers and on the desktop with Adobe AIR. - Adobe20 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  21. 21. Flex Flashback Macromedia Flex Server 1.0 and 1.5 (2004) Adobe Flex 2 – AS3 (2005 – 2006) Adobe Flex 3 – AIR (2007 – 2009) Adobe Flex 4 - Flash Builder (2010) Adobe Flex 4.5 and Flex Hero - Flash Builder (2011)Flex was the first Macromedia product to be re-branded under the Adobe name.21 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  22. 22. Flex Environment  Two languages Flash Builder IDE  MXML (actually a library of ActionScript)  ActionScript 3 Flex SDK  Compilers MXML ActionScript  Debugger Flex Class Library  Profiler Debuggers  Rich Component Library Profilers , Flex Units, Network Monitors  Flash / Flex Builder IDE Auto Code-Generation  Eclipse Plug-in  Design view and code view and more…  Debugging / Development / Profiling22 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  23. 23. Flex Work Flow23 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  24. 24. MXML: Macromedia XML24 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  25. 25. MXML application s:Application <?xml version="1.0" ?> <s:Application> s:Button <s:Button width=”100” height=”50”/> s:Panel s:Button <s:Panel width=”100%” height=”100%”> mx:DataGrid <s:Button width=”100%”/> <mx:DataGrid width=”100%” height=”100%”/> </s:Panel> </s:Application>25 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  26. 26. MXML Contd… MXML Application <Application> <WebService id=“ws” wsdl=“catalog.wsdl”/> <Button label=“Get Data” click=“ws.getProducts()”/> <DataGrid dataProvider=“{ws.getProducts.result}”/> <LineChart dataProvider=“{ws.getProducts.result}”/> </Application>26 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  27. 27. MXML Contd… MXML - Components <Application> <WebService id=“ws” wsdl=“catalog.wsdl”/> <Button label=“Get Data” click=“ws.getProducts()”/> <DataGrid dataProvider=“{ws.getProducts.result}”/> <LineChart dataProvider=“{ws.getProducts.result}”/> </Application>27 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  28. 28. MXML Contd… MXML - id <Application> <WebService id=“ws” wsdl=“catalog.wsdl”/> <Button label=“Get Data” click=“ws.getProducts()”/> <DataGrid dataProvider=“{ws.getProducts.result}”/> <LineChart dataProvider=“{ws.getProducts.result}”/> </Application>28 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  29. 29. MXML Contd… MXML - Properties <Application> <WebService id=“ws” wsdl=“catalog.wsdl”/> <Button label=“Get Data” click=“ws.getProducts()”/> <DataGrid dataProvider=“{ws.getProducts.result}”/> <LineChart dataProvider=“{ws.getProducts.result}”/> </Application>29 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  30. 30. MXML Contd… MXML - Events <Application> <WebService id=“ws” wsdl=“catalog.wsdl”/> <Button label=“Get Data” click=“ws.getProducts()”/> <DataGrid dataProvider=“{ws.getProducts.result}”/> <LineChart dataProvider=“{ws.getProducts.result}”/> </Application>30 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  31. 31. MXML Contd… MXML - Binding <Application> <WebService id=“ws” wsdl=“catalog.wsdl”/> <Button label=“Get Data” click=“ws.getProducts()”/> <DataGrid dataProvider=“{ws.getProducts.result}”/> <LineChart dataProvider=“{ws.getProducts.result}”/> </Application>31 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  32. 32. Action Script32 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  33. 33. Introduction to Action Script  ECMA-262 edition and ECMA-4 complaint  Versions  Action Script 1.0 – 2000 – 2003 Flash Player 8 and below  Action Script 2.0 – 2003 – 2006  Action Script 3.0 – 2006 – present >> Flex 2.0 - Flash Player 9 and above  Object-oriented from AS 3  Initially designed for controlling simple 2D vector animations made in Adobe Flash (formerly Macromedia Flash).  Foundation for Flex 2 and above  Online API >> http://livedocs.adobe.com/flex/3/html/toc.html33 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  34. 34. Action Script contd… package { import flash.display.Sprite; import flash.text.TextField; public class DemoCFUG extends Sprite { public function DemoCFUG() { var txtFieldBox:TextField = new TextField(); txtFieldBox.width = 100; txtFieldBox.height = 140; txtFieldBox.border = true; txtFieldBox.borderColor = 0xFF0000; txtFieldBox.text = "Hello CFUG !!!"; addChild(txtFieldBox); } } }34 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  35. 35. Action Script contd…<mx:Panel title=“firstApplication"> <mx:TextArea id=“note1"/> <mx:Button label=“Submit” onclick=“doSomething();"/></mx:Panel>package { import flash.media.Video; import flash.net.NetStream; import flash.net.NetConnection; public class Example { public function doSomething( event: Event ) : void { var url:String = “homeMovie.flv"; var video:Video = new Video(width:int=500, height:int=350) var stream:NetStream = new NetStream(new NetConnection()); video.attachNetStream(stream); video.play(url); addChild(video); } }}Code borrowed from: http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/media/Video.html35 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  36. 36. Inside Flex36 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  37. 37. Flex Compilation mxmlc compiler process • Parse MXML into ActionScript classes • Compile ActionScript into bytecode • Insert bytecode into a binary SWF file Stage 1 • Flash Player contains an ActionScript Virtual Machine (AVM). At runtime, the AVM turns the bytecode into machine language code that the particular OS can Stage 2 interpret. (JIT compilation) Also check : Build Phase in Flex Docs37 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  38. 38. Flex Components and more Image Courtesy: Adobe.com38 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  39. 39. Flex Back End HTTP Services RemoteObject Web Services BlazeDS / LCDS / GraniteDS Java - J2EE / Coldfusion AMFPHP / Zend AMF PHP WebORB / Flourine FX .NET WebORB for Ruby/ RubyAMF Ruby on Rails PYAMF / DjangoAMF Python39 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  40. 40. Sample Flash Platform RIA applications40 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  41. 41. Let’s get started . . .41 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  42. 42. Take a Look42 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  43. 43. Adobe AIR43 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  44. 44. Adobe AIR Adobe® AIR® is a cross-operating system runtime that lets developers combine HTML, Ajax, Adobe Flash®, and Adobe Flex® technologies to deploy Rich Internet Applications (RIAs) on the desktop. - Adobe44 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  45. 45. Introduction  Adobe Integrated Runtime (AIR) – previously codenamed “Apollo”  Cross-OS application engine that enables hybrid desktop-internet applications  Adds desktop capabilities for Flex apps  Benefits  Total control of user experience  Browser to desktop consistency  Rich media capabilities  Network resilience  Desktop access to services45 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  46. 46. AIR Stack ( Architecture ) Source: Adobe.com46 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  47. 47. Flex and Adobe AIR AIR-enabled Flex Capabilities  Native OS drag and drop support  Multi-windowed applications  Access to local file system  Local database storage (SQLite)  Complete rendering support for HTML content  Micro-phone access  Touch Screen capabilities .. more.. Flash Builder Support for AIR Development  Full code hinting and error reporting  Complete debugging and profiling support  Application packaging and signing47 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  48. 48. Flash Player and Adobe AIR Web Desktop48 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  49. 49. 3D Components49 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  50. 50. ILOG Elixir Ilog Elixir 3D OnlineDemo50 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  51. 51. Fusion Charts Fusion Online Demo51 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  52. 52. amCharts AmCharts Online Demo52 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  53. 53. Flex Hero : Mobile Apps53 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  54. 54. Available Options Adobe Flash Builder - "Burrito“ Flex SDK “Hero”54 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  55. 55. References & resources  Flex Developer Center http://www.adobe.com/devnet/flex/  Adobe® Flex™ 3 Language Reference http://livedocs.adobe.com/labs/flex3/langref/  Ryan’s Blog | http://blog.digitalbackcountry.com/  Flex Org | http://flex.org/  RIA Statistics | http://riastats.com/  O’Reily Develop RIA | http://www.developria.com/  Google Trends http://www.google.com/trends  Wikipedia RIA http://en.wikipedia.org/wiki/Rich_Internet_application55 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  56. 56. Thank you! Let’s Discuss . . . riahunter nathan5x Talks @ Chennai Flex User Group ( CFUG )56 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  1. A particular slide catching your eye?

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

×