仕入先マスタをメンテナンスするアプリケーションの作成
次に、仕入先マスタにテストデータを準備するために、仕入先マスタメンテナンス画面をscaffoldにて作成します。添付ファイルに、scaffoldで生成した仕入先マスタメンテナンスが格納されているので、ダウンロードして利用してください。
ダウンロードしたファイルをRailsで生成したアプリケーションの配下へ配置すると、下記のURLから仕入先マスタをメンテナンスできるようになります。
http://localhost:3000/mst_shiiresakis/list
上記のURLにアクセスしたら、表2に示されるようなテストデータを登録してください。
| shiiresaki_cd | shiiresaki_mei |
| 00001 | テスト仕入先０１ |
| 00002 | テスト仕入先０２ |
| 00003 | テスト仕入先０３ |
| 00004 | テスト仕入先０４ |
| 00005 | テスト仕入先０５ |
モーショントゥイーンによる仕入先選択ボタンと仕入先の繋がりの作成
仕入先の選択ボタン押下時に、一覧で選択された仕入先の情報が、購買情報背景の上に配置されている仕入先コードテキストボックスと仕入先名テキストボックスへ反映されるとします。
これを視覚的に表したいので、仕入先選択ボタンと仕入先コードテキストボックスの間、および仕入先選択ボタンと仕入先名テキストボックスの間を、矢印のモーショントゥイーンによって繋ぎます。
まず、線ツールを使用して、選択ボタンから赤い線と青い線の2本を図3のように引きます。
次に、それぞれの線をシンボルに変換します。シンボルに変換後、線の上で右クリックし、図4に示されるように「同じ位置で編集」を選択します。
すると、図5のように選択したシンボル以外が半透明で表示されます。
最終的には図6のようにするのが目標ですが、その方法をこれから説明します。
赤い線のシンボルの初期フレームで、図6のような赤い矢印になるように線を引いてください。
次に、レイヤー1の20フレーム目にキーフレームを追加します。20フレーム目では、図7に示されるように矢印を終着点に持って来ます。
初期フレームと20フレーム目の間の適当なフレーム上で右クリックすると、「モーショントゥイーンの作成」を選択できるので、選択してモーショントゥイーンを作成します。
青い矢印に関しても同様のことを行います。
すると、図8に示されるように、矢印が下から上へ上がっていくようになります。
仕入先の一覧検索と仕入先テキストボックスへのセット
次に、仕入先を一覧検索し、選択ボタンの押下により仕入れ先コードテキストボックスと仕入先名テキストボックスへ、選択された値をセットする方法を説明します。
仕入先マスタの検索アクションレイヤーにて、下記のActionScriptを記述します。
import mx.data.components.WebServiceConnector;
var shiiresakiKensakuListener:Object = new Object();
shiiresakiKensakuListener.result = function(evt:Object) {
datagridShiiresaki.dataProvider = evt.target.results;
};
// （1）
var shiiresakiKensakuConn:WebServiceConnector = new WebServiceConnector();
shiiresakiKensakuConn.addEventListener("result", shiiresakiKensakuListener);
shiiresakiKensakuConn.WSDLURL = "http://localhost:3000/mst_shiiresaki_service/wsdl";
shiiresakiKensakuConn.operation = "FindByShiiresakiMei";
shiiresakiKensakuConn.params = null;
// （2）
datagridShiiresaki.columnNames = ["id", "shiiresaki_cd", "shiiresaki_mei"];
var shiiresakiKensakuListener:Object = new Object();
shiiresakiKensakuListener.click = function(eventObj:Object) {
// （3）
shiiresakiKensakuConn.params = [textboxShiiresakiMeiInRetrieval.text];
shiiresakiKensakuConn.trigger();
};
buttonShiiresakiKensaku.addEventListener("click", shiiresakiKensakuListener);
var shiiresakiSentakuListener:Object = new Object();
shiiresakiSentakuListener.click = function(eventObj:Object) {
// （4）
textboxShiiresakiCd.text = datagridShiiresaki.selectedItem.shiiresaki_cd;
textboxShiiresakiMei.text = datagridShiiresaki.selectedItem.shiiresaki_mei;
arrowShiiresakiCd.gotoAndPlay(1);
arrowShiiresakiMei.gotoAndPlay(1);
};
buttonShiiresakiSentaku.addEventListener("click", shiiresakiSentakuListener);
（1）では、Webサービスの呼び出しに関する設定を行っています。WebServiceConnectorのイベントリスナへ、Webサービス呼び出し後にその結果を処理するためのメソッドであるshiiresakiKensakuListener.resultを登録しています。また、呼び出す対象のWebサービス「WSDL」をWSDLURLにセットし、メソッド名をoperationにセットしています。
（2）では、mst_shiiresaki_webserviceを呼び出して受け取った一覧検索結果で、どの列名を表示するかに関する設定を行っています。
（3）では、paramsに仕入先名をセットし、triggerメソッドによりmst_shiiresaki_webserviceを呼び出しています。
（4）では、DataGridで選択されたデータを仕入先コードと仕入先名のテキストボックスへ設定しています。また、arrowShiiresakiCd.gotoAndPlayなどにより、「モーショントゥイーンによる仕入先選択ボタンと仕入先の繋がりの作成」で作成したムービーを動作させることで、視覚的な繋がりを表現しています。
