TileList 구성 요소 사용

TileList 구성 요소는 데이터 공급자가 데이터와 함께 제공하는 행과 열의 목록으로 구성됩니다. 항목 은 TileList의 한 셀에 저장되어 있는 데이터 단위를 나타냅니다. 원래 데이터 공급자가 제공하는 항목에는 일반적으로 label 속성과 source 속성이 있습니다. label 속성은 셀에 표시할 내용을 식별하며 source 속성은 해당 값을 제공합니다.

Array 인스턴스를 만들거나 서버에서 검색할 수 있습니다. TileList 구성 요소에는 해당 데이터 공급자로 프록시되는 메서드(예: addItem() 및 removeItem() )가 있습니다. 목록에 외부 데이터 공급자가 제공되지 않으면 이러한 메서드가 자동으로 데이터 공급자 인스턴스를 만듭니다. 이 인스턴스는 List.dataProvider 를 통해 표시됩니다.

TileList 구성 요소와 사용자의 상호 작용

TileList의 각 셀은 ICellRenderer 인터페이스를 구현하는 Sprite를 사용하여 렌더링됩니다. TileList cellRenderer 속성을 사용하면 이 렌더러를 지정할 수 있습니다. TileList 구성 요소의 기본 CellRenderer는 이미지(클래스, 비트맵, 인스턴스 또는 URL)를 표시하는 ImageCell이며, 선택적으로 레이블을 사용할 수 있습니다. 레이블은 항상 셀 아래쪽에 정렬되는 한 행으로 된 텍스트입니다. TileList는 한 방향으로만 스크롤할 수 있습니다.

TileList 인스턴스에 포커스가 있으면 다음 키를 사용하여 내부 항목에 액세스할 수 있습니다.

키

설명

위쪽 화살표 및 아래쪽 화살표

위 또는 아래 열로 이동할 수 있습니다. allowMultipleSelection 속성이 true 이면 이 키와 Shift 키를 조합하여 여러 셀을 선택할 수 있습니다.

왼쪽 화살표 및 오른쪽 화살표

왼쪽 또는 오른쪽 행으로 이동할 수 있습니다. allowMultipleSelection 속성이 true 이면 이 키와 Shift 키를 조합하여 여러 셀을 선택할 수 있습니다.

홈

TileList에서 첫 번째 셀을 선택합니다. allowMultipleSelection 속성이 true 인 경우, Shift 키를 누른 상태에서 Home 키를 누르면 현재 선택한 셀부터 첫 번째 셀까지 모두 선택됩니다.

End

TileList에서 마지막 셀을 선택합니다. allowMultipleSelection 속성이 true 인 경우, Shift 키를 누른 상태에서 End 키를 누르면 현재 선택한 셀부터 마지막 셀까지 모두 선택됩니다.

Ctrl

allowMultipleSelection 속성이 true 인 경우 임의의 순서로 여러 셀을 선택할 수 있습니다.

응용 프로그램에 TileList 구성 요소를 추가할 때 다음 ActionScript 코드를 추가하여 화면 판독기에서 해당 구성 요소에 액세스할 수 있게 만들 수 있습니다. 

import fl.accessibility.TileListAccImpl; 
 
TileListAccImpl.enableAccessibility();

구성 요소의 인스턴스 수에 관계없이 구성 요소의 액세스 가능성을 한 번만 활성화하면 됩니다. 자세한 내용은 Flash 사용 설명서 에서 18장, "액세스 가능한 내용 만들기"를 참조하십시오.

TileList 구성 요소 매개 변수

속성 관리자나 구성 요소 관리자에서 각 TileList 구성 요소 인스턴스에 대해 allowMultipleSelection , columnCount , columnWidth , dataProvider , direction , horizontalScrollLineSize , horizontalScrollPageSize , labels , rowCount , rowHeight , ScrollPolicy, verticalScrollLineSize, verticalScrollPageSize 등의 제작 매개 변수를 설정할 수 있습니다. 이러한 매개 변수에는 각각 같은 이름의 해당 ActionScript 속성이 있습니다. dataProvider 매개 변수 사용에 대한 자세한 내용은 dataProvider 매개 변수 사용 을 참조하십시오.

메서드, 속성 및 이벤트를 사용하여 TileList 인스턴스에 대한 추가 옵션을 설정하도록 ActionScript를 작성할 수 있습니다. 자세한 내용은 ActionScript 3.0 Reference for Flash Professional 에서 TileList 클래스를 참조하십시오.

TileList 구성 요소를 사용하여 응용 프로그램 만들기

다음 예제에서는 MovieClip을 사용하여 그리기 색상의 배열로 TileList를 채웁니다.

  1. 새 Flash(ActionScript 3.0) 문서를 만듭니다.

  2. TileList 구성 요소를 스테이지로 드래그하고 인스턴스 이름을 aTl 로 지정합니다.

  3. [액션] 패널을 열고 기본 타임라인에서 프레임 1을 선택한 후 다음 ActionScript 코드를 입력합니다. 

    import fl.data.DataProvider; 
import flash.display.DisplayObject; 
 
var aBoxes:Array = new Array(); 
var i:uint = 0; 
var colors:Array = new Array(0x00000, 0xFF0000, 0x0000CC, 0x00CC00, 0xFFFF00); 
var colorNames:Array = new Array("Midnight", "Cranberry", "Sky", "Forest", "July"); 
var dp:DataProvider = new DataProvider(); 
for(i=0; i < colors.length; i++) { 
    aBoxes[i] = new MovieClip(); 
    drawBox(aBoxes[i], colors[i]);    // draw box w next color in array 
    dp.addItem( {label:colorNames[i], source:aBoxes[i]} ); 
} 
aTl.dataProvider = dp; 
aTl.columnWidth = 110; 
aTl.rowHeight = 130; 
aTl.setSize(280,150); 
aTl.move(150, 150); 
aTl.setStyle("contentPadding", 5); 
 
function drawBox(box:MovieClip,color:uint):void { 
            box.graphics.beginFill(color, 1.0); 
            box.graphics.drawRect(0, 0, 100, 100); 
            box.graphics.endFill();         
}

  4. [컨트롤] > [무비 테스트]를 선택하여 응용 프로그램을 테스트합니다.

ActionScript를 사용하여 TileList 구성 요소 만들기

다음 예제에서는 TileList 인스턴스를 동적으로 만들고 ColorPicker, ComboBox, NumericStepper 및 CheckBox 구성 요소의 인스턴스를 해당 인스턴스에 추가합니다. 그런 다음 표시할 구성 요소의 레이블과 이름을 포함하는 Array를 만들고 해당 Array( dp )를 TileList의 dataProvider 속성에 지정합니다. 또한 columnWidth 및 rowHeight 속성과 setSize() 메서드를 사용하여 TileList를 배치하고, move() 메서드를 사용하여 스테이지에 TileList를 배치한 다음, contentPadding 스타일을 사용하여 TileList 인스턴스의 테두리와 해당 내용 사이에 공백을 만들고, sortItemsOn() 메서드를 사용하여 레이블 기준으로 내용을 정렬합니다.

  1. 새 Flash(ActionScript 3.0) 문서를 만듭니다.

  2. [구성 요소] 패널의 ColorPicker, ComboBox, NumericStepper, CheckBox 및 TileList 구성 요소를 [라이브러리] 패널로 드래그합니다.

  3. [액션] 패널을 열고 기본 타임라인에서 프레임 1을 선택한 후 다음 ActionScript 코드를 입력합니다. 

    import fl.controls.CheckBox; 
import fl.controls.ColorPicker; 
import fl.controls.ComboBox; 
import fl.controls.NumericStepper; 
import fl.controls.TileList; 
import fl.data.DataProvider; 
 
var aCp:ColorPicker = new ColorPicker(); 
var aCb:ComboBox = new ComboBox(); 
var aNs:NumericStepper = new NumericStepper(); 
var aCh:CheckBox = new CheckBox(); 
var aTl:TileList = new TileList(); 
 
var dp:Array = [ 
{label:"ColorPicker", source:aCp}, 
{label:"ComboBox", source:aCb}, 
{label:"NumericStepper", source:aNs}, 
{label:"CheckBox", source:aCh}, 
]; 
aTl.dataProvider = new DataProvider(dp); 
aTl.columnWidth = 110; 
aTl.rowHeight = 100; 
aTl.setSize(280,130); 
aTl.move(150, 150); 
aTl.setStyle("contentPadding", 5); 
aTl.sortItemsOn("label"); 
addChild(aTl);

  4. [컨트롤] > [무비 테스트]를 선택하여 응용 프로그램을 테스트합니다.