UDN
Search public documentation:

CLIKIconScrollList
日本語訳
中国翻译
한국어

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 display icons in a scrolling list

How to display icons in a scrolling list


Overview


Want to display text and an icon in your CLIK Scrolling Lists and Drop Downs? This tutorial assumes you already have a working Menu class, with a CLIK Scrolling List in it.

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


Rather than modify the original ListItemRenderer, it is always a better idea to "extend" the class by creating a new version with modified code. Here's the full ActionScript code for our new ListItemRenderer.

MyListItemRenderer.as
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


Now that we've created the backend of our new ListItemRenderer, we need the front end, or the visual representation of it. The easiest way to do that is to modify the pre-existing ListItemRenderer Flash file, saving it as a new 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


There are a number of ways we could populate our scrolling list with options. One way is to use a config file that defines each option.

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.

ALERT! Note: These images must be PNGs.

Setup the Scrolling List in UnrealScript


Last of all, we need to add the UnrealScript that does the work of populating our Scrolling List when it's on screen. First, make sure your Menu class draws from the config file you created above:

SFMenu.uc
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.):

SFMenu.uc
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.:

SFMenu.uc
var config array<Option> ListOptions;

Declare the Scrolling List CLIK Widget:

SFMenu.uc
var GFxClikWidget ScrollingList;

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

SFMenu.uc
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:

SFMenu.uc
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:

SFMenu.uc
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.