视图
视图 - view 是构建应用程序 UI 的基本模块。视图是可视化组件层级结构的根节点,可以包含数据组件、操作和 facets。
一个视图通过一个 Java 类定义。Java 类通常也对应一个 XML 文件,称为 描述 - descriptor,用来定义视图的内容。因此,在 XML 中声明式定义组件布局与用 Java 编写的编程式初始化、事件处理之间是有明显区别的。
视图类
Jmix 提供下列视图基类:
StandardView
StandardView - 标准视图
是普通视图的基类。这种视图可以在主视图中展示,通过视图 URL 进行导航,也可以作为弹出窗口展示。
下面是用 /my-onboarding
URL 打开的标准视图:
StandardListView
StandardListView - 标准列表视图
是展示实体列表 CRUD 视图的基类。也可以用来作为查找视图(lookup view),在其中的列表选择实体实例后,将选择结果返回给调用方。列表视图通常使用 DataGrid 或 TreeDataGrid 组件。
下面是使用 /departments
URL 打开的列表视图:
在对话框中打开同一个视图选择实体:
StandardDetailView
StandardDetailView - 标准详情视图
是展示单个实体实例 CRUD 视图的基类。详情视图通常使用 FormLayout 组件。
下面是使用实体 id URL 打开的详情视图:
在对话框中打开同一个视图:
视图的注解
视图类上的注解用来为框架提供视图的相关信息。有些注解可用于任何类型的视图,有些只能用于实体列表或详情视图。
通用注解
@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
注解定义当视图以对话框形式打开时的对话框窗口参数。
列表视图注解
// 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}.edit
这样的命名规范。