アイテムレンダラーとアイテムエディタコンポーネントの作成
MXML コンポーネントを使用してカスタムアイテムレンダラーまたはカスタムアイテムエディタを定義すると、ドロップインアイテムレンダラーやドロップインアイテムエディタを使用する場合に比べて、柔軟性と機能性が高まります。アイテムレンダラーとアイテムエディタをカスタムコンポーネントとして定義する際の規則の多くは、インラインアイテムレンダラーやインラインアイテムエディタを使用する場合と同じです。詳しくは、インラインアイテムレンダラーとインラインアイテムエディタの作成を参照してください。
カスタムコンポーネントの操作方法の詳細については、『Adobe Flex 3 コンポーネントの作成と拡張』を参照してください。
アイテムレンダラーコンポーネントの作成
デフォルトのアイテムレンダリングとセル編集の節では、3 つのテキストフィールドを使用してアルバムの情報を表示する DataGrid コントロールについて説明します。DataGrid コントロールにビジュアルエレメントを追加すると、視覚効果を高めることができます。このため、データプロバイダを変更して、アルバムカバーの JPEG イメージの URL が含まれるようにします。
DataGrid コントロールのデフォルトアイテムレンダラーでは、データをテキストとして表示します。DataGrid コントロールでアルバムカバーのイメージを表示するには、次の例のように、RendererDGImage.mxml ファイルに定義されたカスタムアイテムレンダラーを使用します。
<?xml version="1.0"?>
<!-- itemRenderers\myComponents\RendererDGImage.mxml -->
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalAlign="center" >
<mx:Image id="albumImage" height="175" source="{data.Cover}"/>
</mx:HBox>
このアイテムレンダラーでは、Image コントロールは HBox コンテナに入っています。イメージをコンテナの中央に配置する場合は、HBox コンテナで指定します。それ以外の場合は、イメージは左寄せでセルに表示されます。Image コントロールでイメージの高さを 75 ピクセルに指定します。デフォルトではイメージの高さは 0 ピクセルです。そのため高さを省略すると、イメージは表示されません。
data プロパティのフィールドをアイテムレンダラーまたはアイテムエディタのコントロールと関連付けるには、データバインディングを使用します。この例では、アイテムレンダラーに渡される data プロパティに、DataGrid コントロールの行全体で使用されるデータプロバイダのエレメントが含まれています。次に data プロパティの Cover フィールドを Image コントロールにバインドします。
次の例では、カスタムアイテムレンダラーを DataGrid コントロールと共に使用する方法を示します。
<?xml version="1.0"?>
<!-- itemRenderers\MainDGImageRenderer.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var initDG:ArrayCollection = new ArrayCollection([
{Artist:'Pavement', Album:'Slanted and Enchanted',
Price:11.99, Cover: '../assets/slanted.jpg'},
{Artist:'Pavement', Album:'Brighten the Corners',
Price:11.99, Cover: '../assets/brighten.jpg'}
]);
]]>
</mx:Script>
<mx:DataGrid id="myGrid"
dataProvider="{initDG}"
variableRowHeight="true">
<mx:columns>
<mx:DataGridColumn dataField="Artist"/>
<mx:DataGridColumn dataField="Album"/>
<mx:DataGridColumn dataField="Cover"
itemRenderer="myComponents.RendererDGImage"/>
<mx:DataGridColumn dataField="Price"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
DataGrid コントロールにはアルバムカバーの列が入っています。この列では itemRenderer プロパティを使用して、その列のアイテムレンダラーを含む MXML ファイルの名前を指定しています。この例を実行すると、DataGrid コントロールは Cover 列用に作成されたカスタムアイテムレンダラーを使用して、アルバムカバーのイメージを表示します。
アイテムレンダラーを使用すると、次の例のように、アルバム名とアルバムイメージを DataGrid コントロールの別個のセルではなく、1 つのセルに表示させることができます。
<?xml version="1.0"?>
<!-- itemRenderers\inline\myComponents\RendererDGTitleImage.mxml -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalAlign="center" height="75">
<mx:Text id="albumName"
width="100%"
selectable="false"
text="{data.Album}"/>
<mx:Image id="albumImage"
source="{data.Cover}"/>
</mx:VBox>
このアイテムレンダラーを RendererDGTitleImage.mxml ファイルに保存します。メインアプリケーションの DataGrid コントロールは、次の例のように、このアイテムレンダラーを参照します。
<?xml version="1.0"?>
<!-- itemRenderers\MainDGTitleRenderer.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var initDG:ArrayCollection = new ArrayCollection([
{Artist:'Pavement', Album:'Slanted and Enchanted',
Price:11.99, Cover: '../assets/slanted.jpg'},
{Artist:'Pavement', Album:'Brighten the Corners',
Price:11.99, Cover: '../assets/brighten.jpg'}
]);
]]>
</mx:Script>
<mx:DataGrid id="myGrid"
dataProvider="{initDG}"
variableRowHeight="true">
<mx:columns>
<mx:DataGridColumn dataField="Artist" />
<mx:DataGridColumn dataField="Album"
itemRenderer="myComponents.RendererDGTitleImage" />
<mx:DataGridColumn dataField="Price" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
前の例では、DataGrid コントロールに 3 つの列を定義し、アイテムレンダラーを 2 番目の列に割り当てています。このアプリケーションによって作成される図については、カスタムアイテムレンダラーとカスタムアイテムエディタの使用を参照してください。
単純なアイテムエディタコンポーネントの作成
単純なアイテムエディタコンポーネントでは、セルの編集に使用するコントロールを 1 つ定義し、リストコントロールに値を 1 つだけ返します。単純なアイテムエディタコンポーネントの例については、アイテムレンダラーまたはアイテムエディタとしてのコンポーネントの使用を参照してください。
複雑なアイテムエディタには、複数のコンポーネントを含めることができます。または、リストコントロールに複数の値を戻せます。詳しくは、アイテムエディタの操作を参照してください。
データプロパティのオーバーライド
カスタムアイテムレンダラーまたはカスタムアイテムエディタで使用し、レンダラーに渡されたデータへのアクセスを必要とするすべてのコンポーネントには、mx.core.IDataRenderer インターフェイスを実装して、data プロパティを定義する必要があります。このプロパティは、すべての Flex コンテナと多数の Flex コンポーネントでサポートされています。
クラスは、次のシグネチャで data プロパティを setter および getter メソッドとして定義することで、mx.core.IDataRenderer インターフェイスを実装します。
override public function set data(value:Object):void public function get data():Object
setter メソッドでは、「値」はアイテムレンダラーに渡された data プロパティです。
カスタムコンポーネントを定義して data プロパティをサポートするには、コンポーネントに mx.core.IDataRenderer インターフェイスを実装する必要があります。定義したコンポーネントが、mx.core.IDataRenderer インターフェイスを実装しているクラスのサブクラスである場合は、このインターフェイスを再度実装する必要はありません。
既に data プロパティを実装しているアイテムレンダラーまたはアイテムエディタのコントロールにプログラムロジックを追加するには、data プロパティで setter または getter メソッドをオーバーライドします。通常は、渡された値を基に一部の処理を実行できるように、setter メソッドをオーバーライドします。
例えば、次の DataGrid コントロールは、データプロバイダの SalePrice フィールドの true 値と false 値を使用しています。これらの値を DataGrid コントロールに表示することもできますが、イメージを表示することによって、次のアイテムレンダラーのようにより効果的な DataGrid コントロールを作成できます。
<?xml version="1.0"?>
<!-- itemRenderers\component\myComponents\RendererDGImageSelect.mxml -->
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalAlign="center">
<mx:Script>
<![CDATA[
import mx.events.FlexEvent;
[Embed(source="saleIcon.jpg")]
[Bindable]
public var sale:Class;
[Embed(source="noSaleIcon.jpg")]
[Bindable]
public var noSale:Class;
override public function set data(value:Object):void {
if(value != null) {
super.data = value;
if (value.SalePrice == true) onSale.source=new sale();
else onSale.source=new noSale();
}
// Dispatch the dataChange event.
dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
}
]]>
</mx:Script>
<mx:Image id="onSale" height="20"/>
</mx:HBox>
この例では、HBox コンテナの setter メソッドをオーバーライドしています。オーバーライドでは、super.data を使用して基本クラスの data プロパティを設定し、次に SalePrice フィールドの値を基に Image コントロールの source プロパティを設定しています。このフィールドが true の場合、商品は特売中なので、それを示すアイコンを表示します。この商品が特売中でない場合、別のアイコンを表示します。
また、オーバーライドでは、dataChange イベントが送出され data プロパティが変更されたことが通知されます。通常、このイベントは setter メソッドから送出されます。
creationComplete イベントと dataChange イベントの使用について
コンポーネントが作成および初期化されると、Flex はそのコンポーネントに対して 1 回だけ creationComplete イベントを送出します。多くのカスタムコンポーネントは、creationComplete イベントのイベントリスナーを定義し、コンポーネントが完全に作成および初期化された後に実行する必要があるすべての後処理タスクを処理します。
ただし、アイテムレンダラーまたはアイテムエディタでは、アイテムレンダラーまたはアイテムエディタのインスタンスが再利用されますが、これらの再利用されたインスタンスは creationComplete イベントを再送出しません。このイベントの代わりに、dataChange イベントをアイテムレンダラーやアイテムエディタと共に使用することができます。これによって、data プロパティが変更されるたびに dataChange イベントが送出されます。listData プロパティへのアクセスの節の例では、dataChange イベントを使用して DataGrid コントロールのアイテムレンダラーの TextArea を更新しています。
ActionScript でのアイテムレンダラーの作成
一般的に、アイテムレンダラーやアイテムエディタは MXML で作成しますが、ActionScript でも作成することができます。次にアイテムレンダラーの例を示します。
package myComponents {
// myComponents/CellField.as
import mx.controls.*;
import mx.core.*;
import mx.controls.dataGridClasses.DataGridListData;
public class CellField extends TextInput
{
// Define the constructor and set properties.
public function CellField() {
super();
height=60;
width=80;
setStyle("borderStyle", "none");
editable=false;
}
// Override the set method for the data property.
override public function set data(value:Object):void {
super.data = value;
if (value != null)
{
text = value[DataGridListData(listData).dataField];
if(Number(text) > 100)
{
setStyle("backgroundColor", 0xFF0000);
}
}
else
{
// If value is null, clear text.
text= "";
}
super.invalidateDisplayList();
}
}
}
前の例では、アイテムレンダラーとして TextInput コントロールのサブクラスを作成しています。アイテムレンダラーまたはアイテムエディタとして使用するには、そのクラスはパブリックである必要があります。DataGrid セルの値が 100 より大きい場合、このアイテムレンダラーは背景を赤で表示します。
このアイテムレンダラーは DataGrid コントロールで使用できます。次に例を示します。
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- itemRenderers\asRenderer\MainASItemRenderer.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
width="600" height="600">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var initDG:ArrayCollection = new ArrayCollection([
{Monday: 12, Tuesday: 22, Wednesday: 452, Thursday: 90},
{Monday: 258, Tuesday: 22, Wednesday: 45, Thursday: 46},
{Monday: 4, Tuesday: 123, Wednesday: 50, Thursday: 95},
{Monday: 12, Tuesday: 52, Wednesday: 111, Thursday: 20},
{Monday: 22, Tuesday: 78, Wednesday: 4, Thursday: 51}
]);
]]>
</mx:Script>
<mx:Text text="All cells over 100 are red" />
<mx:DataGrid id="myDataGrid"
dataProvider="{initDG}"
variableRowHeight="true">
<mx:columns>
<mx:DataGridColumn dataField="Monday"
itemRenderer="myComponents.CellField" />
<mx:DataGridColumn dataField="Tuesday"
itemRenderer="myComponents.CellField" />
<mx:DataGridColumn dataField="Wednesday"
itemRenderer="myComponents.CellField" />
<mx:DataGridColumn dataField="Thursday"
itemRenderer="myComponents.CellField" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート