6.2. 固有プロパティを変更する「部品操作」メニューを実装する¶
6.2.1. イベントリスナを実装する¶
エレメントを選択した際に表示されるツールバーの「操作」メニューをクリックすると、ツールバー上に表示されている各操作以外で、エレメントに関する全ての操作が可能なメニューが追加表示されます。
この操作メニューには、エレメントのプロパティ値を変更するために用意された「部品操作」グループと、エレメント内部を別のものに差し替えるために用意された「部品選択」グループがあります。
操作メニューの「部品操作」グループに、エレメント固有プロパティの変更機能を付与するためには、「事前準備」にて用意した Layouter クラスに、特定のイベントリスナを実装します。
実装するイベントリスナは、以下の通りです。
- designer-toolbar-show
- 操作メニュー、または、ツールバーの表示が必要となったときに呼び出されるイベントです。
- 操作メニューに表示する内容を返却します。
- designer-toolbar-hide
- 操作メニュー、または、ツールバーが非表示になったときに呼び出されるイベントです。
- 実装は任意です。
- designer-toolbar-push-button
- designer-toolbar-show イベントで返却した操作メニュー、または、ツールバー上の項目が選択されたときに呼び出されるイベントです。
- リクエストに従って、表示したメニューに応じた操作を、エレメントに対して行います。
以下のように実装します。
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 {}; // メニューに表示する項目を返却する
});
// 操作メニュー・ツールバーが非表示になったとき（任意）
eventListener.addEventListener(element, 'designer-toolbar-hide', () => {
// 必要であれば、ツールバー非表示時の処理を実装する
});
// 操作メニュー・ツールバーから項目が選択されたとき
eventListener.addEventListener(element, 'designer-toolbar-push-button', (eventValue) => {
// エレメントの操作を実装する
});
}
}
6.2.2. 自身のエレメントを操作するメニューを実装する¶
6.2.2.1. 操作メニューに項目を追加する¶
操作メニューに項目を追加する場合は、イベントリスナで designer-toolbar-show のリスナを追加し、各項目の情報を返却します。
ここでは、郵便番号入力エレメントのプレースホルダ表示（placeholder プロパティの値）を切り替えるために、メニュー項目を追加します。
メニュー項目を特定するために、任意の ID を指定します。 この例では placeholder とします。
以下のように実装します。
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', () => {
// placeholder プロパティ値を取得する
const placeholder = element.propertyAccessor.getProperty('placeholder').toBoolean();
// メニューに表示する内容を返却する
return {
items: {
// 「部品操作」グループ
operations: [{
// プレースホルダを示す任意の ID を指定する（後続のメニュー選択時の判別で使用）
id: 'placeholder',
// メニューの左側に表示するアイコンを指定する
icon: placeholder
? [{type: 'font-awesome', value: 'fas fa-check'}]
: [{type: 'font-awesome', value: 'fas im-empty'}],
// メニューのラベルに表示する文字列を指定する
label: 'プレースホルダを表示'
}]
}
};
});
}
}
コラム
icon の指定について
- type に 'font-awesome' を指定した場合、value には Font Awesome のクラス名を指定します。value に im-empty を指定した場合、アイコン１つに相当する空白を挿入します。
- type に 'svg' を指定した場合、value には svg ファイルへのパスを指定します。パスは、Webサーバ上に配置したファイルにアクセスするための URL のうち、コンテキストパスより先を指定します。例えば URL が http://localhost:8080/imart/im_hichee/images/svg/foo.svg の場合、'im_hichee/images/svg/foo.svg' を指定します。
- icon は配列です。 アイコンの指定を複数指定できます。例えば独自クラスを css または less ファイルとして用意し、スタイルシートを指定することで、アイコンを重ねて表示するような自由な表現ができます。
6.2.2.2. 項目が選択されたときの処理を実装する¶
メニュー項目を追加したら、メニュー項目が実際に選択されたときの処理を実装します。
メニュー選択時の処理は、イベントリスナで designer-toolbar-push-button のリスナを追加し、引数 eventValue の値を取得します。
最初に、eventValue.button が 'operation' であることを確認します。 これが、操作メニューの「部品操作」グループ内にある項目が選択されたことを示します。
次に eventValue.id を確認します。 ここには、選択されたメニューの ID が格納されています。 追加したメニュー項目の ID と一致する場合は、プレースホルダ表示（placeholder プロパティの値）を切り替える処理を実装します。
以下のように実装します。
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 === 'operation') {
// 「プレースホルダを表示」が選択されたとき
if (eventValue.id === 'placeholder') {
// placeholder プロパティ値を取得する
const placeholder = element.propertyAccessor.getProperty('placeholder').toBoolean();
// placeholder プロパティ値の真偽値を反転して、プロパティ値を再設定する
element.propertyAccessor.setProperty('placeholder', !placeholder, true);
}
}
});
}
}
6.2.2.3. 動作を確認する¶
デベロップモードで郵便番号入力エレメントを配置したコンテンツ定義を作成し、レイアウトモードに切り替えます。
郵便番号入力エレメントをクリックし、ツールバーから「操作」 - 「部品操作」グループ - 「郵便番号入力」 - 「プレースホルダを表示」が表示されることを確認します。
「プレースホルダを表示」を選択すると、プレースホルダの表示が切り替わることを確認します。
また、再度「操作」メニューを表示した際に、「プレースホルダを表示」にチェックマークが表示、または、消去されることを確認します。