Aras入门教程3_可配置用户界面（Configurable User Interface）
Configurable User Interface
CUI模型
可配置用戶界面 (CUI) 是 Aras 中的一種建模機制，它允許管理員定義客戶端應用程序的布局（layout）和行為（behavior）。CUI 在 Aras11 的早期服務包中引入，最初旨在用于建模工具欄（toolbars）、菜單（menus）和鍵盤快捷鍵（keyboard shortcuts）。
到 Aras12，隨著客戶端的 UX/UI 功能的增強，CUI 已經擴展到實現標準 Web 客戶端的許多領域，如目錄 (Table of Contents)、側邊欄（sidebars）、工具欄（toolbars）、上下文菜單（context menus）和手風琴（accordion），現在都使用 CUI 建模控制。
Aras 中各種命令欄、視圖名稱查閱以下文章：
An Overview of CUI Locations - English Blog - Aras Community - Aras Community
Presentation Configurations
Presentation Configurations serve as containers for CUI configurations, defining the scope of the related CUI items as either global or ItemType-specific.
Window Sections
窗口部分用于定義 Aras 客戶端應用程序屏幕的布局。 因為它們與 Presentation Configuration Items 相關，所以 Window Sections 可以全局或為特定 ItemTypes創建不同的布局。
Window Sections are used to define the layout of a client application screen. Because they’re related to Presentation Configuration items, Window Sections can be inherited globally or defined for an ItemTypespecific scope to create different layouts.
?
Controls （defined the layout of the client UI ）
控件定義了窗口中客戶端 UI 的布局。 使用 cui_WindowSectionControl 上的 Action 屬性，管理員可以通過指定“操作”來添加、刪除、替換和清除每個控件。
Controls define the layout of the client UI within a parent Window Section. Using the Action property on the cui_WindowSectionControl, admins can add, remove, replace, or clear all Controls from a Window Section.
Window Sections & Controls ：defined the layout of the client UI
控件類型：
Command Bar Sections（defined the content of the UI ）
Window Sections and Command Bar Sections appear very similar – they’re both related to Presentation Configurations, they can be defined either declaratively or dynamically, and they have many of the same properties. However, the two types serve different functions. While Window Sections and Controls define the layout of the client application screens, Command Bar Sections define the content
A Command Bar Section represents a specific portion of the UI such as the toolbar of the main search grid
Command Bar Items（defined the behavior of the UI ）
A Command Bar Item represents an individual UI component like a button or a keyboard shortcut
CUI 樣例
TOC
更改TOC類別標簽：把 Document TOC 的類別改成 Document Center
實現效果：
Category這里同步被修改：
Toolbars
給Item工具欄添加按鈕
給Part工具欄為所有用戶添加一個按鈕：
呈現效果：
給Item工具欄添加分隔符
“I want to add a separator before the Refresh button in the toolbar for all ItemTypes and users.”
實現效果：
為關系工具欄移除按鈕
“I want to hide the Share button on the Part BOM relationship toolbar for members of All Suppliers.”
實現效果：
為工具欄替換按鈕
“I want to replace the default “New” button with a custom button on the Part search toolbar for all users.”
新建新按鈕：
呈現效果：
Menus
為菜單添加按鈕
“I want to add an action to the global user menu for all administrators.”
禁用按鈕
“I want to disable the Share menu button for items that are not yet released.”
修改 init_Method 為 cus_disable_menu_by_state（原先為hideButtonIfItemIsNew）：
當狀態不是released時，“分享”按鈕被禁用：
?
添加子菜單
“I want to move‘Structure Browser’and‘Where Used’to a submenu of the main grid context menu.”
新建“更多…”按鈕：
選擇它的父類“導航”按鈕
將Structure Browser （com.aras.innovator.cui_default.pmig_Structure Browser ）和Where Used （com.aras.innovator.cui_default.pmig_Where Used ）兩個按鈕添加到“更多…”下，通過修改其父類即可：
更改前：
更改后：
Shortcuts
通過鍵盤快捷鍵新建Item
“I want a shortcut to allow users to create a new item from an item form.”
Item Views
在一級“手風琴”添加頁簽
“I want to display the Part BOM tab in the top accordion for all users. ”
效果：
從二級“手風琴”隱藏頁簽
“I want to display the Part BOM tab in the top accordion instead of the relationship accordion.”
效果：
添加第三級“手風琴”
“I want to show the Documents and CAD Documents tabs in a third accordion.”
效果：
注意，relTypeID可以自定義，但不能重復，否則：
relTypeID如果不填：
Item View Sidebar
從Item視圖側邊欄顯示圖表視圖按鈕
“I want to add a button to the sidebar of all items that will show an ad hoc Graph View in the item view.”
?
顯示效果：
從Item視圖側邊欄按鈕顯示基于查詢的圖表視圖
“I want to display the Part BOM Graph View when the user clicks a sidebar button on a Part global.”
效果：
參考資料：
Aras Innovator 120 Configurable User Interface Administrator Guide.pdf
?
Form
概述
表單是一個動態生成的頁面，它包含了ItemType的屬性信息，也是用戶進行數據輸入、查看、共享信息的區域。表單是用于呈現相關信息的，由管理員按照基于預定義的信息進行設計，通過控件操作（復選框，按鈕，菜單等）和標簽與最終用戶進行交互。
增加元素：
用戶通過命名為字段的元素和表單進行交互，字段通過對象類的表單引用與屬性值綁定。
字段通過在表單版面上定義位置、控件方式（例如列表、組合框、文本區域等）、標簽、字體等組合在一起。控件的初始值由綁定屬性的默認值決定。控件的當前值可通過用戶交互和方法修改。
打開選擇的表單后，Aras工作空間將顯示表單編輯工具。水平頁簽允許訪問和修改表單屬性，它下面的框架顯示表單布局。
新的表單模板在新建對象類第一次保存時自動創建。默認情況下，對象類屬性顯示在表單布局區。當額外的屬性添加到對象類時，關聯字段必須手動添加到對象類表單。
添加字段到表單：
- 點擊工具欄中的“未使用的屬性字段”（Unused Properties）
- 選擇屬性添加到表單
- 拖動屬性放置到希望的位置上
- 根據需要編輯字段屬性
- 表單標簽
| 域屬性 | 表單頁屬性 |
| 域類型（Field Type） | 表單屬性 |
| 域標簽（Field Label） | 表單主體 |
| 域物理屬性（Field Physical） | 表單事件 |
| 域邊框（Field Border） | 表單邊框 |
| 域事件（Field Event） | 表單事件 |
字段標簽屬性（Field Label）
| 屬性 | 值 |
| 標簽（Label） | 這是用戶在表單上看到的字段名，支持多語言 |
| 字體（Font Family） | 顯示的字體 |
| 標簽位置（Label Position） | 字段名稱出現的位置 |
| 字體加粗（Font Weight） | 加粗或普通 |
| 對齊（Text Alignment） | 左，右或居中 |
| 字體大小（Font Size） | 輸入 |
| 字體顏色（Font Color） | 在顏色板上選取 |
字段物理屬性（Field Physical）
| 屬性 | 描述 |
| 定位（Positioning） | 在表單的絕對位置或相對于表單的左上角的相對位置。推薦使用絕對位置 |
| X | 水平位置，以像素為單位 |
| Y | 垂直位置，以像素為單位 |
| Z-Index | Fields with higher Z-Index（字段的頂層層級） are drawn on top of Fields with lower Z-Index（字段的底層層級） |
| 可見（Visible） | 控制字段是否可見 |
| 不可用（Disabled） | 控制字段是否可用 Users shouldn’t be allowed to enter or edit the value of the Field,but we may still want to see that information |
| Field Order | When the Field is in a group box, specifies the order of the Field |
| Tab Index | 控制通過TAB鍵切換域時的前后次序，前提是“TAB停留”選項選中了 |
| Tab Stop | 控制是否可以用TAB鍵來切換（勾選上可以） |
字段邊框屬性（Field Border）
| 屬性 | 值 |
| 字段說明 | 字段的標簽解釋 |
| 邊框寬度 | 邊框線寬度 |
| Container Name | 容器名稱 |
表單屬性（Form Properties）
| 屬性名 | 描述 |
| 名稱 | 表單名稱 |
| 描述 | 表單描述 |
| Identity | Who has access to the Form, this is defined in the ItemType’s View tab |
| Function | Specifies what function (Edit, View, Print, etc.) uses the Form; default is both editing and viewing |
| Classification | ItemType classification associated with this Form |
| 寬度 | 表單的顯示寬度 |
| 高度 | 表單的顯示高度 |
| 樣式表 | 表單的顯示樣式 |
| Category Form | Displays the Form in the Workspace Pane when the user clicks on the TOC Category, the Form name must match the Category value |
表單主體屬性（Form Body）
| 屬性 | 值 |
| 顏色 | 表單的背景顏色 |
| 圖像 | 表單的背景圖像 |
| 重復 | 當圖片尺寸不足以覆蓋表單時，確認重復方式 |
| 附件 | Whether scrolling moves the Form or if the Form is fixed 是否滾動移動表單或表單固定（Scroll/Fixed） |
表單事件（Form Event）&字段事件（Field Event）
| 屬性 | 值 |
| 新建對象 | 點擊“新建對象”圖標 |
| 關聯對象 | 點擊“關聯對象”圖標 |
字段事件和表單事件可以根據用戶的操作在運行對應的客戶端或服務段方法。事件可以通過用戶操作觸發，如鼠標事件（點擊、移動等）或者頁面操作（例如上傳、打印等），方法類別決定它是在服務端或在客戶端運行。
表單觸發事件：
| 字段觸發 | 表單觸發 |
| 失去焦點事件 OnBlur | OnAfterPrint |
| 屬性值改變事件 OnChange | OnBeforePrint |
| 鼠標點擊事件 OnClick | OnBeforeUnload |
| 鼠標雙擊事件 OnDbClik | OnContextMenu |
| 獲取焦點事件 OnFocus | OnKeyDown |
| 選擇事件 OnSelect | OnKeyUp |
| OnLoad | |
| OnUnload | |
| OnMouseDown | |
| OnMouseOver | |
| OnMouseMove | |
| OnMouseUp | |
| OnResize | |
| onFormPopulated |
字段樣式（Field CSS）
版面設計工具欄
| 圖標 | 描述 | |
| 刪除 | 刪除表單上的元素 | |
| 文本字段 | 插入文本元素 | |
| 密碼字段 | 插入密碼域元素 | |
| 文本區域 | 插入大文本元素 | |
| 下拉列表 | 插入下拉列表元素 | |
| 列表框 | 插入列表元素 | |
| 多選列表框 | 插入多選列表元素 | |
| 復選框 | 插入復選框元素 | |
| 單選按鈕 | 插入選項按鈕元素 | |
| 按鈕 | 插入命令按鈕元素 | |
| 日歷 | 插入日歷元素 | |
| 顏色 | 插入顏色元素 | |
| 圖像 | 插入圖像元素 | |
| New xClass | A series of controls that can be added to a Form and can then be associated with a Property. This is also where the xClass Tree Hierarchy for Extended Classification can be added, using the Add New xClass button | |
| Snap | Choosing a snap value of 5 or 10 will automatically place moved elements on the nearest fifth or tenth pixel in the Form Layout area, respectively. 選擇 5 或 10 的捕捉值，將自動把移動的元素分別放置在表單布局區域中最近的第5或第10像素上。 |
總結
以上是生活随笔為你收集整理的Aras入门教程3_可配置用户界面（Configurable User Interface）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 社交新零售崛起将是未来的最大风口
- 下一篇： mac中vscode常用快捷键