Flex Introduction

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

Talk Coverage

40%

RIA
10% Flex and Action Script
25% AIR
5%
Flex Hero
20% Demo


Quick Look . . .

Rich Internet Applications (RIA) Why Flashplatform ?

Flash Platform Technologies Inside Flex

MXML Action Script

Adobe AIR 3D Components

Flex Hero Intro


RIA :
Rich Internet Applications


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


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

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


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


RIA Frameworks

UltraLightClient
Ample

Google Web Toolkit

Silverlight
Adobe Flash / Flex

Curl ZK
JavaFX

OpenLaszlo Bindows


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…


Statistics:
Why Flash Platform?


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/


HTML 5 vs Flash : Ryan’s Comparison


Statistics

 Live Stats

 Players / Plug-ins Domination

 Frameworks Trend


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)


Players / Plug-ins Domination

Source: Google Trends on 8th Nov 2010


Frameworks Trend

Source: Google Trends on 8th Nov 2010


Adobe’s RIA:
Flash Platform Technologies


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


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


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.


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


Flex Work Flow


MXML: Macromedia XML


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>


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>


MXML Contd…

MXML - Components

<Application>
</Application>


MXML Contd…

MXML - id

<Application>
</Application>


MXML Contd…

MXML - Properties

<Application>
</Application>


MXML Contd…

MXML - Events

<Application>
</Application>


MXML Contd…

MXML - Binding

<Application>
</Application>


Action Script


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


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);
}
}
}


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


Inside Flex


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


Flex Components

and more

Image Courtesy: Adobe.com


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


Sample Flash Platform RIA applications


Let’s get started . . .


Take a Look


Adobe AIR


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

 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


AIR Stack ( Architecture )

Source: Adobe.com


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


Flash Player and Adobe AIR

Web Desktop


3D Components


ILOG Elixir

Ilog Elixir 3D OnlineDemo


Fusion Charts

Fusion Online Demo


amCharts

AmCharts Online Demo


Flex Hero : Mobile Apps


Available Options

Adobe Flash Builder - "Burrito“ Flex SDK “Hero”


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


Thank you!

Let’s Discuss . . .

riahunter nathan5x

Talks @ Chennai Flex User Group ( CFUG )

Flex Introduction

More Related Content

What's hot

Viewers also liked

Similar to Flex Introduction

Recently uploaded

Flex Introduction