1.
Adobe ® Flex ™ an introduction Uday M. Shankar

2.
Why should I care about ‘another’ technology?

3.
Application Evolution Client/Server Mainframe Reach Local Global Rich Text UI Integrated media GUI

4.
Application Evolution Client/Server Mainframe Reach Local Global Rich Text UI Integrated media GUI 1992

5.
Application Evolution Client/Server Mainframe Web Applications Reach Local Global Rich Text UI Integrated media GUI 1992 1998

6.
Application Evolution Client/Server Mainframe Web Applications Reach Local Global Rich Text UI Integrated media GUI 1992 1998 2005+ Rich Internet Applications

7.
RIA – Rich Internet Applications <ul><li>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. </li></ul><ul><li>Most common tools – </li></ul><ul><ul><li>Asynchronous JavaScript and XML (AJAX) </li></ul></ul><ul><ul><li>OpenLaszlo (Flash Player + AJAX) </li></ul></ul><ul><ul><li>WPF (.net framework) </li></ul></ul><ul><ul><li>XUL (Mozilla compatible browser) </li></ul></ul><ul><ul><li>Flex or Flash using the Flash Player </li></ul></ul>

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

9.
Adobe ® Flex ™

11.
What is Flex? <ul><li>Client-side, deployed as Flash .swf </li></ul><ul><li>Flex Framework </li></ul><ul><ul><li>MXML (Macromedia XML) </li></ul></ul><ul><ul><ul><li>Declarative language to define User Interface </li></ul></ul></ul><ul><ul><ul><li>Similar to XHTML </li></ul></ul></ul><ul><ul><li>User Interface Components </li></ul></ul><ul><ul><ul><li>Buttons, ComboBoxes, Layout Managers, Containers, Effects </li></ul></ul></ul><ul><ul><li>Class Libraries </li></ul></ul><ul><ul><ul><li>Everything in the mx.* packages </li></ul></ul></ul><ul><ul><ul><li>Validation Routines, Web Services, DataTypes </li></ul></ul></ul>Expressiveness Rich Media Performance Real Time Desktop and Offline Programming Model Enterprise Integration

12.
Flex vs. Flash <ul><li>Flex evolved from Flash </li></ul><ul><li>Flash was a complete animation tool </li></ul><ul><li>Flex is a development platform </li></ul><ul><li>Output of Flex is a compiled SWF file </li></ul>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

13.
Flex vs. AJAX <ul><li>Cross browser compatible </li></ul><ul><li>Flash player runs in MAC, Windows, Linux, Solaris(!!!) </li></ul><ul><li>Compiled source </li></ul><ul><li>More matured, structured </li></ul><ul><li>Better documentation, online communities </li></ul><ul><li>Better charting capabilities </li></ul><ul><li>Better debugging capabilities </li></ul><ul><li>Better client access using AIR etc. </li></ul><ul><li>Really SEXY look-and-feel(!!!!) </li></ul><ul><li>It’s javascript + more </li></ul><ul><ul><li>Asynchronous </li></ul></ul><ul><ul><li>Object model </li></ul></ul><ul><ul><li>Modularised </li></ul></ul>

14.
Where does Flex fit in? <ul><li>As Presentation Layer </li></ul><ul><li>Any language on the backend. </li></ul><ul><li>SWF can be served by any HTTP webserver. </li></ul><ul><li>Can serve as UI for different applications. </li></ul><ul><li>Can be ‘the’ application too. </li></ul><ul><li>With AIR, can work as Desktop Clients. </li></ul><ul><li>Code once. Port to web/desktop. </li></ul>Any Language/Server PHP .net Java/JSP/Struts/J2EE Web Services 3 rd Party APIs Database -MYSQL -DB2 -Oracle -Sybase -MSSQL -Access?

15.
How Flex works… MXML and ActionScript Flex Class Library

16.
Flex for designers <ul><li>MXML ~ HTML, Actionscript ~ Javascript </li></ul><ul><li>Flex Builder comes with a WYSIWYG designer </li></ul><ul><li>CSS support/Runtime skinning support </li></ul><ul><li>States Management </li></ul><ul><li>Layout/Navigation </li></ul><ul><ul><li>Canvas, Form, VBox, HBox, ControlBar, Accordion, LinkBar, MenuBar, ViewStack </li></ul></ul><ul><li>Controls </li></ul><ul><ul><li>Button, CheckBox, ComboBox, DataGrid, TextInput, List, Label, Tree </li></ul></ul><ul><li>Charts </li></ul><ul><ul><li>BarChart, PieChart, LineChart </li></ul></ul>

17.
Flex for developers <ul><li>Actionscript ~ Javascript + Java. </li></ul><ul><li>MXML ~ Actionscript </li></ul><ul><li>Familiar syntax </li></ul><ul><ul><li>Similar to C++, Java, C#, JavaScript </li></ul></ul><ul><li>Dynamic Language, Strong/Weak Typing </li></ul><ul><ul><li>Variables can hold any type </li></ul></ul><ul><ul><li>Can bind variable to specific data type </li></ul></ul><ul><li>Visibility Modifiers </li></ul><ul><ul><li>Public - Accessible to anyone </li></ul></ul><ul><ul><li>Private - Only accessible inside the class (current .mxml or .as) </li></ul></ul><ul><ul><li>Protected - Accessible inside the class and subclasses </li></ul></ul><ul><ul><li>Internal - Only accessible to classes in the same package </li></ul></ul><ul><ul><ul><li>Default value (when visibility is omitted) </li></ul></ul></ul>The new * datatype in AS 3

18.
Flex for developers <ul><li>Data Connectivity </li></ul><ul><ul><li>HTTPService, RemoteObject, WebService, XML </li></ul></ul><ul><li>Validation </li></ul><ul><ul><li>EmailValidator, DateValidator, ZipCodeValidator </li></ul></ul><ul><li>Effects </li></ul><ul><ul><li>Zoom, Resize, Move, Fade </li></ul></ul><ul><li>Data Binding </li></ul><ul><ul><li>“ Glues” data from source to destination </li></ul></ul><ul><ul><ul><li>When source data changes, destination auto-updates </li></ul></ul></ul><ul><ul><li>Define with { and } </li></ul></ul><ul><ul><ul><li><mx:Button label=“{ userInput.text }” /> </li></ul></ul></ul><ul><ul><li>Use [Bindable] meta-data to mark properties as able to be bound </li></ul></ul><ul><ul><ul><li>Explicit because performance implications </li></ul></ul></ul>

19.
Introducing the Flex 3 Product Line Visual Layout Flex Builder 3 Code Hinting Debugging Skinning and Styling Flex SDK 3 (FREE) Command-line Compiler & Debugger Flex Data Services Message Service Data Management Service RPC Services MXML and ActionScript 3.0 Flex Framework and Class Library Flex Charting Extensible Charting Components Open Source

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

21.
Hello World <ul><li>Basic 1 </li></ul><ul><ul><li>Very basic. Mxml Only </li></ul></ul><ul><li>Basic 2 </li></ul><ul><ul><li>Mxml with inline Actionscript </li></ul></ul><ul><li>Advanced </li></ul><ul><ul><li>Get value from user </li></ul></ul><ul><ul><li>Uses a combination of MXML and Actionscript </li></ul></ul><ul><ul><li>How to use components </li></ul></ul>

22.
Login Screen <ul><li>Login Screen </li></ul><ul><li>Uses 3 states </li></ul><ul><ul><li>Login Entry, Login Success, Login Fail </li></ul></ul><ul><li>Example covers </li></ul><ul><ul><li>States </li></ul></ul><ul><ul><li>Talking to PHP/MYSQL in XML </li></ul></ul><ul><ul><li>Transitions </li></ul></ul>

23.
Flex + PHP + MYSQL <ul><li>Uses AMFPHP </li></ul><ul><li>PHP queries data from MySQL </li></ul><ul><li>Demo Covers </li></ul><ul><ul><li>Flex talks to PHP using AMFPHP </li></ul></ul><ul><ul><li>Using Datagrid </li></ul></ul><ul><ul><li>Bindable Data </li></ul></ul><ul><ul><li>Debugger Message </li></ul></ul>

24.
Adobe ® AIR ™

25.
Silverlight, AJAX, XUL, Laslo <ul><li>M$ $ilverlight (Deserves a special mention) </li></ul><ul><ul><li>Exciting new platform with promises? - YES!!!! </li></ul></ul><ul><ul><li>Flash Killer? - NO!!!! </li></ul></ul><ul><ul><li>M$ Windows only and Vi$ual $tudio for IDE </li></ul></ul><ul><ul><li>Requires 50 / 200 MB .NET 3.x runtime </li></ul></ul><ul><ul><li>Steep learning curve </li></ul></ul><ul><ul><li>The rest of them all </li></ul></ul><ul><ul><li>Browser dependant </li></ul></ul><ul><ul><li>Platform dependant* </li></ul></ul><ul><ul><li>Standardization & Maturity - A loooooong way to go </li></ul></ul><ul><li>Above all… Adobe has another key card – Adobe AIR. </li></ul>The way I see it… Sparkle (XAML) = Flex (MXML) Flash Player = Silverlight

26.
<ul><li>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 </li></ul>What’s AIR™? ” “

27.
<ul><li>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 </li></ul>What’s AIR™? ” “ <ul><li>Windows </li></ul><ul><li>Mac </li></ul><ul><li>Linux </li></ul><ul><li>Solaris (???) </li></ul>

28.
<ul><li>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 </li></ul>What’s AIR™? ” “ <ul><li>No GUI </li></ul><ul><li>Chromeless container </li></ul><ul><li>Runs in Background </li></ul><ul><li>Like JRE </li></ul><ul><li>Not a replacement for browser </li></ul>

29.
<ul><li>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 </li></ul>What’s AIR™? ” “ <ul><li>YOU </li></ul><ul><li>Architects </li></ul><ul><li>Developers </li></ul><ul><li>Designers </li></ul><ul><li>HCI Professionals </li></ul>

30.
<ul><li>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 </li></ul>What’s AIR™? ” “ <ul><li>Flex/Flash </li></ul><ul><li>HTML/CSS </li></ul><ul><li>Javascript/Ajax </li></ul><ul><li>PDFs </li></ul>

31.
<ul><li>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 </li></ul>What’s AIR™? ” “ <ul><li>.air Packages </li></ul><ul><li>Deploy to desktop with double click install </li></ul><ul><li>Distribute as standalone or packaged with runtime </li></ul><ul><li>Remember JWS? </li></ul>

32.
<ul><li>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 </li></ul>What’s AIR™? ” “ <ul><li>File I/O </li></ul><ul><li>Offline / Online </li></ul><ul><li>System Events </li></ul>

33.
So, What???

34.
Why Adobe® AIR™?

35.
More on Adobe® AIR™ <ul><li>Flash runtime + WebKit + pdf renderer </li></ul><ul><ul><li>No browser dependency </li></ul></ul><ul><li>Rich set of API to work with File, Network, Local Database, window, menu, etc </li></ul><ul><li>Much more responsive than standard web application </li></ul><ul><li>Ability to go offline and then re-synch when back online </li></ul><ul><ul><li>Local storage on disk </li></ul></ul><ul><li>AIR applications can communicate with each other </li></ul>CF pages can run inside of an AIR application, but only within a frame in html

36.
Questions?

37.
Acknowledgements <ul><li>Ted Patrick </li></ul><ul><li>Mike Potter </li></ul><ul><li>Raghunath Rao </li></ul><ul><li>And many others… </li></ul>And of course, www.google.com

38.
Thank you… [email_address] udayms.wordpress.com | flexed.wordpress.com