Seis Pesos: Flex アーカイブ

ひと月ほど前、フラッシュの使い回しを試した（FLEX: 動的コンテンツと変数（flashvars））。
今回は、プルダウン（ComboBox）で XML のすべての内容から特定の要素を選択してみる。

サンプルの XML ファイル参照。

まず取り込み

var ScoreXML:XML = XML(event.target.data);
var Score:XMLList = ScoreXML..Game;

そんでコンボ・ボックスに表示するデータ・プロバイダを指示

comboBox.dataProvider = Score;

プルダウンはこんなあんばい

<mx:ComboBox id="comboBox" prompt="Select Game..." labelField="@date" change="selGame(event);" />

スコアボードに表示する要素を特定する。id 代わりに日付を利用した

var gameDate:Object = comboBox.selectedItem.@date;
dataGrid.dataProvider = ScoreXML.Game.(attribute('date') == gameDate).children();

架空の野球の試合で例示したけれど、

ビデオを選択して再生
アルバムとして写真を表示

といった、何某かのアーカイブを掲示するケースに使えるかもしれない覚書、以上。

ところで、娘の携帯を機種変更。自分の携帯もすでに４年ほど使っているので Android 携帯 Nexus One いいかなとちょっと思ったが、しかし携帯は苦手だし機能の持ち腐れになるから意味がない。
で、銀座山形屋でスーツを買った。たぶん８年ぶりくらい。

ふつうスコアボードなんぞをHTMLで書こうと思ったら、table - tr - td の繰り返しで作る。が、これは冗長にして冗漫なコードを書かなければならずカッタルイので、私は好かない。しかも、１回きりならともかく、何試合も続いたらイヤになること必至。

だったらスコアボードをフラッシュで作り、データのみ差し替えていけばいいじゃないかと。

flashvars で変数（"game=091209"）を渡し架空の試合を表示。元データの外部 XML ファイルは次のよう

<?xml version="1.0" encoding="utf-8"?>
<Score>
  <Game id="091209" stadium="Citi Field" date="2009/12/09">
    <Orioles first="2" second="0" ..... ninth="0" final="5" pc="Uehara-Tatum" note="2B: Jones" />
    <Mets first="0" second="1" ..... ninth="4X" final="8" pc="Santana-Santos" note="HR: Delgado" />
  </Game>
  <Game id="091210" stadium="Tiger Stadium" date="2009/12/10">
    <Yankees first="1" ..... ninth="0" final="4" pc="Pettitte-Posada" note="3B: Rodríguez, 2B: Matsui" />
    <Tigers first="2" ..... ninth="2X" final="6" pc="Verlander-Laird" note="HR: Polanco, 2B: Ordoñez" />
  </Game>
</Score>

「特定のノードを選んで表示するだけだからカンタンだろう」、と高を括っていたらツボにはまった。
案外、ネットを検索しても情報がない。Adobe の Livedocs は敷居が高く、血圧も高くなる。

（1）　変数を引きずり込む。行末の「game」がパラメータ

gameID = Application.application.parameters.game;

（2）　任意の node を指定。属性「id」の値が上のパラメータに一致する「Game」要素を選ぶという理屈

dataGrid.dataProvider = xml.Game.(attribute('id') == gameID).children();

データプロバイダに変数を代入するにあたり、シロウトの悲しさゆえ勘違い

[Bindable]
public var gameID:String;

String ではなく Object やないか！　と気づいた時には肩が凝っていた。中年の悲哀。
で、別の id 値「091210」を渡せばそのデータが表示されるという按配

というふうに一粒で何度もオイシイ。毎回コンパイルなんかやってらんねぇ。
あとは入力用の php フォームを設け、SimpleXML で要素（と属性）を追加していくだけ。手間要らず。

MXML のソース（抄、Open / Close）

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initVars()">
<mx:Script>
<![CDATA[
        import flash.events.*;
        import flash.net.URLLoader;
        import flash.net.URLRequest;
        import mx.controls.dataGridClasses.DataGridColumn;
        import mx.utils.ObjectUtil;
        private var xml:XML;
        [Bindable]
        public var gameID:Object;
        private function initVars():void {
          gameID = Application.application.parameters.game;
          var loader:URLLoader = new URLLoader();
          loader.load(new URLRequest("http://hoge/foo/hage.xml"));
          loader.addEventListener(Event.COMPLETE,
          function(event:Event):void {
            var loader:URLLoader = URLLoader(event.target);
            xml = XML(event.target.data);
            var stadium:XMLList = xml.Game.(attribute('id') == gameID).attribute('stadium');
            var date:XMLList = xml.Game.(attribute('id') == gameID).attribute('date');
            statLabel.text = ""+ date +" - "+ stadium +"";
            dataGrid.dataProvider = xml.Game.(attribute('id') == gameID).children();
          });
        }
        private function labelFunc(item:XML, col:DataGridColumn):String {
          return item.name();
        }
    ]]>
</mx:Script>
<mx:VBox>
  <mx:HBox><mx:Label id="statLabel"/></mx:HBox>
  <mx:HBox>
    <mx:DataGrid id="dataGrid" verticalScrollPolicy="off" rowCount="2" sortableColumns="false">
        <mx:columns>
            <mx:DataGridColumn labelFunction="labelFunc" headerText="Team" />
            <mx:DataGridColumn dataField="@first" headerText="1" />
            <mx:DataGridColumn dataField="@second" headerText="2" />
            <mx:DataGridColumn dataField="@third" headerText="3" />
            <mx:DataGridColumn dataField="@fourth" headerText="4" />
            <mx:DataGridColumn dataField="@fifth" headerText="5" />
            <mx:DataGridColumn dataField="@sixth" headerText="6" />
            <mx:DataGridColumn dataField="@seventh" headerText="7" />
            <mx:DataGridColumn dataField="@eighth" headerText="8" />
            <mx:DataGridColumn dataField="@ninth" headerText="9" />
            <mx:DataGridColumn dataField="@final" headerText="R" />
            <mx:DataGridColumn dataField="@pc" headerText="Battery" />
            <mx:DataGridColumn dataField="@note" headerText="Summary" />
        </mx:columns>
    </mx:DataGrid>
  </mx:HBox>
</mx:VBox>
</mx:Application>

カテゴリ「 Flex 」最近のブログ記事

Accordion

FLEX: 動的コンテンツ（2）

FLEX: 動的コンテンツと変数（flashvars）

Google Maps API

Category