SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

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

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

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

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

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

図9 - 全体レイヤー
図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メソッドで、hinmokuJohoBackhinmokuKubunBackを背景の消失しているフレームでムービークリップを止め、背景を非表示にしています。

 (2)buhinShikibetsuListener.resultfunctionを割り当て、ウェブサービス呼び出し後の処理を記述しています。ウェブサービスのデータは、「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
図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)で背景の緑色を消失させています。

次のページ
まとめ

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Flash CS3とRoRで構築する業務アプリケーション連載記事一覧
この記事の著者

ryujinseiichi(リュウジンセイイチ)

http://ryujinseiichi.sblo.jp/ RubyやAIRなどの新規技術に興味があり、研究を行っています。 最近、seasar2やBPMの研究も始めました。  

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/2805 2008/08/22 14:07

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング