プログラミング工房
TOP
Flex基本
開発環境 JavaScript連携 PHP連携1 PHP連携2(AMFPHP) ウィンドウ ボタンスキン 矩形スキン ローカルファイル(テキスト) F5等の対策 ローカルファイル(イメージ) ダウンロード、アップロード 1枚の画像のカラーを変更 時間のかかる計算処理 外部SWFの読込み
Flexで3D
Flexだけで3D Papervision3Dを使ってみる 3Dオブジェクト カメラ、前後判定の工夫しました 自由な形状を作成
Flexでクラス
Class1(白黒ゲームの盤) Class2(白黒ゲームのプレイヤー) Class3(プレイヤーを外部SWF)
PHP
共通関数1
Flexの作品
お問合せの説明 サンプルのソース表示の説明 分子構造の表示(PDBファイル) マンデルブロ集合の画像作成 swf参加型白黒ゲーム(Reversi) ストップウォッチ WEB素材
AIR
AIRを使ってみる ソースファイルのHTML変換を作る
etc.
マンデルブロ集合のギャラリー ジュリア集合のギャラリー wonderflを使ってみました お問合せ

Flex4基本-F5等の対策

■2011.03.02:作成
サンプル サンプルのソース
サンプルは「Flex4基本-ローカルファイル(テキスト)」と同じものです。

F5等の対策

Flexで編集中のデータがあってもブラウザで間違えてF5、戻るボタン等を押せばページが 更新、移動してしまいせっかく作っていたデータが消えてしまう。
対策としてはJavaScriptに以下の様な関数を追加すれば確認ダイアログが表示され、 少なくとも間違えてデータを消してしまうミスは少なくなる。
(この機能はブラウザで使えるものと使えないものがあります。自分の環境でIE8とFireFox3では動いています)
//ブラウザのF5、戻る、閉じるの時のイベント
window.onbeforeunload = function(event){
    return "編集中のデータは保存されません。";
}

FireFoxでの確認ダイアログ画面
window.onbeforeunload確認画面

F5等の対策-FlexとJavaScript連携

上記方法だと、変更したデータが無いときでも確認ダイアログが開いてしまう。
間違えてそのページに移動したときなど面倒になる。

Flex4基本-JavaScript連携」を利用してFlexの状態により確認ダイアログの開く開かないを制御してみる。

JavaScriptでFlexの関数をコールしてFlexの状態の状態を取得を追加
//ブラウザのF5、戻る、閉じるの時のイベント
window.onbeforeunload = function(event){
    //FLEXのエレメントを取得("LocalFile"はswfの名称)
    var e = document.getElementById("LocalFile");
    //FLEXの関数(編集中のデータの有無)
    var retData=e.fchkEdit();
    if(retData=="1") {  //編集中のデータあり(確認ダイアログ表示)
        ereturn "編集中のデータは保存されません。";
    }
    else {  //編集中のデータなし(何もしない)
       return;
   }
}

Flex側ではJavaScriptからコールされる関数をイベントに追加
//初期処理
protected function initDataSet():void {
    //JavaScript ⇒ Flex関数のイベント登録
    try {
        ExternalInterface.addCallback(
            "fchkEdit",     // Javascriptから呼び出す際の名前
            fncChkEdit      // 呼び出しに応じて実行するFlexの関数
        );
    } catch (err:Error) {
        //Alert.show("JavaScript ⇒ Flexの関数が使用できません。\n"+err.message);
    }
}

Javascriptから呼び出される関数で編集中データがあるか返す
(今回のサンプルでは編集中データの有無「bolEditFlag」はTextAreaのchangeイベントでセット)
// Javascriptから呼び出される関数(編集中のデータの有="1"/無="0")
private function fncChkEdit():String {
    if (bolEditFlag) {
        return "1";
    } else {
        return "0";
    }
}

プログラミング工房