Flex Store sample application - Interface Guide (FIG): Paged List component

Flex Interface Guide (FIG): Paged List component

Traditional List components, combined with custom itemRenderers, can display a wide variety of content that users can scroll through item-by-item. The PagedList component provides a similar experience but organizes list items into pages, or groups that always appear together on the screen. Instead of scrolling through the list item-by-item, users can scroll page-by-page. The PagedList component provides an alternate means of viewing and navigating content.

The PagedList component also offers smooth scrolling to help make navigating the list feel more seamless. It also offers an optional page-focused scrolling widget to replace the traditional List’s scrollbar.

Demo: The pagedlist component. Note that this component is still in beta. Feel free to use it however you wish, but keep in mind that parts may contain bugs. Give us feedback on the Flex Interface Guide Forum.

To download and view the full source, right-click the Flex application and select View Source from the context menu. Otherwise, you can use the download link below.

Download the code

Note: This component is licensed as Sample Code as defined in the Flex End User License Agreement. You may use the sample code in your products, commercial or not.

Component guidelines

• Use PagedList components when the list content is organized into natural groupings that users will always want to view together.
  
• Use PagedList components when the content can be viewed in clusters and navigating page-by-page is a helpful shortcut.
  
• Do not use paged lists when users must manually reorder the content, as this is difficult to achieve when the content only appears in pages. Use normal Lists instead.

Component features

Some of the features of the PagedList component include the following:

• Resizing of the PagedList component recounts pages and sends events to bound elements
  
• Recycling of item renderers
  
• Smooth scrolling between pages
  
• Caching of rendered data from one page to the next
  
• External control of the pagination (next and previous buttons)
  
• An optional paging-specific scrolling widget

How to use the component

Positioning: The PagedList component instantiates and places items and provides navigation affordances. It extends UIComponent. Upon each pass of updateDisplayList, the items are re-measured and page metrics recalculated. If necessary, the items are moved out of the display and evenly spaced.

Scrolling: This spacing and measurement is also applied to a set of items offstage in the previous and next positions. The items are masked using the scrollRect attribute of a Flash Movie Clip. When the next or previous page is requested, the scrollrect is scrolled to its new position and the items are repositioned.

This content is a public draft. Please give us feedback in the Flex Interface Guide Forum.