Dojo Bootstrap モーダル、ポップアップは誰が必要？

ReneRubalcava

<\/HEAD>

<\/P>

しばらく前に、自分のブログ<\/A>で、ArcGIS API for JavaScript と Dojo Bootstrap の使い方<\/A>について投稿しました。オートコンプリート検索を組み込む方法を示し、かなりうまく動作し見た目も良いことを紹介しました。私はアプリ開発でDojo Bootstrap<\/A>をかなり広範囲に使っており、いくつかの癖<\/EM>があり、それには少し工夫が必要だとわかりました。HTMLをproperty属性タグでレイアウトしライブラリを読み込めば、学習曲線はあるものの大きな問題はないはずです。プログラム的にウィジェットとして要素を作成したい場合には、いくつかの回避策<\/EM>が必要でした。簡単な例としてModal<\/A>の作成時にそれが見られます。<\/P>

<\/P>

モーダル、自分流に使う方法<\/H2>通常、モーダルポップアップはウィジェットとして扱いたいので、モーダルの見た目を少しカスタマイズしたいことがあります。以下のサンプルでは、このテンプレートをウィジェット用に使っています。<\/P>var tpl = [
  '<div class="modal fade popup-container" id="myModal" tabindex="-1" role="dialog"',
  'data-dojo-type="Modal" data-dojo-props="header:My Modal, modalClass: fade"',
  'aria-labelledby="myModalLabel" aria-hidden="true" data-dojo-attach-point="modalNode">',
  '<div class="modal-dialog">',
    '<div class="modal-content" data-dojo-attach-point="contentNode">',
      '<div class="modal-header">',
        '<h4 id="myModalLabel"><\/h4>',
        '<span data-dojo-attach-point="labelNode">${title}<\/span>',
        '<a href="javascript:void(0)" class="glyphicon glyphicon-remove pull-right popup-close" data-dismiss="modal" aria-hidden="true"><\/a>',
      '<\/div>',
      '<div data-dojo-attach-point="bodyNode" class="modal-body">',
      '<\/div>',
    '<\/div>',
  '\/div>',
'<\/div>'
].join("");<\/PRE><\/P>多くは標準的なものですが、動的にtitle<\/strong>を設定し、内容を追加できるbodyNode<\/strong>のアタッチポイントを加えたいと思いました。Modalモジュールと直接やり取りする代わりに、タイトル設定や内容更新などができる別のウィジェットでラップしています。このカスタムウィジェットは次のようになります。<\/P>var Popup = declare([_WidgetBase, _TemplatedMixin, Evented], {
  templateString: tpl,
  loaded: false,
  constructor: function() {
    this.set('content', '');
    this.set('title', 'Popup Window');
  },
  postCreate: function() {
    this.modal = new Modal(this.domNode);
    var watchContent = this.watch('content', function(_, __, value) {
      domConstruct.empty(this.bodyNode);
      this.bodyNode.appendChild(domConstruct.toDom(value));
    }.bind(this));
    var watchTitle = this.watch('title', function(_, __, value) {
      this.labelNode.innerHTML = value;
    }.bind(this));
    var onHide = on(this.modal.domNode, 'hide.bs.modal', function() {
      this.emit('hide', {});
    }.bind(this));
    this.own(watchContent, watchTitle, onHide);
    this._init();
  },
  show: function() {
    this.modal.show();
  },
  hide: function() {
    this.modal.hide();
  },
  _init: function() {
    this.set('loaded', true);
    this.emit('loaded', true);
  }
});<\/PRE><\/P>ここで起きていることは、ウィジェットのdomNode<\/strong>をターゲットにして新しいModalを作成します。Modalが隠れたときのwatcher<\/A>を設定し、そのイベントをウィジェットから伝播させます。これはModalのテストコード<\/A>を参照してイベント名を調べたもので、一部ドキュメントはまだ更新中です。その後、タイトルと内容用のwatcherを設定します。内容はDOM要素に変換されて<\strong>bodyNode<\strong>に追加されます。<\P>

<\P>

結果はこのようになります。<\P>

<\P>

これをデモするために既存のInfoWindowサンプルを取り、このJSBinで修正しました。<\P>

Dojo Bootstrap サンプル<\A><\P>

<\P>

このモーダルウィンドウ内ではあまり多くのことは起きていませんが、その余白で何ができるか考えてみてください。画像添付ファイル

表示したり、データの詳細や関連テーブルデータをきれいにフォーマットして提供したりできます。他のウィジェットも追加してウィンドウ内で美しいチャート表示も可能です。私はこれを使って大きなボタン付きの完全編集フォームやピックリストとして他のModalポップアップも提供しています。パワーはあなたの手中にあります。<\P><\P>ハック＆スラッシュ<\H2>ここで紹介したことは画期的なものではないかもしれませんが、InfoWindowの内容をModalポップアップに移すなど、小さな工夫がアプリケーションにちょっとした魅力を加えます。好みでdijit/Dialogも使えますしスタイル調整も可能です。この種のインタラクションを試してユーザー体験がよりスムーズになるか確認することが目的です。モバイルデバイス上でページ全体を覆うようにModalポップアップをスタイリングし、美しいトランジション効果も付けられます。コードを書くのはあなた自身です、自分流にしてください。Dojo Bootstrap の内部解析で助けてくれたTom Waysonにも大感謝です。<\\p>

MichaelJenkins

Cool idea, I  like it!