DataGridのセル幅を指定する事はできるのでしょうか？

質問

FLASH初心者の為、うまく表現できないかもしれませんが、どうぞ宜しくお願い致します。

現在、FLASHでHPを作成しているのですが、表を表示したく、
下記URLの第16回・第17回を参考にし、外部xmlをDataGridを使用し、
表示致しました。（こちらは無事に表示する事が出来ました）
http://itpro.nikkeibp.co.jp/article/COLUMN/20060225/230669/?ST=swd-tech

しかし、表示された表のセル幅（列幅）が均等で、
長い文字の場合、途中から隠れてしまうのです。

そこで質問なのですが、DataGridで、セル幅は好きなように指定する事ができるのでしょうか？
もしくは、各行の文字列に合った幅になるように設定できるのでしょうか？
個人でセル幅を広げる事は可能なようですが、表示段階で読みやすいように、
セル内容の通りの幅になっていると嬉しいのですが...。

もし指定や設定が出来るようであれば、どこの場所にどのような記載をすればいいのか、
詳しく教えて頂けますでしょうか？
（初心者の為、わかりやすく教えて頂けますと大変助かります。）

また、ある一つの行だけ、文字の色を変えたりする事ができるのであれば、
そちらの設定も教えて頂けますと嬉しく思います。

使用しているFLASHは「Flash MX Professional 2004」です。
勝手な質問ばかりで申し訳ございません。
どうぞ宜しくお願い致します。

回答No.1

DPE · ベストアンサー

DataGrid の列は１つ１つが独立したコンポーネントになっています。
ステージにインスタンスを配置した直後は列がなく、スクリプトで先に作っておく方法と、グリッドにデータを渡して自動作成してもらう方法があります。
列幅は１列ごとに指定できますが、その際は列ができるタイミングが問題になります。

ご提示のサイトの説明でも、グリッドにデータを表示する設定のところで” dataProvider ”という言葉が出てきますが。
XMLConnector コンポーネントとデータバインディングを使わずにグリッドにデータを表示する時は、DataGrid のコンポーネントが持っている dataProvider というプロパティ（変数のようなもの）に配列変数を渡すと、列を自動的に作成してくれます。
「 XML を読み込み、解析して配列変数を作り、dataProvider に渡す」処理を、XMLConnector コンポーネントとデータバインディングを使うと自動的にやってくれるというわけです。

最初はグリッドに列が１つも存在しておらず、dataProvider を使う場合は列はデータが渡されてきた後で作られます。
つまり、dataProvider に配列変数が渡され、列が作られた後でないと、列幅などの列の書式を決められないといえます。

自分でスクリプトを組んで dataProvider に配列変数を渡すなら話は簡単で、この処理の後で列の書式を変更すれば済みます。
しかし、XMLConnector コンポーネントとデータバインディングに自動でやってもらう時は、” dataProvider に配列変数が渡った時”を検出しなければなりません。
これを調べる方法はありますが、少々面倒です。

そこで、スクリプトで予め列を作っておきます。
列が存在していれば、dataProvider に配列変数が渡される前であっても、先に列幅などの書式を決めることができます。

***********************************

列は DataGridColumn クラスを使って作成します。
書式は

　col = new DataGridColumn( "フィールド名" );

です。

フィールド名とは、列に表示する識別子の名前のことです。
XMLConnector はタグから識別子を作りますので、つまりはグリッドに表示するデータをくくったタグの名前です。
ご提示のサイトの例では ID ・商品名・価格の３つのフィールドがあります。
この例を拝借しまして、列も３つ作成することにします。

作成した列の幅を定義したら、これをグリッドに挿入します。
最も長い文字列の長さに自動で合わせる機能はありませんが、列の幅は指定することができます。
列幅の定義は width プロパティ、列の挿入には addColumnAt メソッド（命令のようなもの）を使います。
ここでは addColumnAt メソッドを使いますけれど、addColumn というメソッドでも挿入できます。

-------------------------------------------------------------------

スクリプトを書く場所ですが。

ご提示のサイトの説明通りフォームアプリケーションで作成している場合は、DataGrid コンポーネントがあるフォームに書きます。
その作例でも、onClipEvent(load){ ～ } というスクリプトを書いているはずです。
これと同じ場所（ onClipEvent(load) の中）に、列を作るスクリプトを追加してください。

普通のムービーとして作成している場合は、DataGrid コンポーネントを配置したタイムラインのフレームにキーフレームを作成して記述します。
例えばステージに配置したのなら、メインのタイムラインの、DataGrid があるフレームと同じフレームにスクリプトを書きます。
スクリプト専用のレイヤーを作ると便利です。

フォームに書く場合のスクリプトの例です。
ご提示のサイトのサンプルと同様に、DataGrid コンポーネントのインスタンス名を” myDataGrid ”、XMLConnector コンポーネントのインスタンス名を” myXMLconnector ”とします。

下記のスクリプトは各行頭に全角のスペースが入っています。コピーする際は、全て半角のスペースかタブに置き換えてください。このまま使うとシンタックスエラーになります。
「アクション」パネルにある”置換え”機能で、簡単に置き換えられます。

　onClipEvent(load)
　{
　　import mx.controls.gridclasses.DataGridColumn;

　　//列を作成
　　col0 = new DataGridColumn( "ID" );
　　col1 = new DataGridColumn( "商品名" );
　　col2 = new DataGridColumn( "価格" );

　　//列幅を決める
　　col0.width = 50;
　　col1.width = 150;
　　col2.width = 100;

　　//グリッドに列を挿入する
　　myDataGrid.addColumnAt( 0 , col0 );
　　myDataGrid.addColumnAt( 1 , col1 );
　　myDataGrid.addColumnAt( 2 , col2 );

　　//XMLの読み込みを開始
　　this.myXMLconnector.trigger();
　}

↑ this.myXMLconnector.trigger(); は、そのサイトの説明にもあった通りのスクリプトです。
この前に、「 import mx.controls.gridclasses.DataGridColumn; 」から「 myDataGrid.addColumnAt( 2 , col2 ); 」までのスクリプトを追加してください。

フレームに書く場合は、onClipEvent(load){ } の中のスクリプトだけを書いてください。
onClipEvent はムービークリップのインスタンスにスクリプトを書く時の約束事ですので、フレームに書く時に付けるとエラーになります。
（ちなみにフォームの正体は、ムービークリップを拡張したものです）
この点以外は全く同じです。

new DataGridColumn に続く (　) の中に書く文字列（上記の例では ID ・商品名・価格）は、先述の通り、XML で付けたタグの名前です。
大文字と小文字・全角と半角も区別されます。
間違えるとデータが表示されなくなってしまいますので、ご注意ください。

-------------------------------------------------------------------

グリッド全体もしくは１列単位で背景色・文字色を変えるのなら、最初からそのような機能が DataGrid コンポーネントの機能として提供されていて、割と簡単にできます。
特定の行だけ・ある条件に合う行だけ書式を変更する機能はありませんが、必要なら自作できるように設計されています。

ですから、１つの行だけ書式を変えられるかと言われれば、まあ、可能ではありますが、とても難しい話になります。
失礼ながら、Flash や ActionScript を始めたばかりで右も左も分からないというのでしたら、まずは基本の知識から身に付けてください。

一応、条件に合った行の背景色と文字色を変える作例は、以前、別の質問で紹介したことがありますので、よろしければご参照ください。＃２で説明しております。
Flash 8 向けの作例のため MX 2004 では手直しが必要な箇所があり、このままでは使えませんが、基本的な考え方は同じです。

　・ DataGridで特定の行のスタイルを変更したい
　　http://okwave.jp/qa2728403.html

↑この例では、XML とデータバインディングを使わずスクリプトで配列変数を作成し、dataProvider に直接渡してグリッドに表示しています。
在庫数（フィールド名： stock ）を見て、20 以下の項目だけ、背景色をグレー・文字色を白にする作例です。

行単位で書式を変更するとなると、希望通りの描画を行うクラスを自作する必要があります。
ただ、そこいらの市販の解説書や入門者向けのサイトで題材として取り上げている話ではありません。
ヘルプを見ながら作ることになるかと思いますが、これがまた”初心者お断り”と言わんばかりの薄情な説明で難しいと思います。
Flash や ActionScript 、コンポーネントの扱いに慣れてきたら、研究してみてください。

お礼

ご丁寧なご回答、誠にありがとうございます！
おかげさまで、思うような表を作成する事が出来ました。
本当にわかりやすい説明で、未熟な質問だったにも関わらず、
素晴らしいご回答を頂き、大変嬉しく思っております。
Flash や ActionScript は難しくて、なかなか理解できずに苦労しておりますが、
もっと勉強して、自分の考えるように使いこなせるようになりたいです...（＾－＾；
本当にありがとうございました！