Upload
ravinxg
View
2.492
Download
0
Tags:
Embed Size (px)
Citation preview
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 LayoutVisual Layout
Flex Builder 2
Code HintingCode Hinting
DebuggingDebugging
Skinning and StylingSkinning and Styling
Flex SDK 2 (FREE)
Command-line Compiler & DebuggerCommand-line Compiler & Debugger
Flex Data Services 2
Message ServiceMessage Service
Data Management ServiceData Management Service
RPC ServicesRPC Services
MXML and ActionScript 3.0MXML and ActionScript 3.0
Flex Framework and Class LibraryFlex Framework and Class Library
Flex Charting Extensible Charting ComponentsExtensible Charting Components
Flex Product Line
Visual LayoutVisual Layout
Flex Builder 2
Code HintingCode Hinting
DebuggingDebugging
Skinning and StylingSkinning and Styling
Flex SDK 2 (FREE)
Command-line Compiler & DebuggerCommand-line Compiler & Debugger
Flex Data Services 2
Message ServiceMessage Service
Data Management ServiceData Management Service
RPC ServicesRPC Services
MXML and ActionScript 3.0MXML and ActionScript 3.0
Flex Framework and Class LibraryFlex Framework and Class Library
Flex Charting Extensible Charting ComponentsExtensible Charting Components
Open Source
Open Source
How Flex Works
XML/HTTPREST
SOAP Web Services
XML/HTTPREST
SOAP Web Services
BrowserBrowser
J2EE Application ServerJ2EE Application ServerFlex Data Services 2
Flash Player
Web ServerWeb Server
Existing Applications and InfrastructureExisting Applications and Infrastructure
Flex Builder IDEFlex Builder IDE
Flex SDKFlex SDK
MXMLMXML ActionScriptActionScript
Flex Class LibraryFlex Class Library
.swf
Compile
.swf
Data Data
.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="1.0" encoding="utf-8"?><mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"><mx:Script>
<![CDATA[private function launchApp():void{
//TODO: Code for launching application.}
]]></mx:Script><mx:Button label="Submit" click="launchApp()"/>
</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 "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