界面设计器

界面设计器有许多面板和工具窗口,为界面布局开发提供支持,以所见即所得的形式设置 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(属性)Handlers(处理器) 标签页。

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

Properties 标签页

Properties 标签页展示选中界面元素的属性,并支持编辑。

screen properties

有些属性具有默认值,以灰色显示。

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

属性默认按照名称排序。第一列给出所选组件的所有属性名。第二列展示属性值:

  • 当选中某个属性时,值会变为一个可编辑的字段,允许输入新值。

    text values
  • 如果值是一个列表,则选中该属性时会显示一个 下移 下拉按钮。

    list values
  • 如果值是布尔类型,可以用复选框修改:

    boolean values
  • 点击 stylename 属性的 Plus 按钮打开 Style Name Editor 对话框:

    style name editor

    样式名称按照组件或容器名排序。

  • 点击 icon 属性的 Edit 按钮打开 Choose icon 对话框:

    choose icon dialog
    • JMIX ICONS 标签页包含默认的 JmixIcon 图标集。几乎包含全部的 FontAwesome 图标集以及 Jmix 特定的图标。

    • FONT AWESOME 标签页包含 FontAwesome 字体图标集。

    • ICON SET 标签页包含 自定义图标集

    • APPLICATION ICONS 标签页包含 主题 资源。

Handlers 标签页

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

screen handlers

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

顶部操作面板

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

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

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

screen top panel

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