adobe® flex™
TRANSCRIPT
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
Reach
Local
Global
RichText UI Integrated media GUI
04/12/23 http://flexed.wordpress.com 4
Application Evolution
Client/ServerMainframe
Reach
Local
Global
RichText UI Integrated media GUI
1992
04/12/23 http://flexed.wordpress.com 5
Application Evolution
Client/ServerMainframe
Web Applications
Reach
Local
Global
RichText UI Integrated media GUI
1992
1998
04/12/23 http://flexed.wordpress.com 6
Application Evolution
Client/ServerMainframe
Web Applications
Reach
Local
Global
RichText UI
Integrated media GUI
1992
1998
2005+
Rich InternetApplications
04/12/23 http://flexed.wordpress.com 7
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
04/12/23 http://flexed.wordpress.com 8
Anatomy of a Rich Internet Application
Data Visualization
& Collaboration
Real Time Data
Push & Alerting
Chat
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™
04/12/23 http://flexed.wordpress.com 10
04/12/23 http://flexed.wordpress.com 11
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
04/12/23 http://flexed.wordpress.com 12
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)
AS2
Flash Compiler
CSS
04/12/23 http://flexed.wordpress.com 13
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
04/12/23 http://flexed.wordpress.com 14
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?
04/12/23 http://flexed.wordpress.com 15
How Flex works…
MXML and ActionScript Flex Class Library
04/12/23 http://flexed.wordpress.com 16
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
04/12/23 http://flexed.wordpress.com 17
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
04/12/23 http://flexed.wordpress.com 18
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
04/12/23 http://flexed.wordpress.com 19
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
Open Source
Blah… Blah… Blah…
Enough…. Now, Lets see some action…!!!
04/12/23 http://flexed.wordpress.com 21
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
04/12/23 http://flexed.wordpress.com 22
Login Screen• Login Screen• Uses 3 states
– Login Entry, Login Success, Login Fail• Example covers
– States– Talking to PHP/MYSQL in XML– Transitions
04/12/23 http://flexed.wordpress.com 23
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™
04/12/23 http://flexed.wordpress.com 25
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
04/12/23 http://flexed.wordpress.com 26
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™?
04/12/23 http://flexed.wordpress.com 27
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
Mac
Linux
Solaris (???)
04/12/23 http://flexed.wordpress.com 28
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™?
No GUI
Chromeless container
Runs in Background
Like JRE
Not a replacement for browser
04/12/23 http://flexed.wordpress.com 29
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™?
YOU
Architects
Developers
Designers
HCI Professionals
04/12/23 http://flexed.wordpress.com 30
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™?
Flex/Flash
HTML/CSS
Javascript/Ajax
PDFs
04/12/23 http://flexed.wordpress.com 31
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™?
.air Packages
Deploy to desktop with double click install
Distribute as standalone or packaged with runtime
Remember JWS?
04/12/23 http://flexed.wordpress.com 32
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™?
File I/O
Offline / Online
System Events
So, What???
04/12/23 http://flexed.wordpress.com 34
Why Adobe® AIR™?
04/12/23 http://flexed.wordpress.com 35
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?
04/12/23 http://flexed.wordpress.com 37
Acknowledgements• Ted Patrick• Mike Potter• Raghunath Rao• And many others…
And of course,
www.google.com
And of course,
www.google.com