Flex Introduction

| 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


Talk Coverage

25%

40%

10%

5%

20%

RIA

Flex and Action Script

AIR

Flex Hero

Demo


Quick Look . . .

Why Flashplatform ?

Action Script

Inside Flex

3D Components

Rich Internet Applications (RIA)

MXML

Flash Platform Technologies

Adobe AIR

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 ?

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!


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

Adobe Flash / Flex

UltraLightClient

Silverlight

Ample

Google Web Toolkit

Curl JavaFXZK

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/

http://apiblog.youtube.com/2010/06/flash-and-html5-tag.html







http://blog.digitalbackcountry.com/2009/11/html5-cant-exist-without-the-flash-platform/












































































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)

http://www.riastats.com/


Players / Plug-ins Domination

Source: Google Trends on 8th Nov 2010

http://www.google.com/trends?q=Flash+Player,+Silverlight,++Javascript&ctab=0&geo=all&date=all&sort=1


Frameworks Trend

Source: Google Trends on 8th Nov 2010

http://www.google.com/trends?q=Flex,+Silverlight,+jQuery,+YUI,+GWT&ctab=0&geo=all&date=all&sort=0


Adobe’s RIA:

Flash Platform Technologies


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


®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


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

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…


Flex Work Flow


MXML: Macromedia XML


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>


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


MXML Contd…

<Application>





</Application>

MXML - Components


MXML Contd…

<Application>





</Application>

MXML - id


MXML Contd…

<Application>





</Application>

MXML - Properties


MXML Contd…

<Application>





</Application>

MXML - Events


MXML Contd…

<Application>





</Application>

MXML - Binding


Action Script


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

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

: http:/livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/media/Video.html

: http:/livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/media/Video.html


Inside Flex


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

http://livedocs.adobe.com/flex/3/html/help.html?content=introbd_4.html


Flex Components

Image Courtesy: Adobe.com

and more


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


Sample Flash Platform RIA applications


Let’s get started . . .


Take a Look

https://www.sherwin-williams.com/visualizer/

http://www.mixbook.com/

https://acrobat.com/

https://www.sherwin-williams.com/visualizer/

http://www.nvidia.com/object/cuda_home.html

http://www.mixbook.com/

http://www.sliderocket.com/

https://acrobat.com/

http://www.photoshop.com/


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

http://visunetdemos.demos.ibm.com/webdemos/charts3d/charts3d.html





Fusion Charts

Fusion Online Demo

http://www.fusioncharts.com/demos/Blueprint/


amCharts

AmCharts Online Demo

http://flex.amcharts.com/




Flex Hero : Mobile Apps


Available Options

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


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

http://www.adobe.com/devnet/flex/

http://livedocs.adobe.com/labs/flex3/langref/

http://blog.digitalbackcountry.com/

http://blog.digitalbackcountry.com/

http://flex.org/

http://riastats.com/

http://www.developria.com/

http://www.google.com/trends

http://en.wikipedia.org/wiki/Rich_Internet_application


Talks @ Chennai Flex User Group ( CFUG )

Thank you!

Let’s Discuss . . .

riahunter nathan5x

Date post:	10-May-2015
Category:	Technology
Upload:	sabarinathan-m
View:	3,108 times
Download:	2 times