<alier-composite>

概要

<alier-composite> は、HTML 要素の連携からなる複合的な UI コンポーネントを構成するためのカスタム要素です。 AlierView と異なり、 ViewLogic と UI の関係は HTML 上において主に記述されます。この特徴は任意の形の UI に対して ViewLogic を再利用する上で役立ちます。

<alier-composite> 要素は自身の属性で ViewLogic クラス名や必要に応じてパラメータを指定するだけで、DOM に配置された時点で自動的に ViewLogic インスタンスを生成し、その子要素をコンテナとして取り込み、関連付けまでを行います。

<alier-composite
    view-logic="CounterViewLogic"
    module="./CounterViewLogic.js"
    params='{"initialCount": 10}'
>
    <alier-text id="countDisplay">0</alier-text>
    <alier-button id="incrementBtn">＋</alier-button>
    <alier-button id="decrementBtn">－</alier-button>
</alier-composite>

上記の例では CouterViewLogic.js モジュールで定義された ViewLogic 派生クラスである CounterViewLogic が params オブジェクトをコンストラクタ引数として自動生成されます。

生成された CounterViewLogic は、各子要素に自身のメンバ this.countDisplay、this.incrementBtn、this.decrementBtn としてアクセスできるようになります。

子要素

子要素は HTML として評価されます。

ロード時に内部の要素はすべて単一の <alier-container> 要素でラップされ、ViewLogic のコンテナとして使用されます。したがって明示的にユーザーが <alier-container> を書く必要はありません。

コンテナ内の <style> / <link rel="stylesheet"> は自動的に ViewLogic のstyles に移動します。

属性

<alier-composite> はグローバル属性に対応しています。

view-logic属性

この属性の指定は必須です。

読み込む ViewLogic 派生クラスの名前を指定します。

module属性

動的 import() で読み込むモジュールを指定します。

<alier-logic
  view-logic="MyViewLogic"
  module="./MyViewLogic.js"
></alier-logic>

指定されたモジュールから

• export default
• export class MyViewLogic

のいずれかを探します。

モジュールが見つからない場合、ないし module 属性が省略された場合は、グローバル空間からの解決を試みます。

解決に失敗した場合、AlierComposite のライフサイクルは ReferenceError 例外を発生します。

params属性

ViewLogic のコンストラクタに渡すオブジェクトを JSON 形式で記述します。

この属性で指定したオブジェクト（のパース結果）は onLoad イベントからも受け取ることができます。

AlierComposite クラス

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

概要

<alier-composite> によって生成されるコンテナを操作するインターフェースを提供します。

AlierComposite.js モジュールがインポートされるとき、それに伴って自動的に <alier-composite> 要素が定義されます。

プロパティ

adoptedStyleSheets

AlierComposite に適用されるスタイルシートの配列です。

型

CSSStyleSheets[]

詳細

この静的プロパティは AlierComposite で管理されるスタイルシートを保持し、Document の adoptedStyleSheets プロパティに似たインターフェースを提供します。

プロパティに値を設定すると、AlierComposite の持つシャドウツリー内部にスタイルが適用されます。

この値は setStyleSheets() 関数によって変更されます。

logic

このプロパティは読み取り専用です。

AlierComposite に取り付けられている ViewLogic インスタンスです。 何も取り付けられていなければ null です。

型

ViewLogic | null

params

ViewLogic に渡される初期化パラメータです。params 属性から JSON としてパースされます。

型

object | null

value

ViewLogic の代表的な要素を特徴づけるプロパティの値です。参照先のプロパティに対するセッターとしても機能します。

型

any | any[] | undefined

詳細

1. AlierComposite 自身に data-primary 属性が指定されている場合

   data-primary が指す要素のプライマリプロパティです。

   自身が生成した logic に関連付けられている要素のうち、data-primary 属性と同名のプロパティを代表的な要素とみなします。このとき、alierComposite.value は対象の要素の持つ定義に従い、その要素を特徴付けるプロパティの値を指します。

   ここで value が示すプロパティとそれを所有する要素の候補は、logic.curateValues() が値を収集する際の探索範囲と同等です。

2. AlierComposite 自身に data-primary 属性の指定が存在しない場合

   logic.value 要素のプライマリプロパティです。

3. 該当する要素が存在しない場合

   プロパティ名として data-primary で指定された値および "value" のいずれにも該当する関連付けられた要素がない場合、alierComposite.value は undefined を返します。

メソッド

show()

• 対象の AlierComposite に取り付けられた ViewLogic のコンテナの内容を表示します。

hide()

• 対象の AlierComposite に取り付けられた ViewLogic のコンテナの内容を非表示にします。

setStyleSheets()

• AlierComposite および AlierView に共通のスタイルシートを適用します。このメソッドは静的メソッドです。

post()

• 対象の AlierComposite に取り付けられた ViewLogic にメッセージを送ります。

broadcast()

• 対象の AlierComposite に取り付けられた ViewLogic の子孫にメッセージを送ります。

イベント

onLoad

<alier-composite> で生成された ViewLogic インスタンスは、初期化後に一度だけ onLoad メッセージを受け取ります。

• param: params 属性からパースされたオブジェクト（属性未指定時は null）

class CounterViewLogic extends ViewLogic {
    count;
    async messageHandler(msg) {
        return msg.deliver({
            onLoad: (msg) => {
                const params = msg.param;   // params 属性の内容
                this.count = params.initialCount;
                this.countDisplay.value = this.count;
            }
        });
    }
}

これにより、子要素の関連付けやスタイルの適用がすべて完了した安全なタイミングで初期化処理を実行できます。