视图

视图 - view 是构建应用程序 UI 的基本模块。视图是可视化组件层级结构的根节点,可以包含数据组件、操作和 facets。

一个视图通过一个 Java 类定义。Java 类通常也对应一个 XML 文件,称为 描述 - descriptor,用来定义视图的内容。因此,在 XML 中声明式定义组件布局与用 Java 编写的编程式初始化、事件处理之间是有明显区别的。

视图类

Jmix 提供下列视图基类:

views diagram

View

View 定义所有类型视图的状态和行为。

StandardMainView

StandardMainView 是在用户登录之后打开的应用程序根视图。包含 AppLayout 组件和主菜单。

main view 1

StandardView

StandardView - 标准视图 是普通视图的基类。这种视图可以在主视图中展示,通过视图 URL 进行导航,也可以作为弹出窗口展示。

下面是用 /my-onboarding URL 打开的标准视图:

standard view 1

StandardListView

StandardListView - 标准列表视图 是展示实体列表 CRUD 视图的基类。也可以用来作为查找视图(lookup view),在其中的列表选择实体实例后,将选择结果返回给调用方。列表视图通常使用 dataGrid 数据网格treeDataGrid 树形数据网格 组件。

下面是使用 /departments URL 打开的列表视图:

list view 1

在对话框中打开同一个视图选择实体:

list view 2

StandardDetailView

StandardDetailView - 标准详情视图 是展示单个实体实例 CRUD 视图的基类。详情视图通常使用 formLayout 表单布局 组件。

下面是使用实体 id URL 打开的详情视图:

detail view 1

在对话框中打开同一个视图:

detail view 2

视图的注解

视图类上的注解用来为框架提供视图的相关信息。有些注解可用于任何类型的视图,有些只能用于实体列表或详情视图。

通用注解

@ViewController("MyOnboardingView")
@ViewDescriptor("my-onboarding-view.xml")
@Route(value = "my-onboarding", layout = MainView.class)
@DialogMode(width = "AUTO", height = "AUTO")
public class MyOnboardingView extends StandardView {
  • @ViewController 注解表示该类是一个视图类。注解的值是视图 id,在 主菜单 或通过编程打开时,需要使用视图 id。

  • @ViewDescriptor 注解将视图类与 XML 描述进行关联。注解的值指定描述文件的路径。如果值仅包含文件名,则表示该描述文件位于与视图类相同的包中。

  • @com.vaadin.flow.router.Route 定义导航至该视图的 URL 路径。如果视图需要在主视图内打开,layout 属性需要指定为主视图类。

  • @DialogMode 注解定义当视图以对话框形式打开时的对话框窗口参数。

  • @com.vaadin.flow.server.auth.AnonymousAllowed 可以将视图设置为允许匿名访问。默认仅登录页支持匿名会话。

    参考 用户注册 示例项目,了解如何在视图中使用 @AnonymousAllowed 注解以支持用户自注册。

列表视图注解

// common annotations
@ViewController("Department.list")
@ViewDescriptor("department-list-view.xml")
@Route(value = "departments", layout = MainView.class)
@DialogMode(width = "50em", height = "37.5em")
// list view annotations
@LookupComponent("departmentsTable")
@PrimaryLookupView(Department.class)
public class DepartmentListView extends StandardListView<Department> {
  • @LookupComponent 注解指定一个 UI 组件的 id,需要从指定的组件中获取每次查找的值。

  • @PrimaryLookupView 注解表示该视图是用于查找指定实体的默认查找视图。该注解的优先级高于 {entity_name}.lookup / {entity_name}.list 这样的 命名规范

详情视图注解

// common annotations
@ViewController("Department.detail")
@ViewDescriptor("department-detail-view.xml")
@Route(value = "departments/:id", layout = MainView.class)
// detail view annotations
@EditedEntityContainer("departmentDc")
@PrimaryDetailView(Department.class)
public class DepartmentDetailView extends StandardDetailView<Department> {
  • @EditedEntityContainer 注解指定包含编辑实体的数据容器。

  • @PrimaryDetailView 注解表示该视图是用于指定实体的默认详情视图。该注解的优先级高于 {entity_name}.detail 这样的 命名规范