keyboard_arrow_leftsetupAlier()attach()keyboard_arrow_right

AlierView

モジュールパス: /alier_sys/AlierView.js

--- config: class: hideEmptyMembersBox: true --- classDiagram direction LR HTMLElement <|-- AlierCustomElement AlierCustomElement <|-- AlierLogic AlierLogic <|-- AlierView

概要

AlierView は、ViewLogic を取り付け、ViewLogic インスタンスが管理するHTMLコンテンツを描画するためのカスタム要素を提供するクラスです。

AlierView.js モジュールが読み込まれる際、AlierView をコンストラクタとしてカスタム要素 <alier-view> が定義されます。

<p>Contents managed by a ViewLogic will be inserted the alier-view element below by a script.</p>
<alier-view id="my-alier-view">
</alier-view>

AlierView インスタンスに ViewLogic インスタンスを取り付けるには、AlierView インスタンスを対象に attach() 関数を呼び出します。

const alierView = new AlierView();
const viewLogic = new ViewLogic();

//  viewLogic を alierView に取り付ける
alierView.attach(viewLogic);

上記の例では ViewLogic のインスタンスのコンテナは空であるため、実際には何も描画されませんが、loadContainer() などの関数を利用することで ViewLogic インスタンスのコンテナに内容を持たせると、それが <alier-view> の配置された箇所に描画されるようになります。

取り付けた ViewLogic インスタンスを取り外すには detach() 関数を使います。detach() 関数を呼び出すと、その ViewLogic インスタンスが持っていたコンテナはDOMツリーから取り外され、また AlierView インスタンスは取り外した ViewLogic インスタンスへの参照を失います。同様の効果は、すでに ViewLogic インスタンスが取り付けられている AlierView インスタンスに対して、別の ViewLogic インスタンスを引数として attach() 関数を呼ぶことでも生じます。

const alierView = new AlierView();
const viewLogic = new ViewLogic();
const anotherViewLogic = new ViewLogic();

//  viewLogic を alierView に取り付ける
alierView.attach(viewLogic);

//  viewLogic を alierView から取り外す
alierView.detach();

//  viewLogic を alierView に取り付ける
alierView.attach(viewLogic);

//  anotherViewLogic を alierView に取り付ける。
//  以前取り付けられた viewLogic は取り外される。
alierView.attach(anotherViewLogic);

コンテナの内容の表示・非表示はそれぞれ show() 関数と hide() 関数によって切り替えることができます。また、AlierView 全体に適用するスタイルシートを設定するために setStyleSheets() 関数を利用できます。

//  alierView の内容を非表示にする
alierView.hide();

//  すべての AlierView インスタンスに ./my-theme.css のスタイルを適用する
await AlierView.setStyleSheets(false, "./my-theme.css");

//  alierView の内容を表示する
alierView.show();

ViewLogic インスタンスの取り付けられた AlierView インスタンスに対して、post() 関数および broadcast() 関数によってメッセージを送ることができます。

//  alierView に取り付けられた ViewLogic インスタンスにメッセージを送る
//  送られたメッセージは宛先の ViewLogic インスタンスかその祖先に渡されて処理される。
alierView.post({ id: "foo", code: "bar", param: { baz: "qux" }, origin: alierView });

//  alierView に取り付けられた ViewLogic インスタンスにメッセージを送る
//  送られたメッセージは宛先の ViewLogic インスタンスの子孫に渡されて処理される。
alierView.broadcast({ id: "foo", code: "bar", param: { baz: "qux" }, origin: alierView });