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 样例

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像素上。