UDN

Search public documentation:

CLIKMultiColList

Interested in the Unreal Engine?
Visit the Unreal Technology site.

Looking for jobs and company info?
Check out the Epic games site.

Questions about support via UDN?
Contact the UDN Staff

UE3 Home > User Interfaces & HUDs > Scaleform GFx > How to create a multiple column list

How to create a multiple column list

How to create a multiple column list

Overview

The ScrollingList component by default uses the ListItemRenderer to display the row contents. However the ListItemRenderer only supports a single textField. There are many cases in which a list item may have more than one textField to display, or even non-textField resources such as icons. This example demonstrates how to add two textFields to a list item.

ActionScript

First, let us define the requirements. The objective will be to create a custom ListItemRenderer that will support two textFields. This custom ListItemRenderer should also be compatible with the ScrollingList. Since the plan is to have two textFields per list item, the data should also be more than just a list of single strings. Let us use the following dataProvider for this example:

ActionScript

list.dataProvider = [{fname: "Michael", lname: "Jordan"},
{fname: "Roger", lname: "Federer"},
{fname: "Michael", lname: "Schumacher"},
{fname: "Tiger", lname: "Woods"},
{fname: "Babe", lname: "Ruth"},
{fname: "Wayne", lname: "Gretzky"},
{fname: "Usain", lname: "Bolt"}];

This data provider contains objects with two properties: fname and lname. These two properties will be displayed in the two list item textFields.

Since the default ListItemRenderer only supports one textField, it will need added functionality to support two textFields. The easiest way to accomplish this is to subclass the ListItemRenderer class. The following is the source code to a class called MyItemRenderer, which subclasses ListItemRenderer and adds in basic support for two textFields.

(Put this code in a file called MyItemRenderer.as in the C:\UDK\UDK-2010-12\Development\Flash\CLIK\gfx\controls directory):

ActionScript

import gfx.controls.ListItemRenderer;

class gfx.controls.MyItemRenderer extends ListItemRenderer
{
  public var textField1:TextField;
  public var textField2:TextField;

  public function MyItemRenderer()
  {
    super();
  }

  public function setData(data:Object):Void
  {
    this.data = data;
    textField1.text = data ? data.fname : "";
    textField2.text = data ? data.lname : "";
  }

  private function updateAfterStateChange():Void
  {
    textField1.text = data ? data.fname : "";
    textField2.text = data ? data.lname : "";
  }
}

The setData() and updateAfterStateChange() methods of ListItemRenderer are overridden in this subclass. The setData() method is called whenever the list item receives the item data from its container list component (ScrollingList, TileList, etc.). In the ListItemRenderer, this method sets the value of the one textField. MyItemRenderer instead sets the values of both textFields and also stores a reference to the item object internally. This item object is reused in updateAfterStateChange, which is called whenever the ListItemRenderer’s state changes. This state change may require the textFields to refresh their values.

Modifying Flash

Thus far, the dataProvider with the complex list items and a ListItemRenderer class that supports rendering of those list items have been defined. To hook up everything with the list component, a symbol must be created to support this new ListItemRenderer class. For this example, the fastest way to accomplish this would be to modify the prebuilt ListItemRenderer symbol (C:\UDK\UDK-2010-12\Development\Flash\CLIK\components\ListItemRende rer.fla) to have two textFields with the intance names ‘textField1’ and ‘textField2’. Next this symbol’s identifier and class must be changed to MyItemRenderer in the library.

Right click the ListItemRenderer in the library and choose properties.
Change Name to: MyItemRenderer
Change Identifier to: MyItemRenderer
Change Class to: gfx.controls.MyItemRenderer
Hit OK.
Right click the ListItemRenderer again and choose Component Definition.
Change Class to: gfx.controls.MyItemRenderer
Copy the symbol into the library of the Flash file that contains your list.

Using the new multi column list

To use the MyItemRenderer component with your list, a copy of it must of course exist in the library. Change the itemRenderer inspectable property of your list instance to ‘MyItemRenderer’. (via either the Component Inspector window (CS4) or Component Parameters rollout (CS5))

Run the FLA now. The list should be visible containing list elements that display two labels: the fname and lname properties that were set in the dataProvider.