Flex RIA

1,782 views
1,654 views

Published on

Flex and RIA

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,782
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
55
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Flex RIA

  1. 1. Flex and RIA
  2. 2. RIA <ul><li>Adobe: Rich Internet Application </li></ul><ul><li>Microsoft: Rich Interactive Application </li></ul><ul><li>RIAs are web applications that have the feature and functionality of traditional desktop applications. </li></ul><ul><li>RIAs typically form a stateful client application with a separate services layer on the backend. </li></ul>
  3. 3. Feature of RIA <ul><li>Richer Interface </li></ul><ul><li>Desktop type environment </li></ul><ul><li>Cross-browser compatibility </li></ul><ul><li>Platform Independent </li></ul><ul><li>Client/Server balance </li></ul><ul><li>Asynchronous communication </li></ul><ul><li>Network efficiency </li></ul>
  4. 4. Web application Demands <ul><li>An Eye-catching Design </li></ul><ul><li>Web Browsers Compatibility </li></ul><ul><li>Data integration </li></ul><ul><li>Interactive interface </li></ul>
  5. 5. Adobe Technology <ul><li>Flash Flex </li></ul><ul><li>Flash Player AIR </li></ul>
  6. 6. Now we have a new Structure <ul><li>Flash Animation and Design </li></ul><ul><li>Flex Application Development </li></ul><ul><li>Flash Player Application Deployment on Web </li></ul><ul><li>AIR Application Deployment on Desktop </li></ul>
  7. 7. HTML vs Flex vs Flash <ul><li>HTML / CSS files </li></ul><ul><li>Includes </li></ul><ul><li>JavaScript libraries </li></ul><ul><li>Tag-based </li></ul><ul><li>HTML output </li></ul>HTML Flex Flash <ul><li>MXML / CSS files </li></ul><ul><li>Components </li></ul><ul><li>ActionScript classes </li></ul><ul><li>Tag-based </li></ul><ul><li>SWF output </li></ul><ul><li>FLA files </li></ul><ul><li>Symbols </li></ul><ul><li>ActionScript classes </li></ul><ul><li>Timeline-based </li></ul><ul><li>SWF output </li></ul>format reuse behavior metaphor output
  8. 8. What Is Flex <ul><li>Flex is an extension of Flash. </li></ul><ul><li>Tag/script-based app development for Flash. </li></ul><ul><li>Flex is a cross-platform development framework for developing Rich Internate Application (RIAs). </li></ul><ul><li>Flex is a free and Open Source framework. </li></ul>
  9. 9. Flex Product Line Visual Layout Flex Builder 2 Code Hinting Debugging Skinning and Styling Flex SDK 2 (FREE) Command-line Compiler & Debugger Flex Data Services 2 Message Service Data Management Service RPC Services MXML and ActionScript 3.0 Flex Framework and Class Library Flex Charting Extensible Charting Components
  10. 10. Flex Product Line Open Source Visual Layout Flex Builder 2 Code Hinting Debugging Skinning and Styling Flex SDK 2 (FREE) Command-line Compiler & Debugger Flex Data Services 2 Message Service Data Management Service RPC Services MXML and ActionScript 3.0 Flex Framework and Class Library Flex Charting Extensible Charting Components
  11. 11. How Flex Works XML/HTTP REST SOAP Web Services Browser J2EE Application Server Flex Data Services 2 Flash Player Web Server Existing Applications and Infrastructure Flex Builder IDE Flex SDK MXML ActionScript Flex Class Library Compile Data Data .swf .swf .swf
  12. 12. Flex Enterprise architecture
  13. 13. Include in the Flex SDK <ul><li>2 Command line Compilers </li></ul><ul><ul><li>mxmlc # Convert MXML into ActionScript code. # Compiles ActionScript code to swf. </li></ul></ul><ul><ul><li>compc # Used to create libraries files (swc files) </li></ul></ul><ul><li>Debugger fdb.exe </li></ul><ul><li>Rich Component Library for Flex framework. </li></ul>
  14. 14. Elements of Flex application <ul><li>Flex framework </li></ul><ul><li>MXML </li></ul><ul><li>Actionscript3.0 </li></ul><ul><li>CSS </li></ul><ul><li>Graphics Assets </li></ul><ul><li>DATA </li></ul>
  15. 15. Flex Framework <ul><li>Flex framework contains all the components you need to build RIA </li></ul><ul><li>Containers application layouting </li></ul><ul><li>Controls you use to gather data from users and to manage the user interface </li></ul><ul><li>Extensive data binding, formatting, and validation features </li></ul><ul><li>An event-driven development model that provides rich user interface transformation features such as effects and transitions. </li></ul>
  16. 16. MXML <ul><li>An XML based markup language (Macromedia XML) </li></ul><ul><li>Declarative language typically used to describe UI layout and behaviors. </li></ul><ul><li>MXML is similar to other markup language such as XHTML and XAML </li></ul><ul><li>Is converted into ActionScript classes as part of compilation process. </li></ul><ul><li>Anything you can do in MXML you can do in ActionScript </li></ul>
  17. 17. MXML Example <ul><li><?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> </li></ul><ul><li><mx:Application </li></ul><ul><li>xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot; </li></ul><ul><li>layout=&quot;absolute&quot;> </li></ul><ul><li><mx:Script> </li></ul><ul><li><![CDATA[ </li></ul><ul><li>private function launchApp(): void </li></ul><ul><li>{ </li></ul><ul><li>//TODO: Code for launching application. </li></ul><ul><li>} </li></ul><ul><li>]]> </li></ul><ul><li></mx:Script> </li></ul><ul><li><mx:Button label=&quot;Submit&quot; click=&quot;launchApp()&quot;/> </li></ul><ul><li></mx:Application> </li></ul>
  18. 18. ActionScript 3.0 <ul><li>Core of the Flex framework </li></ul><ul><li>You add dynamic behavior to your applications using ActionScript 3.0. </li></ul><ul><li>Controller logic using ActionScript 3.0. </li></ul><ul><li>You can add ActionScript to Flex applications directly in the MXML file as script blocks </li></ul><ul><li>Also create separate files of ActionScript functions and import them into your MXML files. </li></ul>
  19. 19. CSS <ul><li>Style attributes in visual components are controlled by component properties. </li></ul><ul><li>Style properties are controlled by a theme, by styles defined in a CSS file. </li></ul><ul><li>Styles defined in style blocks in an MXML file. </li></ul><ul><li>Also create separate files of CSS style and import them into your MXML files. </li></ul>
  20. 20. Flex Learning Curve <ul><li>Developer must have the knowledge of : </li></ul><ul><ul><li>ActionScript </li></ul></ul><ul><ul><li>Flex Framework </li></ul></ul><ul><ul><li>Use of Tools </li></ul></ul><ul><ul><li>Passing parameters back and forth to server </li></ul></ul><ul><ul><li>Server-side programming language </li></ul></ul>
  21. 21. Development Process <ul><li>Define an application interface using a set of pre-defined components </li></ul><ul><li>Arrange components into a user interface design </li></ul><ul><li>Use styles to define the visual design </li></ul><ul><li>Add dynamic behavior </li></ul><ul><li>Define and connect to data services as needed </li></ul><ul><li>Build the source code into an SWF file that runs in the Flash Player </li></ul>
  22. 22. Current State of Flex <ul><li>The player has nearly a 95% penetration rate. </li></ul><ul><li>Flex content looks identical on every browser. </li></ul><ul><li>Easy to debug </li></ul><ul><li>Flex blogs, books, tutorials and conferences are exploding </li></ul>
  23. 23. Why Flex <ul><li>Flex is on war with various RIA technologies </li></ul>
  24. 24. Ajax <ul><li>Ajax is a collection of technologies that include Javascript and XML </li></ul><ul><li>It is partly rooted in the asynchronous XmlHttpRequest </li></ul><ul><li>Programming languages: JavaScript, XML, HTML </li></ul><ul><li>Development environments: Notepad, MyEclipse, GWT Designer </li></ul><ul><li>Plugins required: none </li></ul>
  25. 25. Why not Ajax? <ul><li>A simple right-click followed by the “View Source code” menu option would reveal your business application code. </li></ul><ul><li>It loads JavaScript in the browser that forces the browser to make cross-domain calls and opens up security holes. </li></ul><ul><li>Ajax cannot access cross-domains from the browser. </li></ul><ul><li>Most of the Ajax frameworks don’t have a WYSIWYG editor. </li></ul><ul><li>There is no standard VM for AJAX. Each browser implements AJAX building blocks differently. </li></ul>
  26. 26. SilverLight <ul><li>Silverlight is a cross-browser, cross-platform plug-in for delivering the next generation of Microsoft .NET–based media experiences and rich interactive applications for the Web </li></ul><ul><li>Programming languages: XAML, C#, JS, Ruby </li></ul><ul><li>Development environments: Microsoft Expression Blend 2, Microsoft Visual Studio </li></ul><ul><li>Plugins required: Silverlight Runtime 1.0 or higher </li></ul>
  27. 27. Why not SilverLight? <ul><li>Silverlight is still in Beta version </li></ul><ul><li>Silverlight currently only runs on Windows and the Mac </li></ul><ul><li>Code behaves differently in the browsers installed on Windows and Mac machine </li></ul><ul><li>Silverlight uses WMV file format as compaired to SWF format used by Flex </li></ul>
  28. 28. JavaFX <ul><li>JavaFX Script lets developers build rich user interfaces for Java applications </li></ul><ul><li>JavaFXScript takes advantage of the Java Runtime Environment's (JRE) and enables creative professionals to begin building applications based on their current knowledge base. </li></ul><ul><li>It uses Java technology's &quot;write once, run anywhere“ capability. </li></ul><ul><li>Programming languages: JavaFX Script, Java </li></ul><ul><li>Development environments: JavaFXPad, NetBeans 6.0, JFXBuilder, Notepad </li></ul><ul><li>Plugins required: Java Runtime Environment (JRE) 1.5 or higher </li></ul>
  29. 29. Why not JavaFX? <ul><li>JavaFX is essentially designed as a layer that sits on top of Java. </li></ul><ul><li>JavaFX is completely dependent on existing Java technologies. </li></ul><ul><li>Its function is primarily to make existing Java technologies easier to use together. </li></ul><ul><li>It do not give the developer enough ability to properly separate logic and presentation. </li></ul>
  30. 30. Flex Application Showcase
  31. 31. SAP Application dashboard
  32. 32. Google Analytics
  33. 33. Yahoo Web messenger
  34. 34. Lets Discuss

×