界面设计器

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

此功能需要快速开发版或企业版 订阅。如果没有订阅,请尝试 试用版

Component Hierarchy(组件层级结构)Component Palette(组件工具箱)Component Inspector(组件探查器) 都作为 IDE 中独立的工具窗口提供。当在编辑器打开界面描述时,会自动展示。

screen designer
  1. Component Inspector(组件探查器)

  2. Component Hierarchy(组件层级结构)

  3. Component Palette(组件工具箱)

  4. 顶部操作按钮

  5. 布局预览面板

  6. 布局预览

布局预览面板

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

screen views

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

  1. Editor only - 仅在编辑器展示源代码。

  2. Editor and Preview - 编辑器空间分为两部分,分别展示源码和预览。

  3. Preview only - 仅在编辑器展示预览。

  4. Preview in Window - 在编辑器展示源码,预览在单独窗口展示。

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

screen view panel
  • 100% x 100% 下拉列表允许选择固定画布大小。画布大小可以大于预览面板的大小,此时,将显示滚动条。例如,如果你正在开发包含大量控件的复杂界面,并且想要查看预览,则可以选择 1920x1080 画布大小并观察布局在大屏幕中的展示情况。

  • Refresh 按钮重新加载预览页面的内容。

  • Zoom InZoom OutZoom Reset 按钮改变预览页面的缩放比例。

此外,还可以使用控件来调整布局中组件的大小和对齐:

screen expand

组件工具箱

Component Palette(组件工具箱) 窗口展示一组可用的界面元素:界面组件布局容器数据组件 - 数据容器和加载器、界面 facets 包含操作和对话框模式设置。

screen palette

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

如果应用程序中安装的扩展组件包含其自有的组件,也会在工具箱展示,例如,对于图表扩展组件:

screen charts

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

screen move

右键点击工具箱中的组件可以打开右键菜单,其中有下列操作:

  • Add to Design - 将选中的组件添加至界面,放置于界面结构中选中的元素内。

  • Jmix Documentation - 打开组件的文档页面。

组件层级结构

Component Hierarchy(组件层级结构) 工具窗口展示不居中组件的树结构。

可以从 Component Palette(组件工具箱) 窗口移动组件至层级结构中,或者重新调整树中组件的位置。当选中树的元素时,Component Inspector(组件探查器) 窗口展示选中元素的属性。

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

screen hierarchy
  • Convert to - 将组件转换为其他类似的组件。

  • Wrap into - 将组件放置在某个推荐的布局容器内。

  • Go to XML - 打开源代码中组件的 XML 标签位置。

  • Inject to Controller - 将组件注入界面控制器或跳转至代码中已经存在的注入声明位置。

  • 对元素的 DeleteCopyCutPaste 操作。

  • 打开所选组件的 Jmix 文档页。

组件探查器

Component Inspector(组件探查器) 工具窗口有 Properties(属性) 标签页,其中展示选中的界面元素的属性,并支持编辑。

screen properties

使用搜索控件查找需要的属性。

Handlers(处理器) 标签页展示选中组件的事件监听器和组件代理方法。如需生成处理器方法,双击相应的行即可。

screen handlers

然后会自动跳转至 界面控制器 中代码段的位置。

对于某些选中的元素,会显示 + Add 按钮,支持添加相关的子元素,例如,表格操作、列、格式化器、验证器等。

screen handlers

顶部操作面板

操作面板位于源码编辑器的顶部。提供下列操作:

  • Controller - 跳转至界面控制器。

  • <entity class name> - 如果界面是实体浏览界面或者编辑界面,则展示实体类名称,可以跳转至当前界面关联的实体代码。

screen top panel

此外,还可以点击侧边线的标记在控制器和界面描述之间切换。