CellRenderer를 사용한 작업

셀 서식 지정
사용자 정의 CellRenderer 클래스 정의
CellRenderer 속성
DataGrid 객체의 열에 CellRenderer 적용
편집 가능한 셀의 CellRenderer 정의
이미지, SWF 파일 또는 무비 클립을 CellRenderer로 사용

CellRenderer는 List, DataGrid, TileList 및 ComboBox 같은 목록 기반 구성 요소에서 행의 사용자 정의 셀 내용을 조작하고 표시하는 데 사용할 수 있는 클래스입니다. 사용자 정의된 셀에는 텍스트, 미리 만들어진 구성 요소(예: CheckBox) 또는 사용자가 만드는 표시 객체 클래스를 포함할 수 있습니다. 사용자 정의 CellRenderer를 사용하여 데이터를 렌더링하기 위해 CellRenderer 클래스를 확장하거나 ICellRenderer 인터페이스를 구현하여 사용자 정의 CellRenderer 클래스를 직접 만들 수 있습니다.

List, DataGrid, TileList 및 ComboBox 클래스는 SelectableList 클래스의 하위 클래스입니다. SelectableList 클래스에는 cellRenderer 스타일이 들어 있는데 이 스타일은 구성 요소에서 셀을 렌더링하는 데 사용하는 표시 객체를 정의합니다.

List 객체의 setRendererStyle() 메서드를 호출하면 CellRenderer에서 사용하는 스타일의 서식을 조정할 수 있습니다( 셀 서식 지정 참조). 또는 CellRenderer로 사용할 사용자 정의 클래스를 직접 정의할 수 있습니다( 사용자 정의 CellRenderer 클래스 정의 참조).

셀 서식 지정

CellRenderer 클래스에는 셀의 서식을 제어하는 데 사용할 수 있는 여러 가지 스타일이 포함되어 있습니다.

다음 스타일을 사용하면 셀의 여러 가지 상태(비활성, 다운, 오버 및 업)에 사용되는 스킨을 정의할 수 있습니다.

disabledSkin 및 selectedDisabledSkin
downSkin 및 selectedDownSkin
overSkin 및 selectedOverSkin
upSkin 및 selectedUpSkin

다음은 텍스트 서식에 적용되는 스타일입니다.
disabledTextFormat
textFormat
textPadding

List 객체의 setRendererStyle() 메서드나 CellRenderer 객체의 setStyle() 메서드를 호출하여 이러한 스타일을 설정할 수 있으며, List 객체의 getRendererStyle() 메서드나 CellRenderer 객체의 getStyle() 메서드를 호출하여 이러한 스타일을 가져올 수 있습니다. List 객체의 rendererStyles 속성이나 CellRenderer 객체의 getStyleDefinition() 메서드를 통해 모든 렌더러 스타일을 객체의 명명된 속성으로 정의하는 객체에 액세스할 수도 있습니다.

clearRendererStyle() 메서드를 호출하면 스타일을 기본값으로 재설정할 수 있습니다.

목록의 행 높이를 가져오거나 설정하려면 List 객체의 rowHeight 속성을 사용합니다.

사용자 정의 CellRenderer 클래스 정의

CellRenderer 클래스를 확장하여 사용자 정의 CellRenderer를 정의하는 클래스 만들기

예를 들어, 다음 코드에서는 두 가지 클래스를 사용합니다. ListSample 클래스는 List 구성 요소를 인스턴스화하고 다른 클래스인 CustomRenderer를 사용하여 List 구성 요소에 사용할 셀 렌더러를 정의합니다. CustomRenderer 클래스는 CellRenderer 클래스를 확장합니다.

[파일] > [새로 만들기]를 선택합니다.
표시되는 [새 문서] 대화 상자에서 [Flash 파일(ActionScript 3.0)]을 선택하고 [확인]을 클릭합니다.
[윈도우] > [구성 요소]를 선택하여 [구성 요소] 패널을 표시합니다.
[구성 요소] 패널에서 List 구성 요소를 스테이지로 드래그합니다.
속성 관리자가 보이지 않으면 [윈도우] > [속성] > [속성}을 선택합니다.
List 구성 요소를 선택하고 속성 관리자에서 다음 속성을 설정합니다.
- 인스턴스 이름: myList
- W(폭): 200
- H(높이): 300
- X: 20
- Y: 20
타임라인에서 레이어 1의 프레임 1을 선택하고 [윈도우] > [액션]을 선택합니다.

[액션] 패널에 다음 스크립트를 입력합니다.

myList.setStyle("cellRenderer", CustomCellRenderer); 
myList.addItem({label:"Burger -- $5.95"}); 
myList.addItem({label:"Fries -- $1.95"});

[파일] > [저장]을 선택합니다. 파일에 이름을 지정한 다음 [확인] 버튼을 클릭합니다.
[파일] > [새로 만들기]를 선택합니다.
표시되는 [새 문서] 대화 상자에서 [ActionScript 파일]을 선택하고 [확인] 버튼을 클릭합니다.

스크립트 윈도우에 다음 코드를 입력하여 CustomCellRenderer 클래스를 정의합니다.

package { 
    import fl.controls.listClasses.CellRenderer; 
    import flash.text.TextFormat; 
    import flash.filters.BevelFilter; 
    public class CustomCellRenderer extends CellRenderer { 
        public function CustomCellRenderer() { 
            var format:TextFormat = new TextFormat("Verdana", 12); 
            setStyle("textFormat", format); 
            this.filters = [new BevelFilter()]; 
        } 
    } 
}

[파일] > [저장]을 선택합니다. 파일 이름을 CustomCellRenderer.as로 지정하고 저장 위치로 FLA 파일과 같은 디렉토리를 지정한 후 [확인] 버튼을 클릭합니다.
[컨트롤] > [무비 테스트]를 선택합니다.

ICellRenderer 인터페이스를 구현하는 클래스를 사용하여 사용자 정의 CellRenderer 정의

DisplayObject 클래스에서 상속되고 ICellRenderer 인터페이스를 구현하는 모든 클래스를 사용하여 CellRenderer를 정의할 수 있습니다. 예를 들어, 다음 코드에서는 두 가지 클래스를 정의합니다. ListSample2 클래스는 표시 목록에 List 객체를 추가하고 CustomRenderer 클래스를 사용하도록 이 객체의 CellRenderer를 정의합니다. CustomRenderer 클래스는 DisplayObject 클래스를 확장하는 CheckBox 클래스를 확장하고 ICellRenderer 인터페이스를 구현합니다. 이때 CustomRenderer 클래스는 ICellRenderer 인터페이스에 정의되어 있는 data 및 listData 속성에 대한 getter 및 setter 메서드를 정의합니다. ICellRenderer 인터페이스에 정의되어 있는 다른 속성과 메서드( selected 속성 및 setSize() 메서드)는 CheckBox 클래스에 이미 정의되어 있습니다.

[파일] > [새로 만들기]를 선택합니다.
표시되는 [새 문서] 대화 상자에서 [Flash 파일(ActionScript 3.0)]을 선택하고 [확인]을 클릭합니다.
[윈도우] > [구성 요소]를 선택하여 [구성 요소] 패널을 표시합니다.
[구성 요소] 패널에서 List 구성 요소를 스테이지로 드래그합니다.
속성 관리자가 보이지 않으면 [윈도우] > [속성] > [속성}을 선택합니다.
List 구성 요소를 선택하고 속성 관리자에서 다음 속성을 설정합니다.
- 인스턴스 이름: myList
- W(폭): 100
- H(높이): 300
- X: 20
- Y: 20
타임라인에서 레이어 1의 프레임 1을 선택하고 [윈도우] > [액션]을 선택합니다.

[액션] 패널에 다음 스크립트를 입력합니다.

myList.setStyle("cellRenderer", CustomCellRenderer); 
myList.addItem({name:"Burger", price:"$5.95"}); 
myList.addItem({name:"Fries", price:"$1.95"});

[파일] > [저장]을 선택합니다. 파일에 이름을 지정한 다음 [확인] 버튼을 클릭합니다.
[파일] > [새로 만들기]를 선택합니다.
표시되는 [새 문서] 대화 상자에서 [ActionScript 파일]을 선택하고 [확인] 버튼을 클릭합니다.

스크립트 윈도우에 다음 코드를 입력하여 CustomCellRenderer 클래스를 정의합니다.

package 
{ 
    import fl.controls.CheckBox; 
    import fl.controls.listClasses.ICellRenderer; 
    import fl.controls.listClasses.ListData; 
    public class CustomCellRenderer extends CheckBox implements ICellRenderer { 
        private var _listData:ListData; 
        private var _data:Object; 
        public function CustomCellRenderer() { 
        } 
        public function set data(d:Object):void { 
            _data = d; 
            label = d.label; 
        } 
        public function get data():Object { 
            return _data; 
        } 
        public function set listData(ld:ListData):void { 
            _listData = ld; 
        } 
        public function get listData():ListData { 
            return _listData; 
        } 
    } 
}

[파일] > [저장]을 선택합니다. 파일 이름을 CustomCellRenderer.as로 지정하고 저장 위치로 FLA 파일과 같은 디렉토리를 지정한 후 [확인] 버튼을 클릭합니다.
[컨트롤] > [무비 테스트]를 선택합니다.

심볼을 사용하여 CellRenderer 정의

라이브러리에 있는 심볼을 사용하여 CellRenderer를 정의할 수도 있습니다. 이 경우 ActionScript에 사용할 수 있도록 심볼을 내보내야 하며, 라이브러리 심볼의 클래스 이름에는 ICellRenderer 인터페이스를 구현하거나 CellRenderer 클래스 또는 그 하위 클래스 중 하나를 확장하는 클래스 파일이 연결되어 있어야 합니다.

다음 예제에서는 라이브러리 심볼을 사용하여 사용자 정의 CellRenderer를 정의합니다.

[파일] > [새로 만들기]를 선택합니다.
표시되는 [새 문서] 대화 상자에서 [Flash 파일(ActionScript 3.0)]을 선택하고 [확인]을 클릭합니다.
[윈도우] > [구성 요소]를 선택하여 [구성 요소] 패널을 표시합니다.
[구성 요소] 패널에서 List 구성 요소를 스테이지로 드래그합니다.
속성 관리자가 보이지 않으면 [윈도우] > [속성] > [속성}을 선택합니다.
List 구성 요소를 선택하고 속성 관리자에서 다음 속성을 설정합니다.
- 인스턴스 이름: myList
- W(폭): 100
- H(높이): 400
- X: 20
- Y: 20
[매개 변수] 패널을 클릭하고 dataProvider 행의 두 번째 열을 두 번 클릭합니다.
표시되는 [값] 대화 상자에서 더하기 기호를 두 번 클릭하여 레이블이 각각 label0과 label1로 설정된 두 개의 데이터 요소를 추가한 후 [확인] 버튼을 클릭합니다.
[텍스트 도구]를 사용하여 스테이지에 텍스트 필드를 그립니다.
텍스트 필드를 선택하고 속성 관리자에서 다음 속성을 설정합니다.
- 텍스트 유형: 동적 텍스트
- 인스턴스 이름: textField
- W(폭): 100
- 글꼴 크기: 24
- X: 0
- Y: 0
텍스트 필드를 선택한 상태에서 [수정] > [심볼로 변환]을 선택합니다.
[심볼로 변환] 대화 상자에서 다음과 같이 설정하고 [확인] 버튼을 클릭합니다.
- 이름: MyCellRenderer
- 유형: 무비 클립
- ActionScript에 내보내기: 선택
- 첫 프레임으로 내보내기: 선택
- 클래스: MyCellRenderer
- 기본 클래스: flash.display.MovieClip
  
  ActionScript 클래스 경고가 표시되면 경고 상자에 있는 [확인] 버튼을 클릭하십시오.
스테이지에서 새 무비 클립 심볼의 인스턴스를 삭제합니다.
타임라인에서 레이어 1의 프레임 1을 선택하고 [윈도우] > [액션]을 선택합니다.
[액션] 패널에 다음 스크립트를 입력합니다.
```
myList.setStyle("cellRenderer", MyCellRenderer);
```
[파일] > [저장]을 선택합니다. 파일에 이름을 지정한 다음 [확인] 버튼을 클릭합니다.
[파일] > [새로 만들기]를 선택합니다.
표시되는 [새 문서] 대화 상자에서 [ActionScript 파일]을 선택하고 [확인] 버튼을 클릭합니다.

스크립트 윈도우에 다음 코드를 입력하여 MyCellRenderer 클래스를 정의합니다.

package { 
    import flash.display.MovieClip; 
    import flash.filters.GlowFilter; 
    import flash.text.TextField; 
    import fl.controls.listClasses.ICellRenderer; 
    import fl.controls.listClasses.ListData; 
    import flash.utils.setInterval; 
    public class MyCellRenderer extends MovieClip implements ICellRenderer { 
        private var _listData:ListData; 
        private var _data:Object; 
        private var _selected:Boolean; 
        private var glowFilter:GlowFilter; 
        public function MyCellRenderer() { 
            glowFilter = new GlowFilter(0xFFFF00); 
            setInterval(toggleFilter, 200); 
        } 
        public function set data(d:Object):void { 
            _data = d; 
            textField.text = d.label; 
        } 
        public function get data():Object { 
            return _data; 
        } 
        public function set listData(ld:ListData):void { 
            _listData = ld; 
        } 
        public function get listData():ListData { 
            return _listData; 
        } 
        public function set selected(s:Boolean):void { 
            _selected = s; 
        } 
        public function get selected():Boolean { 
            return _selected; 
        } 
        public function setSize(width:Number, height:Number):void { 
        } 
        public function setStyle(style:String, value:Object):void { 
        } 
        public function setMouseState(state:String):void{ 
        } 
        private function toggleFilter():void { 
            if (textField.filters.length == 0) { 
                textField.filters = [glowFilter]; 
            } else { 
                textField.filters = []; 
            } 
        } 
    } 
}

[파일] > [저장]을 선택합니다. 파일 이름을 MyCellRenderer.as로 지정하고 저장 위치로 FLA 파일과 같은 디렉토리를 지정한 후 [확인] 버튼을 클릭합니다.
[컨트롤] > [무비 테스트]를 선택합니다.

CellRenderer 속성

data 속성은 CellRenderer에 설정된 모든 속성이 들어 있는 객체입니다. 예를 들어, Checkbox 클래스를 확장하는 사용자 정의 CellRenderer를 정의하는 다음 클래스에서 data 속성의 setter 함수는 CheckBox 클래스에서 상속되는 label 속성에 data.label 의 값을 전달합니다.

    public class CustomRenderer extends CheckBox implements ICellRenderer { 
        private var _listData:ListData; 
        private var _data:Object; 
        public function CustomRenderer() { 
        } 
        public function set data(d:Object):void { 
            _data = d; 
            label = d.label; 
        } 
        public function get data():Object { 
            return _data; 
        } 
        public function set listData(ld:ListData):void { 
            _listData = ld; 
        } 
        public function get listData():ListData { 
            return _listData; 
        } 
    } 
}

selected 속성은 목록에서 셀이 선택되어 있는지 여부를 정의합니다.

DataGrid 객체의 열에 CellRenderer 적용

DataGrid 객체에는 열이 여러 개 포함될 수 있으며 각 열에 서로 다른 셀 렌더러를 지정할 수 있습니다. DataGrid의 각 열은 DataGridColumn 객체로 표현되며 DataGridColumn 클래스에는 열의 CellRenderer를 정의할 수 있는 cellRenderer 속성이 포함됩니다.

편집 가능한 셀의 CellRenderer 정의

DataGridCellEditor 클래스는 DataGrid 객체의 편집 가능한 셀에 사용되는 렌더러를 정의합니다. 이 클래스는 DataGrid 객체의 editable 속성이 true 로 설정된 경우에 사용자가 셀을 편집하기 위해 클릭했을 때 셀의 렌더러로 사용됩니다. 편집 가능한 셀의 CellRenderer를 정의하려면 DataGrid 객체의 columns 배열에 포함된 각 요소에 itemEditor 속성을 설정해야 합니다.

이미지, SWF 파일 또는 무비 클립을 CellRenderer로 사용

CellRenderer의 하위 클래스인 ImageCell 클래스는 셀의 주요 내용이 이미지, SWF 파일 또는 무비 클립인 셀을 렌더링하는 데 사용되는 객체를 정의합니다. ImageCell 클래스에는 셀 모양을 정의하는 데 사용할 수 있는 다음과 같은 스타일이 포함되어 있습니다.

imagePadding — 셀 가장자리와 이미지 가장자리 사이의 패딩(픽셀)입니다.
selectedSkin — 선택된 상태를 나타내는 데 사용되는 스킨입니다.
textOverlayAlpha — 셀 레이블 뒤에 있는 오버레이의 불투명도입니다.
textPadding — 셀 가장자리와 텍스트 가장자리 사이의 패딩(픽셀)입니다.

ImageCell 클래스는 TileList 클래스의 기본 CellRenderer입니다.