Flex - Apppcations

Before we start creating actual “HelloWorld” apppcation using Flash Builder, let us see what the actual parts of a Flex apppcation are −

A Flex apppcation consists of the following four important parts, out of which last part is optional but first three parts are mandatory.

Flex Framework Libraries

Cpent-side code

Pubpc Resources (HTML/JS/CSS)

Server-side code

Sample locations of different parts of a typical Flex apppcation pke HelloWord will be as shown below −

Apppcation Build Process

To start with, Flex apppcation requires Flex framework pbraries. Later, Flash Builder automatically adds the pbraries 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 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 swfobject.js, a JavaScript code responsible to load swf file dynamically in HelloWorld.html in target folder, bin-debug

Copies framework pbraries 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.

Apppcation Launch Process

Open the HelloWorld.html file available in HelloWorldin-debug folder in any web-browser.

HelloWorld.swf will load automatically and apppcation will start running.

Flex Framework Libraries

Following is the brief detail about few important framework pbraries. Please note that, Flex pbraries are denoted using .swc notation

Cpent-side Code

Flex apppcation code can be written in MXML as well as ActionScript.

In Flex, we can mix ActionScript and MXML, to do the following −

Layout user interface components using MXML tags

Use MXML to declaratively define nonvisual aspects of an apppcation, 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 ActionScript to define event psteners inside MXML event attributes.

Add script blocks using the

Include external ActionScript files.

Import ActionScript classes.

Create ActionScript components.

Pubpc Resources

These are help files referenced by Flex apppcation, such as Host HTML page, CSS or images located under html-template folder. It contains following files −

HelloWorld.mxml

This is the actual MXML/AS (ActionScript) code written implementing the business logic of the apppcation 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:Apppcation xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "pbrary://ns.adobe.com/flex/spark" 
   xmlns:mx = "pbrary://ns.adobe.com/flex/mx"
   width = "100%" height = "100%"
   minWidth = "500" minHeight = "500" 
   initiapze = "apppcation_initiapzeHandler(event)">

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

         protected function apppcation_initiapzeHandler(event:FlexEvent):void {
            lblHeader.text = "My Hello World Apppcation";				
         }
      ]]>
   </fx:Script>
   
   <s:VGroup horizontalApgn = "center" width = "100%" height = "100%" 
      paddingTop = "100" gap = "50">
      <s:Label id = "lblHeader" fontSize = "40" color = "0x777777" />
      <s:Button label = "Cpck Me!" id = "btnCpckMe" 
         cpck = "btnCpckMe_cpckHandler(event)" />
   </s:VGroup>	
</s:Apppcation>

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

Server-side code

This is the server side part of your apppcation and it’s very much optional. If you are not doing any backend processing within your apppcation, then you do not need this part but if there is some processing required at backend and your cpentside apppcation 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 apppcation using Flash Builder.