| Ajaxフレームワーク ユーザーズガイド |
|
目次
索引
|
| 第5章 アプリケーションの開発 | > 5.10 アプリケーションの開発例(マッシュアップ) |
“画面部品の定義(マッシュアップ開発例)”で画面部品を定義した画面フォームに、Ajaxページエディタを利用して、ログイン・ログアウト処理に関する動作定義を記述します。
Ajaxページエディタの操作方法については、“Ajaxページエディタ”を参照してください。
動作定義では、ログインボタン・ログアウトボタンの定義と、イベントの定義・登録、初期表示・ログイン・ログアウト処理の定義を記述します。
画面の[ログイン]ボタンと[ログアウト]ボタンを定義します。
記述内容
<!-- ログインボタン定義 --> <div rcf:id="loginButton" rcf:type="Button" rcf:label="ログイン" rcf:width="80px" rcf:height="24px" style="left: 515px; top: 5px; position: absolute"></div> <!-- ログアウトボタン定義 --> <div rcf:id="logoutButton" rcf:type="Button" rcf:label="ログアウト" rcf:width="80px" rcf:height="24px" style="left: 515px; top: 5px; position: absolute"></div> |
作成したボタンにイベントを定義します。
記述内容
// イベント定義
calEvent = {
loginButton:{ (1)
click:login (2)
},
logoutButton:{ (1)
click:logout (3)
}
}; |
1) 作成したボタンを指定
2) クリック時にlogin()関数を実行するように定義
3) クリック時にlogout()関数を実行するように定義
初期処理の登録APIを利用して、定義したイベントを登録します。
記述内容
// 初期処理定義
RCF.addInitializedListener(
function(eventObject) {
// イベント登録
rcf.event.EventRegistrar.registerEvents(calEvent, "calEvent"); (1)
init(); (2)
}
);
|
1) 定義したイベントに“calEvent”という名前を付けて登録
2) 初期表示時にinit()関数を実行するように定義
イベントの初期処理定義で記述した関数を定義し、Apcoordinatorのビジネスクラスを呼び出す関数を記述します。
記述内容
// 初期処理定義
function init(){
// 初期表示時のみコンテナ部品の表示制御
document.getElementById("before_div").style.visibility = "visible";
document.getElementById("after_div").style.visibility = "visible";
// 一覧部の情報をクリア
listModel.setProperty("list", []);
// Webサイト(公開カレンダ)にアクセス
accessCalendar("PublicCalendar", "json");
}
// 外部との通信を行うメイン処理定義(マッシュアップフレームワークを利用)
function accessCalendar(serviceId, type){
// queryData(送信パラメタの指定)
var queryData = {};
// requestParam(サービスIDとタイプの指定)
var reqParam = {serviceId: serviceId, type: type}; (1) (2)
// option
var option = {
url: "muf/proxy",
callback: function(res){ (3)
// 公開カレンダ・データの取得(RESTアダプタ：XML→JSON形式)
if(serviceId == "PublicCalendar"){
var app_list = res.childNodes;
for(i=0; i<app_list.length; i++){
var responseData = new Object();
responseData.date = app_list[i].childNodes[0].childNodes[0];
responseData.timerange = app_list[i].childNodes[1].childNodes[0];
responseData.subject = app_list[i].childNodes[2].childNodes[0];
responseData.secret = "";
// 1行ごとテーブルに追加(画面部品に関連づけ)
listModel.getDataProvider("list").addItem(responseData);
}
}
// 私用カレンダ・データの取得(HTMLアダプタ：HTML→JSON形式)
else if(serviceId == "PrivateCalendar"){
var tbl_tr = res.childNodes[0].childNodes;
// 1行目(i=0)は見出し行のため省略(インデックス1より開始)
for(i=1; i<tbl_tr.length; i++){
var responseData = new Object();
responseData.date = tbl_tr[i].childNodes[0].childNodes[0];
responseData.timerange = tbl_tr[i].childNodes[1].childNodes[0];
responseData.subject = tbl_tr[i].childNodes[2].childNodes[0];
responseData.secret = "Private";
// 1行ごとテーブルに追加(画面部品に関連づけ)
listModel.getDataProvider("list").addItem(responseData);
}
}
// TableView のソート(callbackの最後で行う)
list.sort("date", true);
},
// エラー処理定義
errorHandler: function(err) {
alert("マッシュアップフレームワークでエラーが発生しました。\n" + err.message);
}
};
// Webサービス呼出し
MuRequest.send(queryData, reqParam, option); (4)
} |
1) マッシュアップ定義ファイルに定義したWebサービスのサービスIDを指定
2) マッシュアッププロキシからのレスポンス形式(XML形式またはJSON形式)を指定
3) 通信完了時のコールバック処理を定義
4) 送信するクエリ文字列オブジェクト、リクエストパラメタオブジェクト、通信設定オブジェクトを指定して、通信実行
イベントの定義で記述した関数を定義し、Apcoordinatorのビジネスクラスを呼び出す関数を記述します。
記述内容
// ログイン処理定義
function login(){
// ログイン認証チェック(通信フレームワークを利用)
// requestParams
var reqParam = {
beanId: "dataBeanId1", (1)
verb: "login" (2)
};
// option
var option = {
url: "acf/apc",
callback: function(res){ (3)
// ユーザIDが空でない場合、ログイン成功
if(res.userid != ""){
// 認証に成功した場合、Webサイト(私用カレンダ)にアクセス
accessCalendar("PrivateCalendar", "json");
// Containerと見出しの切替え
authinfoContainer.setSelectedContainerId("afterauthContainer");
userid_Text.setProperty("value", res.userid);
list_Title.setProperty("value","公開カレンダ ＋ 私用カレンダ");
}
// ユーザIDが空の場合、認証エラー
else{
alert("認証に失敗しました。");
}
},
// エラー処理定義
errorHandler: function(err) {
alert("通信フレームワークでエラーが発生しました。\n" + err.message);
}
};
// 通信サービス呼出し
UjiRequest.send(authData, reqParam, option); (4)
} |
1) 送信データを格納するデータBean(Ajaxフレームワーク環境定義ファイルに定義したデータBean ID)を指定
2) 呼び出すメソッドに対応するコマンド名(コマンドマップに定義したコマンド名)を指定
3) 通信完了時のコールバック処理を定義
4) 送信するデータオブジェクト、リクエストパラメタオブジェクト、通信設定オブジェクトを指定して、通信実行
イベントの定義で記述した関数を定義し、Apcoordinatorのビジネスクラスを呼び出す関数を記述します。
記述内容
// ログアウト処理定義
function logout(){
// 一覧部の情報をクリア
listModel.setProperty("list", []);
// Webサイト(公開カレンダ)にアクセス
accessCalendar("PublicCalendar", "json");
// ログアウト処理(通信フレームワークを利用)
// requestParams
var reqParam = {
beanId: "", (1)
verb: "logout" (2)
};
// option
var option = {
url: "acf/apc",
callback: function(res){ (3)
// 入力域の初期化
authinfoModel.setProperty("userid", "");
authinfoModel.setProperty("password", "");
// Containerと見出しの切替え
authinfoContainer.setSelectedContainerId("beforeauthContainer");
userid_Text.setProperty("value", "");
list_Title.setProperty("value", "公開カレンダ（認証不要）");
},
// エラー処理定義
errorHandler: function(err) {
alert("通信フレームワークでエラーが発生しました。\n" + err.message);
}
};
// 通信サービス呼出し
UjiRequest.send(null, reqParam, option); (4)
} |
1) 送信データを格納するデータBeanは不要なため、データBean IDは指定しない
2) 呼び出すメソッドに対応するコマンド名(コマンドマップに定義したコマンド名)を指定
3) 通信完了時のコールバック処理を定義
4) 送信するデータオブジェクト、リクエストパラメタオブジェクト、通信設定オブジェクトを指定して、通信実行
|
目次
索引
|