Your SlideShare is downloading. ×
Flex RIA
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Flex RIA

1,512
views

Published on

Flex and RIA

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 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
  • 12. Flex Enterprise architecture
  • 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.
  • 30. Flex Application Showcase
  • 31. SAP Application dashboard
  • 32. Google Analytics
  • 33. Yahoo Web messenger
  • 34. Lets Discuss

×