A data list is a special component type in Catalyst designed to allow you to easily create a block of repetitive information, such as that which would likely come from a database. The data can be represented in a table-like format or as a horizontal or vertical list.

Selecting the data list parts

A data list must contain at least two distinct parts:

• A repeating item

• A scrollbar (see Figure 12.1)

Figure 12.1. A repeating item and a scrollbar selected and ready to be converted to a data list

You need only one repeating item. If your design comp contained multiple items to initially represent the data, you should delete all but one before converting it to a list.

Note

See Chapter 9 for details on creating a scrollbar component.

Tip

If you have not yet created a scrollbar component, you can do so after you convert the repeating item to a data list, and then add the scrollbar back in. However, you will find that it is generally much easier to have the scrollbar created first.

Designating the parts

After you convert the item and scrollbar to a data list component, you need to designate which asset represents the repeating item. You can either click the Edit Parts button on the HUD or double-click the new data list component. Once inside the component, select the repeating item and choose Convert Artwork to Data List Part

After you designate the repeating item, Catalyst duplicates that item five times in a vertically tiled list. You can use the Layout category in the Properties panel to change this to a horizontal or tile list (see Figure 12.2). You can also adjust the spacing between items by scrubbing the value and adjusting the padding on each side.

Figure 12.2. The Properties panel for a data list

In order to test your application or present it to your boss or client for approval, you will likely want to replace the single repeated item with multiple, different items that more closely match the actual data that will eventually be used to populate the application. The Design-time Data panel (see Figure 12.3) makes this possible.

Figure 12.3. The Design-time Data panel

The panel automatically reads the pieces used in the repeating item and constructs a table of data from them. For example, if your repeating item contains a line of text such as a name or title and an image, the panel creates a two-column table with the names and images. If your repeating item contains only a single element such as an image, you will only see a single column in the panel.

You can change any text values by simply clicking them on the panel and typing a new value. You can change images by clicking and selecting a new image from the Library (Figure 12.4).

You can add additional rows of data, and thus additional repeated items, by clicking the Add Row button at the bottom of the panel. You can in theory add as many rows as you want, but keep in mind that this is merely supposed to be a representative sample of the data. Your Flex developer will remove this sample information when she creates the code necessary to insert the real data from the server.

Figure 12.4. Changing the repeating elements in the Design-time panel

It is a good idea to add a few more data items than will fit in the data list's display. Add enough to show that it is scrollable, but do not spend a large amount of time on it.

In this chapter, you learned how to use the Data List component to represent repeating elements in your application. You also learned how to populate the list using the Design-time Data panel.