A data list is a special type of component used to
retrieve and display a series of related items. You can design a data
list using Flash Catalyst. Typically, you’ll include enough sample
records to demonstrate the layout and behavior of the list. Once you
finalize the look and feel, a Flex developer can use Adobe Flash Builder
to connect your Data List component to a web service that retrieves and
displays any number of records when the application runs.
A list is not always a list
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.
Of
course, there’s nothing stopping you from making your data list look
like an ordinary list if that’s what you want. In fact, there’s even a
built-in wireframe Data List component.
By default, the records
in a data list can have different Normal, Over, and Selected states. You
can use the Over state to reveal more information about a record when a
user rolls over an item.
What is design-time data?
When developing an
application that’s used to present large amounts of data, it’s not
always possible to see the end result until the application is running
and connected to a back-end data source. That is unless you’re using a
Flash Catalyst Data List component and design-time data. Design-time
data allows you to use dummy
content, such as sample database records or bitmap images, without
having to actually connect to a back-end system. This gives you, the
designer, complete control over the final look and feel of the user
experience. This also makes it possible for a developer using Adobe
Flash Builder to replace the design-time data with real data from a
database or web service while maintaining the interactions and
pixel-perfect design from Flash Catalyst.
Preview a data list
Before you dive in and start
making a new data list, let’s take a moment to preview how a list
appears when it’s put together. Seeing a Data List component in action
will help you to understand each of its parts and how they relate to one
another in a working application.
1. | Start Flash Catalyst. Browse to the Lesson10 folder on your hard drive and open the Restaurants_finished.fxp file.
|
2. | Run the project in a browser.
When the application starts, it plays a short video and then stops on a
horizontal list of restaurants. This is a horizontal data list. If you
roll over an item in the list, you see its Over state. Scroll arrows let
you move forward and backward through the list.
|
3. | Click the right scroll arrow to see more restaurants in the data list.
|
4. | Click any restaurant.
Clicking an item in the data list takes you to a different page in the application. Each restaurant includes a Reviews button.
|
5. | Click Reviews.
The restaurant reviews are included in a vertical data list. Each item
in the list includes an image, the name of the reviewer, a short review,
and a star rating.
|
6. | Roll over and click a few of the reviews in the list.
The reviews have different Normal, Over, and Selected states. In the next exercise, you are going to re-create this data list.
|
7. | Close the browser and return to Flash Catalyst.
|
8. | Close the project without saving changes. |
