The most important part of Flex is the Flex framework, which is a collection of ActionScript 3.0 classes on top of which applications are built. When you hear developers talking about how Flex is great, they're usually talking about the Flex framework. It is the primary reason that application development is so quick and easy with Flex.

The Flex framework classes include UI components (buttons, data grids, and so on), layout containers, data formatting and validation libraries, and a whole lot more. The next chapter explores a number of parts of the Flex framework to give you a taste of what Flex is all about.

Flex is part of the Adobe Flash Platform, which is a collection of technologies with the Flash Player at its core. This means that users don't need to download yet another browser plug-in to view your applications—they just need the most up-to-date Flash Player. More than 90 percent of regular web users have a recent version of the Flash Player installed. That's more than enough to start developing Flex applications targeted at the wider Internet population (and not just us web geeks).

Targeting the Flash Player also means that your applications will be cross-platform out of the box, opening your application to audiences on Windows, Mac OS X, and Linux without you having to lift a finger. And that's nice.

One downside of the reliance of the Flash Player is that your applications will run within a security sandbox and won't be able to write to files on the local file system. For this reason, Flex applications tend to be distributed, where data is stored on a central server and accessed over the Internet. This need not dash any of your hopes of writing the next version of Microsoft Word as a Flex application, though. Adobe AIR provides a runtime environment for your Flex applications that has access to the local file system. See the "Adobe AIR" section coming up shortly for more information about this capability.

ActionScript 3.0 may well be perfect for providing the functionality of a Flex application, but it's not the ideal medium for creating UIs. If you've ever had to use the Document Object Model (DOM) in JavaScript to create HTML elements, you have some idea of how painful creating UIs using ActionScript 3.0 can be.

Thankfully, Flex includes an XML-based markup language called Multimedia Extensible Markup Language (MXML), which provides a structured way to define your UIs. You can think of MXML as the XHTML of the Flex world. In fact, the relationship between MXML and ActionScript is a direct correlation to the way XHTML and JavaScript work together. Further, MXML allows you to lay out your application and specify its various states, as well as how and when to transition between those states.

Having said all that, MXML is about more than just UIs. You can also include script and style blocks to determine the behavior and appearance of your applications. Script blocks can either contain ActionScript 3.0 code or link to external ActionScript 3.0 files. Style blocks use CSS syntax to define styles for interface controls, and like the script blocks, can either contain the style data or link to an external CSS file.

You can also create nonvisual objects that link to web services or other external data sources, and use the magic of data binding to render the data using the UI components included as part of the Flex framework. In fact, using the HTTPService class and data binding, you could create a Flex application that consumes a web service (such as a Flickr photostream) and display the data to the user without needing to write a single line of ActionScript 3.0 code!

Once you have your ActionScript 3.0 and MXML files, you'll need something to turn those files into an SWF file that can be loaded into the Flash Player. The Flex Software Development Kit (SDK) includes the entire Flex framework, the mxmlc compiler for compiling Flex applications, the compc compiler for compiling components, and a command-line debugger to help you root out problems in your applications.

The Flex SDK is free for both commercial and noncommercial purposes, and is available from the Adobe website (http://www.adobe.com/products/flex/sdk). It contains everything you need to start writing Flex applications today, and without spending a single penny. Now that's what I call a bargain.

Later in the chapter, in the "Building your first Flex application" section, you'll build a simple application using the Flex SDK so you can see how to use the compiler.

Creating and maintaining large applications using nothing but a text editor and the Flex SDK is perfectly acceptable, but it's not the most efficient use of your time.

Flex Builder is an integrated development environment (IDE), like Flash CS4. Flex Builder is specifically designed to help you build Flex applications more quickly and easily than if you were using the simple tools provided as part of the SDK. It includes a visual interface builder that makes it easy to create and edit the MXML files for your interfaces, a code editor that understands both MXML and ActionScript 3.0 code, and an integrated debugger to help you find and fix bugs within applications.

If you want to use Flex Builder, you'll need to purchase a license from Adobe, but you can download the free 30-day trial from http://www.adobe.com/products/flex if you just want to play around.

To demonstrate how much simpler it is to create applications with Flex Builder as opposed to the Flex SDK, you'll create the same application using both tools.

LiveCycle DS, formerly Flex Data Services (not to be confused with LiveCycle Enterprise Suite) is an enterprise-level product that makes it easy for your application to communicate with a central server and vice versa. Distributed RIAs (applications that store data on a central server) require a middle tier to act as an intermediary between the data store (probably a database) and the application itself, and LiveCycle DS helps fill this role.

The services that LiveCycle DS provides include data synchronization, automatic paging of results, the ability to push data from the server to the application, and collaborative features.

If you're interested in exploring Flex Data Services, you can download the free LiveCycle DS Express and find out more information about it on the Adobe website (http://www.adobe.com/products/flex/dataservices). There is also an open source counterpart to the LiveCycle technologies known as BlazeDS (http://opensource.adobe.com/wiki/display/blazeds/BlazeDS/).

The data services discussion is way out of scope for this introductory look at Flex. However, if you are seeking a more thorough explanation of these products, check out http://gregsramblings.com/2008/03/27/livecycle-ds-vs-livecycle-es-clearing-up-the-confusion/ or consider picking up a copy of The Essential Guide to Flex 3.

The final part of the Flex puzzle is Adobe AIR (the acronym stands for Adobe Integrated Runtime, and yes, that means its full title is the redundant Adobe Adobe Integrated Runtime), which is a cross-platform (Windows, Mac OS X, and Linux) runtime environment.

AIR allows you to build and deploy RIAs using a mixture of Flash CS4, Flex, HTML, JavaScript, and PDF files that can be installed and run from the user's desktop rather than their web browser. In addition to allowing RIAs to run on the desktop, an AIR application has full access to the local file system and is able to integrate with features of the host operating system such as the clipboard, windowing system, and the network API.

AIR is available for free, meaning that anyone can create desktop applications using Flex without spending any hard-earned cash. Consider it an early or late birthday present from Adobe (unless it's actually your birthday today, in which case, happy birthday).

The Flex SDK is available as a free download from the Adobe website. Go to http://www.adobe.com/products/flex/flexdownloads/ and click the Flex SDK link to download the Flex SDK.

Once the .zip file has downloaded, you'll need to extract the contents to a sensible location on your computer. The steps to do this differ greatly depending on which operating system you're using, so follow the steps under the appropriate heading in this section.

Windows XP/Vista

If you're using Windows XP or Vista, first extract the contents of the Flex SDK .zip file into a folder named flex in the root of your C: drive. Next, add the c:flexin directory to the system path, as follows:

1. From the Start menu, right-click My Computer and select Properties.

2. In the System Properties dialog box, select the Advanced tab, as shown in Figure 13-1. Click the Environment Variables button.

   

   Figure 13.1. The Advanced tab of the System Properties dialog box

3. Under System variables, scroll down the list until you find an entry for Path, select that entry, and then click the Edit button.

4. In the Edit System Variable dialog box, shown in Figure 13-2, scroll to the end of the text in the list box under System variables and add ;c:flexin to the end. Don't omit the semicolon at the beginning—it's used to separate multiple values for the Path variable, and without it you won't be able to use the mxmlc compiler.

5. Click OK in all the open dialog boxes to accept the changes you've made.

6. To test that everything worked, open the Command Prompt window by selecting Start

   

Figure 13.2. Adding the c:flexin directory to the system path

Figure 13.3. Verifying that mxmlc is installed on Windows XP/Vista

If you got a message saying that mxmlc is not a recognized command, try repeating the preceding steps.

After you have the Flex SDK installed, you'll need a text editor to edit the ActionScript 3.0 and MXML files. You have several options, depending on whether you're using Mac OS X or Windows as your operating system of choice.

If you're using Microsoft Windows, I suggest a great open source editor called FlashDevelop, which is designed specifically for working with Flash and Flex projects. Download it from http://www.flashdevelop.org. Be sure to download and configure the extras for ActionScript 3.0 and MXML code completion, as explained on the site.

For Mac OS X, I recommend SE|PY or Eclipse. Of the two, SE|PY offers a more robust toolset, similar to that of FlashDevelop. But because Eclipse is actually the technology Flex is built on, choosing Eclipse will allow you to make more advanced customizations to the interface.

As I mentioned earlier, you're going to create a simple application using the Flex SDK, and then re-create it later in the chapter using Flex Builder. It's worth following this tutorial through, even if you plan on using Flex Builder to create all your applications, because I'm going to cover some basic information about the Flex framework and MXML here that won't be repeated later.

The application you're going to create is a reader for the blog on the foundationAS3.com website. Oh, and you're going to do it without writing a single line of ActionScript code, just to show off how powerful MXML can be. The end result is going to look something like Figure 13-4.

Figure 13.4. The RSS reader you'll build

The layout has a table containing all the items from the RSS feed of the foundationAS3.com blog, with the summary of the selected item shown in the area below. The two areas are separated by a draggable divider, so that users can decide how much space they want to give to the listing and to the summary.

So, let's build the RSS reader.

Now that you've worked with the free Flex SDK, let's turn our attention to the commercial Flex IDE—Flex Builder.

Flex Builder is a powerful IDE for Flex applications, built on top of the Eclipse open development platform (http://www.eclipse.org). It's available both as a stand-alone application and as a plug-in for the Eclipse IDE. Unfortunately, this power means that Flex Builder isn't the easiest of applications to get comfortable with, although if you use Eclipse for other types of projects, using it for Flex will be a natural transition. If you have never used Eclipse, it can be a bit of a daunting environment. Thankfully, the first thing you see when you launch the application is the Flex Start Page, which contains links to samples and tutorials to get you started, as shown in Figure 13-5.

Figure 13.5. The Flex Start Page appears when you first start Flex Builder.

As I mentioned earlier, you're going to create the same RSS reader application as you just did with the Flex SDK but do it Flex Builder style. You'll still need to get your hands dirty with a bit of manual MXML authoring, but by the time you've finished this example, the benefits of having a fully integrated IDE over the simple SDK should be clear.

Creating a new Flex project

You begin by creating a new project in Flex Builder:

1. Select File

   

   The first screen of the wizard allows you to name your project and set the directory location of your project. You're also given the choice to create a Flex or an AIR application and select your desired server-side technology.

2. Enter RSSReader as the project name, as shown in Figure 13-6. Be sure to set Application Type to Web Application and Application Server Type to None. If you would like, use the Browse button to set your project's location to the default working directory for this book's projects. Click Next.

   

   Figure 13.6. Naming a new Flex project

   You could have also clicked Finish on the Create a Flex Project screen. This would have loaded a new Flex project with all of the default settings. However, for this example we will take the long route (well, it's not that long) to show you more options for setting up customized Flex projects.

   The first of these options, shown in Figure 13-7, allows you to select the output directory of your Flex project. The contents of this directory will ultimately be uploaded to a web server. For now, the default setting is sufficient.

   

   Figure 13.7. The Configure Output screen of the New Flex Project wizard

3. Click the Next button.

   The final screen in the New Flex Project wizard (see Figure 13-8) lets you set the build paths for your project. You can change many of your project's default settings:

   • The Source path tab allows you to define additional source paths to be used in your application. This will aid in the organization of projects, especially across teams.

   • The Library path tab allows you to link to additional programming libraries to be used in your application. For example, you may want to use a third-party ActionScript data processing library.

   • Main source folder is the source folder that exists within your application directory. This folder will contain most of the code files that you will work on with your project.

   • Main application file is the primary MXML file that is used for your project. Currently we have been using RSSReader.mxml. However, there are situations when you may want to change this.

   • Output folder URL allows you to set the remote location for output of your web application. This lets you output directly to the web server.

   

   Figure 13.8. Use this screen to set the build paths.

4. Click the Finish button to begin working on your Flex project.

You'll now see your new RSSReader project in the Navigator panel in the top left of the Flex Builder 3 interface, as shown in Figure 13-9.

The bin-debug directory is where the final SWF file will be stored, and that directory also contains a variety of SWF, JavaScript, and HTML files to make it easy for you to deploy your Flex applications with a minimum of fuss. The JavaScript and HTML files are generated from templates in the html-template directory.

The RSSReader.mxml file has been created and opened in the Source view of the MXML editor panel, as shown in Figure 13-9, ready for you to start building the application.

Figure 13.9. The RSSReader.mxml file open in Source view

Working in Design view

Click the Design button in the MXML editor panel to switch to Design view. This shows a general preview of what the project will look like when it is compiled, which for now is just a blue-gray background, as shown in Figure 13-10.

Figure 13.10. Initial Flex Builder project in Design view

The small bounding box with drag handles shows the item you currently have selected. Over on the right side are two new panels (see Figure 13-11):

Figure 13.11. The States and Flex Properties panels

• The States panel allows you to define a number of states for the UI of your application, so that you can alter the layout or content of your Flex application programmatically at runtime.

• The Flex Properties panel is like the Property inspector in Flash CS4, in that it displays the properties for whatever item you have currently selected in the MXML document and allows you to change their values.

Figure 13.12. The Components panel

You might also have noticed a new Components tab added to the same panel as the Outline tab on the left side of the Flex Builder interface, as shown in Figure 13-12. This contains an organized list of all the UI controls, containers, navigators, and other components that you can add to your Flex application.

Before you add any components to your application, you need to configure the main mx:Application container to lay out its children vertically:

1. In the Flex Properties panel under Layout, select vertical from the Layout drop-down list, as shown in Figure 13-13.

2. The first component you need to add to your application is a VDividedBox control, which is in the Layout folder on the Component tab. The VDividedBox control lays out items vertically with a drag bar between them, allowing the user to resize the height of the items. Select the VDividedBox entry and drag it over the blue-gray background box of the application preview in the center of the Flex Builder interface and then drop it. When you do this, you'll see a dialog box asking what size the VDividedBox should be, as shown in Figure 13-14.

   

   Figure 13.13. Setting the layout to vertical

   

   Figure 13.14. Inserting a VDividedBox component

3. Enter 100% for both width and height, and then click OK.

4. Next find the DataGrid control in the Controls folder in the Components panel and drag it onto the VDividedBox outline in the application preview. You should see a DataGrid component within the VDividedBox, as shown in Figure 13-15.

   

   Figure 13.15. Adding a DataGrid component

5. Using the Flex Properties panel, set the following properties of the DataGrid component (see Figure 13-16):

   • ID: entries

   • Data provider: {feed.lastResult.rss.channel.item}

   • Width: 100%

   • Height: 66%

   Don't worry about the fact that the DataGrid control has three columns and you only want two. There's no way to manipulate the columns of a data grid through the visual editor, so that's one of the things you'll need to handle manually later.

   

   Figure 13.16. Setting the DataGrid properties

6. Save your project. You will see an error listed in the Problems panel, as shown in Figure 13-17. It's complaining that it can't find a property named feed, which you referenced when setting the Data provider property for the DataGrid control. If you remember back to the Flex SDK example, feed is the ID of the HTTPService object. This is something else you can't solve in the visual view, since the HTTPService class is nonvisual.

   

   Figure 13.17. The Problems panel shows that a referenced property can't be found.

7. Drag a TextArea component onto the bottom edge of the DataGrid control so that you have a horizontal blue line just below the DataGrid control, as shown in Figure 13-18.

   This means that the TextArea component will be inserted below the DataGrid component in the VDividedBox component. Set the TextArea control's width to 100% and height to 34% using the Flex Properties panel. Unless Adobe has fixed this bug, your TextArea will probably become 1 pixel high or disappear from the visual view completely after doing this. I don't know why it does that, but it's certainly annoying. Don't worry—your TextArea is still there, I promise.

   

   Figure 13.18. Adding a TextArea component

Working in Source view

Now switch back to Source view by clicking the Source button at the top of the page. You'll see that Flex Builder has been hard at work creating your MXML for you, as shown in Figure 13-19. All you need to do now is finish off the parts that it couldn't handle.

Figure 13.19. The MXML file created by Flex Builder 3

1. First, let's modify the columns for the data grid. Delete one of the three columns, since you will need only two. Then change the headerText of the first column to Date and set the dataField to pubDate. pubDate is the name of the property of the items in the data grid that will be displayed in that column. Date will be what is displayed in the column header. For the second column, change the headerText to Title and the dataField to title.

2. Next, let's handle that error. As a child of the <mx:Application> tag, insert an <mx:HTTPService> tag. Notice how the MXML editor automatically gives you suggestions after you start typing, as shown in Figure 13-20.

   

   Figure 13.20. Flex Builder 2's MXML editor suggests tags after you begin typing.

   You can use the keyboard to navigate up and down the list of suggestions, pressing the Enter key when you find the one you need. Add an id attribute with the value feed, and a url attribute with the value http://www.friendsofed.com/booksRSS.php and then close the element. Save the file. Once Flex Builder has finished compiling your project, the error should disappear from the Problems panel.

3. Add an attribute named htmlText to the <mx:TextArea> tag with a value of {entries.selectedItem.description} to bind its contents to the description property of the currently selected item in the entry's data grid. This means that whenever the selection in the data grid changes, it will automatically update the text in the text area. Sweet automation!

4. The only thing left to do is to add the creationComplete attribute to the <mx:Application> tag with a value of feed.send(). This invokes the send() method of the HTTPService instance you've named feed when the application fires its creationComplete event after all of its children have been created.

5. Save the file, and then click Run