flex formの使いまわしとその処理の扱いについて

2011/07/29

新規登録と修正のformが基本、同じなので使いまわすことにする。

親で子を呼ぶ。
子（カスタムコンポーネント）で押されたボタンが「新規」か「修正」でイベントを発行（？）する。
親でイベントを受けてDBに登録する。

めも

考え方にしろ、記述にしろかなり苦労した。
忘れないように細かくメモることにする。

親で子を呼ぶ

formをカスタムコンポーネントにして呼出しをしている。
その際、ボタンのラベル用にmakeButtonLabel()って関数（？）にそれぞれ値を渡す。
ついでにIDも指定している。

親.mxml

<s:Application>
～
<local:cpForm id="idNew" makeButtonLabel="btnNew" />
<local:cpForm id="idMod" makeButtonLabel="btnMod" />
</s:Application>

子で渡された値を元にボタンのラベルを作成

呼び出された際に受け取った値（btnNew、btnMod）でボタンのラベルを変更する。

子（cpForm.mxml）

<s:Form>
～
<fx:Script>
～
// ボタンのラベル
// 実行される前に表示されも良いように「Bindable」ってのを使う
[Bindable] private var _btnLabel:String = "";
// 新規と修正のどっちか判別用
[Bindable] private var _work:String = "";
// 呼び出し元のIDで表記をかえる
public function set makeButtonLabel(label:String):void
{
if (label === "btnNew")
{
_btnLabel = "新規";
_work = "new";
}
else if (label === "btnMod")
{
_btnLabel = "修正";
_work = "mod";
}
}
～
</fx:Script>
～
<s:Button label="{_btnLabel}" />
</s:Form>

子でボタンが押されたときの処理

新規・修正と2種類あるので条件分岐させる。
さらに子から親には基本的に呼び出しができないらしいので「dispatchEvent」ってヤツでイベントを発生させる。

子（cpForm.mxml）
※前述のソースに追加

<s:Form>
～
<fx:Script>
～
// ボタンのラベル
// 実行される前に表示されも良いように「Bindable」ってのを使う
[Bindable] private var _btnLabel:String = "";
// 新規と修正のどっちか判別用
[Bindable] private var _work:String = "";
// 呼び出し元のIDで表記をかえる
public function set makeButtonLabel(label:String):void
{
if (label === "btnNew")
{
_btnLabel = "新規";
_work = "new";
}
else if (label === "btnMod")
{
_btnLabel = "修正";
_work = "mod";
}
}
// DBにデータ追加
protected function entryDb_clickHandler(event:MouseEvent):void
{
if (_work === "mod")
{
// 修正ボタンを押したと親に渡す。
this.dispatchEvent(new Event("onClickEntryMod",true));
}
else if (_work === "new")
{
// 新規ボタンを押したと親に渡す。
this.dispatchEvent(new Event("onClickEntryNew",true));
}
}
～
</fx:Script>
～
<s:Button label="{_btnLabel}" click="entryDb_clickHandler(event)" />
</s:Form>

修正用のform（コンポーネント）の「修正」ボタンを押したときは「_work」には「mod」が入っているので「onClickEntryMod」というイベントが発生。
新規用のform（コンポーネント）の「新規」ボタンを押したときは「_work」には「new」が入っているので「onClickEntryNew」というイベントが発生。

親で「子でイベントが発生する」のを監視

親が読込完了したらwaitEvent()を読み込んで、「onClickEntryNew」と「onClickEntryMod」が発生するのを監視する。
発生したら「entryDbNew()」「entryDbMod()」を実行する。

親.mxml
※前述のソースに追加

<s:Application
creationComplete="waitEvent(event)"
>
～
<fx:Script>
～
// 読込完了したときの処理：
protected function waitEvent(event:FlexEvent):void
{
// 登録ボタンが押されたか監視：新規登録
this.addEventListener("onClickEntryNew", entryDbNew);
// 登録ボタンが押されたか監視：修正登録
this.addEventListener("onClickEntryMod", entryDbMod);
}
～
</fx:Script>
～
<local:cpForm id="idNew" makeButtonLabel="btnNew" >
<local:cpForm id="idMod" makeButtonLabel="btnMod" >
～
</s:Application>

あとは「entryDbNew()」「entryDbMod()」を適当につくって新規登録なり、修正なりすればOK。