掲載誌情報
掲載誌 日経Linux　2003/02〜
タイトル リッチインターネットアプリケーションを開発しよう！　第５回
サブタイトル ColdFusion MXとFlash MXで作るリッチインターネットアプリケーションをMVCモデルで学ぶ

３． タイムカード打刻機能
  それでは、「タイムカード打刻」機能（図1-3　タイムカード打刻画面）を例に、実際のプログラミングを見ていく。
  3-1. ユーザーインタフェース
    「タイムカード打刻」機能のFlash MXのユーザーインタフェース構成は次のようになる。
まず基本画面として、2フレーム目に勤怠管理システムの基本インタフェースが配置されている。
（図3-1　勤怠管理システム基本インタフェース）
勤怠管理システム基本インタフェース
メニュー右横のコンテンツエリアに各機能に応じた画面を表示する。
そして、タイムカード打刻画面は次の図のように1つのMovieClipとして構成する。
（図3-2　タイムカード打刻画面MovieClip）
タイムカード打刻画面MovieClip
タイムカード打刻画面MovieClipに配置されているアイテムの構成は以下のようになっている。
アイテム インスタンス名 種別 オブジェクトの種類
UserID入力テキストフィールド userID_txt テキスト入力 TextField
Password入力テキストフィールド password_txt テキスト入力 TextField
出社ボタン comming_mc ムービークリップ MovieClip
退社ボタン quitting_mc ムービークリップ MovieClip
また、打刻完了後のメッセージや、エラーメッセージを表示するための、メッセージ表示画面として、次の図のようなMovieClipを用意する。
（図3-3　メッセージ表示画面MovieClip）
メッセージ表示画面MovieClip
メッセージ表示画面MovieClipに配置されているアイテムの構成は以下のようになっている。
アイテム インスタンス名 種別 オブジェクトの種類
メッセージ表示テキストフィールド msg_txt ダイナミックテキスト TextField
戻るボタン back_mc ムービークリップ MovieClip
  3-2. プログラミング
    次に、「タイムカード打刻」機能を実現するためのプログラミングを解説していく。今回のプログラミングでは、前項で紹介したMVCアーキテクチャに基づいたクラスを作成していく。
なお、連載第5回では、Flash MXオーサリングツール上の、「アクション」パネルにプログラムコードを記述していたが、今回、以降で作成する各クラスのプログラムコードは、1つのクラスごとに1つの外部テキストファイルで作成する。1クラス、1ファイルの外部ファイルとして作成することで、各機能のプログラムコードの所在が明確になるというメリットがある。なお、ActionScriptの外部ファイルを作成する際、ファイルの拡張子は「.as」とする。
テキストファイルの編集にはDreamWeaver MXを利用すると便利だ。
  3-2-1. View
    まず、タイムカード打刻画面のViewとして、「TimeStampView」クラスを作成する。
「TimeStampView」クラスは次の機能を実装し、タイムカード打刻画面MovieClipを制御する。
　・「出社」ボタンのクリックイベント検知
　・「退社」ボタンのクリックイベント検知
　・入力情報（UserID,Password）取得

プログラムコードは次のようになる。
「TimeStampView」クラス / 「TimeStampView.as」ファイル
/*
CLASS TimeStampView class / View
*/
//Constractor
TimeStampView = function() {
　//イベントハンドラ設定
　this.comming_mc.onPress = function(){
　　_global.Controller.sendViewMessage("TIMECARD_COMMING");
　}
　this.quitting_mc.onPress = function(){
　　_global.Controller.sendViewMessage("TIMECARD_QUITTING");
　}		 (2)
};		 (1)

TimeStampView.prototype = new MovieClip();
Object.registerClass("timeStampSymbol", TimeStampView);		 (4)

//入力値取得
TimeStampView.prototype.getValue = function() {
　var ret = {};
　ret = {userID:this.userID_txt.text, password:this.password_txt.text};

　return ret;
};		 (3)

ここでのポイントは次のとおりだ。ポイントの番号は、プログラムコード中に示した番号を指す。
(1) クラスの定義
まず、TimeStampViewのクラス定義を行っている。
(2) イベントハンドラ定義
「出社」ボタン、「退社」ボタンがクリックされた場合に行う処理を定義している。
ここでは、ボタンがクリックされた場合の処理として、後述するControllerのメソッド「sendViewMessage」を呼び出し、Contollerへイベントを通知している。
(3) 入力情報取得メソッド定義
画面上で入力されたUserID,Passwordを取得するためのメソッドを定義する。
このメソッドでは、TextFieldオブジェクト「userID_txt」、「password_txt」のプロパティ「text」を用いて入力値を取得後、入力値を名前つき配列※1で返している。
※1名前つき配列についてはFlash MXのリファレンスマニュアルを参照していただきたい。
(4) クラスの登録
TimeStampViewクラスを、タイムカード打刻画面MovieClipに関連付けている。
クラスをMovieClipに関連付けることで、対象となるMovieClipは、関連付けられたクラスの機能をもつことになる。
クラスをMovieClipに関連付けるには、Flash MX で標準で用意されている「Object」オブジェクトの「registerClass」メソッドを用いる。「registerClass」メソッドの引数に指定している「TimeStampView」は関連付けるクラス名、「"timeStampSymbol"」はMovieClipの識別子だ。
なお、MovieClipの識別子とは、MovieClipに一意につける名前のことで、次図のように、あらかじめ「シンボルのプロパティ」画面で設定しておく。
「シンボルのプロパティ」画面は、Flash MXオーサリングツールの「ウィンドウ」−「ライブラリ」メニューを選択し表示されるライブラリペインの中で、対象とするMovieClipを右クリックし、「プロパティ」を選択することで表示される。
（図3-4　タイムカード打刻画面MovieClip シンボルのプロパティ画面）
タイムカード打刻画面MovieClip シンボルのプロパティ画面

次に、メッセージ表示画面のViewとして、「TimeMessageView」クラスを作成する。
「TimeMessageView」クラスは次の機能を実装し、メッセージ表示画面MovieClipを制御する。
　・「戻る」ボタンのクリックイベント検知
　・完了/エラーメッセージの表示

プログラムコードは次のようになる。
「TimeMessageView」クラス / 「TimeMessageView.as」ファイル
/*
CLASS TimeMessageView class / View
*/

//Constractor
TimeMessageView = function() {
　this.msg_txt.text = "";
　//イベントハンドラ設定
　this.back_mc.onPress = function(){
　　_global.Controller.sendViewMessage("WIN_TIME_STAMP");
　}
};

TimeMessageView.prototype = new MovieClip();
Object.registerClass("timeMessageSymbol", TimeMessageView);

//メッセージ表示
TimeMessageView.prototype.dspMsg = function(msg) {
　this.msg_txt.text = msg;
};
  3-2-2. Model
    次に、出社、退社ボタンがクリックされた際の出退社打刻処理を行うModelとして、「TimeStampModel」クラスを作成する。
「TimeStampModel」クラスは、出社打刻、退社打刻情報をデータベースへ登録するために、連載第4回で開発したColdFusionコンポーネント「timecard.cfc」の、次のメソッドを呼び出し、結果を受信する処理を実装する。
提供メソッド commingStamp
処理概要 UserID,Password妥当性、打刻妥当性チェックを行い、正常な場合、データベースTimecardTableに出社打刻情報を登録する。
引数 UserID　Password
戻値 正常に打刻した場合、空文字（""）
チェックエラーの場合、エラーメッセージ
提供メソッド quittingStamp
処理概要 UserID,Password妥当性、打刻妥当性チェックを行い、正常な場合、データベースTimecardTableに退社打刻情報を登録する。
引数 UserID　Password
戻値 正常に打刻した場合、空文字（"”）
チェックエラーの場合、エラーメッセージ

プログラムコードは次のようになる。
「TimeStampModel」クラス / 「TimeStampModel.as」ファイル
/*
　CLASS TimeStampModel class / Model
*/

//Constractor
TimeStampModel = function() {
};		 (1)

//--------------------------------------------------
//タイムカード打刻
// kind(出退社種別) / "C":出社 "Q":退社
TimeStampModel.prototype.stamp = function(kind, userID, password) {
　//Flash Remoting
　NetServices.setDefaultGatewayUrl("http://localhost/flashservices/gateway");
　var gateway_conn = NetServices.createGatewayConnection();
　var timeAPI = gateway_conn.getService("step2.timecard", this);

　if(kind == "C"){ //出社
　　timeAPI.commingStamp(userID, password);
　}else{ //退社
　　timeAPI.quittingStamp(userID, password);
　}
};		 (2)

//commingStamp処理　結果処理
TimeStampModel.prototype.commingStamp_Result = function(result) {
　if(result == ""){
　　_global.Controller.sendModelMessage("STAMP_END", "出社打刻が完了しました。");
　}else{
　　_global.Controller.sendModelMessage("STAMP_END", result);
　}
};		 (3)

//quittingStamp処理　結果処理
TimeStampModel.prototype.quittingStamp_Result = function(result) {
　if(result == ""){
　　_global.Controller.sendModelMessage("STAMP_END", "退社打刻が完了しました。");
　}else{
　　_global.Controller.sendModelMessage("STAMP_END", result);
　}
};		 (4)

//--------------------------------------------------
//サーバサイドエラー処理
TimeStampModel.prototype.onStaus = function(status) {
　trace("サーバサイドエラー："+status);
};		 (5)

ここでのポイントは次のとおりだ。ポイントの番号は、プログラムコード中に示した番号を指す。
(1) クラスの定義
まず、TimeStampModeのクラス定義を行っている。
(2) タイムカード打刻メソッド定義
出退社打刻処理を行う「stamp」メソッドを定義する。
このメソッドでは、パラメータとしてkind(出退社種別)、UserID、Passwordを受け取り、
出退社種別に応じて、ColdFusionコンポーネント「timecard.cfc」のメソッドを呼び出す。
なお、「NetServices.setDefaultGatewayUrl」メソッドのパラメータ
「"http://localhost/flashservices/gateway"」はColdFusion MX サーバー上のFlashRemotingサービスが動作するURL（http://<ホスト名またはIPアドレス>/flashservices/gateway）となる。
また、「gateway_conn.getService」メソッドのパラメータ「"step2.timecard"」はColdFusionコンポーネント「timecard.cfc」へのパスとなる。例えば、Web(ColdFusion MX)サーバのドキュメントルート直下に「step2」というディレクトリ作成し、「step2」下に「timecard.cfc」を配置した場合、コンポーネントへのパスは「step2.timecard」となる。
(3) 出社打刻結果受信メソッド定義
ColdFusionコンポーネント「timecard.cfc」の通信結果を受信するためのメソッドを定義する。
「ColdFusionコンポーネントメソッド名_Result」の名称でメソッドを定義することで、指定したColdFusionコンポーネントメソッドの正常系結果を受信することが可能だ。
（詳細は連載第5回で解説しているので、そちらを参照していただきたい。）
このメソッドでは、出社打刻を行う「timecard.cfc」の「commingStamp」メソッドの通信結果を受信、処理する。
「commingStamp」メソッドは、正常登録された場合は、空文字を、チェックエラーの場合は、エラーメッセージを返すので、受信したデータを判定し、必要に応じて、Controllerのメソッド「sendModelMessage」（後述）を呼び出し、Contollerへイベントを通知している。
(4) 退社打刻結果受信メソッド定義
(3)と同様、退社打刻を行う「timecard.cfc」の「quittingStamp」メソッドの通信結果を受信するメソッドを定義する。
(5) 出退社打刻エラー結果受信メソッド定義
ColdFusionコンポーネント「timecard.cfc」の通信結果のうち、エラー系結果を受信するためのメソッドを定義する。ここでは、出社打刻を行う「commingStamp」メソッド、退社打刻を行う「quittingStamp」メソッドの両方のエラー系結果を受信、処理している。
「onStatus」の名称でメソッドを定義することで、ColdFusionコンポーネントメソッドのエラー系結果を受信することが可能だ。

BACK １・２・３ NEXT
PAGETOP
CLOSE