Juixe Techknow

I’ve been having a lot of fun programming Flex and ActionScript applications since I have discovered FlashDevelop. In this article, I will go through the motions to create a simple Flex demo application based on the primordial Hello, World. To get started, download and install FlashDevelop. Once you have FlashDevelop installed and configured with the latest release of the Flex SDK you are all set to create Flex applications.

FlashDevelop is a very good IDE for ActionScript and Flex applications. It is simple to use and familiar if you have used visual Studio. It might be lacking a few features like design view mode, but it does come with really smart code assist out of the box.

To get started create a new Flex 3 Project by clicking New Project from the Project menu.

For our Hello Flex example we are going to add a text field where you can enter your name. Once you enter your name, you press a Generate Greetings button to output a personalized greetings in a label. To help us visualize the task at hand, here is a screenshot of the sample Flex application…

To layout out the text field, button, horizontal rule, and label components involved I will use the Grid container. Here is the MXML markup to create the above GUI.

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Grid>
    <mx:GridRow >
      <mx:GridItem>
        <mx:Label text="Name"/>
      </mx:GridItem>
      <mx:GridItem>
        <mx:TextInput id="inputName"/>
      </mx:GridItem>
    </mx:GridRow>
    <mx:GridRow>
      <mx:GridItem colSpan="2">
        <mx:Button label="Generate Greetings"/>
      </mx:GridItem>
    </mx:GridRow>
    <mx:GridRow>
      <mx:GridItem colSpan="2">
        <mx:HRule width="200" />
      </mx:GridItem>
    </mx:GridRow>
    <mx:GridRow>
      <mx:GridItem colSpan="2">
        <mx:Label id="labelGreeting" />
      </mx:GridItem>
    </mx:GridRow>
  </mx:Grid>
</mx:Application>

The above MXML code will generate the GUI but at this point there will be no action taken when the Generate Greetings button is clicked. We first need to create a function that will execute when the button is pressed. Add the following ActionScript snippet right below the Application tag.

<mx:Script>
  <![CDATA[
    public function generateGreetings():void {
      labelGreeting.text = "Hello, " + inputName.text + "!";
    }
  ]]>
</mx:Script>

Notice that label identified as labelGreetings and the text input identified as inputName are referenced in the ActionScript code. Next, to get everything working we need to add the click event listner to the button. Modify the button to the following.

<mx:Button label="Generate Greetings" click="generateGreetings()" />

Hit F5 to build the project and execute, or open in your favorite browser, the index.html file under the bin.

Technorati Tags: flex, actionscript, flash, flashdevelop, gui