Flash CS3とRoRで構築する業務アプリケーション 第1回

Flashによる生産管理系アプリケーション - 品目マスタメンテナンスの作成

Flashの画面におけるActionScriptの記述

　次に、先ほど作成したFlashの画面に対し、必要な処理をActionScriptで記述します。記述する処理は下記の通りです。

1. 画面上のコンボボックスにデータをロードする処理
2. フォーカスイン時に背景を表示させ、フォーカスアウト時に背景を消失させる処理
3. フォーカスイン時に文字を大きくし、フォーカスアウト時に文字を小さくする処理

画面上のコンボボックスにデータをロードする処理

　まず、画面上のコンボボックスにデータをロードする処理を作成します。

　図9に示されるように、全体レイヤーにて5つのキーフレームを挿入し、それぞれのキーフレームにActionScriptを記述します。

図9 - 全体レイヤー

　キーフレーム1では、品目情報の背景と品目区分の背景を消し、部品識別のコンボボックスにデータをロードします。

全体レイヤー - キーフレーム1

// (1)
hinmokuJohoBack.gotoAndStop(2);
hinmokuKubunBack.gotoAndStop(2);

import mx.data.components.WebServiceConnector;

// (2)
var buhinShikibetsuListener:Object = new Object();
buhinShikibetsuListener.result = function(evt:Object) {
    for (var i:Number = 0; i < evt.target.results.length; i++) {
        comboboxBuhinShikibetsu.addItem({data:evt.target.results[i].id,
                    label:evt.target.results[i].buhin_shikibetsu});
    }
};
// (3)
var buhinShikibetsuConn:WebServiceConnector = new WebServiceConnector();
buhinShikibetsuConn.addEventListener("result", buhinShikibetsuListener);
buhinShikibetsuConn.WSDLURL =
    "http://localhost:3000/mst_buhin_shikibetsu_service/wsdl";
buhinShikibetsuConn.operation = "FindAll";
buhinShikibetsuConn.params = null;
buhinShikibetsuConn.trigger();

　（1）のgotoAndStopメソッドで、hinmokuJohoBackとhinmokuKubunBackを背景の消失しているフレームでムービークリップを止め、背景を非表示にしています。

　（2）でbuhinShikibetsuListener.resultにfunctionを割り当て、ウェブサービス呼び出し後の処理を記述しています。ウェブサービスのデータは、「evt:Object」に格納されているので、forループで値を取り出し、コンボボックスにセットしています。

　（3）では、WebServiceConnectorのインスタンスを作成し、イベントリスナに先ほど作成したリスナであるbuhinShikibetsuListenerを追加しています。WSDLURLに、これから呼び出すウェブサービスのWSDLを指定します。operationにFindAllを指定し、部品識別マスタの全データを取得することにします。triggerメソッドを実行することで、ウェブサービスが呼び出され、buhinShikibetsuListener.resultに指定したファンクションが実行されます。

　キーフレーム2では、手配区分マスタのウェブサービスを呼び出し、手配区分のコンボボックスにデータをロードします。

全体レイヤー - キーフレーム2

import mx.data.components.WebServiceConnector;

var tehaiKubunListener:Object = new Object();
tehaiKubunListener.result = function(evt:Object) {
    for (var i:Number = 0; i < evt.target.results.length; i++) {
        comboboxTehaiKubun.addItem({data:evt.target.results[i].id,
                    label:evt.target.results[i].tehai_kubun});
    }
};
var tehai_kubunConn:WebServiceConnector = new WebServiceConnector();
tehai_kubunConn.addEventListener("result", tehaiKubunListener);
tehai_kubunConn.WSDLURL =
    "http://localhost:3000/mst_tehai_kubun_service/wsdl";
tehai_kubunConn.operation = "FindAll";
tehai_kubunConn.params = null;
tehai_kubunConn.trigger();

　キーフレーム3では、在庫区分マスタのウェブサービスを呼び出し、在庫区分のコンボボックスにデータをロードします。

全体レイヤー - キーフレーム3

import mx.data.components.WebServiceConnector;

var zaikoKubunListener:Object = new Object();
zaikoKubunListener.result = function(evt:Object) {
    for (var i:Number = 0; i < evt.target.results.length; i++) {
        comboboxZaikoKubun.addItem({data:evt.target.results[i].id,
                    label:evt.target.results[i].zaiko_kubun});
    }
};
var zaiko_kubunConn:WebServiceConnector = new WebServiceConnector();
zaiko_kubunConn.addEventListener("result", zaikoKubunListener);
zaiko_kubunConn.WSDLURL =
    "http://localhost:3000/mst_zaiko_kubun_service/wsdl";
zaiko_kubunConn.operation = "FindAll";
zaiko_kubunConn.params = null;
zaiko_kubunConn.trigger();

　キーフレーム4では、支給区分マスタのウェブサービスを呼び出し、支給区分のコンボボックスにデータをロードします。

全体レイヤー - キーフレーム4

import mx.data.components.WebServiceConnector;

var shikyuKubunListener:Object = new Object();
shikyuKubunListener.result = function(evt:Object) {
    for (var i:Number = 0; i < evt.target.results.length; i++) {
        comboboxShikyuKubun.addItem({data:evt.target.results[i].id,
                    label:evt.target.results[i].shikyu_kubun});
    }
};
var shikyu_kubunConn:WebServiceConnector = new WebServiceConnector();
shikyu_kubunConn.addEventListener("result", shikyuKubunListener);
shikyu_kubunConn.WSDLURL =
    "http://localhost:3000/mst_shikyu_kubun_service/wsdl";
shikyu_kubunConn.operation = "FindAll";
shikyu_kubunConn.params = null;
shikyu_kubunConn.trigger();

　キーフレーム5では、stopを実行します。なお、stopを実行しないとタイムラインが繰り返され、コンボボックスにデータがロードされ続けてしまうので注意してください。

全体レイヤー - キーフレーム5

stop();

品目情報アクションにおけるActionScript

　品目情報アクションレイヤーで、フォーカスイン時に背景を表示させ、フォーカスアウト時に背景を消失させる処理や、フォーカスイン時に文字を大きくし、フォーカスアウト時に文字を小さくする処理をActionScriptで記述します（図10）。

図10 - 品目情報アクションにおけるActionScript

品目情報アクション

// フォーカス時の背景の表示／非表示に関する処理
// (1)
var hinmeiListener:Object = new Object();
hinmeiListener.focusIn = function() {
    setFocusHinmokuJoho();
}
hinmeiListener.focusOut = function() {
    lostFocusHinmokuJoho();
}
// (2)
textboxHinmei.addEventListener("focusIn", hinmeiListener);
textboxHinmei.addEventListener("focusOut", hinmeiListener);
textboxKikaku.addEventListener("focusIn", hinmeiListener);
textboxKikaku.addEventListener("focusOut", hinmeiListener);
textboxZaishitsu.addEventListener("focusIn", hinmeiListener);
textboxZaishitsu.addEventListener("focusOut", hinmeiListener);

// (3)
function setFocusHinmokuJoho() {
    textboxHinmei.setStyle("fontSize", 14);
    textboxHinmei.setStyle("fontWeight", "bold");
    textboxKikaku.setStyle("fontSize", 14);
    textboxKikaku.setStyle("fontWeight", "bold");
    textboxZaishitsu.setStyle("fontSize", 14);
    textboxZaishitsu.setStyle("fontWeight", "bold");
    hinmokuJohoBack.gotoAndStop(1);
}

// (4)
function lostFocusHinmokuJoho() {
    textboxHinmei.setStyle("fontSize", null);
    textboxHinmei.setStyle("fontWeight", null);
    textboxKikaku.setStyle("fontSize", null);
    textboxKikaku.setStyle("fontWeight", null);
    textboxZaishitsu.setStyle("fontSize", null);
    textboxZaishitsu.setStyle("fontWeight", null);
    hinmokuJohoBack.gotoAndStop(2);
}

　（1）で、品目情報の背景の上に配置されているテキストボックスのイベントリスナを作成し、（2）でこのイベントリスナを追加して、各テキストボックスのフォーカスイン／アウトの処理を行えるようにしています。

　（3）では、フォーカスイン時に文字を大きくする処理を記述しています。TextInputクラスのsetStyleメソッドを使用して、fontSizeおよびfontWeightを指定することで、14pt 太字にしています。また、hinmokuJohoBack.gotoAndStop(1)で背景の緑色を出現させています。

　（4）は、フォーカスアウト時に文字を小さくする処理を記述しています。fontSizeおよびfontWeightにnullを指定することで、文字を標準の大きさに戻しています。また、hinmokuJohoBack.gotoAndStop(2)で背景の緑色を消失させています。