4.3. エレメントのサンプル実装¶

export class MyZipCodeField implements IUIElementCore {

    // 繰り返しのないエレメントなので、SimpleUIElement を指定します。
    public get wrapperClass(): UIElementWrapperClass {
        return 'SimpleUIElement';
    }

    // エレメント名を返却します。
    // { エレメントのクラス名 } .name 形式で、エレメントのクラス名を返却します。
    public get elementTypeName(): string {
        return MyZipCodeField.name;
    }

    // エレメントの表示形式を返却します。
    public get displayType(): UIElementDisplayType {
        // TODO
    }

    // エレメントの配置制約を定義したファイルのクラス名を返却します。
    public get constraintClass(): UIComponentConstraintClass {
        // TODO
    }

    // エレメント固有プロパティの定義を返却します。
    // 固有プロパティがない場合は、空のオブジェクトを返却します。
    public get uniquePropertyDefinition(): IUniquePropertyDefinition {
        // TODO
    }

    // 共通プロパティの定義を返却します。
    // 固有プロパティがない場合は、空のオブジェクトを返却します。
    public get commonPropertyDefinition(): ICommonPropertyDefinition {
        return {};
    }

    // createChildren(), updateChildren(), cloneChildren() で
    // 子エレメントとして自身以外のエレメントを使用する場合に、そのクラス名を返却します。
    // このサンプルでは子エレメントを作成しませんので、空配列を返却します。
    public get dependElements(): UIElementCoreClass[] {
        return [];
    }

    // エレメント作成時に一度だけ呼び出されるメソッドです。
    // このメソッド内で、このエレメントで使用するルートとなる HTML エレメントを、HTMLElementBuilder を経由して返却します。
    // このサンプルでは、<div> タグやその子要素の <input> タグを作成する処理を記述していきます。
    public createElement(
        container: IUIContainer,
        properties: IUIElementPropertyAccessor<PropertyDefinition & ICommonPropertyDefinition>
    ): IHTMLElementBuilder {
        // TODO
    }

    // レンダリングが必要になった際に呼び出されるメソッドです。
    // プロパティで紐づけている変数の値が変更された際など、エレメント側を更新する必要がある場合は、このメソッドに実装します。
    // このサンプルでは、プロパティである value が変更された際に、子要素の <input> タグに value の値を反映させる処理を記述していきます。
    public updateElement(
        builder: IHTMLElementBuilder,
        container: IUIContainer,
        properties: IUIElementPropertyAccessor<PropertyDefinition & ICommonPropertyDefinition>
    ): void {
        // TODO
    }

    // エレメントが作成された際に一度だけ呼び出されるメソッドです。 createElement() の後に呼び出されます。
    // 自身のエレメント配下に子エレメントを作成する必要がある場合、このメソッドでエレメントを作成し、配列として返却します。
    // このサンプルでは子エレメントを作成しませんので、空配列を返却します。
    public createChildren(self: IUIElement, container: IUIContainer): IUIElement[] {
        return [];
    }

    // エレメントが複製された際に呼び出されるメソッドです。 createElement() の後に呼び出されます。
    // このサンプルでは子エレメントを作成しませんので、children 引数をそのまま返却します。
    public clonedChildren(
        children: IUIElement[],
        self: IUIElement,
        container: IUIContainer,
        properties: IUIElementPropertyAccessor<IUniquePropertyDefinition & ICommonPropertyDefinition>
    ): IUIElement[] {
        return children;
    }

}

class Constraint implements IUIComponentConstraint {

    // エレメントの移動可否を指定するメソッドです。
    // このサンプルでは、エレメントは移動可能にするため、true を返却します。
    public get movable(): boolean {
        return true;
    }

    // エレメントの削除可否を指定するメソッドです。
    // このサンプルでは、エレメントは削除可能にするため、true を返却します。
    public get removable(): boolean {
        return true;
    }

    // エレメントの複製可否を指定するメソッドです。
    // このサンプルでは、エレメントは複製可能にするため、true を返却します。
    public get copyable(): boolean {
        return true;
    }

    // エレメントが末端かどうかを指定するメソッドです。
    // このサンプルでは、子エレメントを作成しませんので、true を返却します。
    public get extremity(): boolean {
        return true;
    }

    // 親要素に対して、自身の配置可否を指定するメソッドです。
    // このサンプルでは、どの親エレメントに対しても配置可能としますので、常に true を返却します。
    public acceptableParent(parent: ParentUIElement): boolean {
        return true;
    }

    // 自身に対して、子エレメントの配置可否を指定するメソッドです。
    // このサンプルでは、自身より子階層にエレメントを移動させたくないため、常に false を返却します。
    public acceptableChild(child: IUIElement): boolean {
        return false;
    }

}

// 上で実装した制約クラスのクラス名 Constraint を返却します。
public get constraintClass(): UIComponentConstraintClass {
    return Constraint;
}

// エレメントの表示形式を返却します。
public get displayType(): UIElementDisplayType {
    return 'INPUT';
}

type PropertyDefinition = {
    value: UniquePropertyDefinitionType;
    placeholder: UniquePropertyDefinitionType;
};

// エレメント固有カテゴリのプロパティは uniquePropertyDefinition で設定できます。
const uniquePropertyDefinition: IUniquePropertyDefinition & PropertyDefinition = {
    value: {
        displayName: 'value',
        definition: {
            // value プロパティには何らかの指定が必要である
            required: true,
            // value プロパティの値が変わった時に再レンダリングされる必要がある
            rerender: true
        },
        // 文字列型
        type: 'string',
        // デフォルト値は空文字
        value: ''
    },
    placeholder: {
        displayName: 'placeholder',
        definition: {
            // value プロパティは任意であり、値の指定がなくともよい
            required: false,
            // value プロパティの値が変わった時に再レンダリングされる必要がある
            rerender: true,
        },
        // 真偽値型
        type: 'boolean',
        // デフォルト値は false
        value: false
    }
};

public get uniquePropertyDefinition(): IUniquePropertyDefinition {
    return uniquePropertyDefinition;
}

export class MyZipCodeField implements IUIElementCore {

    // 子要素のビルダは updateElement メソッド内からもアクセスされるため、クラスの先頭で宣言しておきます。
    private _firstInputBuilder: IHTMLElementBuilder;
    private _secondInputBuilder: IHTMLElementBuilder;

// エレメント作成時に一度だけ呼び出されるメソッドです。
// このメソッド内でエレメントを作成して返却します。
// ここでは、子要素の作成、イベントリスナ、属性、スタイルの付与を行っています。
public createElement(
    container: IUIContainer,
    properties: IUIElementPropertyAccessor<PropertyDefinition & ICommonPropertyDefinition>
): IHTMLElementBuilder {
    // エレメントを作成します。
    const builder = window.imHichee.HTMLElementBuilder.createElement('div', HTMLDivElement);

    // 子タグのテキストボックスを作成します。
    const inputElement1 = document.createElement('input');
    const inputElement2 = document.createElement('input');

    // テキストボックスの input イベントが呼ばれると、valueプロパティを更新するようにリスナを付与します。
    inputElement1.addEventListener('input', (e) => {
        properties.setProperty('value', inputElement1.value + inputElement2.value, false);
    });
    inputElement2.addEventListener('input', (e) => {
        properties.setProperty('value', inputElement1.value + inputElement2.value, false);
    });

    this._firstInputBuilder = window.imHichee.HTMLElementBuilder.fromElement(inputElement1);
    this._secondInputBuilder = window.imHichee.HTMLElementBuilder.fromElement(inputElement2);
    const labelElement = window.imHichee.HTMLElementBuilder.createElement('label', HTMLLabelElement).setText('-');

    // setAttribute() を使用すると、作成したエレメントに属性を追加できます。
    builder.setAttribute('my-attribute', 'zip-code-input');

    // setCSS() を使用すると、作成したエレメントにstyleを追加できます。
    builder.setCSS('padding', '10px');

    // appendChild() を利用して、上で作成したエレメント（ビルダ）を子エレメントとして追加します。
    // ここで追加した子エレメントは、IM-BloomMakerのデザイナ上で1つ1つの要素を動かしたりプロパティを設定したりすることはできません。全体で1つのエレメントとして扱われます。
    builder
        .appendChild(this._firstInputBuilder)
        .appendChild(labelElement)
        .appendChild(this._secondInputBuilder);

    // 返却値には作成したエレメントを指定します。
    return builder;
}

// レンダリングが必要になった際に呼び出されるメソッドです。
// プロパティで紐づけている変数の値が変更された際に、エレメント側を更新する必要がある場合などにその処理を記述します。
public updateElement(
    builder: IHTMLElementBuilder,
    container: IUIContainer,
    properties: IUIElementPropertyAccessor<PropertyDefinition & ICommonPropertyDefinition>
): void {
    // 各プロパティの値を取得します。
    const value = properties.getProperty('value').toString();
    const placeholder = properties.getProperty('placeholder').toBoolean();

    // 取得したプロパティの値を2つの入力エレメントに反映するため、前3桁と残りに分割します。
    const value1 = value.substring(0, 3);
    const value2 = value.substring(3);

    // 子ノードの <input> タグの value プロパティと placeholder 属性に値をセットします。
    // 子ノードの IHTMLElementBuilder は自動で build() が呼ばれない仕様であるため、独自で build() を実行する必要があります。
    this._firstInputBuilder.setValue(value1).setAttribute('placeholder', placeholder ? '000' : '').build();
    this._secondInputBuilder.setValue(value2).setAttribute('placeholder', placeholder ? '0000' : '').build();
}

import {MyZipCodeField} from './public/elements/MyZipCodeField';

// エレメントのリポジトリは以下のように取得します。
const elementRepository = window.imHichee.UIElementRepository;

// エレメントのカテゴリを登録します。
// 新たにカテゴリを追加したい場合には IUIElementRepository.registerCategory() を使用して、カテゴリを追加してください。
// id にはカテゴリの ID 、sortNumber にはカテゴリを表示させる際の優先順位を指定してください。
// カテゴリは sortNumber を基準に昇順で表示されます。
elementRepository.registerCategory('programming-sample', {sortNumber: 3000});

// 作成したエレメントをカテゴリに登録します。
// categoryId には登録先のカテゴリ名、sortNumber はカテゴリ内でエレメントを表示させる際の優先順位を指定できます。
// sortNumber を基準に昇順で表示されます。
elementRepository.registerClass(MyZipCodeField, {
    categoryId: 'programming-sample',
    sortNumber: 0,
});

// メッセージプロパティを JSON 化したものが以下に置換され、メッセージとして登録されます。
// そのため、この記述は削除しないでください。
window.imHichee.MessageBuilder.register('6549e165-925d-4de2-8c52-ec3cda282ed2');