SlideShare a Scribd company logo

Flex And Ria

•Download as PPT, PDF•
•
R
ravinxg

RIAs are web applications that have features and functionality similar to desktop applications. They typically have a separate client and server component. Flex is a framework for developing RIAs using MXML and ActionScript. It allows building rich user interfaces, accessing data via web services, and deploying applications to the web or desktop. Flex applications consist of UI code in MXML, dynamic behavior in ActionScript, and data services. They are compiled to SWF files to run across browsers.

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

More Related Content

Flex And Ria

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