Data lists and scrolling panels

When your projects require fitting large amounts of content in a limited space, creating scrolling images, panels and lists can be a great solution. Flash Catalyst includes two interactive components specially designed for this purpose: data lists and scroll panels.

A data list is a special type of component used to retrieve and display a series of related items; though the name data list is a little misleading. Each unique record in a Flash Catalyst data list can include artwork, text, or a combination of both. It doesn’t need to be a list at all.

Traditionally, a data list might look something like a spreadsheet or data table.

Using Flash Catalyst, you can build a Data List component that displays a tiled wall of images.

A list can be a scrolling filmstrip or series of thumbnails, from which you select and view other content or navigate to new locations in the application. By adding a scroll bar, you can extend the list to include any number of items.

You can create a horizontal data list; adding scroll arrows allows movement forward and backward through the list.

Overview of data lists

Data lists may be created directly in Flash Catalyst or be developed in Flash Builder. If the list was created in Flash Catalyst and the data items have not been edited in Flash Builder, you will be able to fully edit the skin or appearance of the data list and its items. If the list was created in Flash Builder, or if a developer has edited the data in a Flash Catalyst-created list, you will be able to edit the skin of the list, but not of the individual data items, in Flash Catalyst.

You can skin, or modify the visual appearance of, a designer list in Catalyst quite easily.

  • You can arrange a data list horizontally, vertically, or in a grid on the page.

  • By adding a scroll bar, you can extend the list to include any number of items.

  • Every data list component must include a master item called the “repeated item.” The repeated item is a template that defines the appearance of every item in the list. For example, you can create a repeated item with an image, descriptive text, and different up, over, and down states. Each item in the list shares these common elements and properties. Changes applied to the repeated item are applied to every item in the list automatically at runtime.

When you import a project from Flash Builder that contains a list created by the developer, its data will likely be uneditable. Flash Catalyst will display placeholders for data. If the data is text, placeholder data will be shown for each item. If the data is an image, a placeholder image will display. Regardless of how many items are intended to display in the list, Flash Catalyst will only display five placeholders.

Data lists are made up of three parts: the data, the skin of the list, and the skin for the repeated item. Using Catalyst, you can skin the list and the item renderer. When skinning the item renderer, you can alter any properties that would not affect the underlying data. For example, if the list contains text, you can change the font, color, size, and similar properties.

View full size graphic
A data list using design-time data, or mock data
View full size graphic
A developer data list, where the underlying data has been added in Flash Builder. The visual elements are still editable in Catalyst, but the data is protected.

Create a data list component

  1. Position a copy of the first data list items on the artboard. If the list requires a slider, scroll bar, or similar control, add it to the artboard. Size the control according to your design plan. Select these objects.

    Images and text used as the repeated items

    Include a scroll bar for a data list with several items.

  2. In the HUD, click Choose Component > Data List.

    Flash Catalyst creates the data list and issues a message in the HUD. The message asks you to specify which graphic elements to use for the required part of the data list. The required part is a repeated item.

  3. With the new component still selected on the artboard, click Edit Parts in the HUD.

    Flash Catalyst enters Edit-In-Place mode to allow you to edit the parts and states of the component.

  4. On the artboard, select the items to use as the repeated item. Do not include the scroll bar or other controls in the repeated item.

  5. In the HUD, click Convert to Data List Part > Repeated Item (recommended).

    Flash Catalyst converts the selected item into the repeated item part. By default the list is aligned vertically.

  6. Select the repeated item and choose Vertical, Horizontal, or Tile in the Layout section of the Properties panel. Use the Properties panel to apply additional formatting, such as cell padding. Use the selection handles to size the repeated item bounding box according to your design plan.

  7. Double-click the repeated item to open it in the Pages/States panel.

    A repeated item has normal, over, and selected states.

  8. Edit the items in each state according to your design plan.

  9. Close the data list component and return to the artboard.

    You have created a data list component, but at first it displays the same repeated item over and over. You can use the Design-Time Data panel to replace the temporary images with more realistic data. The design-time data shows a developer how the application looks at runtime.

Add design-time data

  1. Select the data list component on the artboard and open the Design-Time Data panel.

    The Design-Time Data panel shows the items in your list. At first, every item in the list is the same.

  2. If the repeated item includes text, you can edit the text for each item in the list. If the repeated item includes an image, click one of the temporary images in the Design-Time Data panel.

    The Select Asset dialog box opens.

  3. In the Select Asset dialog box, select an image to display in the data list and click OK.

    The Design-Time Data panel updates to show the new images and text.

    Note: If the project library does not include the image you want to display in the data list, you can import it.
  4. Replace the other repeated items with design-time data.

  5. To add additional items to the data list, click Add Row and replace the temporary image with an image of your choice.

  6. Choose Modify > Add Text To Design-Time Data or Add Image To Design-Time Data to add additional images or text to the repeated item. A new column is added to the Design-Time Data panel. To remove an item from the repeated item, select it and choose Modify > Remove Text From Design-Time Data or Remove Image From Design_Time Data.

Design-Time Data panel (shown expanded)

Select Asset dialog box

Note: You can also use the Design-time Data panel to edit items that display in other components such as Button Bars and Combo Boxes.

Overview of a scroll panel

To create a scrolling panel in Flash Catalyst, you need:

  • An object to define the panel area, such as a rectangle shape (optional)

  • Scrolling content, such as a long block of text or a series of images (required)

  • A scroll bar used to scroll the content (recommended)

    Note: You can create a scroll panel without a scroll bar, but it’s useless unless users can scroll to see the hidden content.

Create a scroll panel component

  1. Import or draw an object to define the panel area (optional).

  2. Add the content that you want to scroll. To create scrolling text, use the Text tool in the Tools panel.

  3. Position the scrolling text or align a series of objects in the panel area. Leave some room along the right or bottom edge of the panel for a scroll bar.

    Note: Your scrolling content extends beyond the panel area temporarily.
  4. Create a scroll bar component or drag a scroll bar from the Wireframe Components panel. Position and size the scroll bar to match the size of the panel area.

    Two examples of scroll panel parts, before creating the scroll panel component
  5. Select all of the parts for the scroll panel. In the HUD, click Choose Component > Scroll Panel.

    A message in the HUD reminds you to edit the parts of the component.

  6. Click Edit Parts.

    Another message tells you how to create the scrolling part of the panel.

  7. Select the objects you want to scroll (text block or series of objects).

  8. In the HUD, click Convert to Scroll Panel Part > Scrolling Content (recommended).

    A new bounding box defines the visible area of the scrolling content.

  9. If necessary, size the bounding box of the scrolling content to fit within the panel area.

  10. Use the Breadcrumb bar to close the scroll panel. Choose File > Run Project to test the component.

    Completed scroll panel component used to scroll a block of text in a confined panel area

For more information on creating text in Flash Catalyst, see Creating Application Mock-ups.