« [HTA]表示内容に合わせてウィンドウ縦方向自動伸縮 | トップページ | H29新年のご挨拶 »

2016年8月22日 (月)

[HTA]1ファイルでモーダルダイアログを表示

HTA(HTML Applicatoins)から、モーダルダイアログを表示しようと思い、ネット検索しているとダイアログは別ファイルを読み込んで開くサンプルをいくつか見つけました。
しかし、配布等を考えると可能な限り1つのHTAファイルでまとめたいと思ったため、試しに作ってみました。(  ̄▽ ̄)ノ

サンプルのモーダルダイアログの画面イメージは、以下のとおり。

それぞれのパラメータ1とパラメータ2をモーダルダイアログで個別設定できるようにしたサンプルで、モーダルダイアログパラメータを変更し、OKボタンから戻ってきた時にパラメータを更新するようにしています。
htaのプログラムソースは、以下のとおり。
<!-----------------------------------------------------------------------------
* モーダルダイアログ for HTML Application
------------------------------------------------------------------------------>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="MSThemeCompatible" content="yes" />
    <meta http-equiv="X-UA-Compatible" content="IE=8;IE=9" />
    <meta name="Author" content="fji" />
    <title>モーダルダイアログ</title>
    <style type="text/css">
        * {font-family:MS UI Gothic;}
        body {background-color:buttonface; margin:10px;}
        body > div {text-align:right;}
        textarea {width:100%; height:60px; box-sizing:border-box;}
        input[type="text"] {width:100%; box-sizing:border-box;}
        .label {text-align:left; font-size:12px;}
        #dlg1, #dlg2 {display:none;}
    </style>
    <script language="JavaScript">
        //グローバル変数 ------------------------------------------------------
        var g_iniMainSize    = {cx:500, cy:50};
        var g_iniDlgSize    = {cx:400, cy:50};
        //ダイアログかの判定 --------------------------------------------------
        function isDialog() {return window.dialogArguments;}
        //ファイル名取得 ------------------------------------------------------
        function getFileName() {return window.location.href.split('/').pop();}
        //メインウィンドウの初期化 --------------------------------------------
        function onInitialize() {
            //表示高調整
            window.resizeBy(0, document.body.parentNode.scrollHeight - document.body.parentNode.clientHeight);
        }
        //ダイアログ1を実行 --------------------------------------------------
        function doModalDlg1() {
            var rsltParam = window.showModalDialog(getFileName(), ['dlg1', 'ダイアログ1', document.getElementById('param1').innerHTML]);
            if (rsltParam)
                document.getElementById('param1').innerText = rsltParam;
        }
        //ダイアログ2を実行 --------------------------------------------------
        function doModalDlg2() {
            var rsltParam = window.showModalDialog(getFileName(), ['dlg2', 'ダイアログ2', param2.value]);
            if (rsltParam)
                param2.value = rsltParam;
        }
        //終了実行 ------------------------------------------------------------
        function doExit() {
            window.close();
        }
        //ダイアログの初期化 --------------------------------------------------
        function onInitDialog() {
            var args = window.dialogArguments;
            //表示内容設定
            document.getElementById('main').style.display = 'none';
            document.getElementById(args[0]).style.display = 'block';
            //タイトル設定
            document.title = args[1];
            //パラメータ設定
            switch (args[0]) {
                case 'dlg1':    document.getElementById('dlg_param1').innerText = args[2];    break;
                case 'dlg2':    dlg_param2.value = args[2];        break;
            }
            //表示高調整
            window.dialogHeight = g_iniDlgSize.cy + Math.abs(g_iniDlgSize.cy - document.body.parentNode.scrollHeight) + 'px';
        }
        //OK ------------------------------------------------------------------
        function onOK() {
            //パラメータ取得
            switch (dialogArguments[0]) {
                case 'dlg1':    window.returnValue = document.getElementById('dlg_param1').innerHTML;    break;
                case 'dlg2':    window.returnValue = dlg_param2.value;    break;
            }
            doExit();
        }
        //キャンセル ----------------------------------------------------------
        function onCancel() {
            doExit();
        }
        //自動実行 ------------------------------------------------------------
        if (isDialog()) {
            window.opener = window.dialogAruguments;
            window.dialogWidth = g_iniDlgSize.cx + 'px';
            window.dialogHeight = g_iniDlgSize.cy + 'px';
            window.onload = onInitDialog;
        } else {
            window.resizeTo(g_iniMainSize.cx, g_iniMainSize.cy);
            window.onload = onInitialize;
        }
    </script>
    <hta:application id="app" maximizeButton="no" minimizeButton="no" innerborder="no" selection="no" scrollflat="yes"></hta:application>
</head>

<body>
    <!-- メインウィンドウ ---------------------------------------------------->
    <div id="main">
        <div class="label">パラメータ1:</div>
        <textarea id="param1" name="param1">パラメータ1&#13;2行目&#13;3行目</textarea>
        <input type="button" value="ダイアログ1で設定" onclick="doModalDlg1();">
        <div class="label">パラメータ2:</div>
        <input type="text" name="param2" value="パラメータ2">
        <input type="button" value="ダイアログ2で設定" onclick="doModalDlg2();">
        <hr />
        <input type="button" value="閉じる" onclick="doExit();">
    </div>
    <!-- ダイアログ1 -------------------------------------------------------->
    <div id="dlg1">
        <div class="label">パラメータ1:</div>
        <textarea id="dlg_param1"></textarea>
        <hr />
        <input type="button" value="OK" onclick="onOK();">
        <input type="button" value="キャンセル" onclick="onCancel();">
    </div>
    <!-- ダイアログ2 -------------------------------------------------------->
    <div id="dlg2">
        <div class="label">パラメータ2:</div>
        <input type="text" name="dlg_param2">
        <hr />
        <input type="button" value="OK" onclick="onOK();">
        <input type="button" value="キャンセル" onclick="onCancel();">
    </div>
</body>
</html>

プログラムソースの簡単な説明として、htaの起動時にダイアログとして起動かそうでないかで処理を分岐し、表示内容を切り替えていることと、タイトルバーの名前変更、表示領域の自動調整も行っているといったところでしょうか。詳しくはプログラムソースを解析してもらえばと思います。
また、実際に動作するhtaファイルは次のURL先となります。
http://fjiblog.cocolog-nifty.com/hta/fji_modal_dialog.hta
(リンク先をファイルとしてダウンロードしてください)

■過去記事
2016年08月11日(木) : 表示内容に合わせてウィンドウ縦方向自動伸縮

|

« [HTA]表示内容に合わせてウィンドウ縦方向自動伸縮 | トップページ | H29新年のご挨拶 »

HTA」カテゴリの記事

プログラミング」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/503754/64093275

この記事へのトラックバック一覧です: [HTA]1ファイルでモーダルダイアログを表示:

« [HTA]表示内容に合わせてウィンドウ縦方向自動伸縮 | トップページ | H29新年のご挨拶 »