DataGrid コンポーネントの使用

DataGrid コンポーネントを使用すると、行と列から成るグリッドにデータを表示できます。表示するデータは、配列から、または DataProvider の配列として解析できる外部 XML ファイルから取得できます。DataGrid コンポーネントには、垂直および水平のスクロール、イベントサポート (編集可能なセルのサポートを含む)、および並べ替えの機能が備わっています。

グリッド内の列のサイズを変更したり、フォントやカラー、境界線などの特性をカスタマイズしたりすることができます。 グリッド内の列に対して、カスタムムービークリップをセルレンダラーとして使うことができます。 セルレンダラーはセルの内容を表示します。 スクロールバーを無効にして DataGrid メソッドを使用すると、ページビュースタイルの表示を作成できます。 カスタマイズについて詳しくは、「 Adobe Flash Professional CS5 用 ActionScript 3.0 リファレンスガイド 」の DataGridColumn クラスを参照してください。

DataGrid コンポーネントのユーザー操作

DataGrid コンポーネントは、マウスとキーボードを使って操作することができます。

sortableColumns プロパティと列の sortable プロパティの両方が true の場合は、列ヘッダーをクリックすると、その列の値に従ってデータが並べ替えられます。各列の sortable プロパティを false に設定すると、列ごとに並べ替えを無効にできます。

resizableColumns プロパティが true の場合は、ヘッダー行で列の分割線をドラッグすると、列のサイズを変更できます。

編集可能なセル内をクリックすると、そのセルにフォーカスが移動します。編集不可能なセル内をクリックしても、フォーカスには影響しません。 それぞれのセルは、そのセルの DataGrid.editable プロパティと DataGridColumn.editable プロパティの両方が true である場合に編集可能になります。

詳しくは、「 Adobe Flash Professional CS5 用 ActionScript 3.0 リファレンスガイド 」の DataGrid クラスおよび DataGridColumn クラスを参照してください。

クリックするか Tab キーで移動することによって DataGrid インスタンスにフォーカスが移動した場合は、次のキーを使って操作することができます。

キー

説明

下向き矢印

セルの編集中は、挿入ポインターがセルのテキストの最後に移動します。セルが編集不可能な場合は、List コンポーネントと同様の方法で選択操作が処理されます。

上向き矢印

セルの編集中は、挿入ポインターがセルのテキストの最初に移動します。セルが編集不可能な場合は、List コンポーネントと同様の方法で選択操作が処理されます。

Shift+ ↑ / Shift+ ↓

DataGrid が編集不可能で、 allowMultipleSelection true の場合は、連続した複数の行が選択されます。逆向きの矢印キーで反対方向に移動すると、元の方向に複数行の選択を開始した行を過ぎるまで、選択されていた行が選択解除されます。

Shift キーを押しながらクリック

allowMultipleSelection true の場合は、選択された行と現在のキャレット位置(ハイライトされているセル)の間にある行がすべて選択されます。

Ctrl キーを押しながらクリック

allowMultipleSelection true の場合は、複数の行を選択できます。これらの行は連続している必要はありません。

右向き矢印

セルが編集中の場合は、挿入ポインターが 1 文字右に移動します。 セルが編集不可能な場合は何も起こりません。

左向き矢印

セルが編集中の場合は、挿入ポインターが 1 文字左に移動します。 セルが編集不可能な場合は何も起こりません。

Home

DataGrid の先頭の行が選択されます。

End

DataGrid の最後の行が選択されます。

PageUp

DataGrid のページ内の先頭の行が選択されます。 ページは、DataGrid がスクロールせずに表示できる行数で構成されます。

PageDown

DataGrid のページ内の最後の行が選択されます。 ページは、スクロールせずに DataGrid が表示できる行数で構成されます。

Return/Enter/Shift+Enter

セルが編集可能な場合は、変更内容が確定され、挿入ポインターが次の行の同じ列のセルに移動します。次の行が上か下かは Shift キーの状態によって決まります。

Shift+Tab/Tab

DataGrid が編集可能な場合は、列の終端に達するまで、前のアイテム (次のアイテム) にフォーカスが移動します。列の終端に到達すると、先頭のセル (最後のセル) に達するまで、前の行 (次の行) にフォーカスが移動します。 先頭のセルが選択されている場合は、Shift+Tab キーを押すと、前のコントロールにフォーカスが移動します。 最後のセルが選択されている場合は、Tab キーを押すと、次のコントロールにフォーカスが移動します。

DataGrid が編集不可能な場合は、前のコントロール (次のコントロール) にフォーカスが移動します。

DataGrid コンポーネントは、データを中心とするさまざまな種類のアプリケーションの基盤として使うことができます。 データを書式設定し、表形式で表示することが簡単にできます。また、セルレンダラー機能を使用して、さらに洗練された編集可能なユーザーインターフェイス要素を作成することもできます。 次に、DataGrid コンポーネントの使用例を示します。

  • Web メールクライアント

  • 検索結果ページ

  • ローン計算や税金報告書などのスプレッドシートアプリケーション

DataGrid クラスは SelectableList クラスを拡張したものなので、DataGrid コンポーネントを使用してアプリケーションをデザインするときは、List コンポーネントのデザインを理解することが大切です。 SelectableList クラスおよび List コンポーネントについて詳しくは、「 Adobe Flash Professional CS5 用 ActionScript 3.0 リファレンスガイド 」の SelectableList クラスおよび List クラスを参照してください。

DataGrid コンポーネントをアプリケーションに追加する際に、次の ActionScript コード行を追加することで、そのコンポーネントをスクリーンリーダーが読み取れるように設定できます。

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

1 つのコンポーネントに対してアクセシビリティ機能を有効化する処理は、そのコンポーネントがインスタンスをいくつ持つかに関係なく、一度だけ実行します。 詳しくは、『Flash ユーザーガイド』の第 18 章「アクセシビリティコンテンツの作成」を参照してください。

DataGrid コンポーネントのパラメーター

プロパティインスペクターまたはコンポーネントインスペクターで DataGrid コンポーネントの各インスタンスに設定できるオーサリングパラメーターは、 allowMultipleSelection editable headerHeight horizontalLineScrollSize horizontalPageScrollSize horizontalScrolllPolicy resizableColumns rowHeight showHeaders verticalLineScrollSize verticalPageScrollSize および verticalScrollPolicy です。これらの各パラメーターには、対応する同名の ActionScript プロパティがあります。 これらのパラメーターに設定できる値については、「 Adobe Flash Professional CS5 用 ActionScript 3.0 リファレンスガイド 」の DataGrid クラスを参照してください。

DataGrid コンポーネントを使用したアプリケーションの作成

DataGrid コンポーネントを使用してアプリケーションを作成するには、まずデータをどこから取り出すかを決める必要があります。 通常は、 dataProvider プロパティを設定することでグリッドに読み込むことができる Array からデータを取り出します。また、DataGrid クラスと DataGridColumn クラスのメソッドを使用して、データをグリッドに追加することもできます。

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. 制御/ムービープレビューを選択します。