Introduction to Adobe Flex - Zaloni

23
Adobe Flex

description

An introduction to RIA and Flex

Transcript of Introduction to Adobe Flex - Zaloni

Page 1: Introduction to Adobe Flex - Zaloni

Adobe Flex

Page 2: Introduction to Adobe Flex - Zaloni

Who am I ?

Joseph Khan

•Senior Software Engineer•Flex, HTML5, Sencha Touch•3.6 yrs of experience

Joseph Khan

•Senior Software Engineer•Flex, HTML5, Sencha Touch•3.6 yrs of experience

Page 3: Introduction to Adobe Flex - Zaloni

3

Who are you?

• Have a little idea on Web based applications

• Eager to learn a new THING !

Who are you ?

Page 4: Introduction to Adobe Flex - Zaloni

4

Road Map

What does Rich Internet Application means ?

Anatomy of a Rich Internet Application

What is Flex ?

Flex v/s Flash and Flex v/s Ajax

Talk more on Flex…..

Live demo

Inspiration

Page 5: Introduction to Adobe Flex - Zaloni

5

Client/Server

Mainframe

Web Applicatio

ns

Reach

Local

Global

Rich

Text UI

1992

1998

2005+

Rich InternetApplicati

ons

Application Evolution

Page 6: Introduction to Adobe Flex - Zaloni

6

A Rich Internet Application (RIA) is an application that runs in the traditional browser, but utilizes an intermediate layer that can bypass the traditional page refresh that has been a standard of most current Web applications.

Desktopification of the browser based applications

Most common tools –

Asynchronous JavaScript and XML (AJAX) WPF (.NET framework) Flex or Flash using the Flash Player

A Rich Internet Application (RIA) is an application that runs in the traditional browser, but utilizes an intermediate layer that can bypass the traditional page refresh that has been a standard of most current Web applications.

Desktopification of the browser based applications

Most common tools –

Asynchronous JavaScript and XML (AJAX) WPF (.NET framework) Flex or Flash using the Flash Player

RIA – Rich Internet Application

Page 7: Introduction to Adobe Flex - Zaloni

Data Visualizatio

n & Collaboratio

nReal Time Data

Push & Alerting

Chat

Offline

Data Synchroniza

tion & Conflict

Resolution

Bi-Directional

Audio & Video

Rich Data Entry

Menus & Navigation Controls

Resizable Views/Effects/

Transitions

Mapping, Geo-Coding, Annotations

& White boarding

Anatomy of a Rich Internet Application

Page 8: Introduction to Adobe Flex - Zaloni

What is Flex?

Page 9: Introduction to Adobe Flex - Zaloni

What is Flex? •It is a free, open source framework based on the Adobe Flash Runtime used to develop RIAs (rich Internet applications)

RIAs - new kind of web experience that offer the ease of use/experience of a desktop application while providing the broad reach of web applications

•Flex application framework consists of MXML, ActionScript™ 3 (AS3), and the Flex class library.

•Developers use MXML to declaratively define the application user interface elements and use ActionScript for client logic and procedural control.

Page 10: Introduction to Adobe Flex - Zaloni

Expressiveness

Rich Media

Performance

Real Time

Desktop and Offline

• Client-side, deployed as Flash .swf• Flex Framework

– MXML (Macromedia XML)• Declarative language to define

User Interface• Similar to XHTML

– User Interface Components• Buttons, ComboBoxes, Layout

Managers, Containers, Effects– Class Libraries

• Everything in the mx.* packages

• Validation Routines, Web Services, DataTypes

What is Flex?

Page 11: Introduction to Adobe Flex - Zaloni

History

Page 12: Introduction to Adobe Flex - Zaloni

Library

SWF

Compiled object, No special server required, Runs on Flash Player, Cross Browser compatible

Flex Compiler

AS3 MXML

Flash Authoring Flex Builder (and SDK)

AS2

Flash Compiler

CSS

Flex vs. Flash

Page 13: Introduction to Adobe Flex - Zaloni

Flex v/s AJAX

Page 14: Introduction to Adobe Flex - Zaloni

Any Language/Server

PHPASP.net

Java/JSP/Struts/J2EEWeb Services3rd Party APIs

Database-MYSQL-DB2-Oracle-Sybase-MSSQL-Access?

Database-MYSQL-DB2-Oracle-Sybase-MSSQL-Access?

Where does Flex fit in?

Page 15: Introduction to Adobe Flex - Zaloni

BrowserBrowser

How Flex Works ?

MXML and ActionScript

XML/HTTPRESTSOAP Web Services

XML/HTTPRESTSOAP Web Services

JEE Application ServerJEE Application Server

LC Data Services

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

HTTP/S AMF/S RTMP/SSOAP

Page 16: Introduction to Adobe Flex - Zaloni

Getting Started

Page 17: Introduction to Adobe Flex - Zaloni

Flex/Flash Builder IDE

Page 18: Introduction to Adobe Flex - Zaloni

MXML

MXML are plain text based document

Follows XML standards

It is tag based <mx:Panel> similar to HTML

Always start with a XML declaration

Root node is always <mx:Application>

Page 19: Introduction to Adobe Flex - Zaloni

Action Script 3.0

Action script is a scripting language

No tags

Is fully Object Oriented

All MXML tags are Action Script classes

Similar to Java

Page 20: Introduction to Adobe Flex - Zaloni

Flex – other features

Page 21: Introduction to Adobe Flex - Zaloni

Where Flex is used ?

Product Configuration

Rich Media Applications

Data Visualization

Authoring Applications Product Selection

Line of Business Applications

Page 22: Introduction to Adobe Flex - Zaloni

Resources - links

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

Learn Flex in a week http://www.adobe.com/devnet/flex/videotraining/

Learn Flex in a week http://www.adobe.com/devnet/flex/videotraining/

Flex Help: Getting started with Flex http://learn.adobe.com/wiki/display/Flex/Getting+Started

Flex Examples: http://blog.flexexamples.com/

Flex.org http://flex.org/