モーダルダイアログを表示する
BracketsとEdge Codeの特徴の一つとしてダイアログパネルがOSのパネルではなく、アプリ内でHTMLでできたモーダルダイアログで一元化されている点が挙げられます。環境設定や保存先の指定など、ダイアログ形式の機能を作るためのモーダルダイアログを生成するコードについて見ていきます。下図のようなダイアログを表示する機能を作成します。このセクションではsimple_dialogというフォルダに機能を作成していきます。
モーダルダイアログは、JavaScriptテンプレートエンジンMustacheを利用した外部HTMLテンプレートファイルで管理し、ダイアログを表示するコマンドを実行する際に変数を渡して利用します。
- Mustacheの詳細は公式サイトをご覧ください。
前セクションのカスタムメニューサンプルの工程に加え、ダイアログの表示までに必要な手順は下記の3つです。COMMAND_IDは適宜変更してください。
- モーダルダイアログテンプレートファイルを用意する
- ダイアログに必要なモジュールとテンプレートファイルを読み込む
- ダイアログを表示するコマンドを定義する
1. モーダルダイアログテンプレートファイルを用意する
Mustacheを利用したHTMLテンプレートを用意します。モーダルダイアログのデザインはスタイルシートで定まっているので、下記のようなスタイルを適用しておきます。変数化しておきたい箇所は{{変数名}}としておき、表示する際に変数を受け取ります。Stringsモジュールは各言語に対応した文字列の定数を提供してくれます。Strings.CLOSEとしておくと、日本語環境下で「閉じる」と表示されます。
<div class="modal">
<div class="modal-header">
<h1 class="dialog-title">{{DIALOG_INFORMATION.TITLE}}</h1>
</div>
<div class="modal-body">
<p>{{DIALOG_INFORMATION.MESSAGE}}</p>
</div>
<div class="modal-footer">
<button class="dialog-button btn primary" data-button-id="close">{{Strings.CLOSE}}</button>
</div>
</div>
HTMLテンプレートはhtmlContentというフォルダを作成して格納するルールとします。上記のコードをhtmlContent/simple_dialog.htmlとして保存します。
2. ダイアログに必要なモジュールとテンプレートファイルを読み込む
Dialogsモジュールと文字列定数モジュールを読み込み、1で定義したファイルをmain.jsで読み込みます。
var CommandManager = brackets.getModule("command/CommandManager"),
Menus = brackets.getModule("command/Menus"),
Dialogs = brackets.getModule("widgets/Dialogs"),
Strings = brackets.getModule("strings"),
SimpleDialogTemplate = require("text!htmlContent/simple_dialog.html");
3. ダイアログを表示するコマンドを定義する
まずはMustacheに渡す変数をまとめたオブジェクトを定義します。後ほどこれをMustache.renderメソッドに渡します。
var DIALOG_INFORMATION = {
TITLE: 'はじめてのダイアログ',
MESSAGE: 'わーい'
};
実際にダイアログを表示するためのコマンドを定義します。Dialogs.showModalDialogUsingTemplateに2で読み込んだテンプレートを渡すことで表示されます。
function showDialog() {
// Mustacheに渡すオブジェクト
var context = {
Strings: Strings,
DIALOG_INFORMATION: DIALOG_INFORMATION
};
// ダイアログを表示
var dialog = Dialogs.showModalDialogUsingTemplate(Mustache.render(SimpleDialogTemplate, context));
}
前セクションで追加したCustomMenuにSimple dialogのメニューを追加したいと思いますが、同じMENU_IDで登録されている場合バッティングしてしまいます。今回はCustomMenuがすでに存在している想定で、Menus.getMenuメソッドを使って取得できなかった場合のみaddMenuをコールするように記述します。
var menu = Menus.getMenu(MENU_ID);
if (!menu) {
menu = Menus.addMenu('CustomMenu', MENU_ID, Menus.BEFORE, Menus.AppMenuBar.HELP_MENU);
}
ここまでの工程で、カスタムメニューからダイアログを表示することができました。
