Flex Introduction
Upcoming SlideShare
Loading in...5
×
 

Flex Introduction

on

  • 3,393 views

Note: I moved to http://mywebground.com/ so http://sabaritheflexian.com is no longer in us by me. ...

Note: I moved to http://mywebground.com/ so http://sabaritheflexian.com is no longer in us by me.
Introduction to Flex. This presentation is for beginners who wants to dive into the awesome platform called Adobe Flash / Flex. It also talks about RIA, Adobe Flex and AIR.

Statistics

Views

Total Views
3,393
Views on SlideShare
3,393
Embed Views
0

Actions

Likes
1
Downloads
178
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Flex Introduction Flex Introduction Presentation Transcript

  • Introduction to Flex RIA SABARINATHAN RIA Developer http://sabaritheflexian.com riahunter Talks @ Chennai Flex User Group ( CFUG )1 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Talk Coverage 40% RIA 10% Flex and Action Script 25% AIR 5% Flex Hero 20% Demo2 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Quick Look . . . Rich Internet Applications (RIA) Why Flashplatform ? Flash Platform Technologies Inside Flex MXML Action Script Adobe AIR 3D Components Flex Hero Intro3 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • RIA : Rich Internet Applications4 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Flash Back Remote Scripting, by Microsoft, circa 1998 X Internet, by Forrester Research in October 2000 Rich (Web) Clients Rich Web Application White Paper by Macromedia (Adobe) - 20025 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • What is RIA ? “Rich Internet Applications (RIAs) are web-based applications that have a much more robust feel and functionality to them than standard web based applications.” Traditional HTML, and the accompanying technology surrounding standard web pages, are being pushed to the limits of their capabilities. Leveraging RIAs allows web applications to have desktop application usability inside a web browser! Source : Microsoft.com6 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Typical RIA Architecture Ease of Use Enhanced User Experience Reduced Server Load Lost Data Light Weight Faster Processing time AJAX (Asynchronous JavaScript And XML) Source : Microsoft.com7 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Former RIA Organization Vendor Client Tech Adobe XDP JS, XML, PDF AltioLive XML, Applet DreamFactory XML Droplets Java Servlet Isomorphics DHTML, XML Laszlo Flash, XML Macromedia Central Flash Macromedia Flex Flash, XML Nexaweb Java+XUL Q-link XML,XForms8 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • RIA Frameworks UltraLightClient Ample Google Web Toolkit Silverlight Adobe Flash / Flex Curl ZK JavaFX OpenLaszlo Bindows9 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Areas of RIA  Financial Services  Auto Dealerships  Mortgage Firms  Customer survey forms  Email forms  Video Distribution (branding/licensing)  Remote training services  Customer service (live two-way video, chat & assistance)  Virtual Desktop Environments  CRM/ERP front-end applications ... the applications are limitless…10 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Statistics: Why Flash Platform?11 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Positive Notes “While the <video> tag is a big step forward for open standards, the Adobe Flash Platform will continue to play a critical role in video distribution," said Yong in YouTube blog. -http://apiblog.youtube.com/2010/06/flash-and-html5-tag.html HTML5 Can’t Exist Without the Flash Platform : Ryan Stewart Blog Post  http://www.streaminglearningcenter.com/articles/flash-player-cpu-hog-or-hot-tamale-it-depends-.html  http://www.engadget.com/2010/03/10/html5-vs-flash-comparison-finds-a-few-surprises-settles-few-de/  http://techcrunch.com/2010/02/05/the-future-of-web-content-html5-flash-mobile-apps/  http://thenextweb.com/apple/2010/05/14/html5-vs-flash-what-you-havent-heard/12 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • HTML 5 vs Flash : Ryan’s Comparison13 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Statistics  Live Stats  Players / Plug-ins Domination  Frameworks Trend14 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Live Stats Flash Player / Plug-in Silverlight Statistics collected from 19,409,973 daily unique browsers across 147 sites over the past 30 days From www.riastats.com (08th Nov 2010)15 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Players / Plug-ins Domination Source: Google Trends on 8th Nov 201016 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Frameworks Trend Source: Google Trends on 8th Nov 201017 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Adobe’s RIA: Flash Platform Technologies18 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Technology Stack Tools Flash Catalyst Flash Professional Flash / Flex Builder Clients Frameworks AIR Flash Player Flex Servers/Services Live Cycle DS ColdFusion Flash Media Server Services19 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Flex Introduction ADOBE FLEX® A highly productive, free open source framework for building expressive web applications that deploy consistently on all major browsers and on the desktop with Adobe AIR. - Adobe20 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Flex Flashback Macromedia Flex Server 1.0 and 1.5 (2004) Adobe Flex 2 – AS3 (2005 – 2006) Adobe Flex 3 – AIR (2007 – 2009) Adobe Flex 4 - Flash Builder (2010) Adobe Flex 4.5 and Flex Hero - Flash Builder (2011)Flex was the first Macromedia product to be re-branded under the Adobe name.21 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Flex Environment  Two languages Flash Builder IDE  MXML (actually a library of ActionScript)  ActionScript 3 Flex SDK  Compilers MXML ActionScript  Debugger Flex Class Library  Profiler Debuggers  Rich Component Library Profilers , Flex Units, Network Monitors  Flash / Flex Builder IDE Auto Code-Generation  Eclipse Plug-in  Design view and code view and more…  Debugging / Development / Profiling22 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Flex Work Flow23 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • MXML: Macromedia XML24 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • MXML application s:Application <?xml version="1.0" ?> <s:Application> s:Button <s:Button width=”100” height=”50”/> s:Panel s:Button <s:Panel width=”100%” height=”100%”> mx:DataGrid <s:Button width=”100%”/> <mx:DataGrid width=”100%” height=”100%”/> </s:Panel> </s:Application>25 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • MXML Contd… MXML Application <Application> <WebService id=“ws” wsdl=“catalog.wsdl”/> <Button label=“Get Data” click=“ws.getProducts()”/> <DataGrid dataProvider=“{ws.getProducts.result}”/> <LineChart dataProvider=“{ws.getProducts.result}”/> </Application>26 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • MXML Contd… MXML - Components <Application> <WebService id=“ws” wsdl=“catalog.wsdl”/> <Button label=“Get Data” click=“ws.getProducts()”/> <DataGrid dataProvider=“{ws.getProducts.result}”/> <LineChart dataProvider=“{ws.getProducts.result}”/> </Application>27 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • MXML Contd… MXML - id <Application> <WebService id=“ws” wsdl=“catalog.wsdl”/> <Button label=“Get Data” click=“ws.getProducts()”/> <DataGrid dataProvider=“{ws.getProducts.result}”/> <LineChart dataProvider=“{ws.getProducts.result}”/> </Application>28 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • MXML Contd… MXML - Properties <Application> <WebService id=“ws” wsdl=“catalog.wsdl”/> <Button label=“Get Data” click=“ws.getProducts()”/> <DataGrid dataProvider=“{ws.getProducts.result}”/> <LineChart dataProvider=“{ws.getProducts.result}”/> </Application>29 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • MXML Contd… MXML - Events <Application> <WebService id=“ws” wsdl=“catalog.wsdl”/> <Button label=“Get Data” click=“ws.getProducts()”/> <DataGrid dataProvider=“{ws.getProducts.result}”/> <LineChart dataProvider=“{ws.getProducts.result}”/> </Application>30 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • MXML Contd… MXML - Binding <Application> <WebService id=“ws” wsdl=“catalog.wsdl”/> <Button label=“Get Data” click=“ws.getProducts()”/> <DataGrid dataProvider=“{ws.getProducts.result}”/> <LineChart dataProvider=“{ws.getProducts.result}”/> </Application>31 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Action Script32 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Introduction to Action Script  ECMA-262 edition and ECMA-4 complaint  Versions  Action Script 1.0 – 2000 – 2003 Flash Player 8 and below  Action Script 2.0 – 2003 – 2006  Action Script 3.0 – 2006 – present >> Flex 2.0 - Flash Player 9 and above  Object-oriented from AS 3  Initially designed for controlling simple 2D vector animations made in Adobe Flash (formerly Macromedia Flash).  Foundation for Flex 2 and above  Online API >> http://livedocs.adobe.com/flex/3/html/toc.html33 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Action Script contd… package { import flash.display.Sprite; import flash.text.TextField; public class DemoCFUG extends Sprite { public function DemoCFUG() { var txtFieldBox:TextField = new TextField(); txtFieldBox.width = 100; txtFieldBox.height = 140; txtFieldBox.border = true; txtFieldBox.borderColor = 0xFF0000; txtFieldBox.text = "Hello CFUG !!!"; addChild(txtFieldBox); } } }34 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Action Script contd…<mx:Panel title=“firstApplication"> <mx:TextArea id=“note1"/> <mx:Button label=“Submit” onclick=“doSomething();"/></mx:Panel>package { import flash.media.Video; import flash.net.NetStream; import flash.net.NetConnection; public class Example { public function doSomething( event: Event ) : void { var url:String = “homeMovie.flv"; var video:Video = new Video(width:int=500, height:int=350) var stream:NetStream = new NetStream(new NetConnection()); video.attachNetStream(stream); video.play(url); addChild(video); } }}Code borrowed from: http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/media/Video.html35 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Inside Flex36 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Flex Compilation mxmlc compiler process • Parse MXML into ActionScript classes • Compile ActionScript into bytecode • Insert bytecode into a binary SWF file Stage 1 • Flash Player contains an ActionScript Virtual Machine (AVM). At runtime, the AVM turns the bytecode into machine language code that the particular OS can Stage 2 interpret. (JIT compilation) Also check : Build Phase in Flex Docs37 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Flex Components and more Image Courtesy: Adobe.com38 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Flex Back End HTTP Services RemoteObject Web Services BlazeDS / LCDS / GraniteDS Java - J2EE / Coldfusion AMFPHP / Zend AMF PHP WebORB / Flourine FX .NET WebORB for Ruby/ RubyAMF Ruby on Rails PYAMF / DjangoAMF Python39 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Sample Flash Platform RIA applications40 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Let’s get started . . .41 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Take a Look42 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Adobe AIR43 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Adobe AIR Adobe® AIR® is a cross-operating system runtime that lets developers combine HTML, Ajax, Adobe Flash®, and Adobe Flex® technologies to deploy Rich Internet Applications (RIAs) on the desktop. - Adobe44 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Introduction  Adobe Integrated Runtime (AIR) – previously codenamed “Apollo”  Cross-OS application engine that enables hybrid desktop-internet applications  Adds desktop capabilities for Flex apps  Benefits  Total control of user experience  Browser to desktop consistency  Rich media capabilities  Network resilience  Desktop access to services45 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • AIR Stack ( Architecture ) Source: Adobe.com46 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Flex and Adobe AIR AIR-enabled Flex Capabilities  Native OS drag and drop support  Multi-windowed applications  Access to local file system  Local database storage (SQLite)  Complete rendering support for HTML content  Micro-phone access  Touch Screen capabilities .. more.. Flash Builder Support for AIR Development  Full code hinting and error reporting  Complete debugging and profiling support  Application packaging and signing47 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Flash Player and Adobe AIR Web Desktop48 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • 3D Components49 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • ILOG Elixir Ilog Elixir 3D OnlineDemo50 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Fusion Charts Fusion Online Demo51 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • amCharts AmCharts Online Demo52 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Flex Hero : Mobile Apps53 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Available Options Adobe Flash Builder - "Burrito“ Flex SDK “Hero”54 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • References & resources  Flex Developer Center http://www.adobe.com/devnet/flex/  Adobe® Flex™ 3 Language Reference http://livedocs.adobe.com/labs/flex3/langref/  Ryan’s Blog | http://blog.digitalbackcountry.com/  Flex Org | http://flex.org/  RIA Statistics | http://riastats.com/  O’Reily Develop RIA | http://www.developria.com/  Google Trends http://www.google.com/trends  Wikipedia RIA http://en.wikipedia.org/wiki/Rich_Internet_application55 | Introduction to Flex RIA | Talks @ Chennai Flex User Group
  • Thank you! Let’s Discuss . . . riahunter nathan5x Talks @ Chennai Flex User Group ( CFUG )56 | Introduction to Flex RIA | Talks @ Chennai Flex User Group