flex introduction
Post on 10-May-2015
3.111 Views
Preview:
DESCRIPTION
TRANSCRIPT
| Introduction to Flex RIA | Talks @ Chennai Flex User Group1
Talks @ Chennai Flex User Group ( CFUG )
SABARINATHANRIA Developer
riahunter
http://sabaritheflexian.com
Introduction to
Flex RIA
| Introduction to Flex RIA | Talks @ Chennai Flex User Group2
Talk Coverage
25%
40%
10%
5%
20%
RIA
Flex and Action Script
AIR
Flex Hero
Demo
| Introduction to Flex RIA | Talks @ Chennai Flex User Group3
Quick Look . . .
Why Flashplatform ?
Action Script
Inside Flex
3D Components
Rich Internet Applications (RIA)
MXML
Flash Platform Technologies
Adobe AIR
Flex Hero Intro
| Introduction to Flex RIA | Talks @ Chennai Flex User Group4
RIA :
Rich Internet Applications
| Introduction to Flex RIA | Talks @ Chennai Flex User Group5
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
| Introduction to Flex RIA | Talks @ Chennai Flex User Group6
What is RIA ?
Source : Microsoft.com
“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!
| Introduction to Flex RIA | Talks @ Chennai Flex User Group7
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
| Introduction to Flex RIA | Talks @ Chennai Flex User Group8
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
| Introduction to Flex RIA | Talks @ Chennai Flex User Group9
RIA Frameworks
Adobe Flash / Flex
UltraLightClient
Silverlight
Ample
Google Web Toolkit
Curl JavaFXZK
OpenLaszlo Bindows
| Introduction to Flex RIA | Talks @ Chennai Flex User Group10
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…
| Introduction to Flex RIA | Talks @ Chennai Flex User Group11
Statistics:
Why Flash Platform?
| Introduction to Flex RIA | Talks @ Chennai Flex User Group12
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/
| Introduction to Flex RIA | Talks @ Chennai Flex User Group13
HTML 5 vs Flash : Ryan’s Comparison
| Introduction to Flex RIA | Talks @ Chennai Flex User Group14
Statistics
Live Stats
Players / Plug-ins Domination
Frameworks Trend
| Introduction to Flex RIA | Talks @ Chennai Flex User Group15
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)
| Introduction to Flex RIA | Talks @ Chennai Flex User Group16
Players / Plug-ins Domination
Source: Google Trends on 8th Nov 2010
| Introduction to Flex RIA | Talks @ Chennai Flex User Group17
Frameworks Trend
Source: Google Trends on 8th Nov 2010
| Introduction to Flex RIA | Talks @ Chennai Flex User Group18
Adobe’s RIA:
Flash Platform Technologies
| Introduction to Flex RIA | Talks @ Chennai Flex User Group19
Technology Stack
Frameworks
AIR Flash Player
Flex
Servers/Services
ColdFusionLive Cycle DS Flash Media Server
Tools
Clients
Services
Flash Catalyst Flash Professional Flash / Flex Builder
| Introduction to Flex RIA | Talks @ Chennai Flex User Group20
®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
Flex Introduction
| Introduction to Flex RIA | Talks @ Chennai Flex User Group21
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.
| Introduction to Flex RIA | Talks @ Chennai Flex User Group22
Flex Environment
Flash Builder IDE
Flash / Flex Builder IDE
Eclipse Plug-in
Design view and code view
Debugging / Development / Profiling
Two languages
MXML (actually a library of ActionScript)
ActionScript 3
Compilers
Debugger
Profiler
Rich Component Library
Flex SDK
Flex Class Library
MXML ActionScript
Debuggers
Profilers , Flex Units, Network Monitors
Auto Code-Generation
and more…
| Introduction to Flex RIA | Talks @ Chennai Flex User Group23
Flex Work Flow
| Introduction to Flex RIA | Talks @ Chennai Flex User Group24
MXML: Macromedia XML
| Introduction to Flex RIA | Talks @ Chennai Flex User Group25
MXML application
s:Application
s:Button
s:Panel
mx:DataGrid
s:Button
<?xml version="1.0" ?><s:Application>
<s:Button width=”100” height=”50”/>
<s:Panel width=”100%” height=”100%”>
<s:Button width=”100%”/>
<mx:DataGrid width=”100%” height=”100%”/>
</s:Panel>
</s:Application>
| Introduction to Flex RIA | Talks @ Chennai Flex User Group26
MXML Contd…
<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>
MXML Application
| Introduction to Flex RIA | Talks @ Chennai Flex User Group27
MXML Contd…
<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>
MXML - Components
| Introduction to Flex RIA | Talks @ Chennai Flex User Group28
MXML Contd…
<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>
MXML - id
| Introduction to Flex RIA | Talks @ Chennai Flex User Group29
MXML Contd…
<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>
MXML - Properties
| Introduction to Flex RIA | Talks @ Chennai Flex User Group30
MXML Contd…
<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>
MXML - Events
| Introduction to Flex RIA | Talks @ Chennai Flex User Group31
MXML Contd…
<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>
MXML - Binding
| Introduction to Flex RIA | Talks @ Chennai Flex User Group32
Action Script
| Introduction to Flex RIA | Talks @ Chennai Flex User Group33
Introduction to Action Script
ECMA-262 edition and ECMA-4 complaint
Versions
Action Script 1.0 – 2000 – 2003
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
Flash Player 8 and below
| Introduction to Flex RIA | Talks @ Chennai Flex User Group34
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);}
}}
| Introduction to Flex RIA | Talks @ Chennai Flex User Group35
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
| Introduction to Flex RIA | Talks @ Chennai Flex User Group36
Inside Flex
| Introduction to Flex RIA | Talks @ Chennai Flex User Group37
Flex Compilation
mxmlc compiler process
Stage 1
• Parse MXML into ActionScript classes
• Compile ActionScript into bytecode
• Insert bytecode into a binary SWF file
Stage 2
(JIT compilation)
• Flash Player contains an ActionScript Virtual Machine (AVM). At runtime, the AVM turns the bytecode into machine language code that the particular OS can interpret.
Also check : Build Phase in Flex Docs
| Introduction to Flex RIA | Talks @ Chennai Flex User Group38
Flex Components
Image Courtesy: Adobe.com
and more
| Introduction to Flex RIA | Talks @ Chennai Flex User Group39
Flex Back End
BlazeDS / LCDS / GraniteDS Java - J2EE / Coldfusion
WebORB / Flourine FX .NET
AMFPHP / Zend AMF PHP
HTTP Services RemoteObject Web Services
WebORB for Ruby/ RubyAMF Ruby on Rails
PYAMF / DjangoAMF Python
| Introduction to Flex RIA | Talks @ Chennai Flex User Group40
Sample Flash Platform RIA applications
| Introduction to Flex RIA | Talks @ Chennai Flex User Group41
Let’s get started . . .
| Introduction to Flex RIA | Talks @ Chennai Flex User Group42
Take a Look
| Introduction to Flex RIA | Talks @ Chennai Flex User Group43
Adobe AIR
| Introduction to Flex RIA | Talks @ Chennai Flex User Group44
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
| Introduction to Flex RIA | Talks @ Chennai Flex User Group45
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
| Introduction to Flex RIA | Talks @ Chennai Flex User Group46
AIR Stack ( Architecture )
Source: Adobe.com
| Introduction to Flex RIA | Talks @ Chennai Flex User Group47
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
| Introduction to Flex RIA | Talks @ Chennai Flex User Group48
Flash Player and Adobe AIR
Web Desktop
| Introduction to Flex RIA | Talks @ Chennai Flex User Group49
3D Components
| Introduction to Flex RIA | Talks @ Chennai Flex User Group50
ILOG Elixir
Ilog Elixir 3D OnlineDemo
| Introduction to Flex RIA | Talks @ Chennai Flex User Group51
Fusion Charts
Fusion Online Demo
| Introduction to Flex RIA | Talks @ Chennai Flex User Group52
amCharts
AmCharts Online Demo
| Introduction to Flex RIA | Talks @ Chennai Flex User Group53
Flex Hero : Mobile Apps
| Introduction to Flex RIA | Talks @ Chennai Flex User Group54
Available Options
Flex SDK “Hero”Adobe Flash Builder - "Burrito“
| Introduction to Flex RIA | Talks @ Chennai Flex User Group55
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
| Introduction to Flex RIA | Talks @ Chennai Flex User Group56
Talks @ Chennai Flex User Group ( CFUG )
Thank you!
Let’s Discuss . . .
riahunter nathan5x
top related