ADOBE/ ActionScript

플래시 UI 컨트롤 리스트 fl.controls.List | fl.controls.TileList 패키지 관련

AlrepondTech 2020. 9. 19. 07:34
반응형

 

 

 

 

 

=================================

=================================

=================================

 

 

 

 

 

 

List를 사용하여 응용 프로그램 만들기

다음 예제에서는 응용 프로그램을 제작하는 동안 List 구성 요소를 추가하는 방법을 설명합니다. 이 예제에서 List는 차량 모델을 나타내는 레이블과 가격이 들어 있는 데이터 필드로 구성됩니다.

응용 프로그램에 단순 List 구성 요소를 추가하려면

 

  1. 새 Flash 파일(ActionScript 3.0) 문서를 만듭니다.
  2. 구성 요소 패널의 List 구성 요소를 스테이지로 드래그합니다.
  3. 속성 관리자에서 다음을 수행합니다.
    • 인스턴스 이름으로 aList를 입력합니다.
    • W(폭) 값을 200으로 지정합니다.
  4. 텍스트 도구를 사용하여 aList 아래에 텍스트 필드를 만들고 인스턴스 이름을 aTf로 지정합니다.
  5. 액션 패널을 열고 기본 타임라인에서 프레임 1을 선택한 후 다음 ActionScript 코드를 입력합니다.
  6. 이 코드에서는 addItem() 메서드를 사용하여 세 가지 항목으로 aList를 채우고, 목록에 표시되는 label 값과 data 값을 각 항목에 지정합니다. List에서 항목을 선택하면 이벤트 리스너가 showData() 함수를 호출하여 선택한 항목의 data 값을 표시합니다.
  7. 컨트롤 > 무비 테스트를 선택하여 응용 프로그램을 컴파일하고 실행합니다.
import fl.controls.List;
import flash.text.TextField;

aTf.type = TextFieldType.DYNAMIC;
aTf.border = false;

// Create these items in the Property inspector when data and label
// parameters are available.
aList.addItem({label:"1956 Chevy (Cherry Red)", data:35000});
aList.addItem({label:"1966 Mustang (Classic)", data:27000});
aList.addItem({label:"1976 Volvo (Xcllnt Cond)", data:17000});
aList.allowMultipleSelection = true;

aList.addEventListener(Event.CHANGE, showData);

function showData(event:Event) {
    aTf.text = "This car is priced at: $" + event.target.selectedItem.data;
}

 

다음 예제에서도 차량 모델과 가격으로 구성된 List를 만듭니다. 하지만 이번에는 addItem() 메서드 대신 데이터 공급자를 사용하여 List를 채웁니다.

데이터 공급자로 List 인스턴스를 채우려면

 

  1. 새 Flash 파일(ActionScript 3.0) 문서를 만듭니다.
  2. 구성 요소 패널의 List 구성 요소를 스테이지로 드래그합니다.
  3. 속성 관리자에서 다음을 수행합니다.
    • 인스턴스 이름으로 aList를 입력합니다.
    • W(폭) 값을 200으로 지정합니다.
  4. 텍스트 도구를 사용하여 aList 아래에 텍스트 필드를 만들고 인스턴스 이름을 aTf로 지정합니다.
  5. 액션 패널을 열고 기본 타임라인에서 프레임 1을 선택한 후 다음 ActionScript 코드를 입력합니다.
  6. 컨트롤 > 무비 테스트를 선택하여 List와 해당 항목을 봅니다.
import fl.controls.List;
import fl.data.DataProvider;
import flash.text.TextField;

aTf.type = TextFieldType.DYNAMIC;
aTf.border = false;

var cars:Array = [
{label:"1956 Chevy (Cherry Red)", data:35000},
{label:"1966 Mustang (Classic)", data:27000},
{label:"1976 Volvo (Xcllnt Cond)", data:17000},
];
aList.dataProvider = new DataProvider(cars);
aList.allowMultipleSelection = true;

aList.addEventListener(Event.CHANGE, showData);

function showData(event:Event) {
    aTf.text = "This car is priced at: $" + event.target.selectedItem.data;
}

 

다음 예제에서는 색상 이름 List를 만들어 색상 이름 중 하나를 선택할 때 MovieClip에 해당 색상이 적용되도록 합니다.

List 구성 요소를 사용하여 MovieClip 인스턴스를 제어하려면

 

  1. Flash 파일(ActionScript 3.0) 문서를 만듭니다.
  2. 구성 요소 패널의 List 구성 요소를 스테이지로 드래그하고 속성 관리자에서 다음 값을 지정합니다.
    • 인스턴스 이름으로 aList를 입력합니다.
    • H 값으로 60을 입력합니다.
    • X 값으로 100을 입력합니다.
    • Y 값으로 150을 입력합니다.
  3. 액션 패널을 열고 기본 타임라인에서 프레임 1을 선택한 후 다음 ActionScript 코드를 입력합니다.
  4. 컨트롤 > 무비 테스트를 선택하여 응용 프로그램을 실행합니다.
  5. List에서 색상을 클릭하여 MovieClip에 표시되는지 확인합니다.
aList.addItem({label:"Blue", data:0x0000CC});
aList.addItem({label:"Green", data:0x00CC00});
aList.addItem({label:"Yellow", data:0xFFFF00});
aList.addItem({label:"Orange", data:0xFF6600});
aList.addItem({label:"Black", data:0x000000});

var aBox:MovieClip = new MovieClip();
addChild(aBox);

aList.addEventListener(Event.CHANGE, changeHandler);
function changeHandler(event:Event) {
    drawBox(aBox, event.target.selectedItem.data);
};

function drawBox(box:MovieClip,color:uint):void {
            box.graphics.beginFill(color, 1.0);
            box.graphics.drawRect(225, 150, 100, 100);
            box.graphics.endFill();        
}

 

다음 예제에서는 addItem() 메서드로 목록을 채우는 ActionScript를 사용하여 단순 목록을 만듭니다.

ActionScript를 사용하여 List 구성 요소 인스턴스를 만들려면

  1. 새 Flash 파일(ActionScript 3.0) 문서를 만듭니다.
  2. 구성 요소 패널의 List 구성 요소를 라이브러리 패널로 드래그합니다.
  3. 액션 패널을 열고 기본 타임라인에서 프레임 1을 선택한 후 다음 ActionScript 코드를 입력합니다.
import fl.controls.List;

var aList:List = new List();
aList.addItem({label:"One", data:1});
aList.addItem({label:"Two", data:2});
aList.addItem({label:"Three", data:3});
aList.addItem({label:"Four", data:4});
aList.addItem({label:"Five", data:5});
aList.setSize(60, 40);
aList.move(200,200);
addChild(aList);
aList.addEventListener(Event.CHANGE, changeHandler);
function changeHandler(event:Event):void {
    trace(event.target.selectedItem.data);

 

 

 

=================================

=================================

=================================

 

 



출처: http://help.adobe.com/ko_KR/FlashPlatform/reference/actionscript/3/fl/controls/List.html

패키지 fl.controls
클래스 public class List
상속 List  SelectableList  BaseScrollPane  UIComponent  Sprite  DisplayObjectContainer  InteractiveObject  DisplayObject  EventDispatcher  Object
구현 IFocusManagerComponent
언어 버전:  ActionScript 3.0
제품 버전:  Flash CS3
런타임 버전:  Flash Player 9.0.28.0, AIR 1.0

List 구성 요소는 목록 기반 정보를 표시하며 정보 배열을 표시하는 데 적합합니다.

List 구성 요소는 항목, 행 및 데이터 공급자로 구성되며, 각 요소에 대한 설명은 다음과 같습니다.

  • 항목: 일반적으로 설명이 포함된 label 속성 및 해당 항목과 연결된 데이터가 저장된 data 속성이 들어 있는 ActionScript 객체
  • 행: 항목을 표시하는 데 사용되는 구성 요소
  • 데이터 공급자: List 구성 요소가 표시하는 항목을 모델링하는 구성 요소

기본적으로 List 구성 요소는 CellRenderer 클래스를 사용하여 목록 항목이 표시되는 행을 제공합니다. 이러한 행은 프로그래밍 방식으로 만들 수 있습니다. 이 작업은 보통 CellRenderer 클래스를 하위 클래스로 분류하여 수행합니다. CellRenderer 클래스는 ICellRenderer 인터페이스를 구현하며, 이 인터페이스에서는 List 구성 요소가 해당 행을 조작하고 표시할 데이터 및 상태 정보를 각 행에 보내는 데 사용하는 속성 및 메서드 세트를 제공합니다. 여기에는 데이터 크기 조절 및 선택 관련 정보가 포함됩니다.

List 구성 요소에서는 해당 데이터 공급자에 대해 실행되는 메서드(예: addItem() 및 removeItem() 메서드)를 제공합니다. 이러한 메서드와 다른 메서드를 사용하여 List 구성 요소와 같은 프레임에 있는 모든 배열의 데이터를 조작한 다음 변경 내용을 여러 보기로 브로드캐스트할 수 있습니다. 외부 데이터 공급자에서 List 구성 요소가 제공되지 않는 경우 이러한 메서드는 자동으로 데이터 공급자 인스턴스를 만들어 List.dataProvider 속성을 통해 표시합니다. List 구성 요소는 ICellRenderer 인터페이스를 구현하는 Sprite를 사용하여 각 행을 렌더링합니다. 이 렌더러를 지정하려면 List.cellRenderer 속성을 사용합니다. Array 인스턴스를 만들거나 서버에서 가져와 여러 목록, 콤보 상자, 데이터 격자 등에 대한 데이터 모델로 사용할 수도 있습니다.

예제 보기

 

공용 속성

 상속되는 공용 속성 표시

 속성정의 주체

 
iconField : String항목의 아이콘을 제공하는 항목 필드를 가져오거나 설정합니다.
iconFunction : Function항목의 아이콘을 가져오는 데 사용할 함수를 가져오거나 설정합니다.
labelField : StringTextInput 필드와 드롭다운 목록의 레이블로 표시할 dataProvider 객체의 필드 이름을 가져오거나 설정합니다.
labelFunction : Function항목의 레이블을 가져오는 데 사용할 함수를 가져오거나 설정합니다.
rowCount : uint[재정의] 목록에 일부라도 표시되는 행 수를 가져오거나 설정합니다.
rowHeight : Number목록에 있는 각 행의 높이(픽셀 단위)를 가져오거나 설정합니다.

공용 메서드

 상속되는 공용 메서드 표시

 메서드정의 주체

List()
새 List 구성 요소 인스턴스를 만듭니다.		 List
getStyleDefinition():Object
[정적] 현재 구성 요소에 대한 기본 스타일 맵을 가져옵니다.		 List
itemToLabel(item:Object):String
[재정의] labelField 및 labelFunction 속성을 사용하여 지정된 데이터 객체에 대해 렌더러가 표시할 문자열을 검색합니다.		 List
scrollToIndex(newCaretIndex:int):void
[재정의] 지정된 인덱스에 있는 항목으로 목록을 스크롤합니다.		 List

보호 메서드

 상속되는 보호 메서드 표시

이벤트

이벤트에 대한 자세한 내용을 보려면 클릭하십시오.

 상속되는 이벤트 표시

스타일

스 타일은 일반적이거나 특정 테마와 연결되어 있을 수 있습니다. 일반적인 스타일인 경우 모든 테마와 함께 사용할 수 있지만, 특정 테마와 연결된 스타일인 경우 응용 프로그램이 해당 테마를 사용하는 경우에만 스타일을 사용할 수 있습니다.

공용 스타일

스타일에 대한 자세한 내용을 보려면 클릭하십시오.

 상속되는 스타일 표시

공용 상수

 상속되는 공용 상수 표시

속성 세부 정보

iconField

 속성

iconField:String

언어 버전:  ActionScript 3.0
제품 버전:  Flash CS3
런타임 버전:  Flash Player 9.0.28.0, AIR 1.0

항목의 아이콘을 제공하는 항목 필드를 가져오거나 설정합니다.

참고: iconFunction 속성이 콜백 함수로 설정되어 있으면 iconField는 사용되지 않습니다.

기본값: "icon".



구현 
    public function get iconField():String
    public function set iconField(value:String):void

예제  ( 예제 사용 방법 ) 

다음 예제에서는 각 항목의 아이콘을 사용하여 목록을 만듭니다. RedBox라는 심볼이 라이브러리에 있어야 하며, 해당 심볼 속성에서 [ActionScript에 내보내기]가 전환되어 있어야 합니다.

import fl.data.DataProvider;
import fl.controls.List;

var dp:DataProvider = new DataProvider();
dp.addItem( { iconSource:RedBox, label:"Item 1" } );
dp.addItem( { iconSource:RedBox, label:"Item 2" } );
dp.addItem( { iconSource:RedBox, label:"Item 3" } );

var list:List = new List();
list.iconField = "iconSource";
list.dataProvider = dp;
addChild(list);

 

iconFunction

iconFunction:Function

언어 버전:  ActionScript 3.0
제품 버전:  Flash CS3
런타임 버전:  Flash Player 9.0.28.0, AIR 1.0

항목의 아이콘을 가져오는 데 사용할 함수를 가져오거나 설정합니다.

참고: iconFunction 속성이 콜백 함수로 설정되어 있으면 iconField는 사용되지 않습니다.

기본값: null.



구현 
    public function get iconFunction():Function
    public function set iconFunction(value:Function):void

예제  ( 예제 사용 방법 ) 

다음 예제에서는 iconFunction 속성을 사용하여 목록에 있는 제한된 수의 항목에 아이콘을 제공합니다. 이 예제가 제대로 작동하려면 RedBox라는 심볼이 라이브러리에 있어야 하며, 해당 심볼 속성에서 [ActionScript에 내보내기]가 전환되어 있어야 합니다.

 

import fl.data.DataProvider;
import fl.controls.List;

var dp:DataProvider = new DataProvider();
dp.addItem( { label:"Item 1" } );
dp.addItem( { label:"Item 2" } );
dp.addItem( { label:"Item 3" } );

var list:List = new List();
list.iconFunction = determineIcon;
list.dataProvider = dp;
addChild(list);

function determineIcon(item:Object):String {
    if(item.label == "Item 2") {
        return "RedBox";
    }
    else {
        return null;
    }
}

 

labelField

labelField:String

언어 버전:  ActionScript 3.0
제품 버전:  Flash CS3
런타임 버전:  Flash Player 9.0.28.0, AIR 1.0

TextInput 필드와 드롭다운 목록의 레이블로 표시할 dataProvider 객체의 필드 이름을 가져오거나 설정합니다.

기본적으로 구성 요소는 각 dataProvider 항목의 label 속성을 표시합니다. dataProvider 항목에 label 속성이 없으면 다른 속성을 사용하도록 labelField 속성을 설정할 수 있습니다.

참고: labelFunction 속성이 콜백 함수로 설정되어 있으면 labelField는 사용되지 않습니다.

기본값: "label".



구현 
    public function get labelField():String
    public function set labelField(value:String):void

관련 API 요소

labelFunction


예제  ( 예제 사용 방법 ) 

다음 예제에서는 기본 label 속성이 아니라 abbreviatedLabel 속성을 사용하여 목록의 각 항목을 표시합니다.

 

import fl.data.DataProvider;
import fl.controls.List;

var dp:DataProvider = new DataProvider();
dp.addItem( { abbreviatedLabel:"NY", label:"New York" } );
dp.addItem( { abbreviatedLabel:"CA", label:"California" } );
dp.addItem( { abbreviatedLabel:"WA", label:"Washington" } );
dp.addItem( { abbreviatedLabel:"CT", label:"Connecticut" } );
dp.addItem( { abbreviatedLabel:"VT", label:"Vermont" } );

var list:List = new List();
list.setSize(40,100);
list.labelField = "abbreviatedLabel"
list.dataProvider = dp;
addChild(list);

 

labelFunction

 속성  

labelFunction:Function

언어 버전:  ActionScript 3.0
제품 버전:  Flash CS3
런타임 버전:  Flash Player 9.0.28.0, AIR 1.0

항목의 레이블을 가져오는 데 사용할 함수를 가져오거나 설정합니다.

기본적으로 구성 요소는 각 dataProvider 항목의 label 속성을 표시합니다. 그러나 일부 데이터 세트에는 label 필드가 없거나 해당 값을 수정하지 않고 레이블로 사용할 수 있는 필드가 없을 수 있습니다. 예를 들어 특정 데이터 세트에 전체 이름이 저장되지만 이름이 lastName 및 firstName 필드에 유지되는 경우가 있습니다. 이러한 경우 이 속성을 사용하여 lastName 및 firstName 필드의 값을 전체 이름 문자열로 연결하여 표시하는 콜백 함수를 설정할 수 있습니다.

참고: labelFunction 속성이 콜백 함수로 설정되어 있으면 labelField는 사용되지 않습니다.

기본값: null.



구현 
    public function get labelFunction():Function
    public function set labelFunction(value:Function):void

예제  ( 예제 사용 방법 ) 

다음 예제에서는 목록의 labelFunction 속성을 각 셀에 표시할 문자열의 형식을 지정하는 함수로 설정합니다.

 

import fl.data.DataProvider;
import fl.controls.List;

var myDataProvider:DataProvider = new DataProvider();
myDataProvider.addItem({name:"User A", price:0.43});
myDataProvider.addItem({name:"User B", price:0.34});

var users:List = new List();
users.dataProvider = myDataProvider;
users.labelFunction = myLabelFunction;
addChild(users);

function myLabelFunction(item:Object):String {
    return  item.name + " ($" + item.price.toFixed(2) + ")";
}

rowCount

 속성  

rowCount:uint[재정의]

언어 버전:  ActionScript 3.0
제품 버전:  Flash CS3
런타임 버전:  Flash Player 9.0.28.0, AIR 1.0

목록에 일부라도 표시되는 행 수를 가져오거나 설정합니다.



구현 
    override public function get rowCount():uint
    override public function set rowCount(value:uint):void

예제  ( 예제 사용 방법 ) 

 

import fl.data.DataProvider;
import fl.controls.List;

var dp:DataProvider = new DataProvider();
var i:uint;
for(i=0; i<100; i++) {
    dp.addItem( { label: "Item " + i } );
}

var list:List = new List();
list.setSize(100,300);
list.dataProvider = dp;
addChild(list);

trace(list.rowCount); // 15

다음 예제에서는 목록의 크기를 설정하고, rowCount 속성을 추적하여 표시할 수 있는 행 수를 확인합니다.

import fl.controls.Slider;
import fl.controls.List;
import fl.data.DataProvider;
import fl.events.SliderEvent;

var dp:DataProvider = new DataProvider();
var i:int;
for (i=0; i<8; i++) {
    dp.addItem({label:"Item " + i});
}

var mySlider:Slider = new Slider();
mySlider.move(10, 10);
mySlider.tickInterval = 1;
mySlider.snapInterval = 1;
mySlider.minimum = 2;
mySlider.maximum = 9;
mySlider.liveDragging = true;
mySlider.addEventListener(SliderEvent.CHANGE, changeHandler);
addChild(mySlider);

var myList:List = new List();
myList.dataProvider = dp;
myList.move(mySlider.x, mySlider.y + 20);
myList.setSize(100, 50);
addChild(myList);

function changeHandler(event:SliderEvent):void {
    myList.rowCount = event.value;
}

 

rowHeight

rowHeight:Number

언어 버전:  ActionScript 3.0
제품 버전:  Flash CS3
런타임 버전:  Flash Player 9.0.28.0, AIR 1.0

목록에 있는 각 행의 높이(픽셀 단위)를 가져오거나 설정합니다.

기본값: 20.



구현 
    public function get rowHeight():Number
    public function set rowHeight(value:Number):void

생성자 세부 정보

List

 () 생성자

public function List()

언어 버전:  ActionScript 3.0
제품 버전:  Flash CS3
런타임 버전:  Flash Player 9.0.28.0, AIR 1.0

새 List 구성 요소 인스턴스를 만듭니다.

메서드 세부 정보

getStyleDefinition

 () 메서드

public static function getStyleDefinition():Object

언어 버전:  ActionScript 3.0
제품 버전:  Flash CS3
런타임 버전:  Flash Player 9.0.28.0, AIR 1.0

현재 구성 요소에 대한 기본 스타일 맵을 가져옵니다. 스타일 맵에는 구성 요소에서 사용하는 스타일에 따라 구성 요소에 적합한 유형이 포함됩니다. 예를 들어 disabledTextFormat 스타일에는 null 값 또는 TextFormat 객체가 포함되어 있습니다. 이러한 스타일을 사용하여 현재 구성 요소에서 setStyle()을 호출할 수 있습니다. 다음 코드는 지정된 구성 요소에서 기본 disabledTextFormat 스타일을 무시합니다.

componentInstance.setStyle("disabledTextFormat", new TextFormat());

반환값

  Object — 기본 스타일 객체입니다.                    

관련 API 요소

fl.core.UIComponent.getStyle()
fl.core.UIComponent.setStyle()
fl.managers.StyleManager


예제  ( 예제 사용 방법 ) 

다음 예제에서는 여러 구성 요소 클래스에 대한 스타일 탐색기를 만듭니다.

import fl.controls.*;
import fl.containers.*;
import fl.controls.listClasses.*;
import fl.controls.dataGridClasses.*;
import fl.controls.progressBarClasses.*;
import fl.core.UIComponent;
import fl.data.DataProvider;

var dp:DataProvider = new DataProvider();
dp.addItem( { label: "BaseScrollPane",    data:BaseScrollPane } );
dp.addItem( { label: "Button",             data:Button } );
dp.addItem( { label: "CellRenderer",    data:CellRenderer } );
dp.addItem( { label: "CheckBox",         data:CheckBox } );
dp.addItem( { label: "ColorPicker",     data:ColorPicker } );
dp.addItem( { label: "ComboBox",         data:ComboBox } );
dp.addItem( { label: "DataGrid",         data:DataGrid } );
dp.addItem( { label: "HeaderRenderer",    data:HeaderRenderer } );
dp.addItem( { label: "ImageCell",        data:ImageCell } );
dp.addItem( { label: "IndeterminateBar",data:IndeterminateBar } );
dp.addItem( { label: "Label",             data:Label } );
dp.addItem( { label: "List",             data:List } );
dp.addItem( { label: "NumericStepper",     data:NumericStepper } );
dp.addItem( { label: "ProgressBar",     data:ProgressBar } );
dp.addItem( { label: "RadioButton",     data:RadioButton } );
dp.addItem( { label: "ScrollPane",         data:ScrollPane } );
dp.addItem( { label: "Slider",             data:Slider } );
dp.addItem( { label: "TextArea",         data:TextArea } );
dp.addItem( { label: "TextInput",         data:TextInput } );
dp.addItem( { label: "TileList",         data:TileList } );
dp.addItem( { label: "UILoader",         data:UILoader } );
dp.addItem( { label: "UIComponent",     data:UIComponent } );

var cb:ComboBox = new ComboBox();
cb.move(10,10);
cb.setSize(300,25);
cb.prompt = "Select a component to view its styles";
cb.rowCount = 12;
cb.dataProvider = dp;
cb.addEventListener(Event.CHANGE, showStyleDefinition);
addChild(cb);

var dg:DataGrid = new DataGrid();
dg.setSize(425,300);
dg.move(10,50);
dg.columns = [ new DataGridColumn("StyleName"), new DataGridColumn("DefaultValue") ];
addChild(dg);

function showStyleDefinition(e:Event):void {
    var componentClass:Class = e.target.selectedItem.data as Class;
    var styles:Object = componentClass["getStyleDefinition"].call(this);
    trace(styles.toString());
    var styleData:DataProvider = new DataProvider();
    for(var i:* in styles) {
        trace(i + " : " + styles[i]);
        styleData.addItem( { StyleName:i, DefaultValue:styles[i] } );
    }
    styleData.sortOn("StyleName");
    dg.dataProvider = styleData;
}

 

itemToLabel

override public function itemToLabel(item:Object):String

언어 버전:  ActionScript 3.0
제품 버전:  Flash CS3
런타임 버전:  Flash Player 9.0.28.0, AIR 1.0

labelField 및 labelFunction 속성을 기준으로 지정한 데이터 객체에 렌더러가 표시할 문자열을 검색합니다.

참고: labelFunction 속성이 콜백 함수로 설정되어 있으면 labelField는 사용되지 않습니다.

매개 변수

  item:Object — 렌더링할 객체입니다.            

반환값

  String — 데이터에 따라 표시할 문자열입니다.                    


예제  ( 예제 사용 방법 ) 

다음 예제에서는 마우스로 가리킬 때 표시되는 목록 항목의 레이블을 결정하는 방법을 보여 줍니다.

import fl.controls.List;
import fl.data.DataProvider;
import fl.events.ListEvent;

var myDataProvider:DataProvider = new DataProvider();
myDataProvider.addItem({label:"Carrot", price:0.43});
myDataProvider.addItem({label:"Tomato", price:0.34});
myDataProvider.addItem({label:"Blueberry", price:0.72});
myDataProvider.addItem({label:"Turnip", price:0.24});

var myList:List = new List();
myList.setSize(300,80);
myList.dataProvider = myDataProvider;
myList.labelFunction = myLabelFunction;
myList.addEventListener(ListEvent.ITEM_ROLL_OVER, announceLabel);
addChild(myList);

function myLabelFunction(item:Object):String {
    return item.label + " - Current price: ($" + item.price.toFixed(2) + ")";
}

function announceLabel(e:ListEvent):void {
    var list:List = e.target as List;
    var item:Object = e.item;
    trace("Label: " + item.label);
    trace("Label displayed: " + list.itemToLabel(item));
}

 

scrollToIndex

override public function scrollToIndex(newCaretIndex:int):void

언어 버전:  ActionScript 3.0
제품 버전:  Flash CS3
런타임 버전:  Flash Player 9.0.28.0, AIR 1.0

지정된 인덱스에 있는 항목으로 목록을 스크롤합니다. 인덱스가 범위를 벗어나는 경우에는 스크롤 위치가 변경되지 않습니다.

매개 변수

  newCaretIndex:int — 스크롤할 인덱스 위치입니다.                    

예제 예제 사용 방법

ListExample.as

 

이 예제에서는 List를 만들고 해당 선택 항목으로 다른 List 인스턴스를 채우는 방법을 보여 줍니다.

  1. 라이브러리에 List, Button 및 Label 클래스를 추가합니다.
  2. 이 코드를 FLA와 같은 디렉토리에 ListExample.as로 저장합니다.
  3. FLA의 DocumentClass를 ListExample로 설정합니다.
package
{
    import flash.display.Sprite
    
    public class ListExample extends Sprite
    {
        import flash.events.*;
        import fl.data.DataProvider;
        import fl.controls.List
        import fl.controls.Label
        import fl.controls.Button
        
        private var clearButton:Button;
        private var availableItems:List;
        private var selectedItemList:List;
        private var selectedItemsList:List;

        public function ListExample() {
            createComponents();
            setupComponents();
        }

        private function setupComponents():void {
            var dp:Array = new Array();
            var i:uint;
            var count:uint = availableItems.rowCount * 2;
            
            for (i = 0; i < count; i++) {
                dp.push({label:"Item " + i});
            }
            
            availableItems.allowMultipleSelection = true;
            availableItems.dataProvider = new DataProvider(dp);
            availableItems.dataProvider = new DataProvider(dp);
            availableItems.addEventListener(Event.CHANGE, updateLists);
            clearButton.addEventListener(MouseEvent.CLICK, clearHandler);            
        }
        
        private function clearHandler(event:MouseEvent):void {
            availableItems.clearSelection();
            // clear data providers
            selectedItemList.dataProvider = new DataProvider();
            selectedItemsList.dataProvider = new DataProvider();
        }
        
        private function updateLists(e:Event):void {
            selectedItemList.dataProvider = availableItems.selectedItem ? 
            new DataProvider([availableItems.selectedItem]) : new DataProvider();
            selectedItemsList.dataProvider = new DataProvider(availableItems.selectedItems);
        }

        private function createComponents():void {
            clearButton = new Button();
            availableItems = new List();
            selectedItemList = new List();
            selectedItemsList = new List();
            var availableItemsLabel:Label = new Label();
            var selectedItemListLabel:Label = new Label();
            var selectedItemsListLabel:Label = new Label();
            
            clearButton.move(10,142);
            availableItems.move(10,32);
            selectedItemList.move(120,32);
            selectedItemsList.move(230,32);
            availableItemsLabel.move(10,10);
            selectedItemListLabel.move(120,10);
            selectedItemsListLabel.move(230,10);
            
            clearButton.label = "Clear Selection"
            availableItemsLabel.text = "Available Items";
            selectedItemListLabel.text = "Selected Item";
            selectedItemsListLabel.text = "All Selected Items";
            
            addChild(clearButton);
            addChild(availableItems);
            addChild(selectedItemList);
            addChild(selectedItemsList);
            addChild(availableItemsLabel);
            addChild(selectedItemListLabel);
            addChild(selectedItemsListLabel);
        }
    }
}

 

 

 

 

=================================

=================================

=================================

 

 

 

출처: http://stackoverflow.com/questions/4701329/flash-list-component-with-buttons

 

package

{

    import fl.controls.List;

    import fl.data.DataProvider;

    import fl.events.ListEvent;

    import flash.display.Sprite



    public class ListExample extends Sprite

    {   

        public function ListExample() 

        {

           init();



        }// end function



        private function init():void

        {

            var buttons:Array = new Array("Mouse", "Cat", "Dog");



            var list:List = new List();

            list.dataProvider = new DataProvider(buttons);

            addChild(list);



            list.addEventListener(ListEvent.ITEM_CLICK, onListItemClick);

        }



        private function onListItemClick(e:ListEvent):void

        {

            switch(e.item.label)

            {

                case "Mouse" : trace("Mice eat cheese"); break;

                case "Cat" : trace("Cats eat the mice"); break;

                case "Dog" : trace("Dogs eat cats"); break;



            }// end switch



        }// end function



    }// end class



}// end package

 

 

 

 

=================================

=================================

=================================

 

 

 

출처: http://stackoverflow.com/questions/4701329/flash-list-component-with-buttons

package
{
    import fl.controls.List;
    import fl.data.DataProvider;
    import fl.events.ListEvent;
    import flash.display.Sprite

    public class ListExample extends Sprite
    {  
        public function ListExample()
        {
           init();

        }// end function

        private function init():void
        {
            var buttons:Array = new Array("Mouse", "Cat", "Dog");

            var list:List = new List();
            list.dataProvider = new DataProvider(buttons);
            addChild(list);

            list.addEventListener(ListEvent.ITEM_CLICK, onListItemClick);
        }

        private function onListItemClick(e:ListEvent):void
        {
            switch(e.item.label)
            {
                case "Mouse" : trace("Mice eat cheese"); break;
                case "Cat" : trace("Cats eat the mice"); break;
                case "Dog" : trace("Dogs eat cats"); break;

            }// end switch

        }// end function

    }// end class

}// end package


 

 

=================================

=================================

=================================

 

 

 

출처:
http://help.adobe.com/ko_KR/AS2LCR/Flash_10.0/help.html?content=00001984.html

CellRenderer API 사용

클래스를 만들 때 목록 기반 구성 요소에서 셀과 통신하는 데 사용하는 4개의 메서드(CellRenderer.getPreferredHeight(), CellRenderer.getPreferredWidth(), CellRenderer.setSize() 및 CellRenderer.setValue())를 사용해야 합니다. 클래스에서 UIObject를 확장하는 경우 CellRenderer.setSize() 대신 size()를 사용할 수 있습니다. Flash 응용 프로그램의 무비 클립 심볼의 링크 속성 대화 상자에 있는 클래스 텍스트 상자에서 클래스를 지정해야 합니다.

 

 

 

 

 

 

 

예를 들어, 셀 렌더러 API를 구현하는 CheckCellRenderer 클래스를 찾을 수 있습니다. 
이 클래스는 /Documents and Settings/사용자/Local Settings/Application Data/Adobe/Flash CS3/en/Configuration/Classes/mx/controls/cells에 있습니다. 또한, CellRenderer 관련 정보를 보려면 DataGrid 성능 전략을 포함하여 DataGrid 구성 요소 설명서를 참조하십시오.

List 기반 구성 요소와 통신할 수 있도록 메서드 두 개와 속성 하나(CellRenderer.getCellIndex(), CellRenderer.getDataLabel() 및 CellRenderer.listOwner)가 셀에 자동으로 제공됩니다. 예를 들어, 클릭하면 행이 선택되는 체크 상자가 셀에 포함되어 있는 경우를 가정해 봅시다. 셀 렌더러에서 구성 요소의 selectedIndex 속성을 호출하려면 이를 포함하는 List 기반 구성 요소에 대한 참조가 필요합니다. 또한, selectedIndex를 올바른 번호로 설정하기 위해서는 현재 셀에서 렌더링되는 항목 인덱스에 대한 정보가 필요합니다. 셀에서는 CellRenderer.listOwner 및 CellRenderer.getCellIndex() 메서드를 사용하여 이 작업을 수행할 수 있습니다. 
List 기반 구성 요소에 셀을 배치하면 ActionScript 요소가 셀에 자동으로 제공되므로 이러한 ActionScript 요소는 직접 구현할 필요가 없습니다.

단순 셀 렌더러 예제

이 단원에서는 하나의 셀에 여러 줄로 된 텍스트를 표시하는 셀 렌더러 예제를 제공합니다.

다음 자습 과정은 DataGrid 구성 요소의 셀에 여러 행의 텍스트를 표시하는 셀 렌더러 클래스를 만드는 방법을 보여 줍니다.

이 자습 내용의 완성된 파일(MultiLineCell.as 및 CellRenderer_tutorial.fla)은 www.adobe.com/go/learn_fl_samples_kr에서 찾을 수 있습니다.

MultiLineCell 셀 렌더러 클래스 만들기

셀 렌더러 클래스는 다음 메서드를 구현해야 합니다.

셀 렌더러 클래스는 List 클래스에서 받은 메서드와 속성도 선언해야 합니다.

다음 단계는 MultiLineCell.as라는 ActionScript 2.0 셀 렌더러 클래스 파일을 만들어서 새 Flash 문서의 새 무비 클립 심볼에 링크하는 방법을 보여 줍니다. 이 작업이 끝나면 DataGrid 구성 요소를 Flash 문서 라이브러리에 추가할 수 있습니다. DataGrid를 동적으로 만들고 MultiLineCell 클래스를 DataGrid 열 중 하나에 셀 렌더러로 지정하는 ActionScript를 첫 번째 프레임에 추가합니다.

 MultiLineCell 셀 렌더러 클래스를 만들려면:

  1. 파일 > 새로 만들기를 선택하고 ActionScript 파일을 선택합니다.
  2. 이 파일을 MultiLineCell.as라는 이름으로 저장합니다.
  3. 다음 코드를 MultiLineCell.as에 입력합니다.
// ActionScript 2.0 class.
class MultiLineCell extends mx.core.UIComponent
{
    private var multiLineLabel; // 텍스트에 사용할 레이블
    private var owner; // 이 셀을 포함하는 행
    private var listOwner; // 이 셀을 포함하는 목록, 데이터 격자 또는 트리

    // 전체 행 높이에서 오프셋된 셀 높이 및 기본 셀 폭
    private static var PREFERRED_HEIGHT_OFFSET = 4; 
    private static var PREFERRED_WIDTH = 100;
    // 시작 심도
    private var startDepth:Number = 1;

    // 생성자: 비워 두어야 합니다.
    public function MultiLineCell()
    {
    }

    /* UIObject에서는 인스턴스화할 때 필요한 모든 무비 클립 에셋을 인스턴스화하여 
    createChildren을 채워야 합니다. 이 예제에서는 하나의 레이블을 만들어 봅니다.*/
    public function createChildren():Void
    {
        // createLabel 메서드는 유용한 UIObject 메서드이면서 구성 요소에서
        // 레이블을 만드는 간편한 방법입니다.
        var c = multiLineLabel = this.createLabel("multiLineLabel", startDepth);
        // 레이블의 스타일을 격자의 스타일에 연결합니다.
        c.styleName = listOwner;
        c.selectable = false;
        c.tabEnabled = false;
        c.background = false;
        c.border = false;
        c.multiline = true;
        c.wordWrap = true;
    }

    public function size():Void
    {
/* UIObject를 가져오는 UIComponent를 확장하면 setSize가 자동으로 얻어집니다. 
하지만 UIComponent에서는 size()를 구현해야 합니다. _width 및 __height는 이미 설정되었다고 
가정하고 전체 rowHeight에 맞게 셀을 확장하려고 합니다. rowHeight 자체는 셀을 렌더링하는 
목록 유형 구성 요소의 속성입니다. 이 cellRenderer 클래스를 사용하여 목록 유형 구성 요소를 
만들 때 rowHeight를 두 줄에 맞추려 하므로 두 줄의 텍스트가 렌더링될 수 있도록 rowHeight 속성을 
충분히 크게 설정해야 합니다.*/
    
/*__width 및 __height는 getter/setter .width 및 .height의 기본 변수입니다.*/
        var c = multiLineLabel;
        c.setSize(__width, __height);
    }

    // 셀의 기본 높이를 반환합니다. 상속된 메서드.
    public function getPreferredHeight():Number
    {
/* 셀에 해당 행을 참조하는 "owner"라는 속성을 지정합니다. 항상 셀이 행 높이의
대부분을 차지하는 것이 좋지만 이 예제에서는 셀을 약간 더 작게 유지합니다.*/
        return owner.__height - PREFERRED_HEIGHT_OFFSET;
    }

    // 셀에 값을 설정하도록 소유자에 의해 호출됩니다. 상속된 메서드.
    public function setValue(suggestedValue:String, item:Object, selected:Boolean):Void
    {
/* 항목이 정의되지 않은 경우 셀에 아무 것도 렌더링되지 않아야 하므로 레이블을 보이지 
않게 설정합니다. 참고: 스크롤되는 datagrid 같은 스크롤 List 유형 구성 요소의 경우, 
셀이 보이지 않을 만큼 스크롤되면 빈 것으로 나타난 다음 셀이 다시 사용되고 새 값으로 설정되어 
스크롤 애니메이션 효과를 냅니다. 이러한 이유로 어느 한 셀이 항상 표시할 데이터를 가지거나 같은 
값을 가질 수는 없습니다.*/
        if (item==undefined){
            multiLineLabel.text._visible = false;
        }
        multiLineLabel.text = suggestedValue;
    }
    // getPreferredWidth 함수 :: 메뉴 및 DataGrid 머리글에만
    // getCellIndex 함수 :: 이 셀 렌더러에는 사용되지 않음
    // getDataLabel 함수 :: 이 셀 렌더러에는 사용되지 않음
}

 

MultiLineCell 셀 렌더러 클래스를 테스트하는 응용 프로그램 만들기

다음 단계에서는 DataGrid 인스턴스를 만들고 MultiLineCell 클래스를 구현합니다.

 MultiLineCell 셀 렌더러 클래스를 사용하는 DataGrid 구성 요소를 사용하여 응용 프로그램을 만들려면:

  1. 파일 > 새로 만들기를 선택하고 Flash 파일(ActionScript 2.0)을 선택합니다.
  2. 파일 > 다른 이름으로 저장을 선택하고 파일 이름으로 cellRender_tutorial.fla를 입력한 다음, MultiLineCell.as 파일과 동일한 폴더에 파일을 저장합니다.
  3. MultiLineCell 클래스에 링크할 새 무비 클립 심볼을 만들려면 삽입 > 새 심볼을 선택합니다.
  4. 이름 텍스트 상자에 MultiLineCell이라고 입력합니다.유형의 기본값은 무비 클립입니다. 무비 클립이 선택된 채로 놔둡니다.
  5. 고급 뷰가 표시되지 않으면 고급 버튼을 클릭합니다.
  6. 링크 영역에서 ActionScript에 내보내기 체크 상자를 클릭합니다.이 옵션을 활성화하면 런타임 중에 이 심볼의 인스턴스가 Flash 문서에 동적으로 첨부될 수 있습니다. 식별자 텍스트 상자에는 MultiLineCell이 자동으로 표시됩니다.
  7. AS 2.0 클래스를 MultiLineCell로 설정(앞에서 만든 MultiLineCell 셀 렌더러의 클래스 
    이름과 일치)합니다.
  8. 첫 프레임으로 내보내기가 선택되어 있는지 확인하고 확인을 클릭합니다.
    중요
    		나중에 MultiLineCell 무비 클립 심볼의 링크 속성을 수정해야 하는 경우 문서의 라이브러리에서 해당 심볼을 마우스 오른쪽 버튼으로 클릭하고 메뉴에서 속성 또는 링크를 선택합니다.
  9. DataGrid 구성 요소를 구성 요소 패널에서 라이브러리로 드래그합니다.다음 단계에서 DataGrid 인스턴스가 ActionScript를 통해 동적으로 만들어집니다.
  10. 기본 타임라인에서 첫 번째 프레임을 선택합니다(MultiLineCell 무비 클립 편집 모드에서 빠져나옴).
  11. DataGrid를 동적으로 만들고 데이터를 DataGrid에 지정하고 앞에서 만든 셀 렌더러 클래스를 지정하는 다음 코드를 첫 번째 프레임의 액션 패널에 입력합니다.
// 새 DataGrid 구성 요소 인스턴스를 만듭니다. 
this.createClassObject(mx.controls.DataGrid, "myGrid_dg", 1);

// 4열의 데이터로 데이터 격자를 위한 데이터 공급자를 만듭니다.
myDP = new Array();
var aLongString:String = "An example of a cell renderer class that displays a multiple line TextField";
myDP.addItem({firstName:"Winston", lastName:"Elstad", note:aLongString, item:100});
myDP.addItem({firstName:"Ric", lastName:"Dietrich", note:aLongString, item:101});   
myDP.addItem({firstName:"Ewing", lastName:"Canepa", note:aLongString, item:102});   
myDP.addItem({firstName:"Kevin", lastName:"Wade", note:aLongString, item:103});   
myDP.addItem({firstName:"Kimberly", lastName:"Dietrich", note:aLongString, item:104});   
myDP.addItem({firstName:"AJ", lastName:"Bilow", note:aLongString, item:105});   
myDP.addItem({firstName:"Chuck", lastName:"Yushan", note:aLongString, item:106});
myDP.addItem({firstName:"John", lastName:"Roo", note:aLongString, item:107});

/* DataGrid에 데이터 공급자를 지정하여 채웁니다. 참고: 이것은 cellRenderer를 적용하기 전에 이루어져야 합니다. */
myGrid_dg.dataProvider = myDP;

/* 일부 기본 격자 속성을 설정합니다. 참고: 데이터 격자의 행 높이는 MultiLineCell 셀 렌더러에 표시하려는 줄 수를 반영해야 합니다. 셀 렌더러는 행 높이에 맞게 크기 조절됩니다. 기본 텍스트 크기에서 행 높이는 2줄의 경우 40, 3줄의 경우 60입니다.*/
myGrid_dg.setSize(430,200);
myGrid_dg.move(40,40);
myGrid_dg.rowHeight = 40; // 기본 텍스트 크기로 2행의 텍스트를 만들 수 있습니다.
myGrid_dg.getColumnAt(0).width = 70;
myGrid_dg.getColumnAt(1).width = 70;
myGrid_dg.getColumnAt(2).width = 220;
myGrid_dg.resizableColumns = true;
myGrid_dg.vScrollPolicy = "auto";
myGrid_dg.setStyle("backgroundColor", 0xD5D5FF); 

// cellRenderer를 지정합니다.
myGrid_dg.getColumnAt(2).cellRenderer = "MultiLineCell";

 

Flash 문서를 저장하고 컨트롤 > 무비 테스트를 선택합니다.

데이터 격자가 나타납니다. 데이터 격자의 세 번째 열에 여러 행 셀이 포함됩니다.

 

 

 

완성된 MultiLineCell 셀 렌더러 예제

 

셀 렌더러 추가 예제

ComboBox 및 CheckCell 구성 요소를 표시하는 추가적인 셀 렌더러 클래스 예제도 제공됩니다. 샘플은 www.adobe.com/go/learn_fl_samples_kr에 있습니다.

 

 

 

 

 

 

 

ComboBox 및 CheckBox를 표시하는 추가 샘플(CellRenderers_Sample)

 

CellRenderer API에 대해 구현해야 하는 메서드

List, DataGrid, Tree 또는 Menu 구성 요소와 셀이 통신할 수 있도록 다음 메서드가 있는 클래스를 작성해야 합니다.

메서드

설명

CellRenderer.getPreferredHeight() 기본 셀 높이를 반환합니다.
CellRenderer.getPreferredWidth() 기본 셀 폭입니다.
CellRenderer.setSize() 셀의 폭과 높이를 설정합니다.
CellRenderer.setValue() 셀에 표시할 내용을 설정합니다.

CellRenderer API에서 제공하는 메서드

구성 요소 내에서 셀을 만들 때 List, DataGrid, Tree 및 Menu 구성 요소는 셀에 다음 메서드를 제공합니다. 이러한 메서드를 직접 구현할 필요는 없습니다.

메서드

설명

CellRenderer.getCellIndex() 셀의 위치를 나타내는 columnIndex 및 itemIndex라는 
두 개의 필드가 포함된 객체를 반환합니다.
CellRenderer.getDataLabel() 셀 렌더러의 데이터 필드 이름을 문자열에 넣어 반환합니다.

CellRenderer API에서 제공하는 속성

구성 요소 내에서 셀을 만들 때 List, DataGrid, Tree 및 Menu 구성 요소는 셀에 다음 속성을 제공합니다. 이러한 속성을 직접 구현할 필요는 없습니다.

속성

설명

CellRenderer.listOwner 셀이 속한 List 구성 요소에 대한 참조입니다.
CellRenderer.owner 셀이 속한 행에 대한 참조입니다.

 

 

 

 

=================================

=================================

=================================

 

 



기타관련링크
http://www.flepstudio.org/forum/tutorials/416-tilelist-label-components-flash-cs3.html
http://www.kxcad.net/image_Adobe_Flash_ActionScript_Language_Reference_V3/fl/controls/List.html 리스트그리드로 나누기 http://livedocs.adobe.com/flash/9.0_kr/ActionScriptLangRefV3/fl/data/DataProvider.html
트리구조 리스트 http://www.actionscript-flash-guru.com/blog/19-tree-menu-with-actionscript-as3
그림넣기 http://www.smartfoxserver.com/bits/docs/as3Flash_SFS2X/html/com_smartfoxserver_smartfoxbits_bits_UserList.html
타일리스트 http://help.adobe.com/ko_KR/FlashPlatform/reference/actionscript/3/fl/controls/listClasses/TileListData.html
http://webinside.iptime.org/public_html/study_doc/flash_doc/Help/ActionScriptLangRefV3/fl/controls/TileList.html http://kirill-poletaev.blogspot.com/2011/01/as3-tilelist-component.html http://www.arkansasweb.com/fms/docs/flashmediaserver_AS3LR/fl/controls/TileList.html
셀렉트 리스트
http://dev.illumifi.net/AS3/fl/controls/SelectableList.html
cell 랜더러
http://help.adobe.com/ko_KR/AS2LCR/Flash_10.0/help.html?content=00001984.html
http://www.sephiroth.it/tutorials/flashPHP/cellRenderer/index.php
http://www.adobe.com/support/documentation/en/flash/fl8/samples.html

http://download.macromedia.com/pub/documentation/en/flash/fl8/MultiLineCellRenderer.zip

http://www.flash-db.com/Tutorials/cellrenderer/

 

 

=================================

=================================

=================================

 

 

 

반응형
저작자표시

'ADOBE > ActionScript' 카테고리의 다른 글

플래시 AS3.0 Textfield에 Tag를 사용하여 Embed자원 이미지를 지정하기  (0) 2020.09.19
[AS] 플래시 fl.controls.DataGrid 관련  (0) 2020.09.19
플래시 액션스크립트 플래시 이벤트로 페이지 이동 관련  (0) 2020.09.19
플래시 액션스크립트 프레임(fps) 관련 프레임 레이트 프레임 체크  (0) 2020.09.19
[AS] 플래시 AS(액션스크립트) 보안 관련 Flash 데이터 HTTP 업로드 소켓 연결 에러 #2048 #2032  (0) 2020.09.19

'ADOBE/ ActionScript'의 다른글

  • 현재글플래시 UI 컨트롤 리스트 fl.controls.List | fl.controls.TileList 패키지 관련

관련글

티스토리툴바