折角書いてあるので、本家のドキュメントのDataGrid の使用に沿って勉強してみるか。
リファレンスのfl.controls.DataGridも参照しつつ。
あと前回も見たFiltering and formatting data in the DataGrid component | Adobe Developer ConnectionはだいたいDataGridの説明なので、これも適宜読み返しつつ。
今回からSyntax Highlighterを導入してみた。
デフォルトの着色なので、本文とズレている気もするが、そこはとりあえず気にせず。
えーと「DataGrid の使用」には大した事書いてないね、やっぱし。
でも、Adobeさんが出している資料なので、ここ読んでなくてギークさんに質問したりすると「マニュアル読めやゴルァ」とトマホーク投げてこられるので、当方に迎撃の覚悟なしな私としては、ちゃんと読む事にする。
あーAdobe Flash Professional CS5 * DataGrid コンポーネントの使用の方が1ページにまとまってて読みやすいや。内容はCS3ほとんど一緒みたいだし。これからはCS5の方を読む事にしよう。CS5持たないけど。
あと、使用の方を読んで、あんまり大した事書いてないなーと思ってたらAdobe Flash Professional CS5 * UI コンポーネントのカスタマイズの方にカスタマイズ方法は載ってんのね。
いやほんと、マニュアルって一通り読まないとダメだねぇ。…まぁ大した事書いてなかったけど…、一応CellRendererについては書いてあったので読んどいた方が良かったです。
基本的なところはfl.controls.ComboBoxと一緒で、ArrayでもObjectでもDataProviderに設定できる。
違うところは当然、列(fl.controls.dataGridClasses.DataGridColumn)があること。それからタイトル行があるってこと。
データを表示するセルのレンダラ(fl.controls.listClasses.CellRenderer)とはべつに、タイトル用のレンダラ(fl.controls.dataGridClasses.HeaderRenderer)が存在する。
そろそろステージにコンポーネントを置いてプロパティを設定して云々を説明するのが面倒になってきたので、ActipnScriptで全部やる。
ドキュメントクラスに書くと、dataProviderを別にタイムラインで設定するのがめんどっちーので、最初からタイムラインに書く。
import fl.data.DataProvider; import fl.controls.DataGrid; const WEAPONS:Array = [ "ひのきのぼう","どうのつるぎ","てつのやり","はがねのつるぎ"]; var dg:DataGrid = new DataGrid(); dg.dataProvider = new DataProvider( WEAPONS ); addChild( dg );
コンストラクタのDataProvider()にArrayを食わせると、dataとlabelを持ったObjectに変換されるので、dataとlabelの列を持った表になる、内容はdataとlabelで一緒。
正直、Arrayで設定するのは使いどころがないと思う。
次は最初からObjectで設定してみる、といってもArrayの各項目がObjectな訳だが。
流石に、
import fl.data.DataProvider;
import fl.controls.DataGrid;
const WEAPONS:Array = [
{ name:"ひのきのぼう", cost:10 },
{ name:"どうのつるぎ", cost:270 },
{ name:"てつのやり", cost:750 },
{ name:"はがねのつるぎ", cost:2000 }
];
var dg:DataGrid = new DataGrid();
dg.dataProvider = new DataProvider( WEAPONS );
dg.width = 300;
dg.columns = [ "name", "cost" ];
dg.columns[ 0 ].width = 200;
dg.columns[ 0 ].headerText = "なまえ";
dg.columns[ 1 ].width = 100;
dg.columns[ 1 ].headerText = "ねだん";
addChild( dg );
列が複数になったので、その順番を決める。dg.columns = [ "name", "cost" ];の部分だ。
どうもこのcolumnsプロパティにArrayを設定すると。DataGridColumnを生成するようだ。
なので、個々の列のwidthやらheaderTextやらの設定を行った後にcolumnsで順番を変えようとすると、列が生成し直されてしまい、値が消えてしまう。
あとから順番入れ換えるにはどうしたらいいんだ…。地道にスワップするしかないんか?
さて、それはともかくdg.columns[ 添字 ]で各DataGridColumnにアクセスできるので、当然列のプロパティもいじれる。getColumnAt()でも取れるんだけど、columnsの方が直感的ではある。他のやつもドットシンタックスでホイホイアクセスできるように作ってあればの話だけど。AS3的には今のところ要素にはgetItem系のメソッドでアクセスするのが正当な感じがする。何となくだけど。
日本人的には、ヘッダがアルファベットのままというのはありえんので、headerTextを設定。どーにかできた。
あ、widthだけどスクロールバーのことを考えると列幅の合計は全体より20px短くすると丁度収まるらしい。ぴったりにしておいても右端のセルが短くなるんで大した問題でもない気もする。カラムを入れ替えることがある場合には短くしておいた方が他の列との折り合いが良いかな。でも 20pxって決まってるわけでもないしなー。
自前でDataGridColumn作って、DataGridに追加していく方法もあるので、そちらも試してみる。
ミソはdataProviderを設定するのをDataGridColumn追加の後にすること。
dataProviderに設定した時点でDataGridColumnが「ひとつも」無かったら適宜作られるので、その後にaddColumn()するとホントに列が追加される。
逆にaddColumn()した後にdataProviderに設定したら、DataGridColumnのdataFieldプロパティ(次のコードの場合、コンストラクタで指定している)に合わせてデータが配分される。適当なDataGridColumnのdataFieldが用意されていない場合は表示されない。
import fl.data.DataProvider;
import fl.controls.DataGrid;
import fl.controls.dataGridClasses.DataGridColumn;
const WEAPONS:Array = [
{ name:"ひのきのぼう", cost:10 },
{ name:"どうのつるぎ", cost:270 },
{ name:"てつのやり", cost:750 },
{ name:"はがねのつるぎ", cost:2000 }
];
var dg:DataGrid = new DataGrid();
dg.width = 300;
var nameCol = new DataGridColumn( "name" );
var costCol = new DataGridColumn( "cost" );
nameCol.width = 200;
nameCol.headerText = "なまえ";
costCol.width = 100;
costCol.headerText = "ねだん";
dg.addColumn( nameCol );
dg.addColumn( costCol );
dg.dataProvider = new DataProvider( WEAPONS );
addChild( dg );
どうも、addColumn()していく方法が一番真っ当なやりかたのよう。
特に理由がない限り、この方法で使っていく事にしよう。
値段の方は単位「G」がついて右寄せになってないと雰囲気でないので、そうしてみたい。
しかしDataGridColumnにはスタイルシートが無い。というかDataGridColumnはそもそも表示用のクラスではなく、表示するためのデータを持っている構造体(データの集まり)でしかないようだ。
そこに表示用のプロパティだのスタイルシートだのを期待してはいかん。
えーリファレンスによると、DataGridColumnにはcellRendererというプロパティがあって、そいつを指定する事で表示を色々と変える事ができるようだ。
…あー前回「鳶嶋工房 / Flash / Diary / ComboBoxとCellRendererとListData」でやってますな。
んーと、これだと右寄せにはできても Gは付かないな。Filtering and formatting data in the DataGrid component | Adobe Developer Connectionを読み直す事しばし。びしばし。
Σc ' _' ) < ビシバシチャンプ! $ σ_σ$ < あたしあのゲーム好き
あーlabelFunctionにテキストをフォーマットする関数を設定してやるのね。ここでセルの設定もできると便利なんだけど、結局CellRendererのカスタマイズしかないようだ。右寄せするためだけに…。
まーコードに関してはAdobe Developer Connectionの記事を見てもらうとして、成果。鳶嶋工房 / User Interface / Terms / グリッドビュー(grid view)
うへー今月中に標準コンポーネント全部使う野望が怪しくなってきたよおい。
今日はここまで。
2011-02-16