Introduction to Adobe Flex - Zaloni


Published on

An introduction to RIA and Flex

Published in: Technology, Education
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Introduction to Adobe Flex - Zaloni

  1. 1. Adobe Flex
  2. 2. Who am I ? <ul><li>Joseph Khan </li></ul><ul><li>Senior Software Engineer </li></ul><ul><li>Flex, HTML5, Sencha Touch </li></ul><ul><li>3.6 yrs of experience </li></ul>
  3. 3. <ul><li>Who are you? </li></ul><ul><li>Have a little idea on Web based applications </li></ul><ul><li>Eager to learn a new THING ! </li></ul>Who are you ?
  4. 4. Road Map <ul><li>What does Rich Internet Application means ? </li></ul><ul><li>Anatomy of a Rich Internet Application </li></ul><ul><li>What is Flex ? </li></ul><ul><li>Flex v/s Flash and Flex v/s Ajax </li></ul><ul><li>Talk more on Flex….. </li></ul><ul><li>Live demo </li></ul><ul><li>Inspiration </li></ul>
  5. 5. Application Evolution Client/Server Mainframe Web Applications Reach Local Global Rich Text UI 1992 1998 2005+ Rich Internet Applications
  6. 6. RIA – Rich Internet Application <ul><li>A Rich Internet Application (RIA) is an application that runs in the traditional browser, but utilizes an intermediate layer that can bypass the traditional page refresh that has been a standard of most current Web applications. </li></ul><ul><li>Desktopification of the browser based applications </li></ul><ul><li>Most common tools – </li></ul><ul><ul><li>Asynchronous JavaScript and XML (AJAX) </li></ul></ul><ul><ul><li>WPF (.NET framework) </li></ul></ul><ul><ul><li>Flex or Flash using the Flash Player </li></ul></ul>
  7. 7. Anatomy of a Rich Internet Application Data Visualization & Collaboration Real Time Data Push & Alerting Chat Offline Data Synchronization & Conflict Resolution Bi-Directional Audio & Video Rich Data Entry Menus & Navigation Controls Resizable Views/Effects/ Transitions Mapping, Geo-Coding, Annotations & White boarding
  8. 8. What is Flex?
  9. 9. <ul><li>What is Flex? </li></ul><ul><ul><li>It is a free, open source framework based on the Adobe Flash Runtime used to develop RIAs (rich Internet applications) </li></ul></ul><ul><ul><ul><li>RIAs - new kind of web experience that offer the ease of use/experience of a desktop application while providing the broad reach of web applications </li></ul></ul></ul><ul><ul><li>Flex application framework consists of MXML, ActionScript™ 3 (AS3), and the Flex class library. </li></ul></ul><ul><ul><li>Developers use MXML to declaratively define the application user interface elements and use ActionScript for client logic and procedural control. </li></ul></ul>
  10. 10. Expressiveness Rich Media Performance Real Time Desktop and Offline <ul><li>Client-side, deployed as Flash .swf </li></ul><ul><li>Flex Framework </li></ul><ul><ul><li>MXML (Macromedia XML) </li></ul></ul><ul><ul><ul><li>Declarative language to define User Interface </li></ul></ul></ul><ul><ul><ul><li>Similar to XHTML </li></ul></ul></ul><ul><ul><li>User Interface Components </li></ul></ul><ul><ul><ul><li>Buttons, ComboBoxes, Layout Managers, Containers, Effects </li></ul></ul></ul><ul><ul><li>Class Libraries </li></ul></ul><ul><ul><ul><li>Everything in the mx.* packages </li></ul></ul></ul><ul><ul><ul><li>Validation Routines, Web Services, DataTypes </li></ul></ul></ul>What is Flex?
  11. 11. History
  12. 12. Flex vs. Flash Library SWF Compiled object, No special server required, Runs on Flash Player, Cross Browser compatible Flex Compiler AS3 MXML Flash Authoring Flex Builder (and SDK) AS2 Flash Compiler CSS
  13. 13. Flex v/s AJAX
  14. 14. Where does Flex fit in? Any Language/Server PHP Java/JSP/Struts/J2EE Web Services 3 rd Party APIs Database -MYSQL -DB2 -Oracle -Sybase -MSSQL -Access?
  15. 15. How Flex Works ? Browser MXML and ActionScript XML/HTTP REST SOAP Web Services JEE Application Server LC Data Services Flash Player Web Server Existing Applications and Infrastructure Flex Builder IDE Flex SDK MXML ActionScript Flex Class Library Compile .swf .swf HTTP/S AMF/S RTMP/S SOAP
  16. 16. Getting Started
  17. 17. Flex/Flash Builder IDE
  18. 18. MXML <ul><li>MXML are plain text based document </li></ul><ul><li>Follows XML standards </li></ul><ul><li>It is tag based <mx:Panel> similar to HTML </li></ul><ul><li>Always start with a XML declaration </li></ul><ul><li>Root node is always <mx:Application> </li></ul>
  19. 19. Action Script 3.0 <ul><li>Action script is a scripting language </li></ul><ul><li>No tags </li></ul><ul><li>Is fully Object Oriented </li></ul><ul><li>All MXML tags are Action Script classes </li></ul><ul><li>Similar to Java </li></ul>
  20. 20. Flex – other features
  21. 21. Where Flex is used ? Product Configuration Rich Media Applications Data Visualization Authoring Applications Product Selection Line of Business Applications
  22. 22. Resources - links Adobe Devnet: Learn Flex in a week Learn Flex in a week Flex Help: Getting started with Flex Flex Examples:
  23. 23. Reach me at [email_address]
  1. A particular slide catching your eye?

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