Introduction to Adobe Flex


Published on

This presentation is to give an introduction to Adobe Flex

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Introduction to Adobe Flex

  1. 1. Introduction to Flex Presented By AngelinANGELIN
  2. 2.  SDK ◦ A Software Development Kit (SDK) released by Adobe Systems.  Rich applications ◦ Used to develop rich applications that can run on the browser, desktop and mobile devices.  Runtime systems ◦ Flex applications run on the client either in a browser with Adobe Flash Player, on the desktop with Adobe AIR (Adobe Integrated Runtime) or on mobile devices.  Development Environment ◦ Flex applications can be written using Adobe Flash Builder (an Eclipse based development environment) or by using the freely available Flex compiler from Adobe.ANGELIN
  3. 3.  Technology ◦ Flex is a client side technology. ◦ Flex requires a server side technology like Live Cycle Data Services, Java, ASP.Net and PHP to provide it real time data.  Component-oriented programming ◦ Flex supports a component-oriented programming model that allows developers to easily assemble applications from hundreds of components and extend base components to create custom components and interactions.  SWF ◦ Flex applications are deployed as .swf files  Overall, Flex provides the framework, components and services to deliver rich internet applications.ANGELIN
  4. 4. ANGELIN
  5. 5. Flex product family comprises of four separate products:  Flex Software Development Kit (SDK) - The core component library, development languages, and compiler for Flex applications  Flex Builder IDE - An Eclipse-based development environment that includes code editors, visual layout tools, project management tools, and an integrated debugger  Flex Data Services - A Java server-based application that enables high-performance data transfer, cross-tier data synchronization and conflict management, and real-time data messaging  Flex Charting - A library of extensible charting components that enables rapid construction of data visualization applicationsANGELIN
  6. 6. Flex Builder is available as a plugin to Eclipse and as a standalone software.ANGELIN
  7. 7.  Compiler ◦ The compiler is available both as a standalone utility in the Flex SDK and as part of Adobe Flex Builder software.  DebuggerANGELIN
  8. 8. ANGELIN
  9. 9. Visual ComponentsANGELIN
  10. 10.  MXML (Macromedia XML) ◦ a declarative XML-based mark-up language ◦ used to declaratively lay out the user interface components of a Flex application and define their appearance and behaviors and other non- visual aspects of an application, such as access to data sources on the server and data bindings between user-interface components and data sources on the server.ANGELIN
  11. 11.  ActionScript ◦ an ECMA compliant object-oriented programming language (or procedural language) ◦ used to write programmatic logic for responding to both user-initiated and system-initiated events at runtimeANGELIN
  12. 12. All that is needed to develop an Adobe Flex application are  Flex Software Development Kit (SDK) (Required)  Knowledge of Action Script 3 and MXML (Required)  Flex builder IDE (Optional)  Adobe Flash player and/or Adobe AIR (Required)  Flex Data Services - LiveCycle Data Services or Blaze Data Services (Optional) ◦ BlazeDS is the server-based Java remoting and web messaging technology that enables developers to easily connect to back-end distributed data and push data in real-time to Adobe Flex and Adobe AIR applications for more responsive rich Internet application (RIA) experiences. BlazeDS is available free of cost for download. ◦ BlazeDS is a open source alternative to Adobe Live Cycle Data Services, which is the "official" solution to make the link between Java servlet container (Tomcat for example) and Flex. ◦ LiveCycle DS is similar to BlazeDS but provides a lot more features than BlazeDS.ANGELIN
  13. 13. A typical Flex project consists of  .mxml files with declared components,  .as files containing ActionScript code,  .swc files with compiled components,  .css files with presentation style information and  other assets like image files if needed. All of these components can be compiled into one .SWF (shock wave flash) file or a number of SWC (shock wave component) libraries and run in a browser with Flash Player or on the desktop with Adobe AIR or on mobile devices.ANGELIN
  14. 14.  MXML Application [<mx:Application>] ◦ Root tag of a Flex application ◦ Represents an Application container that contains other components. ◦ Default layout of its children - vertically from top to bottom.  MXML Component ◦ Each MXML file in a Adobe® Flex® is a separate MXML component. ◦ Custom components - Extend an existing Flex component by adding new functionality to it and making it reusable.ANGELIN
  15. 15.  MXML Module [<mx:Module>] ◦ Code that need not be compiled into main application SWF, but instead loaded when required. E.g. screens which user accesses very rarely or a set of libraries which need to be loaded when required. ◦ Modules are SWF files ◦ Modules are loaded and unloaded by an application at runtime with ModuleLoader, whereas MXML components are compiled into an application. ◦ Modules cannot be run independently of an application, but any number of applications can share them.ANGELIN
  16. 16. ◦ Why should Modules be used?  To reduce the load time of an application.  To reduce the size of the containing application file (.swf), since Modules are load as needed.  To improve performance - Modules can be unloaded when not needed or not being viewed.  To deliver incremental changes to a piece of an application (a Module) without deploying the entire app.  To potentially share a chunk of functionality across multiple applications.ANGELIN
  17. 17. The process of creating a basic Flex application consists of the following steps:  Define an application interface using a set of pre-defined visual components (i.e. Button, ComboBox, ListBox, DataGrid, etc)  Arrange components into an user interface design using Containers  Use styles and skins to define the visual design  Add dynamic behaviour (one part of the application interacting with another, for example) using ActionScript  Define and connect to data services as needed Only one MXML file should have the <mx:Application> tag; the rest of the MXML files usually start with other tags.ANGELIN
  18. 18. In Flex, you link MXML components with the ActionScript processing logic using one of the following methods:  Embed ActionScript code in mxml files using the tag <mx:Script>  Include external ActionScript files into mxml, for example: <mx:Script source=””>  Import ActionScript classesANGELIN
  19. 19.  During compilation the MXML code is translated into ActionScript code and then all this ActionScript code is compiled into binary SWF file. The SWF file isANGELIN uploaded on to the web server, where it is then made available based on user request.
  20. 20. When an application, say, HelloWorld.mxml, is compiled for the first time, the following freshly generated application-specific files can be found in the output folder:  HelloWorld.swf: The byte code (113Kb) ready to run in the Flash Player  HelloWorld.html: An HTML wrapper (5Kb) to run in the Web browser  HelloWorld-debug.swf: The byte code with debug information (180Kb) to run in the debug version of Flash Player (this version of the player is installed automatically with Flex Builder).  HelloWorld-debug.html: An HTML wrapper (5Kb) to run the debug version of HelloWorld.swf in the Web browserANGELIN
  21. 21. In the output directory, some files that are shared by all the applications from your project can also be found, which are:  AC_OETags.js: A bunch of JavaScript functions used by the HTML wrapper, i.e., the user’s Flash Player’s version detection  playerProductInstall.swf: A small (1Kb) used by the HTML wrapper to upgrade the user’s Flash Player plugin to version 9, if needed  history.* : The Flex’s implementation of the history functionality (7Kb total), similar to the history in Web browsers To deploy the application under a Web server, copy to the server all of the above files except the debug files and provide the user with the URL of the file HelloWorld.html.ANGELIN
  22. 22. ANGELIN
  23. 23. ANGELIN
  24. 24. ANGELIN
  25. 25. ANGELIN
  26. 26. ANGELIN
  27. 27. ANGELIN
  28. 28. ANGELIN
  29. 29. Source View of MXML ApplicationANGELIN
  30. 30. Adding StyleANGELIN
  31. 31. Adding Style (Contd..)ANGELIN
  32. 32. Adding Style (Contd..)ANGELIN
  33. 33. Viewing the set StyleANGELIN
  34. 34. Adding ActionScriptANGELIN
  35. 35. Adding ActionScript (Contd..)ANGELIN
  36. 36. Adding ActionScript (Contd..)ANGELIN
  37. 37. Deploying Project to ServerANGELIN
  38. 38. Deploying Project to Server (Contd..)ANGELIN
  39. 39. Running the Flex ApplicationANGELIN
  40. 40. Flex Application on BrowserANGELIN
  41. 41. ANGELIN