English
Français
Deutsch
日本語
みなさま、こんにちは！アラスジャパン トレーナーの時田です。
今回・次回と2回にわたり、CUI（Configurable User Interface）を利用した画面のカスタマイズ方法をご紹介していきます。
貴社にとって、よりわかりやすく使いやすい画面作りの参考にしてみてください。
- CUIとは
- CUIのデータモデル
- プレゼンテーションコンフィグレーション
- ウィンドウセクション
- コントロール
- コマンドバーセクション
- コマンドバーアイテム
- CUIを利用した設定例
- ツールバーへのボタンの追加
- メニューの削除
- ショートカットの追加
1. CUIとは
CUI（Configurable User Interface）とは、管理者が画面のレイアウトと動作を定義するためのAras Innovatorのモデリングメカニズムです。
CUIは、Aras Innovator 11.0の初期のサービスパックで導入され、当初は、「ツールバー」・「メニュー」・「キーボードのショートカット」のモデリング（カスタマイズ）を目的としていました。
Aras Innovator 12.0になり、WebクライアントのUX / UIが機能強化されたことでCUIの対応範囲も拡張され、「TOC」・「サイドバー」・「コンテキストメニュー」・「アコーディオンセクション」なども、モデリング（カスタマイズ）できるようになりました。
2. CUIのデータモデル
CUIのデータモデルは上記の5つのエレメントで構成されています。
- プレゼンテーションコンフィグレーション
- ウィンドウセクション
- コントロール
- コマンドバーセクション
- コマンドバーアイテム
それぞれ簡単にご説明していきます。
【1】 プレゼンテーションコンフィグレーション
「プレゼンテーションコンフィグレーション（※）」は、CUIのコンテナとして機能します。
※以前の日本語ラベルでは、「クライアントスタイル」という表現を用いています。
Aras Innovator全体に対して定義したい場合は、プレゼンテーションコンフィグレーション「Global」を利用し、アイテムタイプ固有の定義を行いたい場合は、各アイテムタイプ内にある「クライアントスタイル」タブを利用します。
なお、アイテムタイプの中で定義した内容は、プレゼンテーションコンフィグレーション「Global」の設定を上書き・拡張します。
【2】 ウィンドウセクション
「ウィンドウセクション」は、Aras Innovatorのウィンドウ構成の定義に利用し、プレゼンテーションコンフィグレーション「Global」と各アイテムタイプの双方に設定できます。
「ウィンドウセクション」には「データモデル」と「メソッド」の2パターンあり、「データモデル」は定義したいウィンドウ構成があらかじめ決まっている場合に、「メソッド」はプログラムが必要になる場合に利用します（例：プログラムで条件判定をして画面上にアコーディオンを追加する、など）。
【3】 コントロール
「コントロール」では、各「ウィンドウセクション」内のレイアウトを定義します。管理者は、「アクション」を指定することで、各コントロールを「追加」・「削除」・「置換」・「すべてをクリア」することができます。
上記の「Global」同様に、アイテムタイプでも「コントロール」を定義することができます。
なお、「コントロール」には以下のタイプがあります。
※設定例は、次回のブログでご紹介します。
- Toolbar Control（ツールバーコントロール）
- Accordion Element Control（アコーディオンエレメントコントロール）
- Tab Container Control（タブコンテナコントロール）
- Tab Element Control（タブエレメントコントロール）
- Form Control（フォームコントロール）
【4】 コマンドバーセクション
「コマンドバーセクション」は、「プレゼンテーションコンフィグレーション」および「アイテムタイプのクライアントスタイル」に関連づいていて、「データモデル」と「メソッド」の2パターンあり、設定するプロパティも似通っているという点で、前述の「ウィンドウセクション」とよく似ています。
ただし、果たす役割は異なり、「ウィンドウセクション」がウィンドウ構成を定義するのに対し、「コマンドバーセクション」ではウィンドウ上で利用する様々なコンテンツ（ツールバーやコンテキストメニューなど）の定義を行います。
【5】 コマンドバーアイテム
「コマンドバーアイテム」は、上記の「コマンドバーセクション」の中で利用され、レイアウトや見た目だけではなくUI操作時の振る舞いも定義します。
上記の「Global」同様に、アイテムタイプでも「コマンドバーアイテム」を定義することができます。
なお、「コマンドバーアイテム」には、以下の種類があります。
※設定例は後述します。
- ボタン
- チェックボックス
- ドロップダウン
- セパレータ
- メニュー
- メニューボタン
- メニューセパレータ
- メニューチェックボック
- ショートカット
- 編集
3. CUIを利用した設定例
ここからは、CUIを利用した具体的な設定例をご紹介していきます。
今回は「ツールバー」・「メニュー」・「ショートカット」に対して設定していきます。
（「TOC」・「アコーディオン」・「サイドバー」・「ヘッダー」・「タイトルバー」への設定例は、次回のブログでご紹介）
【1】 ツールバーにボタンを追加する
一つ目の例では、各アイテムの画面のツールバーに「画面分割し、タブを左右に移動させる」ボタンを追加します。
まずは、今回利用する2つの「メソッド」アイテムを新規作成します。
以下のサンプルコード（青字部分）をコピーしてご利用ください。
【sample_CUI_DockTab】
var tabsContainer = aras.getMainWindow().mainLayout.tabsContainer;
if (!tabsContainer.isDockedTab(window.name)) {
tabsContainer.dockTab(window.name);
}
【sample_CUI_UndockTab】
var tabsContainer = aras.getMainWindow().mainLayout.tabsContainer;
// スクリーン分割していない場合は一度全てのタブをドック（左へ移動）
if (tabsContainer.dockHeaderTabs.tabs.length === 0) {
var to_dock = Array.from(tabsContainer.undockHeaderTabs.tabs);
for (var i = 0; i < to_dock.length; ++i) {
tabsContainer.dockTab(to_dock[i]);
}
}
// 自タブがドックされていたらアンドック（右へ移動）
if (tabsContainer.isDockedTab(window.name)) {
tabsContainer.undockTab(window.name);
}
メソッドが完成したら、プレゼンテーションコンフィグレーション「Global」を開きます。
- TOC ＞ アドミニストレータ ＞ コンフィグレーション ＞ クライアントプレゼンテーション を開きます。
- 「クライアントプレゼンテーション」の検索グリッドを開いて、検索実行します。
- 検索されたアイテムの「Global」リンクをクリックします。
- 「コマンドバーセクション」タブを開きます。
- 「シンプルサーチ」を選択します。
- 「ロケーション」に「ItemView.ItemCommandBar」を指定し、検索実行します。
- 「分類」が「Data Model」のアイテム（名称がitemview.itemcommandbar.default）をダブルクリックして開きます。
- 「編集」ボタンを押し、「コマンドバーアイテム」タブを開いて「新規追加」ボタンを押します。
- ダイアログから「ボタン」を選択します。
- 「はい」を押します。
- 上図を参考に「名称」・「並び順」・「アクション」・「アイデンティティ」を指定します。
- 同じ操作を繰り返して、２つ目のボタンも新規追加してください。
- ボタンを２つ追加したら、１行ずつ右クリックして開きます。
- 「ツールチップテンプレート」を指定します。
- 「クリックメソッド」に最初に作成したメソッドを指定し、「イメージ」も選択します。
- 「完了」ボタンを押して、タブを閉じます。
- 「コマンドバーセクション（itemview.itemcommandbar.default）」の画面でも「完了」ボタンを押し、タブを閉じます。
- これで設定が完了しました！！動作確認してみます。
- 任意のアイテムを複数開きます。
- 新規追加したボタンを利用し、画面分割されたり、タブが左右に移動したりすることを確認します。
なお、今回は、アイテムの画面のツールバーを対象にしましたが、検索グリッドのツールバーやタイトルバー等にも同様の手順で設定できます。
【2】 メニューを削除する
二つ目の例では、特定のユーザ（今回は、All Suppliersグループのメンバー）のみ、各アイテムの画面のツールバーから「共有」メニューを削除する方法をご紹介します。
先ほどと同様の手順でプレゼンテーションコンフィグレーション「Global」を開き、先ほどと同じ「コマンドバーセクション（名称がitemview.itemcommandbar.default）」を検索して開きます。
- 「編集」ボタンを押し、「コマンドバーアイテム」タブを開いて「既存のアイテムを追加」ボタンを押します。
- アイテムタイプが「Menu」で名称が「itemview.itemcommandbar.default.share」のコマンドバーアイテムを検索し、選択します。
- 「はい」を押します。
- 上図を参考に「並び順」・「アクション」・「アイデンティティ」を指定します。
- 「完了」ボタンを押します。
- これで設定が完了しました！！動作確認してみます。
- 「共有」メニューを削除した「All Suppliers」のメンバーでログインします。
- 「共有」メニューが表示されないことを確認します。
- それ以外のメンバーでログインします。
- これまで通り、「共有」メニューが表示されることを確認します。
【3】 ショートカットを追加する
最後の例では、各アイテムのフォーム上で、新規作成画面を開くための「ショートカット」を追加します。
まずは、今回利用する「メソッド」アイテムを新規作成します。
以下のサンプルコード（青字部分）をコピーしてご利用ください。
【sample_CUI_NewItem】
var itemtype = window.itemTypeName;
if (itemtype) {
aras.uiNewItemEx(itemtype);
}
メソッドが完成したら、また同じ手順でプレゼンテーションコンフィグレーション「Global」を開きます。
- プレゼンテーションコンフィグレーション「Global」を開いたら、「コマンドバーセクション」タブを選択します。
- 名称が「com.aras.innovator.cui_default.itemWindowShortcuts」の「コマンドバーセクション」を検索し、開きます。
- 「編集」ボタンを押し、「コマンドバーアイテム」タブを開いて「新規追加」ボタンを押します。
- ダイアログから「ショートカット」を選択します。
- 「はい」を押します。
- 上図を参考に「名称」・「並び順」・「アクション」・「アイデンティティ」を指定します。
- 右クリックして開きます。
- 「ショートカット（alt+ctrl+n）」を指定します。
- 「ハンドラ」に最初に作成したメソッドを指定します。
- 「完了」ボタンを押して、タブを閉じます。
- 「コマンドバーセクション（com.aras.innovator.cui_default.itemWindowShortcuts）」の画面でも「完了」ボタンを押し、タブを閉じます。
- これで設定が完了しました！！動作確認してみます。
- 任意のアイテムの画面を開きます。
- フォーム上で「Ctrl + Alt + N」を押します。
- 新規作成画面が開くことを確認します。
今回は、CUIのデータモデルと、データモデルを利用した「ツールバー」・「メニュー」・「ショートカット」への設定例を紹介させていただきました。
なお、マニュアル「Configurable User Interface Administrator Guide.pdf」には、より詳細な説明や、上記以外の設定例も掲載されていますので、ぜひあわせてご覧ください。
次回のブログ（後編）では、「TOC」・「アコーディオン」・「サイドバー」・「ヘッダー」・「タイトルバー」に設定していきます。
それではまた次回、こちらでお会いしましょう★
アラスジャパン トレーナー 時田 和佳奈
