UDN
Search public documentation:

CLIKMultiColListKR
English Translation
日本語訳
中国翻译

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 홈 > 유저 인터페이스와 HUD > Scaleform GFx > 열이 여럿인 목록 만드는 법

열이 여럿인 목록 만드는 법


문서 변경내역: James Tan 작성. 홍성진 번역.

개요


ScrollingList 컴포넌트는 디폴트로 ListItemRenderer 를 사용하여 줄 콘텐츠를 표시합니다. 그러나 ListItemRenderer 는 textField 를 하나만 지원합니다. 그러나 목록 항목에는 표시할 textField 가 둘 이상인 경우도, 심지어 아이콘처럼 textField 리소스가 아닌 경우도 많이 있습니다. 이 예제에서는 목록 항목에 textField 를 둘 추가하는 법을 선보이겠습니다.

ActionScript


우선 필요조건부터 따져 봅시다. 목표는 textField 를 둘 지원하는 커스텀 ListItemRender 를 만드는 것이겠죠. 이 커스텀 ListItemRenderer 는 ScrollingList 와도 호환되어야 하겠습니다. 목록 항목별로 textField 가 두 개 있도록 할 계획이기에, 데이터는 string 하나로 된 목록 이상이 되어야 할 것입니다. 이 예제에는 다음 dataProvider 를 사용하도록 합시다:

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"}];

이 데이터 프로바이더에는 프로퍼티가 fnamelname, 둘 있는 오브젝트가 들어 있습니다. 이 두 프로퍼티는 두 개의 textField 목록 항목에 표시될 것입니다.

디폴트 ListItemRenderer 는 하나의 textField 만 지원하기에, 두 개를 지원하도록 하는 함수성을 추가시켜 줘야 합니다. 그를 위해 가장 쉬운 방법은 ListItemRenderer 클래스를 서브클래싱하는 것입니다. 다음은 MyItemRenderer 라는 클래스의 소스코드로, ListItemRenderer 를 서브클래싱하여 두 개의 tentField 를 기본적인 형태로 지원하도록 한 것입니다.

(이 코드를 C:\UDK\UDK-2010-12\Development\Flash\CLIK\gfx\controls 에 있는 MyItemRenderer.as 라는 파일에 넣습니다:

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 : "";
  }
}

ListItemRenderer 의 setData() 와 updateAfterStateChange() 메서드는 이 서브클래스에서 오버라이딩 됩니다. 항목 아이템이 그 (ScrollingList, TileList 등의) 컨테이너 목록 컴포넌트에서 항목 데이터를 받을 때마다 setData() 메서드가 호출됩니다. ListItemRenderer 에서 이 메서드는 하나의 textField 값을 설정합니다. 대신 MyItemRendere 는 두 textField 값을 설정하고서, 내부적으로 해당 항목 오브젝트로의 리퍼런스를 보관하기도 합니다. 이 항목 오브젝트는 updateAfterStateChange 에서 재사용되는데, 이 함수는 ListItemRenderer 의 스테이트가 변할 때마다 호출되는 함수입니다. 이 스테이트가 변화에는 textField 값 새로고침이 필요할 수 있습니다.

플래시 변경


지금까지 복잡한 목록 항목을 가진 dataProvider 와, 그 목록 항목 렌더링을 지원하는 ListItemRenderer 클래스를 정의했습니다. 이 모두에 목록 성분을 연결해 주기 위해서는, 심볼을 만들어야 이 새로운 ListItemRenderer 클래스를 지원할 수 있습니다. 이 예제에서 그런 작업을 가장 빨리 이뤄낼 수 있는 방법은, 미리 빌드된 ListItemRenderer 심볼(C:\UDK\UDK-2010-12\Development\Flash\CLIK\components\ListItemRenderer.fla)이, 인스턴스 이름 'textField1' 과 'textField2' 로 textField 둘을 갖도록 변경하는 것입니다. 다음으로 이 심볼의 식별자와 클래스는 라이브러리에서 MyItemRenderer 로 변경해 줘야 합니다.

  • 라이브러리에서 ListItemRenderer 에 우클릭한 후 Properties 를 선택합니다.
  • Name 을 MyItemRenderer 로 바꿉니다.
  • Identifier 를 MyItemRenderer 로 바꿉니다.
  • Class 를 gfx.controls.MyItemRenderer 로 바꿉니다.
  • OK 를 누릅니다.
  • ListItemRenderer 에 다시 우클릭한 후 Component Definition 를 선택합니다.
  • Class 를 gfx.controls.MyItemRenderer 로 바꿉니다.
  • 심볼을 리스트가 들어있는 플래시 파일 라이브러리 속에 복사해 넣습니다.

새로 만든 열이 여럿인 목록 사용하기


목록을 가지고 MyItemRenderer 성분을 사용하려면, 목록 사본 역시 라이브러리에 존재해야 합니다. 목록 인스턴스의 itemRenderer inspectable 프로퍼티를 'MyItemRenderer' 로 바꿉니다. (CS4 의 Component Inspector 창이나 CS5 의 Component Parameters 롤아웃을 통해서요.)

이제 FLA 를 실행합니다. 목록에 dataProvider 에서 설정했던 프로퍼티 fname 과 lname, 그렇게 라벨이 둘 표시되는 것이 보일 것입니다.