Join David Gassner for an in-depth discussion in this video Using the List and DropDownList controls, part of Flash Builder 4 and Flex 4 Essential Training.
The Flex 4 SDK includes a number of new data aware controls, known collectively as the List controls. There is a new version of the List control itself. And then controls named DropDownList and ComboBox. I'll demonstrate these controls in this video and show you some of their differences. If you have access to the Exercise Files, you can import a project that will include the starting files for this chapter. Go to the Flash Builder menu and select File > Import Flex Project.
Click the Browse button and then browse to the folder 13_DataDisplay > begin under the Exercise Files folder, and select and import the file DataDisplay.fxp. Once the project has been imported, open it. Open its src folder, and its default package, and start with this application, ListDemo.mxml. This is a very simple beginning application. It uses a custom skin named HPAppSkin, and then within the Declarations element, there's an ArrayList that contains multiple strings.
Now, I've run the application in its beginning state and it shows you that it is using the custom skin but isn't displaying any of the data. I'll go back to the code and I am going to create an HGroup container after the Declarations element. I'll type in the beginning tag character then HGr and press Enter, and then type in the greater than character and Flash Builder will auto complete the tag set. Now I am using an HGroup so that I'll be able to layout objects horizontally from left to right.
I'll start with a List control. I'll set the List control's dataProvider property to a binding expression that references the ArrayList, which has an id of products. I'll close the List tag with a slash and a greater than. And then I'm going to clone that line of code two times. I'll hold then Ctrl and Alt on Windows or Command and Option on Mac, and press the down arrow, once and then twice. Then I'll modify the two new lines of code.
I'll change the second control from a List to a DropDownList. And I'll change the third control from a List to a ComboBox. Now I coded it in this order specifically to show that all three controls use the same dataProvider property, which you can use to bind to an ArrayList or an ArrayCollection. Unlike the older mx versions of these List controls, you cannot bind to a simple Array. You must bind to an ActionScript class that implements an interface named iList.
And the ArrayList and the ArrayCollection classes are the two most commonly used iList implementations. Now, I'll save and run the application and show you the results. The three controls are lined up next to each other from left to right within the HGroup. The List control is displayed as exactly what it says, an actual list. Notice that when you are working embedded data that the List control automatically sizes itself, both horizontally and vertically, matching the size and quantity of the Strings.
The two other controls don't size each other automatically. Here's the DropDownList control. It does exactly what it says, dropping down a list and displaying the data. But notice that when there's too much data to display, given its default height, that it generates a vertical scroll bar. And when any of the data is too wide to display, it generates a horizontal scroll bar. This is the ComboBox control. The ComboBox combines a DropDownList and a TextInput control. And when you click into the text input area, you can start typing any of the strings, and you'll get type-ahead behavior.
So, for example, I'll type Cy and that will take me to the first string starting with that combination. Now I am going to show you some special features of each of these controls. I'll go back to the code, and I'll start with the List control. The List control has a property called requireSelection. When you set this property to true, the user of your application won't be able to completely deselect all of the data, and in fact if I run the application with that property set to true, you'll see that as the application is presented for the first time in the browser, that the list automatically selects the first data item.
And then even if I hold down the Ctrl key on Windows or Command key on Mac, I won't be able to deselect the item. So that property ensures that the user has always selected something. Now as I mentioned, the DropDownList and ComboBox controls don't automatically resize themselves based on the size of their data. So I am going to apply a width property for each with a value of 200. And then I'll show you a special property of the DropDownList control.
The DropDownList control supports the prompt property. You can set the prompt property to a simple String such as here "Select a Product." And then that prompt will be displayed as the first item in the DropDownList. When you choose an item from the list, the prompt goes away. And once again, as I mentioned, the ComboBox has the special feature of supporting type-ahead or search behavior. So I can type a value into the control. There are other special features available in each of these controls.
I recommend that you check out the documentation for each of them and try out some of the sample code that you'll find there.
- Understanding the history of Adobe Flex
- Installing the Flash Builder components
- Using Eclipse views and editors
- Programming with MXML and integrating MXML and ActionScript
- Debugging Flex applications
- Adding visual controls to a Flex application interface
- Displaying images and dynamic data
- Formatting with CSS
- Skinning Spark components with MXML graphics
- Creating data entry form components
- Integrating with Apache, PHP and MySQL
Skill Level Beginner
Q: After importing the Debugging.fxp file following the steps outlined in the “Importing and exporting projects as FXP files” video, several of the applications will not run.
When I attempt to debug or run the Variables.mxml or Watchpoints.mxml applications, I am unsuccessful. Pressing F11 to debug causes Flex to look for an application it CAN run, and runs that one. If I Right-Click one of the aforementioned applications and then click Run Application, an error appears that says “This file cannot be launched.”
What is causing this problem?
A: This is a common issue with Flash Builder. Before pressing F11 (or right-clicking and choosing Run Application), set the current MXML application file as the "default" by right-clicking it and choosing "Set as default application".
This should ensure that the application you want to preview opens in the browser when you press F11.
Q: When trying to specify the fontStyle as italic in both ways described in the first and second videos of the “Using Cascading Style Sheets (CSS)” chapter, only the literal string "italic" seems to work. If I use the constant for the same value like this:
I get a warning that reads:
"Design mode: Error during component layout. Choose Design > Refresh to refresh design mode."
Even if I try to refresh, design mode will not work until I change it back to the literal string. I made sure the import for this namespace was there by pressing Ctrl+spacebar, refreshed design mode several times, and even restarted Flash Builder. However, the only solution seems to be to use the literal. Is there a fix for this?
A: The use of constants and bindings in MXML style attributes results in unpredictable results in Design View, as evidenced by this error. Unfortunately, the best you can expect is that design view will render the presentation, but won't show the results of the style setting, because Design View isn't capable of evaluating MXML bindings without the benefit of Flash Player's runtime capabilities.
Q: Is Flash Builder compatible with Mac OS X 10.7 (Lion)?