Building a List component in Flash Lite

Understanding how the List component works

By definition, a List component is a scrollable collection of items that allows the user to choose a single or multiple list items. List components are scrollable because there are times when the amount of data exceeds the amount of screen real estate and all of the list items cannot be displayed on the device at once. From a Flash perspective, the items in the list will be displayed in separate movie clips. All of these list item movie clips are contained within the list movie clip. Users can navigate the list by pressing the up or down soft keys on their device's directional pad, and they can select an item by pressing the center soft key (which is sometimes labeled Enter).

However, due to resource constraints of mobile devices, creating a movie clip for every data element in your list could result in poor performance, out-of-memory errors and crashes on some lower-end devices. To resolve this issue, the List component created in this sample project will only use as many movie clips as are visible at any one time, and logic in the ActionScript code updates the values shown in those clips when necessary.

This diagram represents a data set of eight elements, and a list that can display four of those elements at once to the user. This illustrates how the list items work in relation to the data (see Figure 1):

Figure 1. An example depicting the entire list of data and the viewable area.

In the diagram above, the item with focus represents the initial state of the list, before any user interaction has occurred. The list displays the first four items from the data set, and the first item in the list has focus by default—it is the list item that would be selected if user pressed the select soft key on their device. As the user uses the up and down soft keys to navigate through the list, the logic in the ActionScript code determines whether to change the current focus to a different list item movie clip, or whether to change the data that is currently being displayed to the user.

The different states of the list shown below are the various situations to consider in making that decision (see Figure 2):

Figure 2. Considering the different possible states of the List component.

In Figure 2A, if the user presses the down soft key, it is only necessary to change which movie clip has focus. If the user presses the up soft key, the logic will re-populate the list with a new range of data because there isn't a list item movie clip above the one that currently has focus. This means that instead of showing Data2 through Data5, when the user presses the up soft key, the list changes to display Data1 through Data4.

In Figure 2B, the situation is exactly the reverse of Figure 2A. Pressing the up soft key requires the logic to change the focus to a different list item. Pressing the down soft key will result in changing the list to show Data3 through Data6.

In Figures 2C and 2D, it doesn't matter whether the user presses their up or down soft keys; all the List component needs to do is change which movie clip currently has focus.

Of course, it is also necessary to add the logic to ensure that the user cannot scroll beyond the very top or very bottom of the list of data.

Now that you have a clear concept of how the List component works and how the user can interact with the list, it's time to begin building it. In the next section, I'll provide the step-by-step instructions to begin developing the sample project.

Page 2 of 6

Previous Page

Next Page