Flex - Applications

Before we start creating actual “HelloWorld” application using Flash Builder, let us see what the actual parts of a Flex application are −
A Flex application consists of the following four important parts, out of which last part is optional but first three parts are mandatory.
Flex Framework Libraries
Client-side code
Public Resources (HTML/JS/CSS)
Server-side code
Sample locations of different parts of a typical Flex application like HelloWord will be as shown below −
To start with, Flex application requires Flex framework libraries. Later, Flash Builder automatically adds the libraries to build path.
When we build our code using Flash builder, Flash builder will do the following tasks −
Compiles the source code to HelloWorld.swf file.
Compiles the source code to HelloWorld.swf file.
Compiles a HelloWorld.html (a wrapper file for swf file) from a file index.template.html stored in html-template folder
Compiles a HelloWorld.html (a wrapper file for swf file) from a file index.template.html stored in html-template folder
Copies HelloWorld.swf and HelloWorld.html files in target folder, bin-debug.
Copies HelloWorld.swf and HelloWorld.html files in target folder, bin-debug.
Copies swfobject.js, a JavaScript code responsible to load swf file dynamically in HelloWorld.html in target folder, bin-debug
Copies swfobject.js, a JavaScript code responsible to load swf file dynamically in HelloWorld.html in target folder, bin-debug
Copies framework libraries in form of swf file named frameworks_xxx.swf in target folder, bin-debug
Copies framework libraries in 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 target folder.
Copies other flex modules (.swf files such as sparkskins_xxx.swf, textLayout_xxx.swf) in target folder.
Open the HelloWorld.html file available in \HelloWorld\bin-debug folder in any web-browser.
Open the HelloWorld.html file available in \HelloWorld\bin-debug folder in any web-browser.
HelloWorld.swf will load automatically and application will start running.
HelloWorld.swf will load automatically and application will start running.
Following is the brief detail about few important framework libraries. Please note that, Flex libraries are denoted using .swc notation
playerglobal.swc
This library is specific to FlashPlayer installed on your machine and contains native methods supported by flash player.
textlayout.swc
This library supports the text layout related features.
framework.swc
This is the flex framework library contains the core features of Flex.
mx.swc
This library stores the definitions of mx UI controls.
charts.swc
This library supports the charting controls.
spark.swc
This library stores the definitions of spark UI controls.
sparkskins.swc
This library supports the skinning of spark UI controls.
Flex application code can be written in MXML as well as ActionScript.
MXML
MXML is an XML markup language that we'll use to lay out user interface components. MXML is compiled into ActionScript during build process.
ActionScript
ActionScript is an object-oriented procedural programming language and is based on the ECMAScript (ECMA-262) edition 4 draft language specification.
In Flex, we can mix ActionScript and MXML, to do the following −
Layout user interface components using MXML tags
Layout user interface components using MXML tags
Use MXML to declaratively define nonvisual aspects of an application, such as access to data sources on the server
Use MXML to declaratively define nonvisual aspects of an application, such as access to data sources on the server
Use MXML to create data bindings between user interface components and data sources on the server.
Use MXML to create data bindings between user interface components and data sources on the server.
Use ActionScript to define event listeners inside MXML event attributes.
Use ActionScript to define event listeners inside MXML event attributes.
Add script blocks using the  tag.
Add script blocks using the  tag.
Include external ActionScript files.
Include external ActionScript files.
Import ActionScript classes.
Import ActionScript classes.
Create ActionScript components.
Create ActionScript components.
These are help files referenced by Flex application, such as Host HTML page, CSS or images located under html-template folder. It contains following files −
index.template.html
Host HTML page, with place holders. Flash Builder uses this template to build actual page HelloWorld.html with HelloWorld.swf file.
playerProductInstall.swf
This is a flash utility to install Flash Player in express mode.
swfobject.js
This is the JavaScript responsible to check version of flash player installed and to load HelloWorld.swf in HelloWorld.html page.
html-template/history
This folder contains resources for history management of the application.
This is the actual MXML/AS (ActionScript) code written implementing the 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 as follows −
<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "library://ns.adobe.com/flex/spark" 
   xmlns:mx = "library://ns.adobe.com/flex/mx"
   width = "100%" height = "100%"
   minWidth = "500" minHeight = "500" 
   initialize = "application_initializeHandler(event)">

   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         protected function btnClickMe_clickHandler(event:MouseEvent):void {
            Alert.show("Hello World!");				
         }

         protected function application_initializeHandler(event:FlexEvent):void {
            lblHeader.text = "My Hello World Application";				
         }
      ]]>
   </fx:Script>
   
   <s:VGroup horizontalAlign = "center" width = "100%" height = "100%" 
      paddingTop = "100" gap = "50">
      <s:Label id = "lblHeader" fontSize = "40" color = "0x777777" />
      <s:Button label = "Click Me!" id = "btnClickMe" 
         click = "btnClickMe_clickHandler(event)" />
   </s:VGroup>	
</s:Application>
Following table gives the description of all the tags used in the above code script.
Application
Defines the Application container that is always the root tag of a Flex application.
Script
Contains the business logic in ActionScript language.
VGroup
Defines a Vertical Grouping Container which can contain Flex UI controls in vertical fashion.
Label
Represents a Label control, a very simple user interface component that displays text.
Button
Represents a Button control, which can be clicked to do some action.
This is the server side part of your application and it’s very much optional. If you are not doing any backend processing within your application, then you do not need this part but if there is some processing required at backend and your clientside application interacts with the server, then you will have to develop these components.
In the next chapter, we will use all the above-mentioned concepts to create a HelloWorld application using Flash Builder.

    21 Lectures 
     2.5 hours 

 DigiFisk (Programming Is Fun)

    12 Lectures 
     1 hours 

 Prof. Paul Cline, Ed.D

    87 Lectures 
     11 hours 

 Code And Create

    30 Lectures 
     1 hours 

 Faigy Liebermann

    11 Lectures 
     1.5 hours 

 Prof Krishna N Sharma

    32 Lectures 
     34 mins

 Prof Krishna N Sharma
 Print
 Add Notes
 Bookmark this page