In This Appendix
Downloading Flex and Flex Builder
Installing Flex Builder
Installing the Flex plug-in
Building a sample Flex application
Working with the Flex SDK
Before you can start using Flex, you need to install and configure it. There are three options for using Flex. First, you can use the stand-alone Flex Builder application, which is the IDE developed by Adobe, built on the Eclipse framework. Second, if you already use Eclipse, you can install the Flex plug-in, which gives you the same functionality in the editor that you already know. The third and final option is the Flex SDK (command line). The first two options require that you purchase a license from Adobe; the third option, SDK, is free. In fact, Flex (not the builder) is open source and allows the community to submit changes as well as publicly test the functionality. The general advantage of open source is a large support user base that's not restricted to Adobe professionals; the same is true for Flex.
Before installing the applications, let's take a look at some important points for each option.
Flex Builder:
Is the self-contained IDE
Was developed by Adobe specifically for Flex and ActionScript development
Has the ability to load third-party Eclipse plug-ins, such as SVN and debugging tools
Flex (Eclipse plug-in):
Leverages existing plug-ins and abilities within the stand-alone Eclipse IDE
Is maintained by the Eclipse group
Has the ability to integrate with Flex plug-ins and tools developed by Adobe
Flex SDK:
Is open source, allowing outside developers to modify and update the code
Offers a large user base of SDK developers to help you
Doesn't require you to purchase a license unless you intend to use the Data Visualization components
Offers command-line tools to help automate processes
Each option has its own benefits. The examples in this appendix use the Flex Builder option, developed and tested by Adobe, specifically with Flex and ActionScript as the focal points.
Now that you know about the three different options, let's look at how you go about installing and setting up each option. You start with the Flex Builder stand-alone application.
Flex and Flex Builder can be purchased from a computer store, from Amazon.com, or directly from the Adobe site as a digital download. Now that most homes and businesses have faster Internet connections, downloading is a good option and much faster than shipping a product. The only difference is that you don't get the box to put on your shelf.
To download Flex directly from Adobe, start by opening your browser and navigating to the Flex product page on the Adobe site: www.adobe.com/products/flex/
.
You see a link on the right side of the screen to purchase Flex. Click this link and then proceed with the on-screen options. Once you've purchased a license, a download link appears, which allows you to download a copy of Flex and Flex Builder. Save the file to a location you can remember.
The license normally is e-mailed to you after you purchase Flex. However, if you log in to the Adobe site, the license also appears in your recent purchases within your account.
Once you've downloaded the file, it's time to install Flex Builder. Follow these steps:
Navigate to the location on your computer where you saved the installation file and then double-click the FB3 Win
file to start the installation process. The installation screen, as shown in Figure A.1, opens.
Click OK to continue to the License Agreement screen, as shown in Figure A.2.
Read the license agreement, click the I accept the terms of the License Agreement radio button, and then click Next.
On the next screen, as shown in Figure A.3, choose the location where you want to install Flex Builder. Normally, you would use the default location. But you can also click Choose to open the Browse For Folder dialog box, as shown in Figure A.4, to pick a custom location. Click OK after choosing a new location.
Click Next to install Flex Builder.
Once the installation process completes, you're prompted to install Flash Player, which is used to debug your applications in Flex Builder. If you have Flash (IDE) installed, you probably already have Flash Player and can skip this step.
At this point, you have installed Flex. You can read on to learn how to install the plug-in version or jump to the end of this appendix to build a quick Flex application to make sure that everything is set up properly.
The Flex plug-in, which can be downloaded from Adobe or found on your Flex installation disc, requires that the third-party Eclipse application already be installed on your computer.
You may already have Eclipse installed from a previous project, so make sure that you check on that before attempting to install Eclipse. If you need to download Eclipse, navigate your Web browser to the Eclipse Foundation Web site at www.eclipse.org/downloads/
, where you can get the latest stable version of Eclipse from the Eclipse downloads page, as shown in Figure A.5.
For more on installing and configuring Eclipse, see Chapter 1.
Once Eclipse has been installed, it's time to install the Flex plug-in. Start by running the setup file located on the DVD from the boxed version or the directory you created from the digital download. The setup file is named FB3_Plugin_Win.exe
.
The only screen that's different in the Flex plug-in version is the one where you choose the existing copy of Eclipse (previously installed) on the machine, as shown in Figure A.6.
Follow the remaining screens to complete the install process. Once the plug-in is loaded, you're asked to install Flash Player, which is required to debug and test your applications.
Once Flash Player is installed, you're done. You can start Eclipse and then create a new Flex project by choosing New
Now that you've installed Flex, whether it's the stand-alone version or the plug-in, you need to test the installation by creating a sample application.
This application involves simple Label
and Button
components that change a label when a user clicks a button. Start by creating a new Flex project by choosing File
The new project opens in the code editor, and you can start creating the code for the application. You should see the code from a default application in the editor, such as the following:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> </mx:Application>
All the code you add must be inserted between the <mx:Application>
tags shown above.
Start by adding the code for the Label
component. This code adds a new label to the stage (where all your design components are placed in Flex) with some default text, which is replaced once the code is run:
<mx:Label width="300" id="lbl" text="A message will be here; click the button" x="10" y="10"/>
Now add a Button
to which you can attach an event handler to capture the event:
<mx:Button label="Update" click="changeLabel()" x="10" y="36"/>
The last portion of the code is the ActionScript that changes the label whenever a user clicks the Button component:
<mx:Script> <![CDATA[ private function changeLabel():void { lbl.text = "Hello from Flex 3!"; } ]]> </mx:Script>
The application is complete. If you switch over to the Design view, you see the Label
and Button
components, as shown in Figure A.7. You can now test the application in a browser by choosing Run
You've created your first Flex application. It's not the most useful of applications, but it allows you to see the most basic of applications built by using Flex.
The third option for using Flex is the open-source SDK. The SDK is provided by Adobe for free and allows a developer to run the entire process from the command line. This section describes how to obtain and install the SDK, as well as learn the basic process of creating a Flex application.
You need to use your own text editor to build applications by using the Flex SDK.
Before you can start developing Flex applications, you need to download the SDK. You can download the SDK from the open-source Adobe Web site: opensource.adobe.com/wiki/display/flexsdk/Downloads
.
On the downloads page, you see the latest Flex 3 releases as well as beta versions, which are less stable but offer more functionality. For this process, you should use a stable release, such as version 3.1. There are two options when downloading the SDK:
Free Adobe Flex SDK. This is the official product from Adobe, which comes with everything you need to build and deploy Flex applications.
Open Source Flex SDK. This package contains only the source code and doesn't include elements such as AIR or Flash Player, which aren't open source.
For the average developer who isn't looking to modify the core functionality of Flex, the Free Adobe Flex SDK version is the better choice. Click the link for this version to go to the Adobe downloads page, as shown in Figure A.8.
Click the link for the most stable version of the Flex SDK, read the license agreement, and then accept the terms by clicking the check box, which enables the download link.
When the download is complete, you can extract the SDK and then try out the samples located in the samples/
directory. If you navigate to the explorer application located in samples/explorer
, you see a build.bat
file. Double-click this file to open a command prompt and compile the SWF. Now when you look in the explorer
/ directory, you see the newly created SWF.
Run the HTML
file by double-clicking the Sample.html
file. Your default browser opens, displaying the sample explorer application.
Now that you've tested the samples that came with the SDK, you can compile your own sample file to understand how to work with the SDK. Start by creating a new MXML file with this code:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ private function changeLabel():void { lbl.text = "Hello from Flex 3!"; } ]]> </mx:Script> <mx:Label width="300" id="lbl" text="A message will be here; click the button" x="10" y="10"/> <mx:Button label="Update" click="changeLabel()" x="10" y="36"/> </mx:Application>
Save this new file as Sample.mxml
to your desktop.
Now open a command prompt and then navigate to the desktop. Once you're on the desktop, you can run the dir
or ls
command to make sure that your mxml
file is located there. Next, type the path to the mxmlc
file located in the bin/directory
of the Flex SDK you previously installed.
The mxmlc
command accepts an argument that's the name of the mxml
file you want to compile into a completed application:
flex_sdk_3inmxmlc Sample.mxml
After you run this command, you should see a sample.swf
file appear on the desktop. This file is the compiled application. You can double-click this file, and it opens the application in a stand-alone Flash Player.
You've now created a Flex application by using the command-line tools and the open-source Flex SDK.