视图设计器
布局预览面板
布局预览面板用于展示界面布局的交互式示意图。与屏幕描述的源代码共享编辑器空间。
界面布局编辑器右上角的按钮：
-
Editor only - 仅在编辑器展示源代码。
-
Editor and Preview - 编辑器空间分为两部分，分别展示源码和预览。
-
Preview only - 仅在编辑器展示预览。
-
Preview in Window - 在编辑器展示源码，预览在单独窗口展示。
面板的右上角还有几个控制按钮：
-
Restart → Just Restart 按钮重新加载预览的内容。
-
Restart → Clean and Restart 按钮清除前端的所有文件并开始运行前端构建。
-
Console 按钮可以打开或关闭显示前端构建日志的控制台，方便调试。
-
Theme 下拉框可以选择一个预定义的样式：light 或 dark。
组件工具箱
组件工具箱可以通过下列方法打开：
-
点击顶部操作面板中的 Add component：
-
点击 Jmix UI 层级面板右键菜单中的 Add Component：
-
通过
⌘N（MacOS）或Alt+Insert（Windows/Linux）快捷键打开 Generate 菜单：
组件工具箱展示一组可用的视图元素：components（UI 组件）、layouts（布局组件）、HTML components（HTML 组件）、data components（数据组件，包括数据容器和加载器）以及 facets，facets 里面包括操作和对话框模式设置等。
可以使用搜索框查找需要的组件。
如需将组件添加至布局中，将其从工具箱拖放至 XML 源码中合适的位置或放置于 Jmix UI 层级结构 面板中。
右键点击工具箱中的组件可以打开右键菜单，其中有下列操作：
-
Add to Design - 将选中的组件添加至视图，放置于选中的元素内。
-
Jmix Documentation - 打开组件的文档页面。
Jmix UI 层级结构
Jmix UI 层级结构面板展示布局中组件的树形结构。
可以从组件工具箱窗口移动组件至层级结构中，或者重新调整树中组件的位置。当选中树的元素时，Jmix UI 窗口的组件面板展示选中元素的属性。
右键点击元素可以看到右键菜单中的操作：
-
Add Component 打开 组件选择工具箱。
-
Inject to Controller 将组件注入视图控制器或者导航至已有的注入声明处。
-
Generate handler 用来为组件生成各种事件的处理方法。
-
Go to XML - 打开源代码中组件的 XML 标签位置。
-
Delete、Copy、Cut 或 Paste 是组件的删除、复制、剪切、粘贴操作。
Jmix UI 组件面板
Jmix UI 组件面板展示 Properties 和 Handlers 标签页。
-
如需添加 列表操作，在出图 XML 描述或者 Jmix UI 层级结构面板中选择一个 dataGrid 或 treeDataGrid 组件，然后点击 Jmix UI 组件面板中的 Add → Action。此时会显示 Add Action 弹窗：
-
如需添加
column，在界面 XML 描述或者 Jmix UI 层级结构面板中选择dataGrid或treeDataGrid组件，然后点击 Jmix UI 组件面板中的 Add → Columns → Column。此时会显示 Add Column 弹窗：
列表展示 fetchPlan 中包含的那些还没有在
dataGrid组件展示的属性。
Properties 标签页
Properties 标签页展示选中界面元素的属性，并支持编辑。
有些属性具有默认值，以灰色显示。
使用搜索控件查找需要的属性。
属性默认按照名称排序。第一列给出所选组件的所有属性名。第二列展示属性值：
-
当选中某个属性时，值会变为一个可编辑的字段，允许输入新值。
-
如果值是一个列表，则选中该属性时会显示一个下拉按钮。
-
如果值是布尔类型，可以用复选框修改：
-
类似 title、label、helperText 这样的属性，可以设置 本地化 内容。点击
按钮展示本地化信息输入的弹窗。
-
点击 themeNames 属性的
按钮打开 ThemeNames Property Editor 对话框：
顶部操作面板
操作面板位于源码编辑器的顶部。提供下列操作：
-
Controller - 跳转至视图控制器。
-
<entity class name>- 如果界面是实体列表视图或者详情视图，则展示实体类名称，可以跳转至当前视图关联的实体代码。 -
Add component - 打开组件工具箱：
此外，还可以点击侧边线的标记在控制器和 XML 描述之间切换。
