DataGrid 구성 요소 사용

DataGrid 구성 요소에서 로컬 데이터 공급자 사용

다음 예제에서는 소프트볼 팀의 선수 명단을 표시하는 DataGrid를 만듭니다. 또한 선수 명단을 Array( aRoster )에 정의하고 이를 DataGrid의 dataProvider 속성에 지정합니다.

1. Flash에서 [파일] > [새로 만들기]를 선택하고 [Flash 파일(ActionScript 3.0)]을 선택합니다.

2. [구성 요소] 패널의 DataGrid 구성 요소를 스테이지로 드래그합니다.

3. 속성 관리자에서 인스턴스 이름으로 aDg 를 입력합니다.

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

   import fl.data.DataProvider; 
    
   bldRosterGrid(aDg); 
   var aRoster:Array = new Array(); 
   aRoster = [ 
           {Name:"Wilma Carter", Bats:"R", Throws:"R", Year:"So", Home: "Redlands, CA"},  
           {Name:"Sue Pennypacker", Bats:"L", Throws:"R", Year:"Fr", Home: "Athens, GA"}, 
           {Name:"Jill Smithfield", Bats:"R", Throws:"L", Year:"Sr", Home: "Spokane, WA"}, 
           {Name:"Shirley Goth", Bats:"R", Throws:"R", Year:"Sr", Home: "Carson, NV"}, 
           {Name:"Jennifer Dunbar", Bats:"R", Throws:"R", Year:"Fr", Home: "Seaside, CA"}, 
           {Name:"Patty Crawford", Bats:"L", Throws:"L", Year:"Jr", Home: "Whittier, CA"}, 
           {Name:"Angelina Davis", Bats:"R", Throws:"R", Year:"So", Home: "Odessa, TX"}, 
           {Name:"Maria Santiago", Bats:"L", Throws:"L", Year:"Sr", Home: "Tacoma, WA"}, 
           {Name:"Debbie Ferguson", Bats:"R", Throws:"R", Year: "Jr", Home: "Bend, OR"}, 
           {Name:"Karen Bronson", Bats:"R", Throws:"R", Year: "Sr", Home: "Billings, MO"}, 
           {Name:"Sylvia Munson", Bats:"R", Throws:"R", Year: "Jr", Home: "Pasadena, CA"}, 
           {Name:"Carla Gomez", Bats:"R", Throws:"L", Year: "Sr", Home: "Corona, CA"}, 
           {Name:"Betty Kay", Bats:"R", Throws:"R", Year: "Fr", Home: "Palo Alto, CA"}, 
   ]; 
   aDg.dataProvider = new DataProvider(aRoster); 
   aDg.rowCount = aDg.length; 
    
   function bldRosterGrid(dg:DataGrid){ 
       dg.setSize(400, 300); 
       dg.columns = ["Name", "Bats", "Throws", "Year", "Home"]; 
       dg.columns[0].width = 120; 
       dg.columns[1].width = 50; 
       dg.columns[2].width = 50; 
       dg.columns[3].width = 40; 
       dg.columns[4].width = 120; 
       dg.move(50,50); 
   };

   bldRosterGrid() 함수는 DataGrid 크기를 설정하고 열 순서 및 크기를 설정합니다.

5. [컨트롤] > [무비 테스트]를 선택합니다.

응용 프로그램에서 DataGrid 구성 요소에 대한 열 지정 및 정렬 추가

열 머리글을 클릭하면 해당 열 값을 기준으로 DataGrid 내용을 내림차순으로 정렬할 수 있습니다.

다음 예제에서는 addColumn() 메서드를 사용하여 DataGrid에 DataGridColumn 인스턴스를 추가합니다. 열에는 선수 이름과 득점이 표시됩니다. 이 예제에서는 sortOptions 속성을 설정하여 각 열의 정렬 옵션도 지정합니다. 즉, Name 열에는 Array.CASEINSENSITIVE 를 지정하고 Score 열에는 Array.NUMERIC 을 지정합니다. 또한 길이를 행 수에 맞게 설정하고 폭을 200으로 설정하여 DataGrid 크기를 조절합니다.

1. Flash에서 [파일] > [새로 만들기]를 선택하고 [Flash 파일(ActionScript 3.0)]을 선택합니다.

2. [구성 요소] 패널의 DataGrid 구성 요소를 스테이지로 드래그합니다.

3. 속성 관리자에서 인스턴스 이름으로 aDg 를 입력합니다.

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

   import fl.controls.dataGridClasses.DataGridColumn; 
   import fl.events.DataGridEvent; 
   import fl.data.DataProvider; 
   // Create columns to enable sorting of data. 
   var nameDGC:DataGridColumn = new DataGridColumn("name"); 
   nameDGC.sortOptions = Array.CASEINSENSITIVE; 
   var scoreDGC:DataGridColumn = new DataGridColumn("score"); 
   scoreDGC.sortOptions = Array.NUMERIC; 
   aDg.addColumn(nameDGC); 
   aDg.addColumn(scoreDGC); 
   var aDP_array:Array = new Array({name:"clark", score:3135}, {name:"Bruce", score:403}, {name:"Peter", score:25}) 
   aDg.dataProvider = new DataProvider(aDP_array); 
   aDg.rowCount = aDg.length; 
   aDg.width = 200;

5. [컨트롤] > [무비 테스트]를 선택합니다.

ActionScript를 사용하여 DataGrid 구성 요소 인스턴스 만들기

다음 예제에서는 ActionScript를 사용하여 DataGrid를 만들고 이를 선수 이름과 득점 Array로 채웁니다.

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

2. [구성 요소] 패널의 DataGrid 구성 요소를 현재 문서의 [라이브러리] 패널로 드래그합니다.

   구성 요소가 라이브러리에 추가되고 응용 프로그램에는 표시되지 않습니다.

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

   import fl.controls.DataGrid; 
   import fl.data.DataProvider; 
    
   var aDg:DataGrid = new DataGrid(); 
   addChild(aDg); 
   aDg.columns = [ "Name", "Score" ]; 
   aDg.setSize(140, 100); 
   aDg.move(10, 40);

   이 코드에서는 DataGrid 인스턴스를 만든 후 격자 크기를 조절하고 격자를 배치합니다.

4. 배열을 만들어 데이터를 추가하고 DataGrid에 대한 데이터 공급자로 식별합니다.

   var aDP_array:Array = new Array(); 
   aDP_array.push({Name:"Clark", Score:3135}); 
   aDP_array.push({Name:"Bruce", Score:403}); 
   aDP_array.push({Name:"Peter", Score:25}); 
   aDg.dataProvider = new DataProvider(aDP_array); 
   aDg.rowCount = aDg.length;

5. [컨트롤] > [무비 테스트]를 선택합니다.

XML 파일로 DataGrid 로드

다음 예제에서는 DataGridColumn 클래스를 사용하여 DataGrid 열을 만듭니다. 그런 다음 XML 객체를 DataProvider() 생성자의 value 매개 변수로 전달하여 DataGrid를 채웁니다.

1. 텍스트 편집기를 사용하여 다음 데이터가 포함된 XML 파일을 만든 후 FLA 파일을 저장하는 폴더와 동일한 폴더에 team.xml 로 저장합니다.

   <team> 
       <player name="Player A" avg="0.293" /> 
       <player name="Player B" avg="0.214" /> 
       <player name="Player C" avg="0.317" /> 
   </team>

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

3. [구성 요소] 패널의 DataGrid 구성 요소를 두 번 클릭하여 스테이지에 추가합니다.

4. 속성 관리자에서 인스턴스 이름으로 aDg 를 입력합니다.

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

   import fl.controls.dataGridClasses.DataGridColumn; 
   import fl.data.DataProvider; 
   import flash.net.*; 
   import flash.events.*; 
    
   var request:URLRequest = new URLRequest("team.xml"); 
   var loader:URLLoader = new URLLoader; 
    
    
   loader.load(request); 
   loader.addEventListener(Event.COMPLETE, loaderCompleteHandler); 
    
   function loaderCompleteHandler(event:Event):void { 
    
       var teamXML:XML = new XML(loader.data); 
    
       var nameCol:DataGridColumn = new DataGridColumn("name"); 
       nameCol.headerText = "Name"; 
       nameCol.width = 120; 
       var avgCol:DataGridColumn = new DataGridColumn("avg"); 
       avgCol.headerText = "Average"; 
       avgCol.width = 60; 
        
       var myDP:DataProvider = new DataProvider(teamXML); 
        
       aDg.columns = [nameCol, avgCol]; 
       aDg.width = 200; 
       aDg.dataProvider = myDP; 
       aDg.rowCount = aDg.length; 
   }

6. [컨트롤] > [무비 테스트]를 선택합니다.