Your SlideShare is downloading. ×
0
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Adobe® Flex™
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Adobe® Flex™

8,460

Published on

Published in: Technology
3 Comments
4 Likes
Statistics
Notes
  • good summary for Adobe AIR
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Very effective and summarized presentation. Thanks a lot.

    <b>[Comment posted from</b> http://flexed.wordpress.com/2008/03/11/adobe-flex-intro-ppt-posted/]
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Really its very nice presentation about adobe flex.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
8,460
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
662
Comments
3
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Transcript

    • 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 ™
    • 10.  
    • 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

    ×