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
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 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
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
a scroll bar for a data list with several items.
In the HUD, click Choose Component > Data List.
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
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.
On the artboard, select the items to use as the repeated
item. Do not include the scroll bar or other controls in the repeated
In the HUD, click Convert to Data List Part > Repeated
Flash Catalyst converts the selected item
into the repeated item part. By default the list is aligned vertically.
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.
Double-click the repeated item to open it in the Pages/States
A repeated item has normal, over, and selected states.
Edit the items in each state according to your design plan.
Close the data list component and return to the artboard.
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
Add design-time data
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.
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.
Select Asset dialog box opens.
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.
Replace the other repeated items with design-time data.
To add additional items to the data list, click Add Row and
replace the temporary image with an image of your choice.
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
- Design-Time Data panel (shown expanded)
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
Scrolling content, such as a long block of text or a series
of images (required)
A scroll bar used to scroll the content (recommended)
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
Import or draw an object to define the panel area
Add the content that you want to scroll. To create scrolling
text, use the Text tool in the Tools panel.
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.
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
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.
Click Edit Parts.
Another message tells you how to
create the scrolling part of the panel.
Select the objects you want to scroll (text block or series
In the HUD, click Convert to Scroll Panel Part > Scrolling
A new bounding box defines the visible
area of the scrolling content.
If necessary, size the bounding box of the scrolling content
to fit within the panel area.
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.