Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

JavaScriptとHTML/CSSで行う、軽量エディタ「Adobe Edge Code」の拡張機能開発

「Adobe Edge Code CC」徹底入門(4)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/10/21 14:00

目次

モーダルダイアログを表示する

 BracketsとEdge Codeの特徴の一つとしてダイアログパネルがOSのパネルではなく、アプリ内でHTMLでできたモーダルダイアログで一元化されている点が挙げられます。環境設定や保存先の指定など、ダイアログ形式の機能を作るためのモーダルダイアログを生成するコードについて見ていきます。下図のようなダイアログを表示する機能を作成します。このセクションではsimple_dialogというフォルダに機能を作成していきます。

 モーダルダイアログは、JavaScriptテンプレートエンジンMustacheを利用した外部HTMLテンプレートファイルで管理し、ダイアログを表示するコマンドを実行する際に変数を渡して利用します。

 前セクションのカスタムメニューサンプルの工程に加え、ダイアログの表示までに必要な手順は下記の3つです。COMMAND_IDは適宜変更してください。

  1. モーダルダイアログテンプレートファイルを用意する
  2. ダイアログに必要なモジュールとテンプレートファイルを読み込む
  3. ダイアログを表示するコマンドを定義する

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);
}

 ここまでの工程で、カスタムメニューからダイアログを表示することができました。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 又村 洋史(マタムラ ヒロフミ)

    株式会社イノーヴ WEBクリエイター。キャンペーンサイト・コーポレートサイト・ECサイトを中心に手がける。 土日はWEBの学校クスールで非常勤講師としてJavaScriptなどを教えています。日々学ぶことばかり。個人ブログ「Deconcepter」ではWEBに関わる人が押さえておきたい情報の...

バックナンバー

連載:Adobe Developer Connection

もっと読む

All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5