If you are already using Eclipse IDE, then you are aware of a project definition. In Flex Builder 3, the same process is followed for creating a new Flex project. Let's start by creating one.

Select File | New to bring up options as shown in the following screenshot:

Select Flex Project, which will display the dialog box shown here:

In the Project name field, enter the name of your project. To change the location of your project (other than default), uncheck Use default location and choose a new location. Using Flex Builder, you can create desktop applications (that run in Adobe AIR) and web applications. In this book, we will be focusing on web applications, so leave the Application type as Web application (runs in Flash Player).

The Server technology section lets you select the Application server type. For example, if you are planning to use Java on the server side, then you can select J2EE as the application server type. This lets you create combined Java and Flex projects with output deployment configured on the server. Leave the application server type set to None for now.

The following screen lets you specify the Output folder for the compiled Flex application. Click on Next.

The next screen lets you select your source folder and sets a main application filename. By default, Flex Builder gives the application MXML file the same name as the project. You can change this if you want. Usually, a Flex project consists of one MXML file called the application file and several other components files. Don't worry too much about this now; just think of this as a Java file having a main() method, which is equivalent to the main entry point of the application. Click on Finish to create the project with these default settings.

Flex Builder will open a project as shown in the following screenshot:

Notice how the Flex Navigator view now contains all the necessary project files and folders. The Outline view shows the structure of the application, and you will see how this helps you while writing code later in this book. The right-side area, where code is displayed, is called the Editor view. Here you can write your MXML or ActionScript code.

UI designer and source code editor

Notice that the Editor view has two tabs in the top left corner of the window—Source and Design. The Source tab is obviously used to edit the source code and the Design tab will put you into a design perspective where you can design and layout your UI components by using drag-and-drop. You can switch between these two tabs while writing code and designing UI layout.

Click on the Design tab to bring up the design perspective as shown in the following screenshot:

Notice that in the design perspective, you see some views that you didn't see in the source perspective. For example, you see the Components view, States view, and Flex Properties view.

In the design perspective, we can create our application visually in much the same way as Microsoft's popular Visual Basic or Adobe's Dreamweaver.