The document discusses the evolution of web applications from Web 1.0 to Rich Internet Applications (RIAs), highlighting the impact of AJAX on user experience and client-side processing. It introduces Adobe Flex as a platform for building RIAs, detailing its components, programming languages (MXML and ActionScript 3.0), and the development environment it provides. The document also compares the advantages of RIAs over traditional web and desktop applications, emphasizing their responsiveness and rich media capabilities.

1. INTRODUCTION TO BUILDING RIA WITH ADOBE FLEX AND AIR By Abdelmonaim Remani Silicon Valley Code Camp 08

2. ONCE UPON A TIME

3. AT FIRST THERE WAS WEB 1.0 Page-Based Architecture: Static or Dynamic Technologies Client Side (Rendering Presentation) HTML CSS JavaScript DOM DHTML Server Side (Business Logic and Data) Dynamic Content CGI Java Servlets and JSP .NET and ASP PHP Ruby on Rails Etc… Data Databases XML JSON

4. THE WEB IS IN COMA Web 1.0 was loosing to Desktop Applications Performance and Speed Responsiveness Visual Richness / Media Data-Driven vs. Event-Driven Availability (Online vs. Offline) .COM bubble broke The Browser War

5. LA RENAISSANCE The community focused on developing standards A second look at Web Application They have what Web applications have two very important characteristics that Desktop Applications don’t have They are Centralized The are Inherently safe Run in context the browser Require no installation More powerful desktop machines are being made available (Moore’s Law)

6. THE RAISE OF WEB 2.0 New Technologies ??? The use features and technologies that we already have in a different way The use of these features for something more powerful than what they were intended for

7. THE BLOODLESS REVOLUTION OF AJAX AJAX (Asynchronous JavaScript And XML) As the acronym implies, AJAX is simply JavaScript, and XML or any other data interchange format It is about exploiting the communication feature of the browser in a new different way The goal is to get data from the server without a invoking full-page refresh for a better user experience How? AJAX is a Hack

8. THE GOLD RUSH AJAX brought a better user experience to the browser AJAX adoption increased quickly Web Applications’ complexity increased Drastic Change of the architecture of Web Applications is represented by No page-based A shift of programmatic logic from the server-side to the client-side Reduced the load on the server The sate is handled by the client instead of the server Data is loaded only when necessary Took advantage of the local machine power The Vision: One day the server is only going to used to distribute the application

9. WAIT A MINUTE… It happened so fast No developer tools No libraries No application or testing frameworks AJAX evolved from technologies that were never meat or designed to build applications JavaScript is not OOP No runtime-error handling Cross-browser coding Scalability problems Twitter please don’t die on me!!!

10. HOLD YOUR HORSES Three Camps The Optimistics Let’s make it work Bullet-proof libraries and toolkits: DOJO, JQuery, etc… http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks The Pessimistics JavaScript development sucks… Forget AJAX! Focus on new tech Rich Internet Applications: Adobe Flex, JavaFX, and Microsoft Silverlight The Google Way GWT Shifts some of the focus from feature richness to development and software engineering tools We could allow developers to program in any programming language, and just translate or compile it into JavaScript

11. ANTHROPOLOGIA Developers: Coders Build Applications Functional Data Driven UGLY Designers: Artists Build Applications Event-Driven Beautiful Devigners?

12. RICH INTERNET APPLICATIONS (RIA)

13. WHAT ARE RIAS Application that combine the benefits of Web and Desktop applications User experience of the Desktop Applications Responsive Data Driven Rich Media Online and Offline Low cost of Deployment and reach of Web Applications

14. TECHNOLOGIES RIA Technologies Adobe Flex JavaFX Microsoft SilverLight OpenLaszlo Etc…

15. ADOBE FLEX

16. WHAT IS FLEX Adobe Flex is a platform for building Rich Internet Application and Desktop Applications SDK (Open Source) Compiler, debugger, and other tools Libraries Provides a skeleton of Flex Application by extending the Flex Framework Prebuilt Components Programming Languages (MXML and ActionScript 3.0)

17. WHAT IS FLEX Flex Builder 3 IDE based on Eclipse Design tools Server-Side Enterprise Messaging Support Data Services Data sharing and communiction among clients Data push from server to clients Etc… Options: Live Cycle Data Services, BlazeDS, etc… Adobe Flex Charting

18. FLEX APPLICATIONS Delivered as SWF (Shockwave Flash) files in HTML Runs on Flash Player 9 or later On 99.3% of the browsers Delivered as a Desktop application Runs on AIR (Adobe Integrated Environment)

19. RUN TIME Flash Player 9 In the browser Tow virtual machines for backward Compatibility New Virtual Machine: AVM2 Run time error reporting Compile time type checking AIR On the desktop Application built in Flex, Flash, and HTML Seamless Install

20. PROGRAMMING LANGUAGES MXML

21. WHAT IS MXML Adobe Flex’s Markup (Declarative) XML Based Used to Create visual and non-visual component Compiles into ActionScript 3.0

22. THE ANATOMY OF MXML XML Declaration <mx:Application> Tag “ mx” Namespace “ Layout” Attribute

23. MXML CONTROLS Controls (Id, properties, and events) In absolute Layout <mx:Label> <mx:TextInput> <mx:Button> <mx:Image> Using Layout Controls <mx:VBox> <mxHBox> Other

24. PROGRAMMING LANGUAGES ACTIONSCRIPT 3.0

25. THE LANGUAGE FEATURES Based on the ECMAScript Specification Object-Oriented Runs on a new VM: AVM2 (ActionScript Virtual Machine 2) Complete Access to Flash API and libraries

26. THE LANGUAGE FEATURES ActionScript 3.0 vs. ActionScript 2.0 New Features Packages Primitive Data Types (int and uint) Native XML types and E4X (ECMAscript for XML) Native Regular Expression support New event model 10 times faster Strongly typed Sealed Classes: Dynamically adding methods is not allowed Etc…

27. VARIABLES Variable Declaration var <Variable Name> : <VariableType>; Variable Assignment <Variable Name> = <Value>;

28. OPERATORS Arithmetic + Addition - Subtraction * Multiplication / Division % Modulo ++ Increment -- Decrement Arithmetic Compound Assignment += -= *= /=

29. OPERATORS Bitwise & AND << Left Shift ~ NOT | OR >> Right Shift >>> Unsigned Right Shift ^ XOR

30. OPERATORS Comparison == Equality > Greater Than >= Greater Than or Equals != Inequality < Less Than <= Less Than or Equals === Strict Equality !== Strict Inequality

31. OPERATORS Logical && AND ! NOT || OR Other ?: Conditional + Concatenation += Concatenation Assignment

32. CONTROL STRUCTURES Conditional Statements If Statement

33. CONTROL STRUCTURES Switch Statement

34. CONTROL STRUCTURES Looping Statements While Loop

35. CONTROL STRUCTURES Do-While Loop

36. CONTROL STRUCTURES For-Each and For-In Loops

37. ARRAYS

38. METHODS

39. METHODS

40. CLASSES & INTERFACES

41. CLASSES & INTERFACES

42. CLASSES & INTERFACES

43. BUILDING FLEX APPS

44. THE PROCESS Layout Visual component and style them Add event-handling Use data or communication services Build and run

45. FLEX & XML

46. E4X Parse XML (Similar to XPath) Manipulate XML Data XML Classes in ActionScript 3.0 XML XMLList

47. PARSING XML USING E4X xmlData.employee[2] xmlData..employee All nodes called node xmlData..employee.(firstName==‘Joe’) xmlData..employee.(@id > 1)

48. Q&A

49. THANK YOU