In this chapter, you will learn how to install and configure Basic Flex 3.0 SDK (Software Development Kit) and Flex Builder 3. The Adobe Flex SDK contains everything you need to build and deploy Flex Rich Internet applications (RIAs). You can write Flex programs typically using any freely available text editing tools, such as Notepad, TextPad, or any Integrated Development Environment (IDE) of your choice. Adobe provides a specialized IDE for developing and designing Flex applications known as Flex Builder. Flex Builder is built on top of Eclipse platform. So if you are familiar with the Eclipse development paradigm, it will be very easy for you to use Flex Builder.
Although you do not need Flex Builder to write and compile Flex applications, Flex Builder does facilitate development with powerful tools, such as debugger, profiler, and visual designer apart from what the Eclipse platform offers you.
I prefer using Flex Builder 3, since I use Eclipse a lot for my Java development and I have installed Flex Builder 3 as a plugin to my Eclipse IDE.
I am assuming that you have prior knowledge of installing and configuring software packages on the Windows platform. In this chapter, I will explain how to install Flex Builder 3 on Windows. Mac and Linux users should visit Adobe's web site at http://www.adobe.com/support/documentation/en/flex/3/releasenotes_flex3_fb.html for installation instructions.
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.
Note
At the time of writing this book, Adobe was actively working on Flex 4, code named Gumbo. For more information, you can visit http://opensource.adobe.com/wiki/display/flexsdk/Gumbo .
Once you have downloaded the latest SDK in a ZIP format, extract it at your desired location, for example, C:\Flex3.1_SDK. That's it; you are done with the Flex SDK's installation. Now before you jump into coding, let's first understand the Flex SDK's installation directory structure.
When you install Flex SDK, the installer creates the following directory structure under the installation directory:
|
Directory |
Description |
|---|---|
|
|
Contains the Flex Ant tasks, which provide a convenient way to build your Flex projects |
|
|
Contains ASDoc, a command-line tool that you can use to create API language reference documentation as HTML pages from the classes in your Flex application |
|
|
Contains the executable files, such as the |
|
|
Contains configuration files, such as |
|
|
Contains the library (SWC files); you use the files to compile your application |
|
|
Contains the localization resource files. |
|
|
Contains the Flex framework source code |
|
|
Contains the Runtime Shared Libraries (RSLs) for the Flex framework |
|
|
Contains the theme files that define the basic look and feel of all Flex components |
|
|
Contains JAR files |
|
|
Contains the standard and debugger versions of Adobe ® Flash® Player and the Adobe® AIR™ components |
|
|
Contains sample applications |
|
|
Contains template HTML wrapper files |
In order to compile your Flex application, you need to set your bin folder in the Windows PATH environment variable under your System settings, so that you can use mxmlc and compc compilers from your project root folder.
There are a couple of important configuration files that you need to be aware of before you start using SDK. They are as follows.
The flex-config.xml file defines the default compiler options for the compc and mxmlc command-line compilers. You can set and tweak many compiler- and application-related configuration parameters in the flex-config.xml file located under the sdk_install_directory/frameworks/ folder such as namespaces, library path, accessibility, and locale for application internationalization.
All of the Flex component names are defined in the mxml-manifest.xml file. This manifest file maps Flex component namespaces to class names with complete package names. This is similar concept as XML namespaces. The mxml-manifest.xml file is used to avoid element name conflicts and it also helps in organizing your source files. Don't worry about these files right now. You will learn more about them and their usage in a better manner further in the book.
Example:
<?xml version="1.0"?> <componentPackage> <component id="HelloLabel" class="usa.hello.HelloLabel"/> <component id="NamasteLabel" class="ind.namaste.NamasteLabel"/> </componentPackage>
In a manifest file, the id property of each<component> tag must be unique. That id is the name you use for the tag in your Flex applications, for example:
<local:HelloLabel label="Hello!"/>
You will learn more about how to use namespaces in Chapter 2 of this book.
The Flex compiler requires Java Runtime Environment (JRE) to compile Flex source code; configuring Java Virtual Machine (JVM) parameters can actually result in much faster and optimized compilation in some cases. Without JRE you cannot use Flex compilers, such as mxmlc and compc.
You can configure JVM settings in the jvm.config file, which is typically located under the sdk_install_dir/bin folder. The most common JVM configuration you may ever need is the JVM heap size. The Java heap is the amount of memory reserved for a particular JVM instance for faster performance; for example:
java.args=-Xms256m -Xmx512m
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.
Note
At the time of writing this book, Adobe was actively working on Flex 4, code named Gumbo. For more information, you can visit http://opensource.adobe.com/wiki/display/flexsdk/Gumbo .
Once you have downloaded the latest SDK in a ZIP format, extract it at your desired location, for example, C:\Flex3.1_SDK. That's it; you are done with the Flex SDK's installation. Now before you jump into coding, let's first understand the Flex SDK's installation directory structure.
When you install Flex SDK, the installer creates the following directory structure under the installation directory:
|
Directory |
Description |
|---|---|
|
|
Contains the Flex Ant tasks, which provide a convenient way to build your Flex projects |
|
|
Contains ASDoc, a command-line tool that you can use to create API language reference documentation as HTML pages from the classes in your Flex application |
|
|
Contains the executable files, such as the |
|
|
Contains configuration files, such as |
|
|
Contains the library (SWC files); you use the files to compile your application |
|
|
Contains the localization resource files. |
|
|
Contains the Flex framework source code |
|
|
Contains the Runtime Shared Libraries (RSLs) for the Flex framework |
|
|
Contains the theme files that define the basic look and feel of all Flex components |
|
|
Contains JAR files |
|
|
Contains the standard and debugger versions of Adobe ® Flash® Player and the Adobe® AIR™ components |
|
|
Contains sample applications |
|
|
Contains template HTML wrapper files |
In order to compile your Flex application, you need to set your bin folder in the Windows PATH environment variable under your System settings, so that you can use mxmlc and compc compilers from your project root folder.
There are a couple of important configuration files that you need to be aware of before you start using SDK. They are as follows.
The flex-config.xml file defines the default compiler options for the compc and mxmlc command-line compilers. You can set and tweak many compiler- and application-related configuration parameters in the flex-config.xml file located under the sdk_install_directory/frameworks/ folder such as namespaces, library path, accessibility, and locale for application internationalization.
All of the Flex component names are defined in the mxml-manifest.xml file. This manifest file maps Flex component namespaces to class names with complete package names. This is similar concept as XML namespaces. The mxml-manifest.xml file is used to avoid element name conflicts and it also helps in organizing your source files. Don't worry about these files right now. You will learn more about them and their usage in a better manner further in the book.
Example:
<?xml version="1.0"?> <componentPackage> <component id="HelloLabel" class="usa.hello.HelloLabel"/> <component id="NamasteLabel" class="ind.namaste.NamasteLabel"/> </componentPackage>
In a manifest file, the id property of each<component> tag must be unique. That id is the name you use for the tag in your Flex applications, for example:
<local:HelloLabel label="Hello!"/>
You will learn more about how to use namespaces in Chapter 2 of this book.
The Flex compiler requires Java Runtime Environment (JRE) to compile Flex source code; configuring Java Virtual Machine (JVM) parameters can actually result in much faster and optimized compilation in some cases. Without JRE you cannot use Flex compilers, such as mxmlc and compc.
You can configure JVM settings in the jvm.config file, which is typically located under the sdk_install_dir/bin folder. The most common JVM configuration you may ever need is the JVM heap size. The Java heap is the amount of memory reserved for a particular JVM instance for faster performance; for example:
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/.
You use the component compiler to generate SWC files from component source files and other asset files, such as images and stylesheets. The SWC files are more like the .jar files in Java. They are typically used as library files in a Flex project.
This is the general compc syntax:
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
Note
Type the preceding command on a single line. It appears here on multiple lines for the sake of clarity.
You can use the -namespace and -include-namespaces options to include any number of components. This can keep the command line from being untidy.
The source-path option includes the current directory in the source path. This is how compc finds the various classes that are listed in the include-classes option.
The output option specifies the output location of the SWC file. In this case, compc writes the MyComponents.swc file to a folder named bin.
The include-classes option specifies the classes that you want to include in the SWC file. The compc component compiler is typically used in Flex for creating an external components library that can be referenced into Flex application or for creating Runtime Share Libraries, and so on. This is different from the mxmlc application compiler, which generates a Flex application executable.
You use the mxmlc application compiler to compile your Flex application source into an SWF binary file. The SWF files are executables of the Flex application that are executed into Flash Player. You can use the SWC files generated by component compiler, that is compc, when compiling MXML files. You typically use the library-path option to specify which SWC files the application uses.
This is the general mxml syntax:
mxmlc -library-path+=..../MyLibraries/bin/Main.mxml
The -library-path option includes the SWC files from the MyLibraries/bin folder for referencing any component referenced inside Main.mxml. For example, if Main.mxml is referencing any component which is part of the MyComponents.swc file, then you will need to include MyComponents.swc into the -library-path option. This is similar to what you do by including JAR files in -classpath while compiling the Java source.
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 as a standalone IDE: This option installs Flex Builder as a standalone IDE with only the Flex perspective. So if you need to work on a Java project, go for Flex Builder plugin installation on top of Eclipse or install JDT (Java Development Tools) in Flex Builder to support Java development. You can download JDT from http://www.eclipse.org/jdt/.
Flex Builder as an Eclipse plugin: This option installs Flex Builder as an Eclipse plugin on an existing Eclipse IDE. Before installing it, you must first install Eclipse 3.2, or higher. So make sure you have done that.
Note
An Eclipse perspective is a collection of windows/views and a mechanism of providing task-oriented interactions in the IDE that are associated with a particular programming language.
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.
Note
Adobe has a unique program called Free Flex Builder Pro for Education, where students and faculties can get a free licensed copy of Flex Builder 3 Professional. In order to register for this program, please visit http://www.adobe.com/products/flex/faq/#section-4.
Before we start using Flex Builder 3, let's have a quick look at its directory structure. The installer creates the following directory structure:
|
Directory |
Description |
|---|---|
|
|
The top-level directory for Flex Builder |
|
|
A standard Eclipse folder that contains the |
|
|
A standard Eclipse folder that contains the plugins corresponding to the features of Flex Builder |
|
|
Contains Java Runtime Environment installed with Flex Builder, used by default when you run the standalone version of Flex Builder |
|
|
Contains the different versions of Flash Player—the standard version and the debugger version |
|
|
Contains the Eclipse plugins used by Flex Builder |
|
|
Contains the different Flex SDKs for a directory description |
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.
Note
For more information on different server types and configuration, visit http://livedocs.adobe.com/flex/3/html/index.html?content=Part1_Using_FB_1.html.
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.
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.
Flex LiveDocs can be accessed from http://livedocs.adobe.com/flex/3/langref/index.html, or it can be downloaded from http://livedocs.adobe.com/flex/3/flex3_documentation.zip for offline use.
When you install Flex Builder, it also installs all documentation and language reference along with it for offline use and contextual help purpose. To access language reference from Flex Builder, press the Shift+F2 key combination. This will launch offline LiveDocs.
This documentation contains ActionScript and MXML language references in the HTML and PDF format. The language reference format is similar to JavaDoc, so it will be familiar to Java developers. LiveDocs covers very brief API information for MXML and ActionScript along with good examples wherever it is applicable.
I suggest you read this documentation for in-depth API-level information. You can also find many other related tutorials and documentations at http://livedocs.adobe.com/flex/3/.
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.
