行および列のスタイル操作
AdvancedDataGrid コントロールの行および列にスタイルを適用するには、コールバック関数を使用します。行のスタイルを操作するには、AdvancedDataGrid.styleFunction プロパティを使用してコールバック関数を指定します。また、列のスタイルを操作するには、AdvancedDataGridColumn.styleFunction プロパティを使用してコールバック関数を指定します。
最初に AdvancedDataGrid.styleFunction プロパティで指定されたコールバック関数が呼び出され、次に AdvancedDataGridColumn.styleFunction プロパティで指定された関数が呼び出されます。つまり、AdvancedDataGrid コントロールでは、最初に行にスタイルが適用され、その後で列にスタイルが適用されます。
コールバック関数には次のシグネチャが必要です。
function_name(data:Object, column:AdvancedDataGridColumn):Object
この関数は、スタイルの設定を指定する 1 つまたは複数の styleName:value のペアが含まれたオブジェクトか、null を返します。styleName フィールドは、color など、スタイルプロパティの名前になります。また、value フィールドは、0x00FF00 など、スタイルプロパティの値になります。例えば、次のようなコードを使用して 2 種類のスタイルを返すことができます。
{color:0xFF0000, fontWeight:"bold"}
AdvancedDataGrid は、表示を更新する場合にコールバック関数を呼び出します。例えば、アプリケーションの起動時に最初に描画する場合や、invalidateList() メソッドを呼び出した場合が該当します。
このセクションの例では、コールバック関数を使用して AdvancedDataGrid コントロールのスタイルを設定します。このセクションの例は、すべて StyleData.as ファイルの次のデータを使用しています。
[Bindable]
private var dpADG:ArrayCollection = new ArrayCollection([
{Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
{Artist:'Pavement', Album:'Brighten the Corners', Price:11.99},
{Artist:'Saner', Album:'A Child Once', Price:11.99},
{Artist:'Saner', Album:'Helium Wings', Price:12.99},
{Artist:'The Doors', Album:'The Doors', Price:10.99},
{Artist:'The Doors', Album:'Morrison Hotel', Price:12.99},
{Artist:'Grateful Dead', Album:'American Beauty', Price:11.99},
{Artist:'Grateful Dead', Album:'In the Dark', Price:11.99},
{Artist:'Grateful Dead', Album:'Shakedown Street', Price:11.99},
{Artist:'The Doors', Album:'Strange Days', Price:12.99},
{Artist:'The Doors', Album:'The Best of the Doors', Price:10.99}
]);
行のスタイル操作
次の例では、AdvancedDataGrid.styleFunction プロパティを使用してコールバック関数を指定し、AdvancedDataGrid コントロールの行にスタイルを適用しています。この例では、Button コントロールを使用して AdvancedDataGrid コントロールからアーティストを選択します。選択されたアーティストの行は、コールバック関数によってすべて赤でハイライトされます。
<?xml version="1.0"?>
<!-- dpcontrols/adg/SimpleADGRowStyleFunc.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
// Include the data for the AdvancedDataGrid control.
include "StyleData.as"
// Artist name to highlight.
protected var artistName:String;
// Event handler to set the selected artist's name
// based on the selected Button control.
public function setArtistName(event:Event):void
{
artistName=Button(event.currentTarget).label;
// Refresh row display.
myADG.invalidateList();
}
// Callback function that highlights in red
// all rows for the selected artist.
public function myStyleFunc(data:Object,
col:AdvancedDataGridColumn):Object
{
if (data["Artist"] == artistName)
return {color:0xFF0000};
// Return null if the Artist name does not match.
return null;
}
]]>
</mx:Script>
<mx:AdvancedDataGrid id="myADG"
width="100%" height="100%"
dataProvider="{dpADG}"
styleFunction="myStyleFunc">
<mx:columns>
<mx:AdvancedDataGridColumn dataField="Artist"/>
<mx:AdvancedDataGridColumn dataField="Album"/>
<mx:AdvancedDataGridColumn dataField="Price"/>
</mx:columns>
</mx:AdvancedDataGrid>
<mx:HBox>
<mx:Button label="Pavement" click="setArtistName(event);"/>
<mx:Button label="Saner" click="setArtistName(event);"/>
<mx:Button label="The Doors" click="setArtistName(event);"/>
</mx:HBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
列のスタイル操作
次の例は前のセクションの例を修正したもので、コールバック関数を使用して AdvancedDataGrid コントロールの行と 1 つの列にスタイルを適用しています。この例では、$11.00 未満の価格を持つ「Price」列のセルが、すべて緑で表示されます。
<?xml version="1.0"?>
<!-- dpcontrols/adg/SimpleADGColumnStyleFunc.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
// Include the data for the AdvancedDataGrid control.
include "StyleData.as"
// Artist name to highlight.
protected var artistName:String;
// Event handler to set the selected artist's name
// based on the selected Button control.
public function setArtistName(event:Event):void
{
artistName=Button(event.currentTarget).label;
// Refresh row display.
myADG.invalidateList();
}
// Callback function that highlights in red
// all rows for the selected artist.
public function myStyleFunc(data:Object,
col:AdvancedDataGridColumn):Object
{
if (data["Artist"] == artistName)
return {color:0xFF0000};
// Return null if the Artist name does not match.
return null;
}
// Callback function that hightlights in green
// all entries in the Price column
// with a value less than $11.00.
public function myColStyleFunc(data:Object,
col:AdvancedDataGridColumn):Object
{
if(data["Price"] <= 11.00)
return {color:0x00FF00};
return null;
}
]]>
</mx:Script>
<mx:AdvancedDataGrid id="myADG"
width="100%" height="100%"
dataProvider="{dpADG}"
styleFunction="myStyleFunc">
<mx:columns>
<mx:AdvancedDataGridColumn dataField="Artist"/>
<mx:AdvancedDataGridColumn dataField="Album"/>
<mx:AdvancedDataGridColumn dataField="Price"
styleFunction="myColStyleFunc"/>
</mx:columns>
</mx:AdvancedDataGrid>
<mx:HBox>
<mx:Button label="Pavement" click="setArtistName(event);"/>
<mx:Button label="Saner" click="setArtistName(event);"/>
<mx:Button label="The Doors" click="setArtistName(event);"/>
</mx:HBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
列でのデータフォーマッタの使用
AdvancedDataGridColumn クラスには、formatter プロパティが用意されています。このプロパティを使用すると、Formatter クラスのインスタンスを列、または Formatter クラスのサブクラスのインスタンスに渡すことができます。フォーマッタクラスは、カスタマイズされたストリングにデータを変換します。例えば、CurrencyFormatter クラスを使用すると、「Price」列の値の先頭にドル記号（$）が付加されます。
フォーマッタクラスは、labelFunction プロパティまたは styleFunction プロパティで指定されたコールバック関数と共に使用します。コールバック関数を指定すると、そのコールバック関数が呼び出された後にフォーマッタクラスが呼び出されます。
次の例は、行のスタイル操作の例を修正したもので、「Price」列に CurrencyFormatter クラスを追加して、価格の先頭に $ 記号を付加しています。
<?xml version="1.0"?>
<!-- dpcontrols/adg/SimpleADGRowFormatter.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
// Include the data for the AdvancedDataGrid control.
include "StyleData.as"
// Artist name to highlight.
protected var artistName:String;
// Event handler to set the selected artist's name
// based on the selected Button control.
public function setArtistName(event:Event):void
{
artistName=Button(event.currentTarget).label;
// Refresh row display.
myADG.invalidateList();
}
// Callback function that hightlights in red
// all rows for the selected artist.
public function myStyleFunc(data:Object,
col:AdvancedDataGridColumn):Object
{
if (data["Artist"] == artistName)
return {color:0xFF0000};
// Return null if the Artist name does not match.
return null;
}
]]>
</mx:Script>
<mx:AdvancedDataGrid id="myADG"
width="100%" height="100%"
dataProvider="{dpADG}"
styleFunction="myStyleFunc">
<mx:columns>
<mx:AdvancedDataGridColumn dataField="Artist"/>
<mx:AdvancedDataGridColumn dataField="Album"/>
<mx:AdvancedDataGridColumn width="75" dataField="Price">
<mx:formatter>
<mx:CurrencyFormatter/>
</mx:formatter>
</mx:AdvancedDataGridColumn>
</mx:columns>
</mx:AdvancedDataGrid>
<mx:HBox>
<mx:Button label="Pavement" click="setArtistName(event);"/>
<mx:Button label="Saner" click="setArtistName(event);"/>
<mx:Button label="The Doors" click="setArtistName(event);"/>
</mx:HBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート