The Flex Builder IDE is based on Eclipse and it’s a more productive environment compared to
programming with Flex in a text editor. This IDE comes in two flavors: a standalone version and
an Eclipse plug-in. You’ll have to choose one of these versions during the installation process. But
the standalone version of Flex Builder 2.0 doesn’t contain Java Development plug-ins, also known
as JDT (Java Development Tools). You need JDT to support Java projects, perspectives, etc., so we
recommend installing the plug-in version of Flex Builder on top of the pre-installed Eclipse 3.2.
During the Flex Builder install process, you’ll have to specify the directory where your Eclipse resides
(the one that has a sub-directory called plugins).
After Flex Builder is installed, start Eclipse, select the menus Window | Open Perspective | Other,
and open the Flex Development perspective. The Flex Debugging perspective will be automatically
added to the Eclipse IDE. The Flex Builder comes with great help content, which in the plug-in version
is located under the menu Help | Help Contents | Adobe Flex 2 Help or Help>Flex Start Page.
Yet Another Hello World
We’re not going to bore you with all the little details of the Eclipse-based Flex Builder, because
they’re covered pretty well in the product manual Using Flex Builder 2. You can also read the section
on Flex Builder using its help menu. We’d rather walk you through the process of creating a simple
Flex project with several basic applications. While building these applications, we’ll touch on various
areas of the Flex Builder’s workbench to give you a quick feel for the functionality.
Always start by creating a new project. Select the File>Flex Project menu item to open the New
Project wizard. The first decision you’ll have to make is to choose the way your application (in fact,
all the applications in this project) is going to access remote data:
CHAPTER 3 Flex Builder Development Environment
RIA WITH ADOBE FLEX AND JAVA 51
Figure 3.1 Creating the Flex project – project type selection
We’ll discuss Flex Builder’s project types later in this chapter in the section “Project Types and Data
Access.” Since we’re not going to use any server-side technology in this chapter, the Basic type
is our choice so just press the Next button. Now you’ll have to pick the name and location of the
project:
Figure 3.2 Naming the project
Once you’re done, click Next and, in the following screen, specify the name of the main application
file and output folder:
Flex Builder Development Environment
52 RIA WITH ADOBE FLEX AND JAVA
Figure 3.3 Naming the main application file
Enter HelloWorld.mxml as the name of the main application file. The compiled application will be
saved in the bin directory unless you specify another output folder. Click Finish to complete the
project creation.
After the project is created, you’ll see a screen similar to Figure 3.4 with the pre-generated file HelloWorld.
mxml.
CHAPTER 3
RIA WITH ADOBE FLEX AND JAVA 53
Figure 3.4 A new project has been created
The application may also include other MXML and ActionScript files with application logic as well
as images and other resources commonly referred to as “assets.”
Have you noticed the two tabs above the code editor? By default, FlexBuilder displays the source
code view, but since we have to design our HelloWorld screen, we’ll start working in the design
mode (as you become more experienced, you’ll be using the design mode mostly for quickly prototyping
your screen), so click on the Design tab and let the fun begin.
Figure 3.5 A design mode tab
Flex Builder Development Environment
54 RIA WITH ADOBE FLEX AND JAVA
In the middle of the screen in Figure 3.5 you’ll see how your future window will look. All folders
with predefined Flex components are located on the left: layouts, navigators, standard and custom
controls. Select the Label control, then drag-and-drop it onto the screen.
In the middle of the screen you can see canvas of the Application container. Available Flex framework
components (as well as custom ones that you develop for your project) are presented in the
tree view in the Components panel in the lower left. Select the Label control parented by Controls,
then drag-and-drop it onto the screen. Change the label’s text to “Hello, World!” Now, switch to the
Category View in the Flex Properties panel, located in the lower right corner of the screen. In the
Styles category set the fontSize to 22 and fontWeight to bold.
If you didn’t select a specific control prior to changing the font attributes, it would affect all the
controls of this window.
Figure 3.6 Drop the label component on the design panel
Now take a peek at the source tab. Flex Builder has generated a line similar to this one:
<mx:Label x=”41” y=”51” text=”Hello, World!” fontWeight=”bold” fontSize=”22”/>
and the entire application now looks like:
<?xml version=”1.0” encoding=”utf-8”?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
CHAPTER 3
RIA WITH ADOBE FLEX AND JAVA 55
<mx:Label x=”41” y=”51” text=”Hello, World!” fontWeight=”bold” fontSize=”22”/>
</mx:Application>
Listing 3.1 HelloWorld.mxml
Working with the Source Panel
Type the space anywhere inside the <mx:Label> tag and enjoy instant access to all the attributes
including fontSize and fontWeight:
Figure 3.7 Tag attributes code hinting
In fact, you could have just typed the letter “f” and the list of attributes would be conveniently limited
to the ones starting with “f.”
Similarly, were you to type “<mx:Bu”, you’d be prompted with all the MXML components that start
with “Bu”:
Figure 3.8 Code completion
Flex Builder Development Environment
56 RIA WITH ADOBE FLEX AND JAVA
As you can see, the Source Panel is as effective in creating and modifying MXML elements as the
Design Panel.
Running HelloWorld
Press the right mouse on the HelloWorld.mxml in the Navigator Panel on the upper left portion of
the screen. Select RunAs…>Flex Application and you should see a screen like this:
Figure 3.9 Running HelloWorld in a Web browser
Congratulations! Your first Flex Builder program is up and running.
Right-click inside this window. You’ll see the pop-up menu without the View Page Source option.
No wonder, your application has been compiled and launched inside the virtual machine called
Flash Player, that’s why you can’t see its source code. Actually, at the end of this chapter we’ll show
you how you can enable this View Source option and make your project’s source code available to
the general public.
But you can also open the bin directory, double-click on the Flash movie SWF file, and your Flash
player will run your program without the browser. Now the Flash Player will run your application
independently of the Web browser:
