Now that the first public beta of Flash® Catalyst™ (formerly known as Thermo) has been released, we can start to explore some of the features that have been added since the Preview release from last November. I will assume you have worked through some of the other introductions to the Flash Catalyst user interface.

One of new features that has been implemented in the release is the Data List Component. During the first sneak peek of the application back in Chicago we saw the concept of creating ‘dummy’ or placeholder data for a component. As a prototype developer, the creation of ‘dummy’ data is often one of the hardest challenges. You need to have enough realistic data, so the user interface reflects an accurate representation, but you probably don’t need the entire 100,000 records in the database. Often the visual designers will produce a small sample of what a record set will look like, but in order to see how a user interface is going to work and feel you are going to need a few more records than what might be in the Photoshop file.

So, enter the Data List Component. With the reworking of the components in the new Flex Framework, it has become easier to separate the visual portions of a component from the inner working. This enables us to visually skin these components in an much easier fashion.

A typical list component contains the standard list box, but any element that is a ‘container’ of data elements can be thought of as a data list. Often these components use a scroll bar, to enable the user to access all the items in the list. One could replace the scroll bar with a more complex paging system, but that is beyond the scope of this post.

The Data List component is built in three layers. It is important to remember how these layers interact with one another, and what serves as template for the data render.

The Data List Component

At the highest layer is the Data List component itself. This is the container for the various sub-components of the Data List. None of the data elements are exposed at this layer. This is the layer in which the overall position, opacity, and size can be adjusted. You can also enable multiple selections of the list elements at this layer.

Data Group (or Repeated Items)

The next layer can be the most confusing. It contains artwork that makes up the background and other elements that are NOT related to the list’s dataset. This would include a list label. Our sample buddy list does not include one. But, this layer also includes the data list’s repeated item. For our example, this would be each buddy. This is where we define the size of the visible window into our data list. Items that are not visible in this window, or viewport, will not be viewable. The repeated item will determine the orientation of the list (vertical, horizontal, tiled), in addition to the alignment and spacing between the repeat items.

Data Item (Item Renderer or Item Template)

At the final layer of this component sits the element that will serve as our template for the data from the Design-Time panel. What you see on this artboard will be duplicated for each element of data in your dataset. For clarity, only the first element of your Design-Time data is shown. At this layer, the artwork for each of the principle states (Normal, Hovered, and Selected) is displayed. This layer can have a mix of dynamic elements (feed from the Design-Time panel) and static elements (those unchanging).

Walkthrough

So, with some foundations laid, lets walk through taking our user interface and creating a Data List Component. Before we create a graphically rich user interface, let’s become familiar with the base component first.

1. Start a new project by choosing Adobe Flash Catalyst Project from the Welcome Screen under the Create New Project header.

2. Name the project DataListDemo1 (note, spaces are not allowed in project names). You can leave the other values at their defaults and click “OK”.

3. On the right hand side of the application, you will see the tab labeled “Wireframe Components”, double click the ‘Data List’.

A default Data List has been created and added to your project. This Data List is pre-filled with data. We will edit this data shortly. For now, let’s run our project with all the defaults still in place.

4. To run a FC project, select ‘File > Run Project’. You can also use the keyboard shortcut of Command-ENTER (Control-ENTER on a PC), to run the project. This will compile our project into a swf and a open it in a browser. Take a moment to interact with the component. Let’s return to FC and explore this component in more detail.

5. Double-click on the list on the artboard (or stage). Alternately, you can select the data list, and use the Edit Parts button in the Heads Up Display (HUD).

The HUD is one of the major new elements of the workflow that Adobe is exploring with FC. It might take a little getting used to, but it should help your workflow once you become familiar with its functions.

Now that we have begun to edit our Data List Component, you will see we have exposed another new element of FC, that of “edit in place”. The rest of the artboard has been grayed out, exposing just the elements of the component.

6. In the Layer Panel, located in the upper right, you will see the four elements that comprise the Data List Component: Vertical Scrollbar, Horizontal Scrollbar, Repeated Item, and Rectangle.

Beneath that panel is the Design-TIme Data panel. This should be located in the same panel grouping as the Wireframe Components, and Library. We are not going to explore this panel in this post, but there is were you can input your internal data sets to be used by the Data List Component.

Select the Rectangle in the Layers Panel. This element serves as the background for the container. This can be any asset type supported by FC, including bitmaps, gradients, SWFs, etc. Remember this is NOT the viewport of the repeated data.

7. In the lower right, the Properties Panel should now display the properties for a Rectangle. Feel free to adjust the parameters, such as stroke, fill, opacity or corners. I felt like a picking mustard yellow color.

Now, let explore the real power of this component and look at the Repeated Item.

8. Select the list of fruit on the artboard. This will select the Repeated Item. To be sure, look at the layers panel to see if the Repeated Item layer is highlighted.

The Repeated Item is the container (viewport) where your data will be rendered. Any data elements outside of this container will not be shown. Take a moment, and grab one of the resize handles for the Repeated Item, you should see the clipping of the data list once you release the handle.

Let’s take moment to look at the available properties for the Repeated Item. The standard position and width are available, as is the opacity. But you will also notice the settings for the layout of the repeated items, their spacing, and the alignment between elements. The last two settings are contextually aware based on the layout setting.

9. Double-click the Repeated Item on the artboard to allow us to define the elements of the item.

This is the container that the Repeated Item will use as its template for each of the items in the data list. Remember, this template can contain both dynamic and static elements.

Several things have changed--we are now shown the three states of the item template (Normal, Hovered, Selected) in the Page/States panel.

Let’s define exactly what each of these three states means:
Normal: This is how the item will look when the user has not placed their cursor within its boundary nor selected the item.
Hovered: This is how the item will look when the user has moved their cursor within its boundary but has not selected the item. By default a transparent baby blue rectangle is place beneath the text.
Selected: This is how the item will look when the user selects the item. By default, a less transparent baby blue rectangle is placed beneath the text.

10. Select the Hovered State, in the Pages/States panel. We are going to change the color in the properties panel. You can select the rectangle directly on the artboard or from the Layer panel. We are going to get a little fancy and change this from a solid fill to a gradient.

11. Click the Fill Gradient button in the Rectangle properties panel. Next to the Fill Label, you will notice a small triangle, click on it.
12. This will reveal the Gradient angle setting. Rotate the dial to 0.
13. Use the Gradient Handles to adjust the color, opacity and position of the Gradient points.

Let’s add a bit of flair to our Data List, by importing a graphic to be shown in the Selected state. With the Selected state still in focus, go to File > Import Artwork and import the tick.png. Position this graphic to the right of the rectangle. Fancy, huh?

Since this is defined as a static element, it will be used by each of the data items when they are in the selected state.

14. To exit the Edit In Place mode, you can double-click on the artboard outside the element, use the element path list on the top of the artboard, or press ESC twice.

15. To see how our new Data List component function, go File > Run Project or use the keyboard shortcut.

I would like thank the entire Flash Catalyst team for the tremendous work that has gone on between the Preview Build and this release. A lot of work has been done under the hood to reach this milestone.

In my next post, we explore really pushing the Data List Component's visual capabilities and using dynamic data sets.

Read more from Chris Griffith.