Cover | Table of Contents

Table of Contents

Chapter 1: Installing Flex Builder 3

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Getting started with Flex begins with downloading the Flex Builder 3 integrated development environment (IDE). You can do that for free by going to the Adobe website (http://adobe.com/flex) and clicking on the Try Flex Builder 3 link. It’s a pretty big download, so while you are waiting you might want to check out to get some inspiration regarding what you can do with Flex.

Flex Builder installs just like any other software you would install on your Windows, Macintosh, or Linux box. The only small difference is that you will need to close your browser(s) so that the installer can upgrade your version of Flash Player to the debugger version. You will want to do that so that you can use the full debugging capabilities built into Flex Builder 3. The debugging system is very good, and becoming familiar with it will be well worth your time.

I strongly suggest that when the download page prompts you to subscribe to the email notifications from Adobe you accept the offer. It’s a spam-free mailing list that gives you news and information about Flex and comes in handy as you delve deeper into the framework.

Once you have the software installed, launch it and you should see the splash screen shown in .

Figure : The startup splash screen

On the splash screen you will see the words Built on Eclipse. Eclipse is an extensible cross-platform IDE developed by IBM that is popular in the Java™ world. However, you can also use it to build PHP as well as Rails or, in this case, Flex applications.

If you are familiar with Eclipse you will be fairly familiar with what you see in .

Figure : The empty Start page

shows the IDE when no projects are defined. On the upper left is the project and file area. On the bottom left is the Outline inspector that will show you the nested tags in your Flex application files. On the top right is the Start page that comes up by default. You should check out the links on the Start page because they will bring you to helpful material to get you started. The bottom-right panel, labeled Problems, is where you are alerted to issues (e.g., syntax errors) in your Flex code that keep Flex Builder from successfully compiling your application.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Installing the IDE

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Flex Builder installs just like any other software you would install on your Windows, Macintosh, or Linux box. The only small difference is that you will need to close your browser(s) so that the installer can upgrade your version of Flash Player to the debugger version. You will want to do that so that you can use the full debugging capabilities built into Flex Builder 3. The debugging system is very good, and becoming familiar with it will be well worth your time.

I strongly suggest that when the download page prompts you to subscribe to the email notifications from Adobe you accept the offer. It’s a spam-free mailing list that gives you news and information about Flex and comes in handy as you delve deeper into the framework.

Once you have the software installed, launch it and you should see the splash screen shown in .

Figure : The startup splash screen

On the splash screen you will see the words Built on Eclipse. Eclipse is an extensible cross-platform IDE developed by IBM that is popular in the Java™ world. However, you can also use it to build PHP as well as Rails or, in this case, Flex applications.

If you are familiar with Eclipse you will be fairly familiar with what you see in .

Figure : The empty Start page

shows the IDE when no projects are defined. On the upper left is the project and file area. On the bottom left is the Outline inspector that will show you the nested tags in your Flex application files. On the top right is the Start page that comes up by default. You should check out the links on the Start page because they will bring you to helpful material to get you started. The bottom-right panel, labeled Problems, is where you are alerted to issues (e.g., syntax errors) in your Flex code that keep Flex Builder from successfully compiling your application.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Having Some Image Fun

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

To get started quickly with Flex, select a new Flex project from the New item in the File menu. Use whatever project name you like. I used “starter.” From there, take any image from your computer, rename it to myimage.jpg, and drop it into the src folder of your new project.

Next, double-click on the MXML file for the application and add the code in .

Example . Starter.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
  layout="absolute">
  <mx:Image source="@Embed('mypicture.jpg')" height="100" 
    top="30"
left="30" rotation="−10">
    <mx:filters>
      <mx:DropShadowFilter />
    </mx:filters>
  </mx:Image>
</mx:Application>

Now use the Run command in the Run menu to run the application. You should see your picture rotated a little bit, with a drop shadow added. Already, you can see that Flex can do some things that are difficult to do in the browser without any code.

Our next step will be to add some dynamic behavior to the example by adding controls for the rotation, the sizing, and the visibility of the image. The updated code appears in .

Example . Starter.mxml updated with controls

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
  layout="absolute">
  <mx:HBox top="10” left="10">
    <mx:HSlider minimum="−30” maximum="30” value="−10” 
      toolTip="Rotation”
      change="myimg.rotation=event.currentTarget.value” 
        liveDragging="true” />
    <mx:HSlider minimum="100” maximum="300” value="100” 
      toolTip="Size”
      change="myimg.height=event.currentTarget.value” 
        liveDragging="true” />
    <mx:CheckBox label="Visible” change="myimg.visible=
      event.currentTarget.selected”
      selected="true"/>
  </mx:HBox>
  <mx:Image id="myimg" source="@Embed('mypicture.jpg')" 
    height="100" top="60" left="30" rotation="−10">
    <mx:filters>
      <mx:DropShadowFilter />
    </mx:filters>
  </mx:Image>
</mx:Application>

Now we have two sliders and a checkbox. One slider controls the rotation and the other controls the size of the image as the user adjusts the setting. The checkbox will hide or show the image. shows the result.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Chapter 2: Flex in Action

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Flash has always been a great tool for adding interactivity to a website. But with the advent of Flex a whole new group of engineers, designers, and enthusiasts have been able to build a wide variety of Flash applications. This chapter will discuss a cross section of applications to give you some ideas for what you can do with Flex. As you are looking through these examples, bear two things in mind:

• Although these examples often look dauntingly complex to implement, the Flex framework makes much of this work very easy.
• All of these applications work without any changes on Windows, Macintosh, and Linux, both in the browser and, often, on the desktop using Adobe’s AIR technology.

I found most of the examples in this chapter in the Flex Showcase portion of the Flex.org website (http://flex.org/). The Showcase has an RSS feed that is worth subscribing to so that you can get a sense of what other people are producing using Flex.

When your products are beautiful you want a beautiful way to present them to your customers. With that in mind, check out the Voelkl (http://www.voelkl-snowboards.com) snowboard selector in . At the top of the page you can hover your mouse pointer over each snowboard design to find out more about it, as well as filter the selection of boards to just those for men, women, or rookies/kids.

Figure : Choose your weapon!

Choose your weapon indeed, my friend! This site also demonstrates how Flex applications can seamlessly integrate with HTML pages. Flex does not need to take up the entire page. You can use Flex to build any size page element you want. And you can have the Flex application talk back to the JavaScript on the page to further link the Flash application with the HTML.

One of the most well-known Flash applications is the MINI car Configurator (http://miniusa.com/?#/build/configurator/mini_conv-m) shown in .

Figure : The MINI Configurator

This astounding Flash application will walk you through configuring a MINI Cooper both inside and out. It’s inviting, fun, and thoroughly engaging. It certainly makes me want to buy a MINI.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

E-Commerce

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

When your products are beautiful you want a beautiful way to present them to your customers. With that in mind, check out the Voelkl (http://www.voelkl-snowboards.com) snowboard selector in . At the top of the page you can hover your mouse pointer over each snowboard design to find out more about it, as well as filter the selection of boards to just those for men, women, or rookies/kids.

Figure : Choose your weapon!

Choose your weapon indeed, my friend! This site also demonstrates how Flex applications can seamlessly integrate with HTML pages. Flex does not need to take up the entire page. You can use Flex to build any size page element you want. And you can have the Flex application talk back to the JavaScript on the page to further link the Flash application with the HTML.

One of the most well-known Flash applications is the MINI car Configurator (http://miniusa.com/?#/build/configurator/mini_conv-m) shown in .

Figure : The MINI Configurator

This astounding Flash application will walk you through configuring a MINI Cooper both inside and out. It’s inviting, fun, and thoroughly engaging. It certainly makes me want to buy a MINI.

When you try out the MINI Configurator, which I hope you do, don’t be taken aback by the complexity of the interface. The controls, event model, and CSS skinning in Flex make it easy to build complex interfaces that are easy to understand and maintain at the ActionScript level.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Online Applications

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

It seems like every month another company comes out with a web version of an application that used to be available only on the desktop. Sure, it’s nice to be able to use an application without having to download and install it. However, I don’t know about you, but I don’t find them all that good. Well, I didn’t, until I saw SlideRocket (http://www.sliderocket.com/), a Flex-based version of a slide show editor and presenter.

As you can see in , the editor portion of the interface is both full-featured and elegant.

Figure : SlideRocket’s editor screen

SlideRocket is one of the most amazing applications I’ve seen on any platform in years. It’s well worth your time to check it out.

Another company doing some innovative application work is Aviary (http://a.viary.com). Shown in is Aviary’s online image editing application that is written in Flex.

Figure : Aviary’s image editor

This application shows not only the functionality and elegance that you can achieve in Flex interfaces, but also the speed of the Flash Player in executing image manipulation functions.

Adobe itself is making use of Flex to build an online suite of applications. Shown in is the online version of Photoshop Elements built completely in Flex.

Figure : The online version of Photoshop Elements

Another impressive online application is Adobe’s Buzzword project (http://buzzword.acrobat.com/), shown in .

Figure : The Buzzword Editor

Not only is it beautifully designed, but it’s also fast, works anywhere, and can be used in conjunction with other contributors. Adobe developed Buzzword in Flex.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Multimedia

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Of course, what catalog of Flash applications would be complete without a movie viewer? I don’t want to show you the usual YouTube thing, so I’ll show you video integrated with e-commerce to sell robots for a company called RobotWorx (http://www.robots.com/movies.php?tag=40). shows the RobotWorx page with the embedded custom video player.

Figure : The RobotWorx custom movie player

The Flex application is seamlessly embedded within the larger HTML page. The videos available for the particular robot are shown along the bottom in the style of YouTube. The video of the robot (doing some arc welding in this case) is shown on the left. And a static image of the robot is shown on the right.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Plug-ins and Widgets

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

You can also use Flex to implement the plug-ins and widgets that go on sites such as Facebook. Shown in is a Flex-based node graph, called SocioGraph (http://apps.facebook.com/sociograph/), which displays the connections between you and your Facebook friends. It’s an easy add-in application to your Facebook account.

Figure : SocioGraph Facebook plug-in

I admit that I don’t have a lot of Facebook friends; your graph is probably a lot busier than mine is. But as I click around the nodes more friends pop out and I get a better feel for how I am connected to people simply by interacting with this control. Even with my sparse set of data there is a lot of fun to be had.

You can also use Flex to host a set of widgets as a portal. YourMinis (http://www.yourminis.com/start), shown in , does a great job of presenting customizable portals that look great and work well.

Figure : The YourMinis portal built into Flex

You can have multiple pages in your portal. And you can even place a YourMinis widget on any regular HTML page as a standalone piece. This makes YourMinis not only a great portal, but also a great place to build widgets that can go anywhere.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Dashboards

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Controlling a business is one thing, but how about controlling devices—such as a yacht, for example? Yes, Flex has done that too. Have a look at to see the InteliSea yacht alarm, monitoring, and control system (http://www.intelisea.com/demo/demo.htm).

Figure : The InteliSea yacht alarm, monitoring, and control system

It makes me want to go out and buy a yacht just so that I can play with this thing. Of course, there is the expense of the yacht. Hmmm... Oh, well. I wonder if I can get this trimmed down to work on radio-controlled boats.

ILOG Visualization Products has developed a graphing dashboard based on the CIA World FactBook, which comprises U.S. government profiles of countries and territories around the world. This is shown in .

Figure : The CIA World FactBook viewer

This shows a nice combination of the controls available in the ILOG Elixir toolkit, including 2D and 3D charts, a tree view, interactive maps, and more. For more information on the ILOG Elixir toolkit, visit http://www.ilog.com/products/elixir/. I also discuss ILOG Elixir in more detail in .

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Desktop Applications

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Not only is Flex good for making great web applications, but you also can use it to build desktop applications using exactly the same Flex toolkit. To demonstrate I’ll show two desktop applications. The first is a chat application, shown in . The application is called Pownce (http://pownce.com/) and it sits on the desktop using Adobe’s AIR technology.

Figure : The Pownce chat client

I can tell you from experience that building this type of chat application in Ajax is a real hassle. Cross-domain security becomes an issue that requires that you proxy all of the requests. And making lots of HTTP requests can create memory leaks on some browsers that will leave you banging your head against the wall trying to fix all of the bugs that may or may not appear at any given time. Flex gets around these hassles by sitting on top of the robust and cross-platform Flash Player.

Another excellent example of an online application is the AIR-based eBay Desktop (http://desktop.ebay.com), shown in .

Figure : The eBay Desktop application

From here, you can browse what is available for sale, bid on items, watch your auctions, and so on. And it even maintains the native look and feel of the operating system.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

What Will You Do?

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

The chapters that follow will show you the parts and pieces that were used to create all of these applications. But it’s up to you to find the inspiration and creativity to take your applications to the next level. Thankfully, with Flex you will have all the tools you need to take you there.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Chapter 3: Flex 101: Step by Step

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

This chapter will walk you step by step through the process of constructing a Flex application. That starts with learning how Flex works. Flex is an XML-based language that is compiled into Flash applications. You can see the process portrayed graphically in .

Figure : The flow of Flex application building

Going from the bottom left of to the top right, Flex Builder 3 helps you write app.mxml, the Flex application. That in turn is run through the MXML compiler that generates a SWF file for the application. It also generates a temporary HTML test page that hosts the SWF so that you can test it. The SWF and the HTML are replaced after each compile, so I made them dashed to indicate that they are temporary.

Flex Builder is actually a bit more useful than this in that it really manages projects, which are sets of Flex applications and components, as well as assets (e.g., images and audio that are embedded in the SWF) and any libraries that your project references. This is shown in .

Figure : The Flex project creating a single SWF

Now that you have a general idea of how Flex Builder 3 creates Flex applications, it’s time to walk through the process of creating a real Flex application.

The final sample application in this chapter is a Flickr image viewer. The end result looks like .

Figure : The Flickr viewer

With this application, you can type a search term into the text box, click the Search button, and see the result in the list view.

This example is a bit more complex than the example in , so I’ll walk you through building it in Flex Builder.

The first step is to create a new Flex application project named FlickrRIA, which you can do by following these steps:

1. In the Flex Builder IDE, select File→New→Flex Project and name the project FlickrRIA.
2. Accept the default location for the project and confirm that the Application Type is Web Application and that the Server Technology is set to None.
3. Click Finish to create the project.

The FlickrRIA.mxml

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

A Flickr Viewer

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

The final sample application in this chapter is a Flickr image viewer. The end result looks like .

Figure : The Flickr viewer

With this application, you can type a search term into the text box, click the Search button, and see the result in the list view.

This example is a bit more complex than the example in , so I’ll walk you through building it in Flex Builder.

The first step is to create a new Flex application project named FlickrRIA, which you can do by following these steps:

1. In the Flex Builder IDE, select File→New→Flex Project and name the project FlickrRIA.
2. Accept the default location for the project and confirm that the Application Type is Web Application and that the Server Technology is set to None.
3. Click Finish to create the project.

The FlickrRIA.mxml application file opens in the MXML editor. The editor is in Source mode. Now, you need to format the display. To do so, follow these steps:

1. In the opening Application tag, delete the code layout="absolute".
2. For the Application tag, add a backgroundGradientColors attribute with a value of [0xFFFFFF, 0xAAAAAA], a horizontalAlign attribute with a value of left, a verticalGap attribute with a value of 15, and a horizontalGap attribute with a value of 15.
   shows the code for the Application tag.
   Example . The Application tag

   <mx:Application xmlns:mx="http://www.adobe.com
     /2006/mxml"
        backgroundGradientColors="[0xFFFFFF,0xAAAAAA]"
        horizontalAlign="left"
        verticalGap="15" horizontalGap="15" >

Next, we’ll lay out the search form in Design mode:

1. Click the Design button to change to Design mode. Using Design mode is the easiest way to lay out a form in Flex Builder.
2. From the Components view, drag an HBox component from the Layout folder to the design area. Keep the default values of the component. The HBox component contains the label, input field, and button for the form and displays them horizontally.
   The blue lines that appear in the design area help you position the component. When you release the component in the design area, it snaps into position.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Chapter 4: Flex Controls and Layout

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

The first step in building a Flex application is to create the user interface. Flex not only has a rich set of controls. It also has a complete set of layout mechanisms that make it easy to build user interfaces that look good and can scale appropriately as the display area of the Flash application is resized.

This chapter covers both layout mechanisms and controls. We will start by covering the layout mechanisms, and then we will discuss the available controls.

At the root of a Flex application is a single container, called the Application container, which holds all other containers and components. The Application container lays out all its children vertically by default (when the layout property is not specifically defined). There are three possible values for the Application component’s layout property:

vertical

Lays out each child component vertically from the top of the application to the bottom in the specified order

horizontal

Lays out each child component horizontally from the left of the application to the right in the specified order

absolute

Does no automatic layout, and requires you to explicitly define the location of each child component

If the Application component’s layout property is absolute, each child component must have an x and y coordinate defined; otherwise, the component will be displayed in the (0,0) position.

The Application container can also be formatted using any of the several style parameters that are available, including backgroundGradientColors and verticalGap. In , the Application tag is used to lay out the child controls.

Example . The Application MXML

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 backgroundGradientColors="[#FFFFFF, #FFDE00]" verticalGap="15"
 layout="horizontal">
 <mx:Image source="assets/animals03.jpg" />
 <mx:Label text="Photographed by Elsie Weil" fontSize="15" 
   fontWeight="bold" />
</mx:Application>

shows the result of this code.

Figure : Controls using the Application container

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

The Application Container

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

At the root of a Flex application is a single container, called the Application container, which holds all other containers and components. The Application container lays out all its children vertically by default (when the layout property is not specifically defined). There are three possible values for the Application component’s layout property:

vertical

Lays out each child component vertically from the top of the application to the bottom in the specified order

horizontal

Lays out each child component horizontally from the left of the application to the right in the specified order

absolute

Does no automatic layout, and requires you to explicitly define the location of each child component

If the Application component’s layout property is absolute, each child component must have an x and y coordinate defined; otherwise, the component will be displayed in the (0,0) position.

The Application container can also be formatted using any of the several style parameters that are available, including backgroundGradientColors and verticalGap. In , the Application tag is used to lay out the child controls.

Example . The Application MXML

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 backgroundGradientColors="[#FFFFFF, #FFDE00]" verticalGap="15"
 layout="horizontal">
 <mx:Image source="assets/animals03.jpg" />
 <mx:Label text="Photographed by Elsie Weil" fontSize="15" 
   fontWeight="bold" />
</mx:Application>

shows the result of this code.

Figure : Controls using the Application container

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

The Box Class

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

The Box class is the base class for the VBox and HBox classes:

• The VBox container renders all child display objects vertically.
• The HBox container renders all child display objects horizontally.

The Application object behaves like a VBox by default (vertical layout), but you can also set it to use absolute or horizontal layout.

VBox and HBox flow like HTML, only in one direction.

shows the default layout method used by the VBox container (vertical).

Example . Using the VBox container

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 backgroundColor="#FFFFFF" backgroundAlpha="0">
 <mx:VBox>
  <mx:Button label="&lt; prev" left="10" top="120" />
  <mx:Image source="assets/animals03.jpg" horizontalCenter="0" 
    top="30"/>
  <mx:Label text="Photographed by Elsie Weil" 
    horizontalCenter="0" top="250"/>
  <mx:Button label="next &gt;" right="10" top="120"/>
 </mx:VBox>
</mx:Application>

shows the result of this code.

Figure : A VBox layout

shows the default layout method used by the HBox container (horizontal).

Example . Using the HBox container

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 backgroundColor="#FFFFFF" backgroundAlpha="0">
 <mx:HBox>
  <mx:Button label="&lt; prev" left="10" top="120" />
  <mx:Image source="assets/animals03.jpg" horizontalCenter="0" 
    top="30"/>
  <mx:Label text="Photographed by Elsie Weil" 
    horizontalCenter="0" top="250"/>
  <mx:Button label="next &gt;" right="10" top="120"/>
 </mx:HBox>
</mx:Application>

shows the result.

Figure : An HBox layout

You can also use both VBox and HBox to achieve a desired layout. For instance, nests an HBox inside a VBox, demonstrating that container controls can have other containers as children.

Example . Using both the VBox and the HBox containers

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 backgroundColor="#FFFFFF" backgroundAlpha="0">
 <mx:VBox horizontalAlign="center" verticalGap="15">
   <mx:HBox verticalAlign="middle" horizontalGap="15">
     <mx:Button label="&lt; prev" left="10" top="120" />
     <mx:Image source="assets/animals03.jpg" 
       horizontalCenter="0" top="30"/>
     <mx:Button label="next &gt;" right="10" top="120"/>
   </mx:HBox>
   <mx:Label text="Photographed by Elsie Weil" 
     horizontalCenter="0" top="250"/>
 </mx:VBox>
</mx:Application>

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

The Canvas Container (Absolute Positioning)

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Canvas is the only container that lets you explicitly specify the location of its children within the container. The Canvas object has only one layout value: absolute. You can use the x and y properties of child components for pixel-perfect layouts. If the display window is resized, the child components stay fixed in place and may appear cut off. Using absolute positioning you can make child controls overlap if desired.

is some sample code for an absolutely positioned layout.

Example . An absolutely positioned layout

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 layout="absolute" backgroundColor="#FFFFFF" 
   backgroundAlpha="0">
 <mx:Canvas x="23" y="34">
  <mx:Button label="&lt; prev" x="4" y="97" />
  <mx:Image source="assets/animals03.jpg" x="85" y="4" />
  <mx:Label text="Photographed by Elsie Weil" x="85" 
    y="230" />
  <mx:Button label="next &gt;" x="381" y="97" />
 </mx:Canvas>
</mx:Application>

shows the result.

Figure : An absolutely positioned image

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

The Canvas Container (Relative Positioning)

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

With relative positioning, also called constraint-based layout, you can anchor the sides or center of a component to positions which are relative to the component’s container. The size and position of the components change when the user resizes the application window. The container’s layout property must be set to absolute. All constraints are set relative to the edges of the container, not to other controls in the container. The left, right, top, bottom, horizontalCenter, and verticalCenter properties are anchors in constraint-based layouts.

shows the code for positioning children in a constraint-based layout using the top, bottom, left, right, horizontalCenter, and verticalCenter styles.

Example . Photo.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 layout="absolute backgroundColor="#FFFFFF" 
   backgroundAlpha="0">
 <mx:HDividedBox width="100%" height="300">
  <mx:Canvas backgroundColor="#FFFFCC" width="150" 
    height="100%">
   <mx:Label text="Adjust this section" left="15" />
  </mx:Canvas>
  <mx:Canvas>
   <mx:Button label="&lt; prev" left="10" top="120"/>
   <mx:Image source="animals03.jpg" horizontalCenter="0" 
     top="30"/>
   <mx:Label text="Photographed by Elsie Weil" 
     horizontalCenter="0" top="250"/>
   <mx:Button label="next &gt;" right="10" top="120"/>
  </mx:Canvas>
 </mx:HDividedBox>
</mx:Application>

When you launch this application you should see something similar to .

Figure : A constraint-based layout

You can adjust the size of the panel on the right by grabbing the control and moving the mouse to the left or right. This will move the image to match the size of the panel.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

The Form Container

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

The Form container lets you control the layout of a form, mark form fields as required or, optionally, handle error messages, and bind your form data to the Flex data model to perform data checking and validation.

The Form container, like all containers, encapsulates and lays out its children. The Form container controls the size and layout of the contents of the form. The FormHeader defines a heading for your Form. Multiple FormHeading controls are allowed. A FormItem container specifies a Form element consisting of the following parts:

• A single label
• One or more child controls or containers, such as input controls

You can also insert other types of components into a Form container.

The code in demonstrates use of a Form container control.

Example . CommentForm.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 layout="absolute" backgroundColor="#FFFFFF" 
   backgroundAlpha="0">
 <mx:Form x="50" y="50" verticalGap="15">
  <mx:FormHeading label="Send us comments" />
  <mx:FormItem label="Full Name:">
   <mx:TextInput id="fullName" />
  </mx:FormItem>
  <mx:FormItem label="Email:">
   <mx:TextInput id="email" />
  </mx:FormItem>
  <mx:FormItem label="Comments:">
   <mx:TextArea id="comments" />
  </mx:FormItem>
  <mx:FormItem>
   <mx:Button id="submit" label="submit" />
  </mx:FormItem>
  </mx:Form>
</mx:Application>

shows the result of this code.

Figure : A form-based layout

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Combined Layouts

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Containers can hold other containers. You can nest them to create sophisticated layouts, and you can create custom components that are made up of existing components. shows an example of a complex nested layout. You should take care to use these container classes wisely and not to overuse them. Using too many nested containers can be the cause of performance problems in your application.

Example . A complex nested layout

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 backgroundColor="#000000" layout="horizontal" 
   horizontalGap="25">
 <mx:Style> Panel { backgroundAlpha: 1; borderAlpha: 1;
   headerColors: #c7c7c7, #ffffff;
   footerColors: #ffffff, #c7c7c7;
   paddingTop: 15; paddingRight: 15;
   paddingLeft: 15; paddingBottom: 15;
   shadowDirection: "right"; }
  .header { color: #ffffff; fontSize: 15;
   fontWeight: "bold"; }</mx:Style>
 <mx:VBox verticalGap="10">
  <mx:Panel title="Featured Photograph">
   <mx:Image source="assets/animals03.jpg" horizontalCenter="0" 
     top="30" />
   <mx:Label text="Photographed by Elsie Weil" 
     horizontalCenter="0" top="250" />
  </mx:Panel>
  <mx:Panel title="Provide feedback">
   <mx:Form x="50" y="50" verticalGap="15">
   <mx:FormHeading label="Send us comments" />
   <mx:FormItem label="Full Name:"><mx:TextInput 
     id="fullName" />
   </mx:FormItem>
   <mx:FormItem label="Email:"><mx:TextInput id="email" />
   </mx:FormItem>
   <mx:FormItem label="Comments:"><mx:TextArea 
     id="comments" />
   </mx:FormItem>
   <mx:FormItem><mx:Button id="submit" label="submit" />
   </mx:FormItem>
   </mx:Form>
  </mx:Panel>
 </mx:VBox>
 <mx:VBox verticalGap="25">
  <mx:Canvas>
   <mx:Label text="Category: Animals" styleName="header"  />
   <mx:Image source="assets/animals03_sm.jpg" y="30" />
   <mx:Image source="assets/animals08_sm.jpg" y="120" />
   <mx:Image source="assets/animals09_sm.jpg" y="120" 
     x="120" />
   <mx:Image source="assets/animals10_sm.jpg" y="120" 
     x="240" />
   <mx:Image source="assets/animals11_sm.jpg" y="211" />
   <mx:Image source="assets/animals12_sm.jpg" y="211" 
     x="120" />
   <mx:Image source="assets/animals06_sm.jpg" y="30" 
     x="120" />
   <mx:Image source="assets/animals07_sm.jpg" y="30" 
     x="240" />
  </mx:Canvas>
  <mx:Canvas>
   <mx:Label text="Category: Cities" styleName="header" />
   <mx:Image source="assets/city01_sm.jpg" y="30" />
   <mx:Image source="assets/city02_sm.jpg" y="30"  x="120"/>
   <mx:Image source="assets/city03_sm.jpg" y="30" x="240" />
   <mx:Image source="assets/city04_sm.jpg" y="120" x="0" />
  </mx:Canvas>
 </mx:VBox>
</mx:Application>

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

The Panel Container

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

The Panel container consists of a title bar, a caption, a status message, a border, and a content area for its children. You can use Panel containers to wrap self-contained application modules. You can control the display layout by using the layout property set to vertical (the default), horizontal, or absolute. Each child must have its x and y positions set when using an absolute layout, or they must use anchors for a constraint-based layout.

shows a sample Panel layout.

Example . Photo2.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 backgroundGradientColors="[#FFFFFF, #000000]">
 <mx:Panel title="Featured Photograph"
  backgroundAlpha=".25" borderAlpha="1"
  headerColors="[#c7c7c7, #ffffff]"
  footerColors="[#ffffff, #c7c7c7]"
  paddingTop="15" paddingRight="15" paddingLeft="15" 
    paddingBottom="15"
  shadowDirection="right">
   <mx:Image source="assets/animals03.jpg" 
     horizontalCenter="0" top="30" />
   <mx:Label text="Photographed by Elsie Weil" 
     horizontalCenter="0" top="250" />
 </mx:Panel>
</mx:Application>

shows this Panel-based layout.

Figure : A layout using the Panel container

In addition to panels, you also can use a TitleWindow class to provide windowing-style functionality. This can come in handy when you want to bring up an alert, or a modal dialog.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Controls

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

So many controls are available for you to use with Flex that it’s almost hard to know where to begin. I suppose the best place to start is with the basic controls, such as labels, buttons, checkboxes, and so on. shows an MXML application that provides a heaping helping of the basic control types.

Example . Buttons2.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
  layout="horizontal">
<mx:VBox horizontalAlign="left">
 <mx:Label text="Text label" />
 <mx:Label htmlText="&lt;b&gt;HTML&lt;/b&gt; text" />
 <mx:Button label="Button" />
 <mx:CheckBox label="Check box" />
 <mx:RadioButtonGroup id="cardType"/>
 <mx:RadioButton label="Visa" groupName="cardType" />
 <mx:RadioButton label="MasterCard" groupName="cardType"/>
 <mx:ComboBox dataProvider="{['a','b','c']}" />
 <mx:HSlider />
 <mx:TextInput />
</mx:VBox>
<mx:VBox horizontalAlign="left">
 <mx:List dataProvider="{['a','b','c']}" width="200" 
   height="100" />
 <mx:ButtonBar dataProvider="{['a','b','c']}" />
 <mx:NumericStepper />
 <mx:Image source="@Embed('megan.jpg')" />
</mx:VBox>
</mx:Application>

When I run this in Flex Builder I see .

Figure : A collection of the basic control types

As you would expect, in addition to these controls, you also have available labels with flat text and HTML, push buttons, checkboxes and radio boxes, combos, text inputs, and lists, as well as some cool new controls such as sliders, numeric steppers, button bars, and images, among others.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Data Grids

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

We regularly have to build tables of structured information. This is easy in Flex, thanks to two controls: the DataGrid and the AdvancedDataGrid. I’ll start by showing the DataGrid control (see ).

Example . Datagrid.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
  layout="vertical">
 <mx:XMLList id="employees">
  <employee>
   <name>Christina Coenraets</name>
   <phone>555-219-2270</phone>
   <email>ccoenraets@fictitious.com</email>
   <active>true</active>
  </employee>
  ...
 </mx:XMLList>
 <mx:DataGrid width="100%" height="100%" dataProvider=
   "{employees}">
  <mx:columns>
   <mx:DataGridColumn dataField="name" headerText="Name"/>
   <mx:DataGridColumn dataField="phone" headerText="Phone"/>
   <mx:DataGridColumn dataField="email" headerText="Email"/>
  </mx:columns>
 </mx:DataGrid>
</mx:Application>

When I run this in Flex Builder I see .

Figure : A simple data grid

You don’t even have to define the columns in the DataGrid unless you want to. The DataGrid control is smart enough to detect the columns from the data and set itself up if you haven’t defined the columns.

The AdvancedDataGrid is just like the DataGrid but with a more powerful set of features. For example, it has the ability to roll up sections of the data and provide users with spinners so that they can drill down into the data.

shows AdvancedDataGrid in action.

Example . Advgrid.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
  layout="vertical">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var dpHierarchy:ArrayCollection = new ArrayCollection([
  {Region:"Southwest", children: [ ... ]}
]);
]]>
</mx:Script>

<mx:AdvancedDataGrid width="100%" height="100%">
 <mx:dataProvider>
  <mx:HierarchicalData source="{dpHierarchy}"/>
 </mx:dataProvider>
 <mx:columns>
  <mx:AdvancedDataGridColumn dataField="Region"/>
  <mx:AdvancedDataGridColumn dataField="Territory_Rep"
   headerText="Territory Rep"/>
  <mx:AdvancedDataGridColumn dataField="Actual"/>
  <mx:AdvancedDataGridColumn dataField="Estimate"/>
 </mx:columns>
</mx:AdvancedDataGrid>
</mx:Application>

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Tabs and Accordions