Flex 3 with Java: Develop rich internet applications quickly and easily using Adobe Flex 3, ActionScript 3.0 and integrate with a Java backend using BlazeDS 3.2

Flex SDK comes in different types such as licensed Free Adobe Flex SDK (with a mixture of open source and closed open source components) and open source Flex SDK. The latter package contains entirely open source components under the Mozilla Public License version 1.1 (MPL) agreement, which includes its binaries. To know more about the available types of SDKs, visit http://opensource.adobe.com/wiki/display/flexsdk/Downloads. In this chapter, I will cover open source Flex SDK as an example.

In order to install Flex 3 SDK, download the latest open source SDK from Adobe's web site at http://opensource.adobe.com/flex/. Adobe is continuously working on improving and fixing bugs in Flex SDK and they release nightly builds on a regular basis. You can download them from http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3 and install them in order to stay updated with the latest feature and bug fixes in Flex 3 SDK.

<?xml version="1.0"?>
<componentPackage>
<component id="HelloLabel" class="usa.hello.HelloLabel"/>
<component id="NamasteLabel" class="ind.namaste.NamasteLabel"/>
</componentPackage>

<local:HelloLabel label="Hello!"/>

java.args=-Xms256m -Xmx512m

Flex SDK is bundled with two command-line compiler tools—one for compiling component library SWC files and the other for compiling executable Shockwave Flash (SWF) files.

The SWC files are Flex component archive files that include compiled binaries and embedded assets of a component. The SWC files can be referenced by Flex application as the external library of component definition. You can think of SWC files as JAR files in Java. To read more about the SWC format, visit http://livedocs.adobe.com/flex/3/html/help.html?content=building_overview_5.html.

The SWF files are complied binaries of Flex application. Think of these files as executables of the Flex applications which are executed by Flash Player either inside the Internet browsers or standalone Flash Player. To read more about the SWF file, visit http://www.adobe.com/devnet/swf/.

compc -namespace http://www.mynamespace.com manifest.xml
-source-path .
-include-namespaces http://www.mynamespace.com
-include-classes com.mycomponents.Component1 com.mycomponents.Component2
-include-file icon.png mx/containers/icon.png
-output=bin/MyComponents.swc

mxmlc -library-path+=..../MyLibraries/bin/Main.mxml

Flex Builder is the official IDE for creating Flex applications, and as I mentioned earlier, it is built on the Eclipse platform. Flex Builder provides very powerful coding tools, such as MXML, ActionScript, and CSS editors with syntax coloring and hinting, statement completion, code collapse, interactive step-through debugging, code profiling; and very importantly, a rich visual-designing user interface layout, and more.

Later in this book, I will be using this Flex Builder IDE for demonstrating Flex code examples.

Also, make a note that if you are installing Flex Builder 3, then you need not install Flex SDK separately because Flex Builder 3 installs Flex SDK automatically as a part of its installation. You will learn more about the directory structure that the installer creates when you install Flex Builder in Flex Builder installation directory structure section.

Unlike the open source Flex SDK, Flex Builder is a licensed product from Adobe which you need to buy. But you can download a 60-day evaluation copy from Adobe's web site at http://www.adobe.com/go/flex_trial. Flex Builder 3 is available on Windows, Mac OS, and Linux operating systems.

Flex Builder comes with two different installation options. They are:

Flex Builder 3 installation consists of the following main components:

Now, assuming that you have downloaded Flex Builder 3 and are ready for installation, follow these steps. Please note that depending on which operating system you use, these steps will change. So please refer to the Adobe installation documentation at http://www.adobe.com/support/documentation/en/flex/3/releasenotes_flex3_fb.html#installation for installing it on Mac OS or Linux. There is only a one-step difference between installing Flex Builder as an Eclipse plugin and a standalone. I have combined installation steps for both into the following tutorial.

Start the installation by double-clicking on the downloaded file. A program, InstallAnywhere, should start. It may take a few minutes before the first screen appears. It is a good idea to close any running Windows applications (especially browser applications) because Flex Builder will install Flash Player 9 or higher.

The first screen will prompt you to choose a language. Choose the appropriate language from the drop-down list and click on the OK button to proceed.

The introduction screen will be displayed. Click on Next.

The next screenshot is the license agreement screen. Read the agreement, select the I accept the terms of the License Agreement option, and click on the Next button, as shown in the following screenshot:

Now you need to choose the installation folder. Click the Choose button to choose anything other than the default location. Now click on Next to proceed, as shown in the following screenshot:

The next screen will appear only if you are installing Flex Builder as an Eclipse plugin. In this step, you need to choose the existing Eclipse installation root folder so that the installation wizard can configure the Flex Builder plugin. This works only with Eclipse 3.2 or higher versions. Please skip this step if you are installing Flex Builder as a standalone version.

The next screen is an optional installation, but it is a quite important step because it prompts you to install the debug version Flash Player in each of your installed browsers on your computer. Installing the debug version of Flash Player is very important in order to use Flex Builder's debugger to debug Flex applications. So, for now, we will continue with the default selection and allow the install wizard to install the debug version of Flash Player. We will skip other optional components in this tutorial, so click on Next to proceed.

The following screen details the pre-installation summary of your selections throughout this install wizard. Just confirm that the details are correct and click on the Install button to begin the installation process.

The next screen shown notifies the user of the installation's progress. The install wizard will install all necessary files on your system, including Java Runtime Environment. This may take a while, so please be patient.

Once the installation is finished, you can launch Flex Builder 3 from Windows | Program Files | Adobe | Flex Builder 3.

Before we start using Flex Builder 3, let's have a quick look at its directory structure. The installer creates the following directory structure:

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.

In this chapter, you learned how to install and configure Flex 3 SDK and Flex Builder 3 on the Windows platform. You also learned about creating a Flex project and the various views available in the Flex perspective.

In the next chapter, you will learn about general Flex application architecture and MXML language. You will also start writing your first Flex program.