视图设计器

视图设计器有许多面板和工具窗口，为视图布局开发提供支持，以所见即所得的形式设置 UI 组件属性。集成了视图 XML 编辑器，因此，可以直接编辑 XML 文件或使用设计器的面板生成代码。

此功能可在最多 10 个实体和角色的小项目中免费使用。在大项目中，需要快速开发版或企业版订阅^。

Jmix UI 面板作为 IDE 中独立的工具窗口提供，当在编辑器打开页面 XML 或控制器代码时，会自动展示。支持在编写 Java 控制器代码的同时查看组件树、更改组件属性，甚至添加新组件。还可以直接将组件从结构树中拖放到代码编辑器实现组件的注入。

布局预览面板

布局预览面板用于展示界面布局的交互式示意图。与屏幕描述的源代码共享编辑器空间。

预览面板需要构建前端代码并启动 Vaadin 开发模式的服务，需要一些时间。

点击 XML 编辑器顶部面板中的 Start Preview 按钮即可启动预览面板。之后，打开其他视图时都会展示预览效果。

界面布局编辑器右上角的按钮：

面板的右上角还有几个控制按钮：

组件工具箱可以通过下列方法打开：

Add Component 操作有 2 个 tab：

From Palette tab 显示组件工具箱，其中展示可用的视图元素：components（组件）、layouts（布局）、HTML 组件、data components（数据组件） - 数据容器和加载器、facets - 包括操作和对话框模式配置等。

可以使用搜索框查找需要的组件。

如需将组件添加至布局中，将其从工具箱拖放至 XML 源码中合适的位置或放置于 Jmix UI 层级结构面板中。

右键点击工具箱中的组件可以打开右键菜单，其中有下列操作：
- Add to Design - 将选中的组件添加至视图，放置于选中的元素内。
- Jmix Documentation - 打开组件的文档页面。
Using Wizard tab 中可以使用组件创建向导，用于解决复杂的 UI 任务。例如，Edit entity attributes 向导会创建一个 formLayout，其中包含所选实体属性的编辑控件和一个包含 fetch plan 的数据容器。向导列表取决于当前视图的内容：例如，如果视图中有 dataGrid，则可用 Add column to DataGrid 向导。

Jmix UI 结构面板展示布局中组件的树形结构。

可以从组件工具箱窗口移动组件至层级结构中，或者重新调整树中组件的位置。当选中树的元素时，Jmix UI 窗口的组件面板展示选中元素的属性。

右键点击元素可以看到右键菜单中的操作：

Jmix UI 组件面板展示 Properties 和 Handlers 标签页。

对于某些选中的元素，会展示 + Add 按钮，可以用来添加子元素，例如数据网格的操作、列、格式化器、验证器等。

如需添加列表操作，在出图 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 组件展示的属性。