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() メソッドを使用して DataGridColumn インスタンスを DataGrid に追加します。各列は、選手の名前と得点を表しています。 この例では、各列の並べ替えオプションを指定するために、 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. 制御／ムービープレビューを選択します。