This presentation is to give an 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

9. Visual Components
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

30. Adding Style
ANGELIN

31. Adding Style (Contd..)
ANGELIN

32. Adding Style (Contd..)
ANGELIN

33. Viewing the set Style
ANGELIN

34. Adding ActionScript
ANGELIN

35. Adding ActionScript (Contd..)
ANGELIN

36. Adding ActionScript (Contd..)
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