Configurable User Interface

CUI模型

可配置用戶界面 (CUI) 是 Aras 中的一種建模機(jī)制，它允許管理員定義客戶端應(yīng)用程序的布局（layout）和行為（behavior）。CUI 在 Aras11 的早期服務(wù)包中引入，最初旨在用于建模工具欄（toolbars）、菜單（menus）和鍵盤快捷鍵（keyboard shortcuts）。

到 Aras12，隨著客戶端的 UX/UI 功能的增強(qiáng)，CUI 已經(jīng)擴(kuò)展到實(shí)現(xiàn)標(biāo)準(zhǔn) Web 客戶端的許多領(lǐng)域，如目錄 (Table of Contents)、側(cè)邊欄（sidebars）、工具欄（toolbars）、上下文菜單（context menus）和手風(fēng)琴（accordion），現(xiàn)在都使用 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 客戶端應(yīng)用程序屏幕的布局。 因?yàn)樗鼈兣c Presentation Configuration Items 相關(guān)，所以 Window Sections 可以全局或?yàn)樘囟?ItemTypes創(chuàng)建不同的布局。

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 屬性，管理員可以通過指定“操作”來添加、刪除、替換和清除每個(gè)控件。

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類別標(biāo)簽：把 Document TOC 的類別改成 Document Center

實(shí)現(xiàn)效果：

Category這里同步被修改：

Toolbars

給Item工具欄添加按鈕

給Part工具欄為所有用戶添加一個(gè)按鈕：

呈現(xiàn)效果：

給Item工具欄添加分隔符

“I want to add a separator before the Refresh button in the toolbar for all ItemTypes and users.”

實(shí)現(xiàn)效果：

為關(guān)系工具欄移除按鈕

“I want to hide the Share button on the Part BOM relationship toolbar for members of All Suppliers.”

實(shí)現(xiàn)效果：

為工具欄替換按鈕

“I want to replace the default “New” button with a custom button on the Part search toolbar for all users.”

新建新按鈕：

呈現(xiàn)效果：

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）：

當(dāng)狀態(tài)不是released時(shí)，“分享”按鈕被禁用：
?

添加子菜單

“I want to move‘Structure Browser’and‘Where Used’to a submenu of the main grid context menu.”

新建“更多…”按鈕：

選擇它的父類“導(dǎo)航”按鈕

將Structure Browser （com.aras.innovator.cui_default.pmig_Structure Browser ）和Where Used （com.aras.innovator.cui_default.pmig_Where Used ）兩個(gè)按鈕添加到“更多…”下，通過修改其父類即可：

更改前：

更改后：

Shortcuts

通過鍵盤快捷鍵新建Item

“I want a shortcut to allow users to create a new item from an item form.”

Item Views

在一級(jí)“手風(fēng)琴”添加頁簽

“I want to display the Part BOM tab in the top accordion for all users. ”

效果：

從二級(jí)“手風(fēng)琴”隱藏頁簽

“I want to display the Part BOM tab in the top accordion instead of the relationship accordion.”

效果：

添加第三級(jí)“手風(fēng)琴”

“I want to show the Documents and CAD Documents tabs in a third accordion.”

效果：

注意，relTypeID可以自定義，但不能重復(fù)，否則：

relTypeID如果不填：

Item View Sidebar

從Item視圖側(cè)邊欄顯示圖表視圖按鈕

“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視圖側(cè)邊欄按鈕顯示基于查詢的圖表視圖

“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

概述

表單是一個(gè)動(dòng)態(tài)生成的頁面，它包含了ItemType的屬性信息，也是用戶進(jìn)行數(shù)據(jù)輸入、查看、共享信息的區(qū)域。表單是用于呈現(xiàn)相關(guān)信息的，由管理員按照基于預(yù)定義的信息進(jìn)行設(shè)計(jì)，通過控件操作（復(fù)選框，按鈕，菜單等）和標(biāo)簽與最終用戶進(jìn)行交互。

增加元素：

用戶通過命名為字段的元素和表單進(jìn)行交互，字段通過對(duì)象類的表單引用與屬性值綁定。

字段通過在表單版面上定義位置、控件方式（例如列表、組合框、文本區(qū)域等）、標(biāo)簽、字體等組合在一起。控件的初始值由綁定屬性的默認(rèn)值決定?？丶漠?dāng)前值可通過用戶交互和方法修改。

打開選擇的表單后，Aras工作空間將顯示表單編輯工具。水平頁簽允許訪問和修改表單屬性，它下面的框架顯示表單布局。

新的表單模板在新建對(duì)象類第一次保存時(shí)自動(dòng)創(chuàng)建。默認(rèn)情況下，對(duì)象類屬性顯示在表單布局區(qū)。當(dāng)額外的屬性添加到對(duì)象類時(shí)，關(guān)聯(lián)字段必須手動(dòng)添加到對(duì)象類表單。

添加字段到表單：

• 點(diǎn)擊工具欄中的“未使用的屬性字段”（Unused Properties）
• 選擇屬性添加到表單
• 拖動(dòng)屬性放置到希望的位置上
• 根據(jù)需要編輯字段屬性
• 表單標(biāo)簽

字段標(biāo)簽屬性（Field Label）

字段物理屬性（Field Physical）

字段邊框?qū)傩裕‵ield Border）

表單屬性（Form Properties）

表單主體屬性（Form Body）

表單事件（Form Event）&字段事件（Field Event）

字段事件和表單事件可以根據(jù)用戶的操作在運(yùn)行對(duì)應(yīng)的客戶端或服務(wù)段方法。事件可以通過用戶操作觸發(fā)，如鼠標(biāo)事件（點(diǎn)擊、移動(dòng)等）或者頁面操作（例如上傳、打印等），方法類別決定它是在服務(wù)端或在客戶端運(yùn)行。

表單觸發(fā)事件：

字段樣式（Field CSS）

版面設(shè)計(jì)工具欄

到了這里，關(guān)于Aras入門教程3_可配置用戶界面（Configurable User Interface）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！