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

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

品目区分アクションにおけるActionScript

　先程と同様に、品目区分に関するアクションをActionScriptで記述します。

品目区分アクション

var hinmokuKubunListener:Object = new Object();
hinmokuKubunListener.focusIn = function() {
    setFocusHinmokuKubun();
}
hinmokuKubunListener.focusOut = function() {
    lostFocusHinmokuKubun();
}
comboboxBuhinShikibetsu.addEventListener("focusIn", hinmokuKubunListener);
comboboxBuhinShikibetsu.addEventListener("focusOut", hinmokuKubunListener);
comboboxTehaiKubun.addEventListener("focusIn", hinmokuKubunListener);
comboboxTehaiKubun.addEventListener("focusOut", hinmokuKubunListener);
comboboxZaikoKubun.addEventListener("focusIn", hinmokuKubunListener);
comboboxZaikoKubun.addEventListener("focusOut", hinmokuKubunListener);
comboboxShikyuKubun.addEventListener("focusIn", hinmokuKubunListener);
comboboxShikyuKubun.addEventListener("focusOut", hinmokuKubunListener);

function setFocusHinmokuKubun() {
    comboboxBuhinShikibetsu.setStyle("fontSize", 14);
    comboboxBuhinShikibetsu.setStyle("fontWeight", "bold");
    comboboxTehaiKubun.setStyle("fontSize", 14);
    comboboxTehaiKubun.setStyle("fontWeight", "bold");
    comboboxZaikoKubun.setStyle("fontSize", 14);
    comboboxZaikoKubun.setStyle("fontWeight", "bold");
    comboboxShikyuKubun.setStyle("fontSize", 14);
    comboboxShikyuKubun.setStyle("fontWeight", "bold");
    hinmokuKubunBack.gotoAndStop(1);
}

function lostFocusHinmokuKubun() {
    comboboxBuhinShikibetsu.setStyle("fontSize", null);
    comboboxBuhinShikibetsu.setStyle("fontWeight", null);
    comboboxTehaiKubun.setStyle("fontSize", null);
    comboboxTehaiKubun.setStyle("fontWeight", null);
    comboboxZaikoKubun.setStyle("fontSize", null);
    comboboxZaikoKubun.setStyle("fontWeight", null);
    comboboxShikyuKubun.setStyle("fontSize", null);
    comboboxShikyuKubun.setStyle("fontWeight", null);
    hinmokuKubunBack.gotoAndStop(2);
}

　以上の処理を行って作成した画面を下図に示します。

図11a - 作成した画面A

図11b - 作成した画面B

　品目情報の背景の上に位置するテキストボックスにフォーカスがあるとき、図11aのように緑色の背景が表示されます。品目区分の背景の上に位置するコンボボックスにフォーカスがあるとき、図11bのように赤紫色の背景が表示されます。

　また、下図のように、品目情報の背景の上に位置するテキストボックスに文字を入力すると、太字で表示されます。品目区分へフォーカスを移すと、太字は解除されます。

図12a - 作成した画面C

図12b - 作成した画面D

　部品識別や手配区分のコンボボックスは、画面のロード時にデータが当てはめられるので、図11aのようにデータベースで設定した値が表示されています。

まとめ

　本稿では、品目情報と品目区分の入力部を画面上に配置し、フォーカスイン／アウト時の背景の表示／非表示、および画面ロード時におけるコンボボックスへの動的なデータロードを解説しました。

　本稿を通じて、Flashにおけるコンボボックスやテキストボックスの利用、シンボルへの変換による個別のムービークリップの作成、WebServiceによるFlashとRuby on Rails 2.0の連携などに関するノウハウが得られたと思います。

　次回は、品目マスタの残りの項目である展開区分や手配情報を追加し、この登録画面を作成していきます。

参考資料

• 『ActionScript 3.0 Cookbook』 Joey Lott・Darron Schall・Keith Peters 著、Oreilly & Associates Inc、2006年10月
 
• 『ActionScript 3.0 逆引きクイックリファレンス Adobe Flash CS3対応』 田中康博・林拓也 著、毎日コミュニケーションズ、2008年4月
• 『Webデザイン FLASH CS3対応』 デジタルハリウッド 著、技術評論社、2008年5月
• 『図解 生産管理システムの導入・運用の実務知識』 藤井一良 著、日本実業出版社、2006年12月