Flex application

Before we get started with Flash Builder to create an actual HelloWorld application, let's look at the actual part of the Flex application. The Flex application consists of four important sections, the last of which is optional, but the first three are mandatory:

• Flex Framework Library

• The client code

• Public Resources (HTML / JS / CSS)

• Server-side code

Examples of different parts of HelloWord, a typical Flex application, are as follows:

The application build process

Flex applications require a Flex framework library. /b10> Flash Builder automatically adds libraries to the build path.

When we build code with Flash Builder, Flash Builder does the following

• Compile the source code into a HelloWorld .swf file.

• Compile HelloWorld files (wrapped files for swf files.html) from files stored in the html-template folder .html index.template)

• Copy the HelloWorld and HelloWorld .swf files in the .html folder, bin-debug.

• Copy the swfobject .js, a javascript code responsible for dynamically loading the swf file, bin-debug, in the HelloWorld .html in the target folder

• Copy the framework library frameworks_xxx.swf, bin-debug, as a swf file named "Swf" in the destination folder

• Copy other flex modules in the destination folder (.swf files, such as sparkskins_xxx.swf, textLayout_xxx.swf).

The application startup process

• Open helloWorld's file in any web browser in the HelloWorld's .html folder.

• HelloWorld .swf will load automatically and the application will start running.

Flex Framework Library

Here are a few brief details of the important framework libraries.

Use the .swc notation in the flex library

The client code

• Use MXML tags to lay out user interface components

• Use MXML to declare non-visual aspects of an application, such as accessing data sources on a server

• Use MXML to create data bindings between user interface components and data sources on the server.

• Use ActionScript to define event listeners in MXML event properties.

• Add a script block label with .lt; mx:Script.

• Includes external ActionScript files.

• Import the ActionScript class.

• Create actionScript components.

Public resources

These are secondary files referenced by Flex applications, such as Host HTML pages, CSS, or images located under the html-template folder. It contains the following files

HelloWorld.mxml

This is the actual Written MXML/ACTIONScript code that implements the business logic of the application, and the Flex compiler converts to a SWF file, which will be executed by the Flash player in the browser. The example HelloWorld Entry class would look like this:

<?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>

The following table gives a description of all the labels used in the above code script.

Server-side code

This is the server-side part of the application and is very optional. /b10>If you do not perform any back-end processing in your application, you do not need this section, but if the back-end requires some processing and your client application interacts with the server, you will have to develop these components.

The next chapter uses all of these concepts to create the Hello World application using Flash Builder.