Adobe Flex: Uday M. Shankar

Adobe® Flex™ anintroduction

Uday M. Shankar

Why should I care about ‘another’ technology?

Application Evolution

Reach

Globa l

Loca l

Text UI

12/01/09

Client/Server

Mainframe

Rich

http://flexed.wordpress.com

Integrated media GUI

3

Application Evolution

Reach

Globa l

1992 Loca l

Text UI

12/01/09

Client/Server

Mainframe

Rich

http://flexed.wordpress.com

Integrated media GUI

4

Application Evolution Globa l

Reach

Web Applications

1998

1992 Loca l

Text UI

12/01/09

Client/Server

Mainframe

Rich

http://flexed.wordpress.com

Integrated media GUI

5

Application Evolution Globa l

2005+

Reach

Web Applications

Rich Internet Applications 1998

1992 Loca l

Text UI

12/01/09

Client/Server

Mainframe

Rich

http://flexed.wordpress.com

Integrated media GUI

6

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 12/01/09

http://flexed.wordpress.com

7

Anatomy of a Rich Internet Application Bi-Directional Audio & Video

Menus & Navigation Controls

Real Time Data Push & Alerting

Data Visualization & Collaboration

Resizable Views/Effects/ Transitions

Chat Rich Data Entry

Mapping, Geo-Coding, Annotations & White boarding

Data Synchronizati on & Conflict Resolution

Offlin e 12/01/09

http://flexed.wordpress.com

8

Adobe® Flex™

12/01/09

http://flexed.wordpress.com

10

What is Flex? • Client-side, deployed as Flash .swf • Flex Framework – MXML (Macromedia XML)

Expressiveness Rich Media

• Declarative language to define User Interface • Similar to XHTML

Performance

– User Interface Components

Real Time

• Buttons, ComboBoxes, Layout Managers, Containers, Effects

– Class Libraries

Desktop and Offline

• Everything in the mx.* packages • Validation Routines, Web Services, DataTypes

12/01/09

Programming Model Enterprise Integration

http://flexed.wordpress.com

11

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 Flex Builder (and SDK)

Flash Authoring Library

AS2

AS3

Flash Compiler

MXML

CSS

Flex Compiler

SWF Compiled object, No special server required, Runs on Flash Player, Cross Browser compatible 12/01/09

http://flexed.wordpress.com

12

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 12/01/09

http://flexed.wordpress.com

13

Where does Flex fit in? • As Presentation Layer • Any language on the backend. • SWF can be served by any HTTP 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. 12/01/09

Any Language/Server PHP .net Java/JSP/Struts/J2EE Web Services 3rd Party APIs Database -MYSQL -DB2 -Oracle -Sybase -MSSQL -Access?

http://flexed.wordpress.com

14

How Flex works… MXML and ActionScript

12/01/09

http://flexed.wordpress.com

Flex Class Library

15

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

12/01/09

http://flexed.wordpress.com

16

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 The new datatype in AS 3 – 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)

12/01/09

http://flexed.wordpress.com

17

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 12/01/09

http://flexed.wordpress.com

18

Introducing the Flex 3 Product Line Flex SDK 3 (FREE)

Flex Builder 3

e c r u o S Flex Framework and Class Library n e p O

MXML and ActionScript 3.0

Command-line Compiler & Debugger

Flex Extensible Charting Components Charting

Visual Layout Code Hinting Debugging Skinning and Styling

Flex Data Services Message Service Data Management Service RPC Services

12/01/09

http://flexed.wordpress.com

19

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

12/01/09

http://flexed.wordpress.com

21

Login Screen • Login Screen • Uses 3 states – Login Entry, Login Success, Login Fail • Example covers – States – Talking to PHP/MYSQL in XML – Transitions

12/01/09

http://flexed.wordpress.com

22

Flex + PHP + MYSQL • Uses AMFPHP • PHP queries data from MySQL • Demo Covers – Flex talks to PHP using AMFPHP – Using Datagrid – Bindable Data – Debugger Message

12/01/09

http://flexed.wordpress.com

23

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 way I see it…

– The rest of them all Sparkle (XAML) = Flex (MXML) – Browser dependant – Platform dependant* Flash Player = Silverlight – Standardization & Maturity - A loooooong way to go • Above all… Adobe has another key card – Adobe AIR.

12/01/09

http://flexed.wordpress.com

25

“ 1 2 /01 /09

What’s AIR™? 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 http://flexed.wordpress.com

26

“ 12/01/09

What’s AIR™? 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 http://flexed.wordpress.com

 Windows  Mac  Linux  Solaris (???)

27

“ 12/01/09

What’s AIR™? 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 http://flexed.wordpress.com

 No GUI  Chromeless container  Runs in Background  Like JRE  Not a replacement for browser

28

“ 12/01/09

What’s AIR™? 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 http://flexed.wordpress.com

 YOU  Architects  Developers  Designers  HCI Professionals

29

“ 12/01/09

What’s AIR™? 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 http://flexed.wordpress.com

 Flex/Flash  HTML/CSS  Javascript/Ajax  PDFs

30

“ 12/01/09

What’s AIR™? 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 http://flexed.wordpress.com

 .air Packages  Deploy to desktop with double click install  Distribute as standalone or packaged with runtime  Remember JWS?

31

“ 12/01/09

What’s AIR™? 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 http://flexed.wordpress.com

 File I/O  Offline / Online  System Events

32

So, What???

Why Adobe® AIR™?

12/01/09

http://flexed.wordpress.com

34

More on Adobe® AIR™ • Flash runtime + WebKit + pdf renderer CF pages can run inside of an – No browser dependency AIR application, but only within • Rich set of API to work with File, a frame in html 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

12/01/09

http://flexed.wordpress.com

35

Questions?

Acknowledgements • • • •

Ted Patrick Mike Potter Raghunath Rao And many others…

12/01/09

And of course,

www.google.com

http://flexed.wordpress.com

37

Thank you…

[email protected] udayms.wordpress.com | flexed.wordpress.com