ふつうスコアボードなんぞをHTMLで書こうと思ったら、table - tr - td の繰り返しで作る。が、これは冗長にして冗漫なコードを書かなければならずカッタルイので、私は好かない。しかも、1回きりならともかく、何試合も続いたらイヤになること必至。
だったらスコアボードをフラッシュで作り、データのみ差し替えていけばいいじゃないかと。
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>