You may already have Eclipse installed from a previous project, so make sure that you check on that before attempting to install Eclipse. If you need to download Eclipse, navigate your Web browser to the Eclipse Foundation Web site at www.eclipse.org/downloads/, where you can get the latest stable version of Eclipse from the Eclipse downloads page, as shown in Figure A.5.

Figure A.5. The Eclipse downloads page on the Eclipse Foundation Web site

Once Eclipse has been installed, it's time to install the Flex plug-in. Start by running the setup file located on the DVD from the boxed version or the directory you created from the digital download. The setup file is named FB3_Plugin_Win.exe.

The only screen that's different in the Flex plug-in version is the one where you choose the existing copy of Eclipse (previously installed) on the machine, as shown in Figure A.6.

Figure A.6. Choose the location where you want Eclipse to be installed on your machine.

Follow the remaining screens to complete the install process. Once the plug-in is loaded, you're asked to install Flash Player, which is required to debug and test your applications.

Once Flash Player is installed, you're done. You can start Eclipse and then create a new Flex project by choosing New

This application involves simple Label and Button components that change a label when a user clicks a button. Start by creating a new Flex project by choosing File

The new project opens in the code editor, and you can start creating the code for the application. You should see the code from a default application in the editor, such as the following:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
      layout="absolute">
</mx:Application>

All the code you add must be inserted between the <mx:Application> tags shown above.

Start by adding the code for the Label component. This code adds a new label to the stage (where all your design components are placed in Flex) with some default text, which is replaced once the code is run:

<mx:Label width="300" id="lbl" text="A message will be here;
click the button" x="10" y="10"/>

Now add a Button to which you can attach an event handler to capture the event:

<mx:Button label="Update" click="changeLabel()" x="10" y="36"/>

The last portion of the code is the ActionScript that changes the label whenever a user clicks the Button component:

<mx:Script>

          <![CDATA[

                  private function changeLabel():void
                  {
                         lbl.text = "Hello from Flex 3!";
                  }

          ]]>

     </mx:Script>

The application is complete. If you switch over to the Design view, you see the Label and Button components, as shown in Figure A.7. You can now test the application in a browser by choosing Run

You've created your first Flex application. It's not the most useful of applications, but it allows you to see the most basic of applications built by using Flex.

Figure A.7. The Label and Button components on the stage in Flex

Now that you've tested the samples that came with the SDK, you can compile your own sample file to understand how to work with the SDK. Start by creating a new MXML file with this code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
      layout="absolute">

       <mx:Script>
               <![CDATA[

                      private function changeLabel():void
                      {
                             lbl.text = "Hello from Flex 3!";
                      }
              ]]>
     </mx:Script>

     <mx:Label width="300" id="lbl" text="A message will be here;
     click the button" x="10" y="10"/>
     <mx:Button label="Update" click="changeLabel()" x="10" y="36"/>

</mx:Application>

Save this new file as Sample.mxml to your desktop.

Now open a command prompt and then navigate to the desktop. Once you're on the desktop, you can run the dir or ls command to make sure that your mxml file is located there. Next, type the path to the mxmlc file located in the bin/directory of the Flex SDK you previously installed.

The mxmlc command accepts an argument that's the name of the mxml file you want to compile into a completed application:

flex_sdk_3inmxmlc Sample.mxml

After you run this command, you should see a sample.swf file appear on the desktop. This file is the compiled application. You can double-click this file, and it opens the application in a stand-alone Flash Player.

You've now created a Flex application by using the command-line tools and the open-source Flex SDK.