Basic MXML tutorial

Basic MXML Tutorial

Basic MXML tutorial
This is a short and basic tutorial showing how to create and run a first simple MXML application. Step
by step it explains how to prepare Eclipse in case of creating a MXML or ActionScript project with
Eclipse for the first time. Afterwards you will create your first MXML project and therein a entity of a
button. At last, it is shown how to run your new MXML application

Preparing the workbench

Before creating your first MXML project, both the FlexSDK and the Adobe Flash Debug Player have to
be installed and the installation directories should be related to FDT. The FlexSDK can be found
under http://www.adobe.com/products/flex/downloads/. Make sure that the SDK and not the
FlexBuilder is installed. Be aware that it is not possible to use the FlexSDK that is delivered with the
FlexBuilder.

Creating your first project

There are several ways to set up a new MXML project within FDT. In the following example the Flash
Explorer is being used.

In order to set up a new MXML project, right click with your mouse in the Flash Explorer window and

choose "New->New Flash Project" out of the context menu.The appearing dialog is the "New Flash
Project" wizards supporting you in setting up your MXML project. Within the first step you have to
enter the project's name. In this example it will be "Test". If you like to change the project's location
you can unmark the corresponding check box and click "Browse" to select a new destination folder
for MXML project.

Furthermore, you have to specify the Flash language version. Herein you have to choose "Action

1
 Basic MXML Tutorial
Script 3" and Flex_3_SDK_0" as language version.

Please press "Finish" to continue.

Create your first MXML class

In order to create a first class the context menu of the Flash Explorer could be used.
Using the global buttons of Eclipse, however, is a little bit faster. First of all, select the
source folder "src" and click the button.
A dialog window appears helping you to create a new class. Name your class "MyApp".
The input box for "Superclass" is already pre-selected with "mx.core.Application".
Click on "Finish" and the new class is being created. An editor opens automatically
with the MXML template and the class appears in the Flash Explorer. Now you can
start with your first MXML application.

2
 Basic MXML Tutorial

Create your first MXML application

After setting up a new MXML project successfully you can go on with a first simple and basic
application - the creation of a button labeled with "My Button". Therefore, please enter the following
code line to your MXML Class "MyApp".

<mx:Button label="My Button" />

3
 Basic MXML Tutorial

In order to run your first application, please select the MXML file in the Flash Explorer and choose the
"Run AS...->FDT AS3 Application". This will generate a SWF in the project folder. Furthermore a
window appears containing your button.