Successfully reported this slideshow.

Introduction To Rich Internet Applications

2,413 views

Published on

Adobe Flex is the leading techonology for the development and deployment of cross platform Rich Internet applications. This session is an introduction to building RIA with Adobe Flex and AIR.

  • Be the first to comment

  • Be the first to like this

Introduction To Rich Internet Applications

  1. 1. INTRODUCTION TO BUILDING RIA WITH ADOBE FLEX AND AIR By Abdelmonaim Remani Silicon Valley Code Camp 08
  2. 2. ONCE UPON A TIME
  3. 3. AT FIRST THERE WAS WEB 1.0 <ul><li>Page-Based Architecture: Static or Dynamic </li></ul><ul><li>Technologies </li></ul><ul><ul><li>Client Side (Rendering Presentation) </li></ul></ul><ul><ul><ul><li>HTML </li></ul></ul></ul><ul><ul><ul><li>CSS </li></ul></ul></ul><ul><ul><ul><li>JavaScript </li></ul></ul></ul><ul><ul><ul><li>DOM </li></ul></ul></ul><ul><ul><ul><li>DHTML </li></ul></ul></ul><ul><ul><li>Server Side (Business Logic and Data) </li></ul></ul><ul><ul><ul><li>Dynamic Content </li></ul></ul></ul><ul><ul><ul><ul><li>CGI </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Java Servlets and JSP </li></ul></ul></ul></ul><ul><ul><ul><ul><li>.NET and ASP </li></ul></ul></ul></ul><ul><ul><ul><ul><li>PHP </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Ruby on Rails </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Etc… </li></ul></ul></ul></ul><ul><ul><ul><li>Data </li></ul></ul></ul><ul><ul><ul><ul><li>Databases </li></ul></ul></ul></ul><ul><ul><ul><ul><li>XML </li></ul></ul></ul></ul><ul><ul><ul><ul><li>JSON </li></ul></ul></ul></ul>
  4. 4. THE WEB IS IN COMA <ul><li>Web 1.0 was loosing to Desktop Applications </li></ul><ul><ul><li>Performance and Speed </li></ul></ul><ul><ul><li>Responsiveness </li></ul></ul><ul><ul><li>Visual Richness / Media </li></ul></ul><ul><ul><li>Data-Driven vs. Event-Driven </li></ul></ul><ul><ul><li>Availability (Online vs. Offline) </li></ul></ul><ul><li>.COM bubble broke </li></ul><ul><li>The Browser War </li></ul>
  5. 5. LA RENAISSANCE <ul><ul><li>The community focused on developing standards </li></ul></ul><ul><ul><li>A second look at Web Application </li></ul></ul><ul><ul><ul><li>They have what Web applications have two very important characteristics that Desktop Applications don’t have </li></ul></ul></ul><ul><ul><ul><ul><li>They are Centralized </li></ul></ul></ul></ul><ul><ul><ul><ul><li>The are Inherently safe </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Run in context the browser </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Require no installation </li></ul></ul></ul></ul></ul><ul><ul><li>More powerful desktop machines are being made available (Moore’s Law) </li></ul></ul>
  6. 6. THE RAISE OF WEB 2.0 <ul><li>New Technologies </li></ul><ul><ul><li>??? </li></ul></ul><ul><li>The use features and technologies that we already have in a different way </li></ul><ul><li>The use of these features for something more powerful than what they were intended for </li></ul>
  7. 7. THE BLOODLESS REVOLUTION OF AJAX <ul><li>AJAX (Asynchronous JavaScript And XML) </li></ul><ul><li>As the acronym implies, AJAX is simply JavaScript, and XML or any other data interchange format </li></ul><ul><li>It is about exploiting the communication feature of the browser in a new different way </li></ul><ul><li>The goal is to get data from the server without a invoking full-page refresh for a better user experience </li></ul><ul><li>How? </li></ul><ul><li>AJAX is a Hack </li></ul>
  8. 8. THE GOLD RUSH <ul><li>AJAX brought a better user experience to the browser </li></ul><ul><li>AJAX adoption increased quickly </li></ul><ul><li>Web Applications’ complexity increased </li></ul><ul><li>Drastic Change of the architecture of Web Applications is represented by </li></ul><ul><ul><li>No page-based </li></ul></ul><ul><ul><li>A shift of programmatic logic from the server-side to the client-side </li></ul></ul><ul><ul><ul><li>Reduced the load on the server </li></ul></ul></ul><ul><ul><ul><ul><li>The sate is handled by the client instead of the server </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Data is loaded only when necessary </li></ul></ul></ul></ul><ul><ul><ul><li>Took advantage of the local machine power </li></ul></ul></ul><ul><ul><li>The Vision: One day the server is only going to used to distribute the application </li></ul></ul>
  9. 9. WAIT A MINUTE… <ul><li>It happened so fast </li></ul><ul><ul><li>No developer tools </li></ul></ul><ul><ul><li>No libraries </li></ul></ul><ul><ul><li>No application or testing frameworks </li></ul></ul><ul><li>AJAX evolved from technologies that were never meat or designed to build applications </li></ul><ul><ul><li>JavaScript </li></ul></ul><ul><ul><ul><li>is not OOP </li></ul></ul></ul><ul><ul><ul><li>No runtime-error handling </li></ul></ul></ul><ul><ul><ul><li>Cross-browser coding </li></ul></ul></ul><ul><li>Scalability problems </li></ul><ul><ul><li>Twitter please don’t die on me!!! </li></ul></ul>
  10. 10. HOLD YOUR HORSES <ul><li>Three Camps </li></ul><ul><ul><li>The Optimistics </li></ul></ul><ul><ul><ul><li>Let’s make it work </li></ul></ul></ul><ul><ul><ul><li>Bullet-proof libraries and toolkits: DOJO, JQuery, etc… http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks </li></ul></ul></ul><ul><ul><li>The Pessimistics </li></ul></ul><ul><ul><ul><li>JavaScript development sucks… Forget AJAX! </li></ul></ul></ul><ul><ul><ul><li>Focus on new tech </li></ul></ul></ul><ul><ul><ul><ul><li>Rich Internet Applications: Adobe Flex, JavaFX, and Microsoft Silverlight </li></ul></ul></ul></ul><ul><ul><li>The Google Way </li></ul></ul><ul><ul><ul><li>GWT Shifts some of the focus from feature richness to development and software engineering tools </li></ul></ul></ul><ul><ul><ul><li>We could allow developers to program in any programming language, and just translate or compile it into JavaScript </li></ul></ul></ul>
  11. 11. ANTHROPOLOGIA <ul><li>Developers: Coders </li></ul><ul><ul><li>Build Applications </li></ul></ul><ul><ul><ul><li>Functional </li></ul></ul></ul><ul><ul><ul><li>Data Driven </li></ul></ul></ul><ul><ul><ul><li>UGLY </li></ul></ul></ul><ul><li>Designers: Artists </li></ul><ul><ul><li>Build Applications </li></ul></ul><ul><ul><ul><li>Event-Driven </li></ul></ul></ul><ul><ul><ul><li>Beautiful </li></ul></ul></ul><ul><li>Devigners? </li></ul>
  12. 12. RICH INTERNET APPLICATIONS (RIA)
  13. 13. WHAT ARE RIAS <ul><li>Application that combine the benefits of Web and Desktop applications </li></ul><ul><ul><li>User experience of the Desktop Applications </li></ul></ul><ul><ul><ul><li>Responsive </li></ul></ul></ul><ul><ul><ul><li>Data Driven </li></ul></ul></ul><ul><ul><ul><li>Rich Media </li></ul></ul></ul><ul><ul><ul><li>Online and Offline </li></ul></ul></ul><ul><ul><li>Low cost of Deployment and reach of Web Applications </li></ul></ul>
  14. 14. TECHNOLOGIES <ul><li>RIA Technologies </li></ul><ul><ul><li>Adobe Flex </li></ul></ul><ul><ul><li>JavaFX </li></ul></ul><ul><ul><li>Microsoft SilverLight </li></ul></ul><ul><ul><li>OpenLaszlo </li></ul></ul><ul><ul><li>Etc… </li></ul></ul>
  15. 15. ADOBE FLEX
  16. 16. WHAT IS FLEX <ul><li>Adobe Flex is a platform for building Rich Internet Application and Desktop Applications </li></ul><ul><ul><li>SDK (Open Source) </li></ul></ul><ul><ul><ul><li>Compiler, debugger, and other tools </li></ul></ul></ul><ul><ul><ul><li>Libraries </li></ul></ul></ul><ul><ul><ul><li>Provides a skeleton of Flex Application by extending the Flex Framework </li></ul></ul></ul><ul><ul><ul><li>Prebuilt Components </li></ul></ul></ul><ul><ul><ul><li>Programming Languages (MXML and ActionScript 3.0) </li></ul></ul></ul>
  17. 17. WHAT IS FLEX <ul><ul><li>Flex Builder 3 </li></ul></ul><ul><ul><ul><li>IDE based on Eclipse </li></ul></ul></ul><ul><ul><ul><li>Design tools </li></ul></ul></ul><ul><ul><li>Server-Side </li></ul></ul><ul><ul><ul><li>Enterprise Messaging Support </li></ul></ul></ul><ul><ul><ul><li>Data Services </li></ul></ul></ul><ul><ul><ul><ul><li>Data sharing and communiction among clients </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Data push from server to clients </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Etc… </li></ul></ul></ul></ul><ul><ul><ul><li>Options: Live Cycle Data Services, BlazeDS, etc… </li></ul></ul></ul><ul><ul><li>Adobe Flex Charting </li></ul></ul>
  18. 18. FLEX APPLICATIONS <ul><li>Delivered as SWF (Shockwave Flash) files in HTML </li></ul><ul><ul><li>Runs on Flash Player 9 or later </li></ul></ul><ul><ul><li>On 99.3% of the browsers </li></ul></ul><ul><li>Delivered as a Desktop application </li></ul><ul><ul><li>Runs on AIR (Adobe Integrated Environment) </li></ul></ul>
  19. 19. RUN TIME <ul><li>Flash Player 9 </li></ul><ul><ul><li>In the browser </li></ul></ul><ul><ul><li>Tow virtual machines for backward Compatibility </li></ul></ul><ul><ul><ul><li>New Virtual Machine: AVM2 </li></ul></ul></ul><ul><ul><li>Run time error reporting </li></ul></ul><ul><ul><li>Compile time type checking </li></ul></ul><ul><li>AIR </li></ul><ul><ul><li>On the desktop </li></ul></ul><ul><ul><li>Application built in Flex, Flash, and HTML </li></ul></ul><ul><ul><li>Seamless Install </li></ul></ul>
  20. 20. PROGRAMMING LANGUAGES MXML
  21. 21. WHAT IS MXML <ul><li>Adobe Flex’s Markup (Declarative) </li></ul><ul><li>XML Based </li></ul><ul><li>Used to Create visual and non-visual component </li></ul><ul><li>Compiles into ActionScript 3.0 </li></ul>
  22. 22. THE ANATOMY OF MXML <ul><li>XML Declaration </li></ul><ul><li><mx:Application> Tag </li></ul><ul><ul><li>“ mx” Namespace </li></ul></ul><ul><ul><li>“ Layout” Attribute </li></ul></ul>
  23. 23. MXML CONTROLS <ul><li>Controls (Id, properties, and events) </li></ul><ul><li>In absolute Layout </li></ul><ul><ul><li><mx:Label> </li></ul></ul><ul><ul><li><mx:TextInput> </li></ul></ul><ul><ul><li><mx:Button> </li></ul></ul><ul><ul><li><mx:Image> </li></ul></ul><ul><li>Using Layout Controls </li></ul><ul><ul><li><mx:VBox> </li></ul></ul><ul><ul><li><mxHBox> </li></ul></ul><ul><li>Other </li></ul>
  24. 24. PROGRAMMING LANGUAGES ACTIONSCRIPT 3.0
  25. 25. THE LANGUAGE FEATURES <ul><li>Based on the ECMAScript Specification </li></ul><ul><li>Object-Oriented </li></ul><ul><ul><li>Runs on a new VM: AVM2 (ActionScript Virtual Machine 2) </li></ul></ul><ul><li>Complete Access to Flash API and libraries </li></ul>
  26. 26. THE LANGUAGE FEATURES <ul><li>ActionScript 3.0 vs. ActionScript 2.0 </li></ul><ul><ul><li>New Features </li></ul></ul><ul><ul><ul><li>Packages </li></ul></ul></ul><ul><ul><ul><li>Primitive Data Types (int and uint) </li></ul></ul></ul><ul><ul><ul><li>Native XML types and E4X (ECMAscript for XML) </li></ul></ul></ul><ul><ul><ul><li>Native Regular Expression support </li></ul></ul></ul><ul><ul><ul><li>New event model </li></ul></ul></ul><ul><ul><ul><li>10 times faster </li></ul></ul></ul><ul><ul><ul><ul><li>Strongly typed </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Sealed Classes: Dynamically adding methods is not allowed </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Etc… </li></ul></ul></ul></ul>
  27. 27. VARIABLES <ul><li>Variable Declaration </li></ul><ul><ul><li>var <Variable Name> : <VariableType>; </li></ul></ul><ul><li>Variable Assignment </li></ul><ul><ul><li><Variable Name> = <Value>; </li></ul></ul>
  28. 28. OPERATORS <ul><li>Arithmetic </li></ul><ul><ul><li>+ Addition </li></ul></ul><ul><ul><li>- Subtraction </li></ul></ul><ul><ul><li>* Multiplication </li></ul></ul><ul><ul><li>/ Division </li></ul></ul><ul><ul><li>% Modulo </li></ul></ul><ul><ul><li>++ Increment </li></ul></ul><ul><ul><li>-- Decrement </li></ul></ul><ul><li>Arithmetic Compound Assignment </li></ul><ul><li>+= -= *= /= </li></ul>
  29. 29. OPERATORS <ul><li>Bitwise </li></ul><ul><li>& AND </li></ul><ul><li><< Left Shift </li></ul><ul><li>~ NOT </li></ul><ul><li>| OR </li></ul><ul><li>>> Right Shift </li></ul><ul><li>>>> Unsigned Right Shift </li></ul><ul><li>^ XOR </li></ul>
  30. 30. OPERATORS <ul><li>Comparison </li></ul><ul><li>== Equality </li></ul><ul><li>> Greater Than </li></ul><ul><li>>= Greater Than or Equals </li></ul><ul><li>!= Inequality </li></ul><ul><li>< Less Than </li></ul><ul><li><= Less Than or Equals </li></ul><ul><li>=== Strict Equality </li></ul><ul><li>!== Strict Inequality </li></ul>
  31. 31. OPERATORS <ul><li>Logical </li></ul><ul><li>&& AND </li></ul><ul><li>! NOT </li></ul><ul><li>|| OR </li></ul><ul><li>Other </li></ul><ul><li>?: Conditional </li></ul><ul><li>+ Concatenation </li></ul><ul><li>+= Concatenation Assignment </li></ul>
  32. 32. CONTROL STRUCTURES <ul><li>Conditional Statements </li></ul><ul><ul><li>If Statement </li></ul></ul>
  33. 33. CONTROL STRUCTURES <ul><ul><li>Switch Statement </li></ul></ul>
  34. 34. CONTROL STRUCTURES <ul><li>Looping Statements </li></ul><ul><ul><li>While Loop </li></ul></ul>
  35. 35. CONTROL STRUCTURES <ul><ul><li>Do-While Loop </li></ul></ul>
  36. 36. CONTROL STRUCTURES <ul><ul><li>For-Each and For-In Loops </li></ul></ul>
  37. 37. ARRAYS
  38. 38. METHODS
  39. 39. METHODS
  40. 40. CLASSES & INTERFACES
  41. 41. CLASSES & INTERFACES
  42. 42. CLASSES & INTERFACES
  43. 43. BUILDING FLEX APPS
  44. 44. THE PROCESS <ul><li>Layout Visual component and style them </li></ul><ul><li>Add event-handling </li></ul><ul><li>Use data or communication services </li></ul><ul><li>Build and run </li></ul>
  45. 45. FLEX & XML
  46. 46. E4X <ul><li>Parse XML (Similar to XPath) </li></ul><ul><li>Manipulate XML Data </li></ul><ul><li>XML Classes in ActionScript 3.0 </li></ul><ul><ul><li>XML </li></ul></ul><ul><ul><li>XMLList </li></ul></ul>
  47. 47. PARSING XML USING E4X <ul><li>xmlData.employee[2] </li></ul><ul><li>xmlData..employee All nodes called node </li></ul><ul><li>xmlData..employee.(firstName==‘Joe’) </li></ul><ul><li>xmlData..employee.(@id > 1) </li></ul>
  48. 48. Q&A
  49. 49. THANK YOU

×