6.4. エレメント内部を差し替える「部品選択」メニューを実装する¶

6.4.1. イベントリスナを実装する¶

エレメントを選択した際に表示されるツールバーの「操作」メニューをクリックすると、ツールバー上に表示されている各操作以外で、エレメントに関する全ての操作が可能なメニューが追加表示されます。

この操作メニューには、エレメントのプロパティ値を変更するために用意された「部品操作」グループと、エレメント内部を別のものに差し替えるために用意された「部品選択」グループがあります。

操作メニューの「部品選択」グループに、エレメント内部を別のものに差し替える機能を付与するためには、「事前準備」にて用意した Layouter クラスに、特定のイベントリスナを実装します。

実装するイベントリスナは、「固有プロパティを変更する「部品操作」メニューを実装する」と同一です。

designer-toolbar-show

操作メニュー、または、ツールバーの表示が必要となったときに呼び出されるイベントです。

操作メニューに表示する内容を返却します。

designer-toolbar-push-button

designer-toolbar-show イベントで返却した操作メニュー、または、ツールバー上の項目が選択されたときに呼び出されるイベントです。

リクエストに従って、表示したメニューに応じた操作を、エレメントに対して行います。

ただし、designer-toolbar-show で返却する内容と、designer-toolbar-push-button で受け取る引数の値が異なります。

6.4.2. 操作メニューをツールバーに表示する¶

6.4.2.1. ツールバーに項目を追加する¶

操作メニューに項目を追加する場合は、イベントリスナで designer-toolbar-show のリスナを追加し、各項目の情報を返却します。
サンプルの郵便番号入力エレメントには、表示するボックス形式を変更する機能はありませんが、仮に「テキストボックス形式」「選択ボックス形式」を選択できるよう設定してみます。
メニュー項目を特定するために、任意の ID を指定します。 この例では textbox および selectbox とします。

以下のように実装します。

export class MyZipCodeFieldLayouter implements IUIElementLayouterExpandCaller {

    public isSupported(element: IUIElement): boolean {
        return element.instance.elementTypeName === MyZipCodeField.name;
    }

    public initialize(element: IUIElement, container: IUIContainer): void {
        const eventListener = container.eventListener;

        // 操作メニュー・ツールバーが表示されたとき
        eventListener.addEventListener(element, 'designer-toolbar-show', () => {
            // メニューに表示する内容を返却する
            return {
                items: {
                    // 「部品選択」グループ
                    addChildElements: [{
                        id: 'textbox',
                        label: 'テキストボックス形式'
                    }, {
                        id: 'selectbox',
                        label: '選択ボックス形式'
                    }]
                }
            };
        });
    }

}

6.4.2.2. 項目が選択されたときの処理を実装する¶

メニュー項目を追加したら、メニュー項目が実際に選択されたときの処理を実装します。

メニュー選択時の処理は、イベントリスナで designer-toolbar-push-button のリスナを追加し、引数 eventValue の値を取得します。

最初に、eventValue.button が 'addChildElement' であることを確認します。これが、操作メニューの「部品選択」グループ内にある項目が選択されたことを示します。

次に eventValue.id を確認します。ここには、選択されたメニューの ID が格納されています。追加したメニュー項目の ID と一致する場合は、エレメント内を差し替える操作を実装します。

以下のように実装します。

export class MyZipCodeFieldLayouter implements IUIElementLayouterExpandCaller {

    public isSupported(element: IUIElement): boolean {
        return element.instance.elementTypeName === MyZipCodeField.name;
    }

    public initialize(element: IUIElement, container: IUIContainer): void {
        const eventListener = container.eventListener;

        eventListener.addEventListener(element, 'designer-toolbar-show', () => {
            // （省略）
        });

        // 操作メニューまたはツールバーから項目が選択されたとき
        eventListener.addEventListener(element, 'designer-toolbar-push-button', (eventValue) => {
            // 「部品選択」グループから項目が選択されたとき
            if (eventValue.button === 'addChildElement') {
                // 「テキストボックス形式」が選択されたとき
                if (eventValue.id === 'textbox') {
                    // TODO: ここにテキストボックスへ差し替える処理を実装
                }
                // 「選択ボックス形式」が選択されたとき
                if (eventValue.id === 'selectbox') {
                    // TODO: ここに選択ボックスへ差し替える処理を実装
                }
            }
        });
    }

}

6.4.2.3. 動作を確認する¶

デベロップモードで郵便番号入力エレメントを配置したコンテンツ定義を作成し、レイアウトモードに切り替えます。

郵便番号入力エレメントをクリックし、ツールバーから「操作」 - 「部品選択」グループ - 「郵便番号入力」を選択すると、「テキストボックス形式」と「選択ボックス形式」が表示されることを確認します。

部品を差し替える処理を実装した場合は、メニューを選択したときに実際に差し変わることを確認します。

目次