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

2011/07/29

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

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

めも

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

親で子を呼ぶ

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

親.mxml

  1. <s:Application>
  2. <local:cpForm id="idNew" makeButtonLabel="btnNew" />
  3. <local:cpForm id="idMod" makeButtonLabel="btnMod" />
  4. </s:Application>

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

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

子(cpForm.mxml)

  1. <s:Form>
  2. <fx:Script>
  3.   ~
  4.   
  5.   // ボタンのラベル
  6.   // 実行される前に表示されも良いように「Bindable」ってのを使う
  7.   [Bindable] private var _btnLabel:String = "";
  8.   
  9.   // 新規と修正のどっちか判別用
  10.   [Bindable] private var _work:String = "";
  11.   
  12.   // 呼び出し元のIDで表記をかえる
  13.   public function set makeButtonLabel(label:String):void
  14.   {
  15.     if (label === "btnNew")
  16.     {
  17.       _btnLabel = "新規";
  18.       _work = "new";
  19.     }
  20.     else if (label === "btnMod")
  21.     {
  22.       _btnLabel = "修正";
  23.       _work = "mod";
  24.     }
  25.   }
  26. </fx:Script>
  27. <s:Button label="{_btnLabel}" />
  28. </s:Form>

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

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

子(cpForm.mxml)
※前述のソースに追加

  1. <s:Form>
  2. <fx:Script>
  3.   ~
  4.   
  5.   // ボタンのラベル
  6.   // 実行される前に表示されも良いように「Bindable」ってのを使う
  7.   [Bindable] private var _btnLabel:String = "";
  8.   
  9.   // 新規と修正のどっちか判別用
  10.   [Bindable] private var _work:String = "";
  11.   
  12.   // 呼び出し元のIDで表記をかえる
  13.   public function set makeButtonLabel(label:String):void
  14.   {
  15.     if (label === "btnNew")
  16.     {
  17.       _btnLabel = "新規";
  18.       _work = "new";
  19.     }
  20.     else if (label === "btnMod")
  21.     {
  22.       _btnLabel = "修正";
  23.       _work = "mod";
  24.     }
  25.   }
  26.   
  27.   // DBにデータ追加
  28.   protected function entryDb_clickHandler(event:MouseEvent):void
  29.   {
  30.     if (_work === "mod")
  31.     {
  32.       // 修正ボタンを押したと親に渡す。
  33.       this.dispatchEvent(new Event("onClickEntryMod",true));
  34.     }
  35.     else if (_work === "new")
  36.     {
  37.       // 新規ボタンを押したと親に渡す。
  38.       this.dispatchEvent(new Event("onClickEntryNew",true));
  39.     }
  40.     
  41.   }
  42. </fx:Script>
  43. <s:Button label="{_btnLabel}" click="entryDb_clickHandler(event)" />
  44. </s:Form>

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

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

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

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

  1. <s:Application
  2.   creationComplete="waitEvent(event)"
  3.   >
  4.   <fx:Script>
  5.   ~
  6.     // 読込完了したときの処理:
  7.     protected function waitEvent(event:FlexEvent):void
  8.     {
  9.       // 登録ボタンが押されたか監視:新規登録
  10.       this.addEventListener("onClickEntryNew", entryDbNew);
  11.       
  12.       // 登録ボタンが押されたか監視:修正登録
  13.       this.addEventListener("onClickEntryMod", entryDbMod);
  14.     }
  15.   ~
  16.   </fx:Script>
  17.   <local:cpForm id="idNew" makeButtonLabel="btnNew" >
  18.   <local:cpForm id="idMod" makeButtonLabel="btnMod" >
  19. </s:Application>

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

新着(ニュース関連以外)

2017-08-03
formのinputでmaxlengthを使うとFirefoxでバグってた。他のブラウザでも気づかずにバグってたかもしれない。
2017-07-19
折れ線グラフをもう少しゆるやかに・・・というか何というか・・・調べていくと「移動平均」っていう言葉にたどり着いた
2017-07-10
FuelPHPの1.8をダウンロードして使っていたらセッションが使えないということに気付いた。
2017-06-27
MACにWin10をインストールしてみた:再挑戦。
2017-06-25
「簡単」っていうヤツらが多いけど・・・難しいぞ。