Adobe® Flex™

an introductionan introduction

Uday M. Shankar

Why should I care about ‘another’ technology?

04/12/23 http://flexed.wordpress.com 3

Application Evolution

Client/ServerMainframe

Global

RichText UI Integrated media GUI

Global

Web Applications

Global

Web Applications

Global

RichText UI

Integrated media GUI

Rich InternetApplications

RIA – Rich Internet Applications• 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.

• Most common tools –– Asynchronous JavaScript and XML

(AJAX)– OpenLaszlo (Flash Player + AJAX)– WPF (.net framework)– XUL (Mozilla compatible browser)– Flex or Flash using the Flash Player

Anatomy of a Rich Internet Application

Data Visualization

& Collaboration

Real Time Data

Push & Alerting

Offline

Data Synchronization & Conflict Resolution

Bi-Directional Audio & Video

Rich Data Entry

Menus & Navigation Controls

Resizable Views/Effects/

Transitions

Mapping, Geo-Coding, Annotations

& White boarding

Adobe® Flex™

What is Flex?• 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

Programming ModelEnterprise Integration

Expressiveness

Rich Media

Performance

Real Time

Desktop and Offline

Library

Flex vs. Flash• Flex evolved from Flash• Flash was a complete animation tool• Flex is a development platform• Output of Flex is a compiled SWF file

SWFCompiled object, No special server required, Runs on Flash

Player, Cross Browser compatible

Flex Compiler

AS3 MXML

Flash Authoring Flex Builder (and SDK)

Flash Compiler

Flex vs. AJAX• Cross browser compatible• Flash player runs in MAC, Windows, Linux,

Solaris(!!!)• Compiled source• More matured, structured• Better documentation, online

communities• Better charting capabilities• Better debugging capabilities• Better client access using AIR etc.• Really SEXY look-and-feel(!!!!)• It’s javascript + more

– Asynchronous– Object model– Modularised

Where does Flex fit in?• As Presentation Layer• Any language on the

backend.• SWF can be

served by anyHTTP webserver.

• Can serve as UI for different applications.

• Can be ‘the’ application too.

• With AIR, can work as Desktop Clients.

• Code once. Port to web/desktop.

Any Language/Server

PHP.net

Java/JSP/Struts/J2EEWeb Services3rd Party APIs

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

How Flex works…

MXML and ActionScript Flex Class Library

Flex for designers• MXML ~ HTML, Actionscript ~ Javascript• Flex Builder comes with a WYSIWYG designer• CSS support/Runtime skinning support• States Management• Layout/Navigation

– Canvas, Form, VBox, HBox, ControlBar, Accordion, LinkBar, MenuBar, ViewStack

• Controls– Button, CheckBox, ComboBox, DataGrid,

TextInput, List, Label, Tree• Charts

– BarChart, PieChart, LineChart

Flex for developers• Actionscript ~ Javascript + Java. • MXML ~ Actionscript• Familiar syntax

– Similar to C++, Java, C#, JavaScript• Dynamic Language, Strong/Weak Typing

– Variables can hold any type– Can bind variable to specific data type

• Visibility Modifiers– Public - Accessible to anyone– Private - Only accessible inside the class (current .mxml

or .as)– Protected - Accessible inside the class and subclasses– Internal - Only accessible to classes in the same

package• Default value (when visibility is omitted)

The new * datatype in AS 3The new * datatype in AS 3

Flex for developers• Data Connectivity

– HTTPService, RemoteObject, WebService, XML• Validation

– EmailValidator, DateValidator, ZipCodeValidator• Effects

– Zoom, Resize, Move, Fade• Data Binding

– “Glues” data from source to destination• When source data changes, destination auto-updates

– Define with { and }• <mx:Button label=“{ userInput.text }” />

– Use [Bindable] meta-data to mark properties as able to be bound

• Explicit because performance implications

Introducing the Flex 3 Product Line

Visual LayoutVisual Layout

Flex Builder 3

Code HintingCode Hinting

DebuggingDebugging

Skinning and StylingSkinning and Styling

Flex SDK 3 (FREE)

Command-line Compiler & DebuggerCommand-line Compiler & Debugger

Flex Data Services

Message ServiceMessage Service

Data Management ServiceData Management Service

RPC ServicesRPC Services

MXML and ActionScript 3.0MXML and ActionScript 3.0

Flex Framework and Class LibraryFlex Framework and Class Library

Flex Charting Extensible Charting ComponentsExtensible Charting Components

Open Source

Blah… Blah… Blah…

Enough…. Now, Lets see some action…!!!

Hello World• Basic 1

– Very basic. Mxml Only• Basic 2

– Mxml with inline Actionscript• Advanced

– Get value from user– Uses a combination of MXML and Actionscript– How to use components

Login Screen• Login Screen• Uses 3 states

– Login Entry, Login Success, Login Fail• Example covers

– States– Talking to PHP/MYSQL in XML– Transitions

Flex + PHP + MYSQL• Uses AMFPHP• PHP queries data from MySQL• Demo Covers

– Flex talks to PHP using AMFPHP– Using Datagrid– Bindable Data– Debugger Message

Adobe® AIR™

Silverlight, AJAX, XUL, Laslo• M$ $ilverlight (Deserves a special mention)

– Exciting new platform with promises? - YES!!!!– Flash Killer? - NO!!!!– M$ Windows only and Vi$ual $tudio for IDE– Requires 50 / 200 MB .NET 3.x runtime– Steep learning curve

– The rest of them all– Browser dependant– Platform dependant*– Standardization & Maturity - A loooooong way to

go• Above all… Adobe has another key card – Adobe AIR.

The way I see it…

Sparkle (XAML) = Flex (MXML)

Flash Player = Silverlight

The way I see it…

Sparkle (XAML) = Flex (MXML)

Flash Player = Silverlight

Adobe Integrated Runtime (AIR) is a cross-platform runtime that allows you to leverage your existing web applications skills to build and deploy Rich Internet Applications (RIAs) to the desktop

””

““What’s AIR™?

””

Windows

Solaris (???)

””

No GUI

Chromeless container

Runs in Background

Like JRE

Not a replacement for browser

””

Architects

Developers

Designers

HCI Professionals

Adobe Integrated Runtime (AIR) is a cross-platform runtime that allows you to leverage your existing web applications skills to build and deploy Rich Internet Applications (RIAs) to the desktop ””

Flex/Flash

HTML/CSS

Javascript/Ajax

.air Packages

Deploy to desktop with double click install

Distribute as standalone or packaged with runtime

Remember JWS?

File I/O

Offline / Online

System Events

So, What???

Why Adobe® AIR™?

More on Adobe® AIR™• Flash runtime + WebKit + pdf

renderer– No browser dependency

• Rich set of API to work with File, Network, Local Database, window, menu, etc

• Much more responsive than standard web application

• Ability to go offline and then re-synch when back online– Local storage on disk

• AIR applications can communicate with each other

CF pages can run inside of an

AIR application, but only within

a frame in html

CF pages can run inside of an

AIR application, but only within

a frame in html

Questions?

Acknowledgements• Ted Patrick• Mike Potter• Raghunath Rao• And many others…

And of course,

www.google.com

And of course,

www.google.com

Thank you…

udayms@gmail.com

udayms.wordpress.com | flexed.wordpress.com

Adobe® Flex™

Technology

Transcript of Adobe® Flex™

Adobe Flex - indicthreads.com · Adobe Flex Prayank Swaroop Adobe Evangelist (APAC) ... AIR aka “ADOBE Integrated Runtime ... SQLite. SQLite. AIR Capabilities

Adobe Flex Coding Guidelines V12 English

Adobe Flex builder by elmagnif

Adobe Flex Class Slides Oct 10

Adobe Flex Component Lifecycle

Adobe Flex 4 Overview

Ruby and Adobe Flex

RIA & Adobe Flex

The Spring of Adobe Flex Remoting

Adobe flex at jax london 2011

Adobe Flex Coding Guidelines

Adobe Flex 3 Component Life Cycle

Adobe Flex Introduction

Adobe Flex Ria

Chicago Flex User Group Presentation - Adobe Flex Frameworks

Adobe Flex Builder Flex Charting-en US-20060510 0105 · adobe flex builder adobe flex charting software license agreement notice to user: this license agreement governs installation

Accessibility In Adobe Flex

Rich Internet Applications with Adobe® Flex · PDF fileRich Internet Applications with Adobe® Flex and Java™ Technology Tony Constantinides, CEO Constant Innovations Inc . 2008

Adobe Flex Resources

Michael Adobe Flex Java 1 London