アイテムレンダラーの操作
例：アイテムレンダラーを TileList コントロールと HorizontalList コントロールと共に使用する
TileList コントロールと HorizontalList コントロールは、アイテムをタイル状に並べて表示します。TileList コントロールは、アイテムを垂直列に並べます。HorizontalList コントロールは、アイテムを水平行に並べます。TileList コントロールと HorizontalList コントロールは、カスタムアイテムレンダラーと組み合わせて、イメージなどのデータの一覧を表示する場合に特に便利です。
次の図は、製品カタログの表示に使用される HorizontalList コントロールを示しています。
HorizontalList コントロールのアイテムにはそれぞれ、イメージ、説明のテキストストリングおよび価格が含まれています。次のコードは、カタログを表示するアプリケーションを示しています。HorizontalList コントロールのアイテムレンダラーは、Thumbnail という名前の MXML コンポーネントです。
<?xml version="1.0"?>
<!-- itemRenderers\MainTlistThumbnailRenderer.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Model id="catalog" source="catalog.xml"/>
<mx:HorizontalList id="myList"
columnWidth="125"
rowHeight="125"
columnCount="4"
dataProvider="{catalog.product}"
itemRenderer="myComponents.Thumbnail"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
catalog.xml ファイルには HorizontalList コントロールのデータプロバイダが定義されています。
<?xml version="1.0"?>
<catalog>
<product id="1">
<name>Nokia Model 3595</name>
<price>129.99</price>
<image>../assets/products/Nokia_3595.gif</image>
<thumbnail>../assets/products/Nokia_3595_sm.gif</thumbnail>
</product>
<product id="2">
<name>Nokia Model 3650</name>
<price>99.99</price>
<image>../assets/products/Nokia_3650.gif</image>
<thumbnail>../assets/products/Nokia_3650_sm.gif</thumbnail>
</product>
<product id="3">
<name>Nokia Model 6010</name>
<price>49.99</price>
<image>../assets/products/Nokia_6010.gif</image>
<thumbnail>../assets/products/Nokia_6010_sm.gif</thumbnail>
</product>
<product id="4">
<name>Nokia Model 6360</name>
<price>19.99</price>
<image>../assets/products/Nokia_6360.gif</image>
<thumbnail>../assets/products/Nokia_6360_sm.gif</thumbnail>
</product>
<product id="5">
<name>Nokia Model 6680</name>
<price>19.99</price>
<image>../assets/products/Nokia_6680.gif</image>
<thumbnail>../assets/products/Nokia_6680_sm.gif</thumbnail>
</product>
<product id="6">
<name>Nokia Model 6820</name>
<price>49.99</price>
<image>../assets/products/Nokia_6820.gif</image>
<thumbnail>../assets/products/Nokia_6820_sm.gif</thumbnail>
</product>
</catalog>
次の例は Thumbnail.mxml という MXML コンポーネントを示しています。この例では、アイテムレンダラーを定義して、1 つの Image コントロールと 2 つの Label コントロールという計 3 つのコントロールを設定します。これらのコントロールで、アイテムレンダラーに渡された data プロパティを調べ、表示する内容を判断します。
<?xml version="1.0" ?>
<!-- itemRenderers\htlist\myComponents\Thumbnail.mxml -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalAlign="center"
verticalGap="0" borderStyle="none" backgroundColor="white" >
<mx:Image id="image" width="60" height="60" source="{data.image}"/>
<mx:Label text="{data.name}" width="120" textAlign="center"/>
<mx:Label text="${data.price}" fontWeight="bold"/>
</mx:VBox>
TileList コントロールと HorizontalList コントロールについて詳しくは、データ駆動型コントロールの使用を参照してください。
例：アイテムレンダラーを DataGrid コントロールと共に使用する
DataGrid コントロールは DataGridColumn クラスを操作してグリッドを構成します。DataGrid コントロールでは、2 つのタイプのレンダラーを指定できます。1 つは各列のセル用で、もう 1 つは各列の最上部にあるヘッダーセル用です。DataGrid コントロールの列にアイテムレンダラーを指定するには、DataGridColumn.itemRenderer プロパティを使用します。列のヘッダーセルにアイテムレンダラーを指定するには、DataGridColumn.headerRenderer プロパティを使用します。
例えば、DataGrid コントロールの列を強調するために、列のヘッダーセルに特価を示すアイコンを使用することができます。次にアイテムレンダラーの例を示します。
<?xml version="1.0"?>
<!-- itemRenderers\dataGrid\myComponents\RendererDGHeader.mxml -->
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
[Embed(source="saleIcon.jpg")]
[Bindable]
public var sale:Class;
]]>
</mx:Script>
<mx:Label text="Sale Price!"/>
<mx:Image height="20" source="{sale}"/>
</mx:HBox>
このアイテムレンダラーは、Label コントロールを使用して「Sale Price!」というテキストを挿入し、Image コントロールを使用して列のヘッダーにアイコンを挿入します。
次の例はメインアプリケーションです。
<?xml version="1.0"?>
<!-- itemRenderers\dataGrid\MainDGHeaderRenderer.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, SalePrice: true },
{Artist:'Pavement', Album:'Brighten the Corners',
Price:11.99, SalePrice: false }
]);
]]>
</mx:Script>
<mx:DataGrid id="myGrid"
dataProvider="{initDG}"
variableRowHeight="true">
<mx:columns>
<mx:DataGridColumn dataField="Artist"/>
<mx:DataGridColumn dataField="Album"/>
<mx:DataGridColumn dataField="Price"/>
<mx:DataGridColumn width="150" dataField="SalePrice"
headerRenderer="myComponents.RendererDGHeader"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
この例では、DataGrid コントロールの列に String の true または false を表示し、その価格が特価かどうかを示しています。またその列のアイテムレンダラーを定義して、テキストよりも視覚効果の高いアイコンを表示することもできます。DataGrid コントロールと共にアイテムレンダラーを使用する例については、カスタムアイテムレンダラーとカスタムアイテムエディタの使用を参照してください。
例：アイテムレンダラーを List コントロールと共に使用する
カスタムアイテムレンダラーを List コントロールと共に使用する場合は、次の例のように、List.itemRenderer プロパティを使用して指定します。
<?xml version="1.0"?>
<!-- itemRenderers\list\MainListStateRenderer.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
height="700" width="700">
<mx:List id="myList"
height="180" width="250"
variableRowHeight="true"
itemRenderer="myComponents.RendererState"
backgroundColor="white" >
<mx:dataProvider>
<mx:Object label="Alaska"
data="Juneau"
webPage="http://www.state.ak.us/"/>
<mx:Object label="Alabama"
data="Montgomery"
webPage="http://www.alabama.gov/" />
<mx:Object label="Arkansas"
data="Little Rock"
webPage="http://www.state.ar.us/"/>
</mx:dataProvider>
</mx:List>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
前の例では、List コントロールのデフォルトの行の高さを超える内容をアイテムレンダラーに表示するので、rowHeight プロパティを 75 ピクセルに設定しています。このアプリケーションのイメージについては、カスタムアイテムレンダラーとカスタムアイテムエディタの使用を参照してください。
次の例に示す RendererState.mxml アイテムレンダラーは、各 List アイテムの部分を表示し、州の Web サイトを開くことができる LinkButton コントロールを作成します。
<?xml version="1.0"?>
<!-- itemRenderers\list\myComponents\RendererState.mxml -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Script>
<![CDATA[
// Import Event and URLRequest classes.
import flash.events.Event;
import flash.net.URLRequest;
private var u:URLRequest;
// Event handler to open URL using
// the navigateToURL() method.
private function handleClick(eventObj:Event):void {
u = new URLRequest(data.webPage);
navigateToURL(u);
}
]]>
</mx:Script>
<mx:HBox >
<!-- Use Label controls to display state and capital names. -->
<mx:Label id="State" text="State: {data.label}"/>
<mx:Label id="Statecapital" text="Capital: {data.data}" />
</mx:HBox>
<!-- Define the Link control to open a URL. -->
<mx:LinkButton id="webPage" label="Official {data.label} web page"
click="handleClick(event);" color="blue" />
</mx:VBox>
例：アイテムレンダラーを Tree コントロールと共に使用する
Tree コントロールでは、itemRenderer プロパティを使用して、ツリーのすべてのノードに対して 1 つのレンダラーを指定します。カスタムアイテムレンダラーを定義する場合は、テキストやアイコンなど、ノード全体の表示を処理する必要があります。
アイテムレンダラーを、デフォルトのアイテムレンダラークラスである TreeItemRenderer クラスのサブクラスとして定義する方法もあります。その場合は、アイテムレンダラー全体を実装せずに、アプリケーションの必要に合わせてアイテムレンダラーを修正できます。次に例を示します。
package myComponents
{
// itemRenderers/tree/myComponents/MyTreeItemRenderer.as
import mx.controls.treeClasses.*;
import mx.collections.*;
public class MyTreeItemRenderer extends TreeItemRenderer
{
// Define the constructor.
public function MyTreeItemRenderer() {
super();
}
// Override the set method for the data property
// to set the font color and style of each node.
override public function set data(value:Object):void {
super.data = value;
if(TreeListData(super.listData).hasChildren)
{
setStyle("color", 0xff0000);
setStyle("fontWeight", 'bold');
}
else
{
setStyle("color", 0x000000);
setStyle("fontWeight", 'normal');
}
}
// Override the updateDisplayList() method
// to set the text for each tree node.
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);
if(super.data)
{
if(TreeListData(super.listData).hasChildren)
{
var tmp:XMLList =
new XMLList(TreeListData(super.listData).item);
var myStr:int = tmp[0].children().length();
super.label.text = TreeListData(super.listData).label +
"(" + myStr + ")";
}
}
}
}
}
このアイテムレンダラーは、子ノードを持つノードのテキストを赤で表示し、子ノードの数を括弧で囲んで表示します。次の例では、このアイテムレンダラーをアプリケーションで使用しています。
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- itemRenderers\tree\MainTreeItemRenderer.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
initialize="initCollections();">
<mx:Script>
<![CDATA[
import mx.collections.*;
public var xmlBalanced:XMLList =
<>
<node label="Containers">
<node label="DividedBoxClasses">
<node label="BoxDivider" data="BoxDivider.as"/>
</node>
<node label="GridClasses">
<node label="GridRow" data="GridRow.as"/>
<node label="GridItem" data="GridItem.as"/>
<node label="Other File" data="Other.as"/>
</node>
</node>
<node label="Data">
<node label="Messages">
<node label="DataMessage"
data="DataMessage.as"/>
<node label="SequenceMessage"
data="SequenceMessage.as"/>
</node>
<node label="Events">
<node label="ConflictEvents"
data="ConflictEvent.as"/>
<node label="CommitFaultEvent"
data="CommitFaultEvent.as"/>
</node>
</node>
</>;
[Bindable]
public var xlcBalanced:XMLListCollection;
private function initCollections():void {
xlcBalanced = new XMLListCollection(xmlBalanced);
}
]]>
</mx:Script>
<mx:Text width="400"
text="The nodes with children are in bold red text, with the number of children in parenthesis.)"/>
<mx:Tree id="compBalanced"
width="400" height="500"
dataProvider="{xlcBalanced}"
labelField="@label"
itemRenderer="myComponents.MyTreeItemRenderer"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート