Flex 101 with Flash Builder 4 – Part 2

Hello World using Flash Builder 4

In this section, we will be developing a basic Hello World application. While the application does not do much, it will help you get comfortable with the Flash Builder IDE.

Launch the Flash Builder IDE. We will be creating a Flex Project. Flash Builder will help us create the Project that will contain all our files.

To create a new Flex Project, click on the File ? New ? Flex Project as shown below:

This will bring up a dialog in which you will need to specify more details about the Flex Project that you plan to develop. The dialog is shown below:

You will need to provide at least the following information:

  • Project Name: This is the name of your project. Enter a name that you want over here. In our case, we have named our project MyFirstFB4App.
  • Application Type: We can develop both a Web version and a desktop version of our application using Flash Builder. The web application will then run inside of a web browser and execute within the Flash Player plug-in. We will go with the Web option over here. The Desktop application runs inside the Adobe Integrated Runtime environment and can have more desktop like features. We will skip that option for now.
  • We will let the other options remain as is. We will use the Flex 4.0 SDK and currently we are not integrating with any Server side layer so we will leave that option as None/Other.

Click on Finish at this point to create your Flex Project. This will create a main application file called MyFirstFB4App.mxml as shown below.

We will come back to our coding a little later but first we must familiarize ourselves with the Flash Builder IDE.

Let us first look at the Package Explorer to understand the files that have been created for the Flex Project. The screenshot is shown below:

It consists of the main source file MyFirstFB4App.mxml. This is the main application file or in other words the bootstrap. All your source files (MXML and ActionScript code along with assets like images, and others should go under the src folder. They can optionally be placed in packages too.

The Flex 4.0 framework consists of several libraries that you compile your code against. You would end up using its framework code, components (visual and non-visual) and other classes. These classes are packaged in a library file with an extension .swc. A list of library files is shown above. You do not need to typically do anything with it.

Optionally, you can also use 3rd party components written by other companies and developers that are not part of the Flex framework. These libraries are packages as .SWC files too and they can be placed in the libs folder as shown in the previous screenshot.

The typical step is to write and compile your code—build your project. If your build is successful, the object code is generated in the bin-debug folder. When you deploy your application to a Web Server, you will need to pickup the contents from this folder. We will come to that a little later. The html-template folder contains some boiler-plate code that contains the container HTML into which your object code will be referenced. It is possible to customize this but for now, we will not discuss that.

Double-click MyFirstFB4App.mxml file. This is our main application file. The code listing is given below:

<?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/halo"
	           minWidth="1024" minHeight="768">

</s:Application>

As discussed before, you will typically write one or more MXML files that will contain typically your visual components (although there can be non-visual components also). By visual components, we mean controls like button, combobox, list, tree, and others. It could also contain layout components and containers that help you layout your design as per the application screen design.

To view what components, you can place on the main application canvas, select the Design View as shown below:

Have a look at the lower half of the left pane. You will see the Components tab as shown below, which would address most needs of your Application Visual design.

Click on the Controls tree node as shown below. You will see several controls that you can use and from which, we will use the Button control for this application.

Simply select the Button control and drag it to the Design View Canvas as shown below:

This will drop an instance of the Button control on the Design View as shown below:

Select the Button to see its properties panel as shown below. Properties Panel is where you can set several attributes at design time for the control. In case the Properties panel is not visible, you can get to that by selecting Window ? Properties from the main menu.

In the Properties panel, we can change several key attributes. All controls can be uniquely identified and addressed in your code via the ID attribute. This is a unique name that you need to provide. Go ahead and give it some meaningful name. In our case, we name it btnSayHello.

Next we can change the label so that instead of Button, it can display a message for example, Say Hello. Finally we want to wire some code such that if the button is clicked, we can do some action like display a Message Box saying Hello World.

To do that, click the icon next to the On click edit field as shown below. It will provide you two options. Select the option for Generate Event Handler.

This will generate the code and switch to the Source view. The code is listed below for your reference.

<?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/halo"
	minWidth="1024" minHeight="768">

<fx:Script>
  <![CDATA[
    protected function btnSayHello_clickHandler(event:MouseEvent):void
    {
      // TODO Auto-generated method stub
    }
  ]]>
</fx:Script>

  <s:Button x="17" y="14" label="Button" id="btnSayHello"
         click="btnSayHello_clickHandler(event)"/>

</s:Application>

There are few things to note here. As mentioned most of your application logic will be written in ActionScript and that is exactly what Flash Builder has generated for you. All such code is typically added inside a scripting block marked with the <fx:Script> tag. You can place your ActionScript methods over here that can be used by the rest of the application.

When we clicked on Generate Event Handler, Flash Builder generated the Event Handler code. This code is in ActionScript and was appropriately placed inside the <fx:Script> block for us.

If you look at the code, you can see that it has added a function that is invoked when the click event is fired on the button.

The method is btnSayHello_clickHandler and if you notice it has an empty method that is, no implementation.

Let us run the application now to see what it looks like. To run the application, click on the Run icon in the main toolbar of Flash Builder.

This will launch the web application as shown below. Clicking the Say Hello button will not do anything at this point since there is no code written inside the handler as we saw above.

To display the MessageBox, we add the code shown below (Only the Script section is shown below):

<fx:Script>
  <![CDATA[
    import mx.controls.Alert;

    protected function btnSayHello_clickHandler(event:MouseEvent):void
    {
	Alert.show("Hello World");
    }
  ]]>
</fx:Script>

We use one of the classes (called Alert) from the Flex framework. Like any other language, we need to specify which package we are using the class from so that the compiler can understand it. The Alert class belongs to the mx.controls package and it has a static method called show() which takes a single parameter of type String. This String parameter is the message to be displayed and in our case it is “Hello World“.

To run this, click Ctrl-S to save your file or File ? Save from the main menu. And click on Run icon in the main toolbar. This will launch the application and on clicking the SayHello button, you will see the Hello World Alert window as shown below.


Develop rich internet applications quickly and easily using Adobe Flex 3, ActionScript 3.0 and integrate with a Java backend using BlazeDS 3.2

  • A step-by-step tutorial for developing web applications using Flex 3, ActionScript 3.0, BlazeDS 3.2, and Java
  • Build efficient and seamless data-rich interactive applications in Flex using a combination of MXML and ActionScript 3.0
  • Create custom UIs, Components, Events, and Item Renders to develop user friendly applications
  • Build an end-to-end Flex e-commerce application using all major features of Flex covered throughout the book

Continue to Flex 101 with Flash Builder 4 – Part 3

About Bryan
Bryan Li has more than 10 years business consulting and project development experience with major corporate clients including Sony, Bank of Montreal, Bruce Power, etc. As a fan and advocate for RIA(Rich Internet Application) technologies, Bryan helps companies and developers learn, design, and build richer applications using Adobe Flex.