Flex Applications - Adobe Flex

What are flex applications?

Before creating actual HelloWorld application using Flash Builder, let’s view the actual parts of a Flex application. Flex application consists of 4 important components out of which first 3 components are mandatory and the last one is optional:

  • Flex Framework Libraries
  • Client-side code
  • Public Resources (HTML/JS/CSS)
  • Server-side code

Sample locations of different components of a typical Flex application HelloWord are shown below:

Name

Location

Project root

HelloWorld/

Flex Framework Libraries

Build Path

Public resources

html-template

Client-side code

table table-bordered/com/wisdomjobs/client

Server-side code

table table-bordered/com/wisdomjobs/server

Application Build Process

Flex application needs Flex Framework libraries and Flash Builder automatically adds libraries to the build path.

While building code using Flash Builder, Flash builder performs below mentioned tasks

  • Flash builder can compile the source code to HelloWorld.swf file.
  • Flash builder can compile a HelloWorld.html (a wrapper file for swf file) from a file index.template.html stored in html-template folder.
  • Flash builder copies HelloWorld.swf and HelloWorld.html files in target folder, bin-debug.
  • Flash builder copies swfobject.js, a javascript code responsible for loading swf file dynamically in HelloWorld.html in target folder, bin-debug.
  • Copies framework libraries in the form of swf file named frameworks_xxx.swf in target folder, bin-debug.
  • Copies other flex modules (.swf files such as sparkskins_xxx.swf,textLayout_xxx.swf) in to the target folder.

flex architecture

Application Launch Process

  • Open the HelloWorld.html file available in \HelloWorld\bin-debug folder in any web-browser.
  • HelloWorld.swf automatically loads and application will start running.

Flex Framework Libraries

Following is the brief detail about few important framework libraries.

In flex, libraries are denoted using .swc notation

S.N.

Nodes & Description

1

playerglobal.swc

playerglobal.swc library is specific to FlashPlayer installed on your machine and includes native methods supported by flash player.

2

textlayout.swc

textlayout.swc library will support text layout related features.

3

framework.swc

framework.swc is the flex framework library which includes the core features of Flex.

4

mx.swc

mx.swc library will store the definitions of mx UI controls.

5

charts.swc

charts.swc library will support the charting controls.

6

spark.swc

spark.swc library will store the definitions of spark UI controls.

7

sparkskins.swc

sparkskins.swc library will support the skinning of spark UI controls.

Client-side code

Flex application code can be written in MXML and ActionScript.

S.N.

Type & Description

1

MXML

MXML is an XML markup language used to lay out user interface components. MXML is compiled into ActionScript during build process.

2

ActionScript

ActionScript is an object-oriented procedural programming language and is based on the ECMAScript (ECMA-262) edition 4 draft language specification.

In Flex, ActionScript and MXML can be mixed to do the following:

  • Lay out user interface components using MXML tags.
  • Use MXML for declaratively defining nonvisual aspects of an application, such as access to data sources on the server.
  • Use MXML for creating data bindings between user interface components and data sources on the server.
  • Use ActionScript for defining event listeners inside MXML event attributes.
  • Add script blocks using the <mx:Script> tag.
  • Include external ActionScript files.
  • Import ActionScript classes.
  • Create ActionScript components.

Public resources

Public resources are helper files which are referenced by Flex application, such as Host HTML page, CSS or images located under html-template folder. It contains below files

S.N.

File Name & Description

1

index.template.html

Host HTML page, with place holders. Flash Builder uses this template for building actual page HelloWorld.html with HelloWorld.swf file.

2

playerProductInstall.swf

playerProductInstall.swf is a flash utility used for installing Flash Player in express mode.

3

swfobject.js

swfobject.js is the javascript which is responsible for checking version of the flash player installed and to load HelloWorld.swf in HelloWorld.html page.

4

html-template/history

html-template/history folder contains resources for history management of the application.

HelloWorld.mxml

HelloWorld.mxml is the actual MXML/AS (ActionScript) code written by implementing business logic of the application and that the Flex compiler translates into SWF file which will be executed by flash player in the browser. A sample HelloWorld Entry class will be shown below:

Below table gives the description of all the tags used in the above code script.

S.N.

Node & Description

1

Application

Application defines the Application container which is always the root tag of a Flex application.

2

Script

Script consists of the business logic in ActionScript language.

3

VGroup

VGroup defines a Vertical Grouping Container which can contains Flex UI controls in vertical fashion.

4

Label

Label represents a Label control which is a very simple user interface component to displays text.

5

Button

Button represents a Button control, which can be clicked to do some action.

Server-side code

Server-side code is the server side part of the application and is optional. If you are not doing any backend processing in the application, then server side code is not needed. But if some backend processing is required and if your client-side application has to interact with the server, then these components should be developed.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Adobe Flex Topics