JavaScript UI部品¶

// 初期ロード対象コンポーネント
require(["nablarch/ui"], function(ui) {
  $(function() {
    ui.Widget.init(); //ドキュメントロード後の初期化処理を実行
  });
});

define([
  "nablarch/ui/Widget"
, "nablarch/ui/event"
, "nablarch/ui/ListBuilder"
, "nablarch/ui/DatePicker"
, "nablarch/ui/AutoSum"
, "nablarch/ui/Collapsible"
, "nablarch/ui/TreeList"
, "nablarch/ui/readonly"
, "nablarch/ui/Placeholder"
, "nablarch/ui/Tab"
], function(Widget) { "use strict";
  return {
    Widget: Widget
  };
});

DatePicker.widgetType = "nablarch_DatePicker"; //マーカCSS
Widget.register(DatePicker); // UI部品の登録

// ==============================================
// モジュール定義
// ===============================================
// グローバル関数define() によりモジュールを定義する。
//
// 依存関係の定義
// -----------------------------------
// この関数の第一引数には、このモジュールが依存するモジュールのパスの配列を指定する。
// モジュールのパスは、(コンテキストルート)/js/ からの相対パスを指定する。
// また、"./"で始まるパスは、このソースファイルからの相対パスとみなされる。
// パスの先頭に"text!"を指定した場合、当該のファイルはJavaScriptとして評価されず、
// ファイルの内容を文字列として読み込む。
//
define([
  "jquery"                       // jQueryライブラリ
, "nablarch/ui/Widget"           // ウィジェットの共通基底クラス
, "text!./ModalDialog.template"  // モーダルダイアログのHTML
, "nablarch/ui/event"            // nablarchの動作に関連したイベントの定義
, "sugar"                        // sugar.js
],
// ----------------------------------
// モジュールの初期化
// ----------------------------------
// define の第2引数には、このモジュールの初期化を行う関数を指定する。
// この初期化関数の引数には、defineの第1引数に指定した各モジュールの内容が渡される。
//
function($, Widget, template) { "use strict";
  //
  // モジュール定義を行う関数
  // =================================
  // モジュールの初期化を行う関数を冒頭に定義し、この関数の最後で呼び出す。
  // (このコードが冒頭に記述することで、モジュールの内容を把握し易くなる。)
  function define() {
    // jQueryプラグインメソッド $.fn.widgets() を使用して、マーカCSSが指定された
    // 各ノードに対して画面上のウィジェットを初期化する。
    // マーカCSSの名称は (プロジェクト名)_(ウィジェット名) とする。
    $(function() {
      $(".sample_ModalDialog.-content").widgets(ModalDialog);
    });
    // このモジュールの内容(=ウィジェットのコンストラクタ関数)をリターンする。
    return ModalDialog;
  }

  // ウィジェットクラスのプロトタイプ定義
  // ========================================
  // 本PJでのクラス定義はJavaScriptの言語仕様のみを用いたオーソドックスなスタイルで行う。
  // 下記のように、ウィジェットのプロトタイプを定義する。
  //
  ModalDialog.prototype = Object.merge(new Widget(), {   // Widgetコンストラクタのプロトタイプを継承する。
    // コンストラクタ
    constructor : ModalDialog   // instanceof 演算子を正常に動作させるために必要。
    // プロパティ
  , $dialog   : null
  , contentId : null
  , isActive  : null
    // メソッド
  , show : ModalDialog_show
  , hide : ModalDialog_hide
  });

  // イベント定義
  // ============================================
  // ウィジェットおよび、ウィジェットのプロパティとして定義されたノード上のイベントと、
  // それを処理するイベントハンドラとの対応を以下の書式に従って記述する。
  //
  //   1. "(イベント名)" : (イベントハンドラ)
  //   2. "(セレクタ式) (イベント名)" : (イベントハンドラ)
  //   3. "(コンテキストノード) (イベント名)" : (イベントハンドラ)
  //   4. "(コンテキストノード) (セレクタ式) (イベント名)" : (イベントハンドラ)
  //
  // 1.ではマーカCSSを指定したノード(this.$node)上で発生するイベントに対するハンドラを登録する。
  // また2.のようにセレクタ式を指定することで、イベントの発生元がセレクタに合致する場合のみ処理を
  // 行うようにすることができる。(event deligation)
  //
  // 3. 4. では、(コンテキストノード)に指定したノード内で発生したイベントが対象となる。
  // (コンテキストノード)には $で開始されるプロパティ名もしくは "document" を指定する。
  //
  // (イベントハンドラ) には文字列および関数を使用できる。
  // 文字列の場合は、このウィジェットの同名のメソッドを呼び出す。
  // 関数の場合は、このウィジェットをbind()したものが呼び出される。
  //
  ModalDialog.event = {
    // 1. 起動要素がクリックされたらモーダルダイアログを開く
    //   -> this.$node.on("click", function(evt) { return this.show(evt) }) と等価
    //
    "click" : "show"

    // 2. ダイアログの閉じるボタンが押されたらダイアログを閉じる。
    //   -> this.$dialog.on("click", "button.close", function(evt) { return this.hide(evt) }) と等価
    //
  , "$dialog button.close click" : "hide"

    // 3. ダイアログが開いている間は画面上のサブミット処理を全て無効化する。
    //   -> $(document).on("beforeSubmit", (function() {return false}).bind(this)) と等価
    //   ※  カスタムイベント "beforeSubmit.nablarch" は "nablarch/ui/event" の中で定義されており、
    //      グローバル関数 nablarch_submit() によってサブミットが行われる直前に呼ばれる。
    //
  , "document beforeSubmit" : function() { return !isActive }
  };

  // ウィジェットの識別子
  // ===================================
  // 内部的に使用される。
  // マーカCSSと同じ (PJ名)_(ウィジェット名) とする。
  ModalDialog.widgetType = "sample_ModalDialog";

  // ウィジェットのコンストラクタ関数
  // ===============================================
  // 第1引数にウィジェットのマーカCSSを指定したDOMノード、
  // 第2引数にはマーカCSSの後に指定したオプションが渡される。
  // なお、JavaScriptでは親クラスのコンストラクタは呼ばれないので、明示的に呼び出す必要がある。
  //
  function ModalDialog(element, option) {

    // プロパティの初期化
    // -------------------------------------------
    // 各プロパティの初期化を行う。
    // 特に、ノードプロパティの初期化Widgetコンストラクタの呼び出しよりも先に行う必要がある。
    // ※  ノードの内容は後でカスタマイズしやすいように、テンプレートファイルを使用すること。
    this.contentId = option.content
    this.isActive  = false;
    this.$dialog   = $(template).css({
                       display   : "none"
                     , position  : "absolute"
                     , "z-index" : "5"
                     }).appendTo(document);

    // Widgetコンストラクタの呼び出し
    // --------------------------------------------------
    // 共通初期化処理を行う。
    // (詳細な内容については、 nablarch/ui/Widget.js 内のドキュメントを参照)
    Widget.call(this, element);

    // -content オプションに指定されたidの内容をダイアログの内容として取り込む。
    this.$dialog.find("div.content").append("#" + contentId);
  }


  // ウィジェットのメソッド、イベントハンドラの定義
  // ===============================================
  // イベントハンドラとして登録した場合、第一引数にはイベントオブジェクト(jQuery.Event) が渡される。
  // イベントオブジェクトのtarget属性には、イベントの発生元のDOMノードオブジェクトが設定されている。
  // また、明示的にfalseをリターンすることで、イベントのプロパゲーションとデフォルトアクションの実行を抑止する
  // ことができる。

  function ModalDialog_show(event) {
    this.isActive = true;
    this.$dialog.slideDown("fast");
    return false; // デフォルトアクションを抑止する。
  }

  function ModalDialog_hide(event) {
    this.isActive = false;
    this.$dialog.slideUp("fast");
    return false; // デフォルトアクションを抑止する。
  }

  return define();  // モジュールの内容をリターンする。
});