This document provides an introduction and overview of Flex RIA technologies including:
- Flex is a framework for building rich internet applications using MXML and ActionScript.
- MXML is a markup language used to build user interfaces in Flex.
- ActionScript is the scripting language used in Flex applications.
- The document discusses Flex components, compilation, backends, and sample applications.
- Adobe AIR allows deploying Flex applications to the desktop with additional capabilities.
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Flex Introduction
1. Introduction to
Flex RIA
SABARINATHAN
RIA Developer
http://sabaritheflexian.com
riahunter
Talks @ Chennai Flex User Group ( CFUG )
1 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
2. Talk Coverage
40%
RIA
10% Flex and Action Script
25% AIR
5%
Flex Hero
20% Demo
2 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
3. Quick Look . . .
Rich Internet Applications (RIA) Why Flashplatform ?
Flash Platform Technologies Inside Flex
MXML Action Script
Adobe AIR 3D Components
Flex Hero Intro
3 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
4. RIA :
Rich Internet Applications
4 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
5. Flash Back
Remote Scripting, by Microsoft, circa 1998
X Internet, by Forrester Research in October 2000
Rich (Web) Clients
Rich Web Application
White Paper by Macromedia (Adobe) - 2002
5 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
6. What is RIA ?
“Rich Internet Applications (RIAs) are web-based applications that have a much
more robust feel and functionality to them than standard web based
applications.”
Traditional HTML, and the accompanying technology surrounding standard web
pages, are being pushed to the limits of their capabilities. Leveraging RIAs allows
web applications to have desktop application usability inside a web browser!
Source : Microsoft.com
6 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
7. Typical RIA Architecture
Ease of Use
Enhanced User Experience
Reduced Server Load
Lost Data
Light Weight
Faster Processing time
AJAX
(Asynchronous JavaScript And XML)
Source : Microsoft.com
7 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
8. Former RIA Organization
Vendor Client Tech
Adobe XDP JS, XML, PDF
AltioLive XML, Applet
DreamFactory XML
Droplets Java Servlet
Isomorphics DHTML, XML
Laszlo Flash, XML
Macromedia Central Flash
Macromedia Flex Flash, XML
Nexaweb Java+XUL
Q-link XML,XForms
8 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
9. RIA Frameworks
UltraLightClient
Ample
Google Web Toolkit
Silverlight
Adobe Flash / Flex
Curl ZK
JavaFX
OpenLaszlo Bindows
9 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
10. Areas of RIA
Financial Services
Auto Dealerships
Mortgage Firms
Customer survey forms
Email forms
Video Distribution (branding/licensing)
Remote training services
Customer service (live two-way video, chat & assistance)
Virtual Desktop Environments
CRM/ERP front-end applications
... the applications are limitless…
10 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
11. Statistics:
Why Flash Platform?
11 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
12. Positive Notes
“While the <video> tag is a big step forward for open standards, the Adobe Flash Platform
will continue to play a critical role in video distribution," said Yong in YouTube blog.
-http://apiblog.youtube.com/2010/06/flash-and-html5-tag.html
HTML5 Can’t Exist Without the Flash Platform : Ryan Stewart Blog Post
http://www.streaminglearningcenter.com/articles/flash-player-cpu-hog-or-hot-tamale-it-depends-.html
http://www.engadget.com/2010/03/10/html5-vs-flash-comparison-finds-a-few-surprises-settles-few-de/
http://techcrunch.com/2010/02/05/the-future-of-web-content-html5-flash-mobile-apps/
http://thenextweb.com/apple/2010/05/14/html5-vs-flash-what-you-havent-heard/
12 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
13. HTML 5 vs Flash : Ryan’s Comparison
13 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
14. Statistics
Live Stats
Players / Plug-ins Domination
Frameworks Trend
14 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
15. Live Stats
Flash Player / Plug-in Silverlight
Statistics collected from 19,409,973 daily unique browsers
across 147 sites over the past 30 days
From www.riastats.com (08th Nov 2010)
15 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
16. Players / Plug-ins Domination
Source: Google Trends on 8th Nov 2010
16 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
17. Frameworks Trend
Source: Google Trends on 8th Nov 2010
17 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
18. Adobe’s RIA:
Flash Platform Technologies
18 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
19. Technology Stack
Tools
Flash Catalyst Flash Professional Flash / Flex Builder
Clients
Frameworks
AIR Flash
Player
Flex
Servers/Services
Live Cycle DS ColdFusion Flash Media Server Services
19 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
20. Flex Introduction
ADOBE FLEX®
A highly productive, free open source framework
for building expressive web applications that
deploy consistently on all major browsers and
on the desktop with Adobe AIR.
- Adobe
20 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
21. Flex Flashback
Macromedia Flex Server 1.0 and 1.5 (2004)
Adobe Flex 2 – AS3 (2005 – 2006)
Adobe Flex 3 – AIR (2007 – 2009)
Adobe Flex 4 - Flash Builder (2010)
Adobe Flex 4.5 and Flex Hero - Flash Builder (2011)
Flex was the first Macromedia product to be
re-branded under the Adobe name.
21 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
22. Flex Environment
Two languages
Flash Builder IDE
MXML (actually a library of ActionScript)
ActionScript 3
Flex SDK
Compilers MXML ActionScript
Debugger Flex Class Library
Profiler Debuggers
Rich Component Library Profilers , Flex Units,
Network Monitors
Flash / Flex Builder IDE Auto Code-Generation
Eclipse Plug-in
Design view and code view and more…
Debugging / Development / Profiling
22 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
23. Flex Work Flow
23 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
25. MXML application
s:Application <?xml version="1.0" ?>
<s:Application>
s:Button
<s:Button width=”100” height=”50”/>
s:Panel
s:Button
<s:Panel width=”100%” height=”100%”>
mx:DataGrid <s:Button width=”100%”/>
<mx:DataGrid width=”100%”
height=”100%”/>
</s:Panel>
</s:Application>
25 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
26. MXML Contd…
MXML Application
<Application>
<WebService id=“ws” wsdl=“catalog.wsdl”/>
<Button label=“Get Data” click=“ws.getProducts()”/>
<DataGrid dataProvider=“{ws.getProducts.result}”/>
<LineChart dataProvider=“{ws.getProducts.result}”/>
</Application>
26 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
27. MXML Contd…
MXML - Components
<Application>
<WebService id=“ws” wsdl=“catalog.wsdl”/>
<Button label=“Get Data” click=“ws.getProducts()”/>
<DataGrid dataProvider=“{ws.getProducts.result}”/>
<LineChart dataProvider=“{ws.getProducts.result}”/>
</Application>
27 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
28. MXML Contd…
MXML - id
<Application>
<WebService id=“ws” wsdl=“catalog.wsdl”/>
<Button label=“Get Data” click=“ws.getProducts()”/>
<DataGrid dataProvider=“{ws.getProducts.result}”/>
<LineChart dataProvider=“{ws.getProducts.result}”/>
</Application>
28 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
29. MXML Contd…
MXML - Properties
<Application>
<WebService id=“ws” wsdl=“catalog.wsdl”/>
<Button label=“Get Data” click=“ws.getProducts()”/>
<DataGrid dataProvider=“{ws.getProducts.result}”/>
<LineChart dataProvider=“{ws.getProducts.result}”/>
</Application>
29 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
30. MXML Contd…
MXML - Events
<Application>
<WebService id=“ws” wsdl=“catalog.wsdl”/>
<Button label=“Get Data” click=“ws.getProducts()”/>
<DataGrid dataProvider=“{ws.getProducts.result}”/>
<LineChart dataProvider=“{ws.getProducts.result}”/>
</Application>
30 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
31. MXML Contd…
MXML - Binding
<Application>
<WebService id=“ws” wsdl=“catalog.wsdl”/>
<Button label=“Get Data” click=“ws.getProducts()”/>
<DataGrid dataProvider=“{ws.getProducts.result}”/>
<LineChart dataProvider=“{ws.getProducts.result}”/>
</Application>
31 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
32. Action Script
32 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
33. Introduction to Action Script
ECMA-262 edition and ECMA-4 complaint
Versions
Action Script 1.0 – 2000 – 2003
Flash Player 8 and below
Action Script 2.0 – 2003 – 2006
Action Script 3.0 – 2006 – present >> Flex 2.0 - Flash Player 9 and above
Object-oriented from AS 3
Initially designed for controlling simple 2D vector animations made in Adobe Flash
(formerly Macromedia Flash).
Foundation for Flex 2 and above
Online API >> http://livedocs.adobe.com/flex/3/html/toc.html
33 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
34. Action Script contd…
package
{
import flash.display.Sprite;
import flash.text.TextField;
public class DemoCFUG extends Sprite
{
public function DemoCFUG()
{
var txtFieldBox:TextField = new TextField();
txtFieldBox.width = 100;
txtFieldBox.height = 140;
txtFieldBox.border = true;
txtFieldBox.borderColor = 0xFF0000;
txtFieldBox.text = "Hello CFUG !!!";
addChild(txtFieldBox);
}
}
}
34 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
35. Action Script contd…
<mx:Panel title=“firstApplication">
<mx:TextArea id=“note1"/>
<mx:Button label=“Submit” onclick=“doSomething();"/>
</mx:Panel>
package {
import flash.media.Video;
import flash.net.NetStream;
import flash.net.NetConnection;
public class Example {
public function doSomething( event: Event ) : void {
var url:String = “homeMovie.flv";
var video:Video = new Video(width:int=500, height:int=350)
var stream:NetStream = new NetStream(new NetConnection());
video.attachNetStream(stream);
video.play(url);
addChild(video);
}
}
}
Code borrowed from: http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/media/Video.html
35 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
36. Inside Flex
36 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
37. Flex Compilation
mxmlc compiler process
• Parse MXML into ActionScript classes
• Compile ActionScript into bytecode
• Insert bytecode into a binary SWF file
Stage 1
• Flash Player contains an ActionScript Virtual Machine
(AVM). At runtime, the AVM turns the bytecode into
machine language code that the particular OS can
Stage 2
interpret.
(JIT compilation)
Also check : Build Phase in Flex Docs
37 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
38. Flex Components
and more
Image Courtesy: Adobe.com
38 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
39. Flex Back End
HTTP Services RemoteObject Web Services
BlazeDS / LCDS / GraniteDS Java - J2EE / Coldfusion
AMFPHP / Zend AMF PHP
WebORB / Flourine FX .NET
WebORB for Ruby/ RubyAMF Ruby on Rails
PYAMF / DjangoAMF Python
39 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
40. Sample Flash Platform RIA applications
40 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
41. Let’s get started . . .
41 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
42. Take a Look
42 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
43. Adobe AIR
43 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
44. Adobe AIR
Adobe® AIR® is a cross-operating system runtime that
lets developers combine HTML, Ajax, Adobe Flash®, and Adobe Flex®
technologies to deploy Rich Internet Applications (RIAs) on the desktop.
- Adobe
44 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
45. Introduction
Adobe Integrated Runtime (AIR) – previously codenamed “Apollo”
Cross-OS application engine that enables hybrid desktop-internet
applications
Adds desktop capabilities for Flex apps
Benefits
Total control of user experience
Browser to desktop consistency
Rich media capabilities
Network resilience
Desktop access to services
45 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
46. AIR Stack ( Architecture )
Source: Adobe.com
46 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
47. Flex and Adobe AIR
AIR-enabled Flex Capabilities
Native OS drag and drop support
Multi-windowed applications
Access to local file system
Local database storage (SQLite)
Complete rendering support for HTML content
Micro-phone access
Touch Screen capabilities .. more..
Flash Builder Support for AIR Development
Full code hinting and error reporting
Complete debugging and profiling support
Application packaging and signing
47 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
48. Flash Player and Adobe AIR
Web Desktop
48 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
49. 3D Components
49 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
50. ILOG Elixir
Ilog Elixir 3D OnlineDemo
50 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
51. Fusion Charts
Fusion Online Demo
51 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
52. amCharts
AmCharts Online Demo
52 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
53. Flex Hero : Mobile Apps
53 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
54. Available Options
Adobe Flash Builder - "Burrito“ Flex SDK “Hero”
54 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
55. References & resources
Flex Developer Center
http://www.adobe.com/devnet/flex/
Adobe® Flex™ 3 Language Reference
http://livedocs.adobe.com/labs/flex3/langref/
Ryan’s Blog | http://blog.digitalbackcountry.com/
Flex Org | http://flex.org/
RIA Statistics | http://riastats.com/
O’Reily Develop RIA | http://www.developria.com/
Google Trends
http://www.google.com/trends
Wikipedia RIA
http://en.wikipedia.org/wiki/Rich_Internet_application
55 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
56. Thank you!
Let’s Discuss . . .
riahunter nathan5x
Talks @ Chennai Flex User Group ( CFUG )
56 | Introduction to Flex RIA | Talks @ Chennai Flex User Group