How to display icons in a scrolling list

Overview

The first thing to do is to create your own ListItemRender. The ListItemRenderer (gfx.controls.ListItemRenderer) derives from the CLIK Button class and extends it to include list-related properties that are useful for its container components. In other words, a ListItemRenderer is essentially a button used by Scrolling Lists and Drop Downs to display each option in the list/drop down. Modifying this component means modifying what/how each option is displayed.

Create a Custom ListItemRenderer ActionScript Class

import gfx.controls.ListItemRenderer;
import gfx.controls.UILoader;

class gfx.controls.MyListItemRenderer extends ListItemRenderer
{
  public var textField:TextField;
  public var imageLoader:UILoader;

  public function MyListItemRenderer()
  {
    super();
  }

  public function setData(data:Object):Void
  {
    this.data = data;

    textField.text = data ? data.label : "";
    imageLoader.source = data ? data.iconimage : "";
  }

  private function updateAfterStateChange():Void
  {
    textField.text = data ? data.label : "";
    imageLoader.source = data ? data.iconimage : "";
  }
}

Save this class as: C:\UDK\UDK-2011-09\Development\Flash\CLIK\gfx\controls\MyListItemRenderer.as

Create a Custom ListItemRenderer FLA file

• Open C:\UDK\UDK-2011-09\Development\Flash\CLIK\components\ListItemRenderer.FLA
• Now save the file with a new name (Save As) - and name it MyListItemRenderer.FLA
• Open C:\UDK\UDK-2011-09\Development\Flash\CLIK\components\UILoader.FLA
• Go into the Library panel, and right click UILoader.
• Select Copy.
• Return to MyListItemRenderer.FLA.
• Go into the Library panel, and right click on a blank space.
• Select Paste to paste the UILoader into the library.
• Right click ListItemRenderer in the Library panel and select Properties.
• Change the Name to: MyListItemRenderer
• Change the Identifier to: MyListItemRenderer
• Change the Class to: gfx.controls.MyListItemRenderer
• Press OK.
• Right click MyListItemRenderer (again) and choose Component Definition.
• Change Class to: gfx.controls.MyListItemRenderer
• Press OK.
• Double click the MyListItemRenderer component on the stage to enter its timeline.
• Add a new layer above the item layer and name it 'icon'.
• Select the icon layer.
• Drag and drop a UILoader from the Library panel to the stage, and position/scale it so it fits how you like it.
• Give the UILoader component an instance name of 'imageLoader'.
• Save & Publish this file (MyListItemRenderer).
• Now open your Menu file which contains a Scrolling List or Drop Down.
• Copy MyListItemRenderer from the MyListItemRenderer Library into the Library of your Menu file.
• Select your Scrolling List or Drop Down CLIK component (on the stage).
• Open the Component Parameters and set the itemRenderer field to: MyListItemRenderer
• Save and Publish this file.
• Reimport the file into UDK.

Create a configuration file containing Data Used to Populate the Scrolling List

Create a config file, and name it DefaultScaleformMenu.ini (saved in C:\UDK\UDK-2011-09\UDKGame\Config\)

[Configuration]
BasedOn=..\Engine\Config\BaseUI.ini

[SFTutorial.SFMenu]
+ListOptions=(OptionName="Option 1",OptionLabel="Tame",OptionDesc="Easy",OptionImage="img://MyIconPackage.icon1")
+ListOptions=(OptionName="Option 2",OptionLabel="Wild",OptionDesc="Medium",OptionImage="img://MyIconPackage.icon2")
+ListOptions=(OptionName="Option 3",OptionLabel="Crazy",OptionDesc="Hard",OptionImage="img://MyIconPackage.icon3")
+ListOptions=(OptionName="Option 4",OptionLabel="Insane",OptionDesc="Very hard",OptionImage="img://MyIconPackage.icon4")

Now, ensure you have icon images in a UDK package. The path to these images must match whatever you put in the OptionImage part of each ListOption above.

Note: These images must be PNGs.

Setup the Scrolling List in UnrealScript

class SFMenu extends GFxMoviePlayer
  config(ScaleformMenu);

Then, create the Option data structure to be used by the Scrolling List. Notice how each variable name matches the options' properties in the config file (OptionName, OptionLabel, etc.):

struct Option
{
    var string OptionName;
    var string OptionLabel;
    var string OptionDesc;
    var string OptionImage;
};

Next, create the Scrolling List Options array. The array name should match the name used in the config file for each line item (ListOptions). By adding the keyword config, the array will be populated by the config file.:

var config array<Option> ListOptions;

Declare the Scrolling List CLIK Widget:

var GFxClikWidget ScrollingList;

Tell the Scrolling List to populate itself in the WidgetInitialized() function:

event bool WidgetInitialized(name WidgetName, name WidgetPath, GFxObject Widget)
{
  switch(WidgetName)
  {
    case ('sl'): // this assumes your Scrolling List has an instance name of 'sl' in Flash.
      ScrollingList = GFxClikWidget(Widget);
      SetUpDataProvider(ScrollingList);
      break;

   default:
      break;
  }

  return true;
}

Now, the function that actually populates the list:

function SetUpDataProvider(GFxClikWidget Widget)
{
  local byte i;
  local GFxObject DataProvider;
  local GFxObject TempObj;

  DataProvider = CreateArray();
  switch(Widget)
  {
  case (ScrollingList):
    for (i = 0; i < ListOptions.Length; i++)
    {
      TempObj = CreateObject("Object");
      TempObj.SetString("name", ListOptions[i].OptionName);
      TempObj.SetString("label", ListOptions[i].OptionLabel); // this will be displayed in the list
      TempObj.SetString("desc", ListOptions[i].OptionDesc);
      TempObj.SetString("iconimage", ListOptions[i].OptionImage);
      DataProvider.SetElementObject(i, TempObj);
    }

    Widget.SetFloat("rowCount", ListOptions.Length);   // you must specify the row count of scrolling lists manually
    break;

  default:
    break;
  }

  Widget.SetObject("dataProvider", DataProvider);
}

Finally, bind the widget:

defaultproperties
{
  WidgetBindings.Add((WidgetName="sl",WidgetClass=class'GFxClikWidget'))  // this assumes your Scrolling List has an instance name of 'sl' in Flash.
}

Save/Compile and test your menu.