Introduction to Adobe Flex
1 like1,027 views
Flex is a software development kit used to create rich internet applications that can run on browsers, desktops, and mobile devices. It uses MXML and ActionScript languages. Flex applications are compiled into SWF files and require the Flash Player or Adobe AIR runtime to execute. The Flex SDK contains libraries, compilers and optional tools like Flash Builder IDE.
![ 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](https://image.slidesharecdn.com/introductiontoflex-121109121158-phpapp01/85/Introduction-to-Adobe-Flex-14-320.jpg)
![ 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](https://image.slidesharecdn.com/introductiontoflex-121109121158-phpapp01/85/Introduction-to-Adobe-Flex-15-320.jpg)
Introduction to Adobe Flex
- 1. Introduction to Flex Presented By Angelin ANGELIN
- 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. 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. ANGELIN
- 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 applications ANGELIN
- 6. Flex Builder is available as a plugin to Eclipse and as a standalone software. ANGELIN
- 7. Compiler ◦ The compiler is available both as a standalone utility in the Flex SDK and as part of Adobe Flex Builder software. Debugger ANGELIN
- 8. ANGELIN
- 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. 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 runtime ANGELIN
- 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. 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. 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. 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. ◦ 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. 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. 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=”calculateTax.as”> Import ActionScript classes ANGELIN
- 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 is ANGELIN uploaded on to the web server, where it is then made available based on user request.
- 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 browser ANGELIN
- 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. ANGELIN
- 23. ANGELIN
- 24. ANGELIN
- 25. ANGELIN
- 26. ANGELIN
- 27. ANGELIN
- 28. ANGELIN
- 29. Source View of MXML Application ANGELIN
- 33. Viewing the set Style ANGELIN
- 37. Deploying Project to Server ANGELIN
- 38. Deploying Project to Server (Contd..) ANGELIN
- 39. Running the Flex Application ANGELIN
- 40. Flex Application on Browser ANGELIN
- 41. ANGELIN