Skip to content

Japanese plugin dev 5 2

Jump to bottom
uehatsu edited this page May 9, 2011 · 7 revisions

動作モードの追加とモーダルウィンドウの表示

はじめに

管理画面をカスタマイズしてくると、別途アプリケーション（*.cgi）を用意するまでもない機能追加、もしくは別途アプリケーションに遷移できない機能追加を行いたいと考える事が出てきます。

また、画面遷移せずにダイアログ（モーダルウィンドウ）で処理を済ませたい事もあります。

今回はこの２つをプラグインとして実装します。

動作モードとは？

動作モードとは、 /cgi-bin/mt.cgi?__mode=foo の様に mt.cgi などアプリケーションに渡される foo のような値によって遷移される画面の事です。他にも、 view 、 list_entry など多くの動作モードが存在します。

今回は、 modal_window_test という動作モードを追加します。

モーダルウィンドウとは？

通常アプリケーションの動作モードは管理画面の１つとして表示されます。

画面遷移をしたく無い場合、例えばブログ記事の編集中に画像を挿入する時など画面遷移せずに必要な情報を表示し選択し元の画面に戻りたいと考えます。

このようなダイアログをMTではモーダルウィンドウで実装できます。ウィンドウの背景（例：ブログ記事の編集中画面）は暗くなり、その手前にダイアログが表示されます。このダイアログの表示内容は動作モードによって決められます。

今回は、 modal_window_test モードに対応したモーダルウィンドウを作成します。

仕様

  • ブログメニュー＞ツール に「モーダルウィンドウ」メニューを追加
    • 管理者のみ閲覧、操作可能
    • 「モーダルウィンドウ」メニューをクリックすると __mode=modal_window_test の状態でモーダルウィンドウが表示
  • モーダルウィンドウには、ブログID、ブログ名、公開済みブログ記事の一覧と「閉じる」ボタンを表示
    • 「閉じる」ボタンをクリックするとモーダルウィンドウが閉じ、元の画面に戻る。

実装方法

メニューの追加とモーダルウィンドウの表示

以下のようにレジストリを書き換える事でブログメニューに「モーダルウィンドウ」メニューが表示されます。

id: MyPlugin16
key: MyPlugin16
name: <__trans phrase="Sample Plugin Modal Window">
version: 1.0
description: <__trans phrase="_PLUGIN_DESCRIPTION">
author_name: <__trans phrase="_PLUGIN_AUTHOR">
author_link: http://www.example.com/about/
doc_link: http://www.example.com/docs/
l10n_class: MyPlugin16::L10N

applications:
    cms:
        menus:
            tools:modal_window:
                label: Modal Window
                order: 1000
                view: blog
                permission: administer
                mode: modal_window_test
                dialog: 1

以前紹介したメニュー追加と同じです。ここでは mode に modal_window_test を指定し、 dialog: 1 としているためクリックするとモーダルウィンドウが表示されます。

この状態では、モード（modal_window_test）を追加していないので、メニューをクリックするとモーダルウィンドウ内でエラー（不明なアクション: modal_window_test ）が発生します。

そこで、モードを追加します。

（前略）

applications:
    cms:
        menus:
            tools:modal_window:
                label: Modal Window
                order: 1000
                view: blog
                permission: administer
                mode: modal_window_test
                dialog: 1
        methods:
            modal_window_test: $MyPlugin16::MyPlugin16::ModalWindow::hndl_modal_window

上記のように、 methods: に modal_window_test を新規モードとして追加します。

この状態でクリックしても $MyPlugin16::ModalWindow::hndl_modal_window の実装が終わっていないため、やはりエラーになります。

モーダルウィンドウ内の表示

$MyPlugin16::ModalWindow::hndl_modal_window の実装を始めます。

MyPlugin/ModalWindow.pm（１）

package MyPlugin16::ModalWindow;
use strict;

sub hndl_modal_window {
    return 1;
}
1;

この例はモーダルウィンドウに「1」と表示させるだけの例です。

テンプレートを用意して、それにブログID、ブログ名、公開済みブログ記事の一覧を表示させます。

MyPlugin/ModalWindow.pm（２）

package MyPlugin16::ModalWindow;
use strict;

sub hndl_modal_window {
    my $app = shift;
    my $blog_id = $app->param('blog_id');
    my $class = MT->model('blog');
    my $blog = $class->load($blog_id);

    my %param;
    $param{blog_id} = $blog_id;
    $param{blog_name} = $blog->name();
    $param{entry_count} = MT::Entry->count({ blog_id => $blog_id,
                                             status => MT::Entry::RELEASE(),
                                           });

    $app->load_tmpl('modal_window.tmpl', \%param);
}

1;
  • $app を取得します
  • $blog_id を取得し、そこから $blog を取得します。
  • %param に、ブログのID： $blog_id とブログ名： $blog->name() 、公開済みブログ記事： MT::Entry->count() をセットします。
  • テンプレート（modal_window.tmpl）と %param からページを生成します。

tmpl/modal_window.tmpl（１）

<mt:include name="dialog/header.tmpl" page_title="<__trans phrase="Modal Window">">

blog_id : <mt:var name="blog_id" encode_html="1"><br />
blog_name : <mt:var name="blog_name" encode_html="1"><br />
entry_count : <mt:var name="entry_count" encode_html="1"><br />

<mt:include name="dialog/footer.tmpl">
  • モーダルウィンドウのテンプレートファイルです。
  • ヘッダーとフッターのテンプレートを <mt:include name="dialog/xxx.tmpl"> でインクルードしています。
  • blog_id, blog_name, entry_count を %param で渡されたものをセットします。

これでモーダルウィンドウにブログの情報が表示されるようになりましたが、まだ「閉じる」ボタンがありません。

「閉じる」ボタンは以下の様に追加します。

<mt:include name="dialog/header.tmpl" page_title="<__trans phrase="Modal Window">">

blog_id : <mt:var name="blog_id" encode_html="1"><br />
blog_name : <mt:var name="blog_name" encode_html="1"><br />
entry_count : <mt:var name="entry_count" encode_html="1"><br />

<div class="actions-bar">
    <div class="actions-bar-inner pkg actions">
        <form action="" method="get" onsubmit="return false">
            <button
                type="submit"
                class="action button primary primary-button mt-close-dialog"
                title="<__trans phrase="Close">"
                ><__trans phrase="Close"></button>
        </form>
    </div>
</div>

<mt:include name="dialog/footer.tmpl">

これで仕様通りに「モーダルウィンドウ」メニューをクリックすると、モーダルウィンドウにブログ情報が表示され、「閉じる」ボタンをクリックするとモーダルウィンドウが閉じて元の画面に戻るという実装が完了しました。

ファイルの配置

$MT_DIR/
|__ plugins/
   |__ MyPlugin16/
      |__ config.yaml
      |__ lib/
      |  |＿ MyPlugin16/
      |     |__ L10N.pm
      |     |＿ L10N/
      |     |  |＿ en_us.pm
      |     |  |＿ ja.pm
      |     |__ ModalWindow.pm
      |__ tmpl/
         |＿ modal_window.tmpl

プラグインダウンロード

MyPlugin16.zip(2.95KB)

まとめ

今回は動作モードをモーダルウィンドウで表示する事を前提に実装しましたが、 dialog: 1 をセットせずに通常のウィンドウを表示させることも可能です。その場合、それぞれ合った外部テンプレートをインクルードしてページを作りましょう。 $MT_HOME/tmpl/cms/ 内にテンプレートがありますのでチェックしてください。

今回で管理画面のUIの修正方法の解説は終りです。思ったより簡単だったのではないでしょうか？本ドキュメントと既存のプラグインを参考に管理画面を自分流にカスタマイズしてみましょう。

プラグイン開発ガイド インデックス

  1. プラグイン開発のためのファーストステップ
  2. レジストリ、YAMLについて
  3. 環境変数について
  4. プラグインのローカライゼーションについて
  5. テストドリブンでのプラグインの開発について
  6. グローバル・モディファイアプラグインの開発について
  7. ファンクションタグ プラグインの開発について
  8. ブロックタグ プラグインの開発について
  9. コンディショナルタグ プラグインの開発について
  10. プラグインのデバッグ
  11. プラグインの設定方法
  12. コールバックとフックポイント
  13. スケジュールタスクの開発
  14. MTオブジェクトの利用方法
  15. 独自オブジェクトの作成
  16. 新規アプリケーションの作成
  17. Transformerプラグインの開発
  18. 管理画面のメニュー修正
  19. リストアクションの追加
  20. 動作モードの追加とモーダルウィンドウの表示
  21. 外部Web APIとの連携
  22. 権限とロール
Clone this wiki locally