OneCode 3.0 快速视图设计

OneCode3.0 常用视图与属性关系手册

在现代企业级应用开发中，视图层的设计往往决定了开发效率和用户体验。OneCode 3.0 引入的快速视图设计模式，通过注解驱动的方式，让开发者能够以最简洁的代码实现功能完善的视图，同时保持良好的可维护性和扩展性。

核心视图类型

OneCode 3.0 提供了多种常用视图类型，每种类型都有其特定的应用场景和属性配置。

1.1 视图分类

OneCode3.0 的视图体系主要分为以下几类：

• 基础容器视图：用于组织和布局其他UI元素
• 导航视图：用于应用程序的导航结构
• 表单视图：用于数据的录入和编辑
• 列表视图：用于展示结构化数据
• 树视图：用于展示层次化数据
• 图表视图：用于可视化展示数据

1.2 视图关系图

+------------------+      +------------------+
|  基础容器视图    |      |   导航视图       |
|  (Container)     |      |   (Navigation)   |
+------------------+      +------------------+
        |                         |
        v                         v
+------------------+      +------------------+
|  表单视图        |      |   列表视图       |
|  (Form)          |      |   (List)         |
+------------------+      +------------------+
                                |
                                v
                        +------------------+
                        |   树视图         |
                        |   (Tree)         |
                        +------------------+
                                |
                                v
                        +------------------+
                        |   图表视图       |
                        |   (Chart)        |
                        +------------------+

第二章 常用视图注解详解

2.1 基础容器视图

2.1.1 BlockViewAnnotation

@Inherited
@CustomClass( viewType = CustomViewType.NAV, moduleType = ModuleViewType.BLOCKCONFIG)
@Retention(RetentionPolicy.RUNTIME)
@Target({ElementType.METHOD, ElementType.FIELD})
public @interface BlockViewAnnotation {
    String expression() default "";
    String saveUrl() default "";
    String reSetUrl() default "";
    String dataUrl() default "";
    String searchUrl() default "";
    String caption() default "";
    boolean autoSave() default false;
}

属性说明：

• expression：数据绑定表达式
• saveUrl：保存数据的URL
• reSetUrl：重置表单的URL
• dataUrl：获取数据的URL
• searchUrl：搜索数据的URL
• caption：视图标题
• autoSave：是否自动保存

2.2 表单视图

2.2.1 FormViewAnnotation

@Inherited
@CustomClass( viewType = CustomViewType.MODULE, moduleType = ModuleViewType.FORMCONFIG)
@Retention(RetentionPolicy.RUNTIME)
@Target({ElementType.METHOD})
public @interface FormViewAnnotation {
    String expression() default "";
    @BindMenuItem(bindItems = CustomMenuItem.SAVE, requestParams = {RequestPathEnum.FORM, RequestPathEnum.CTX})
    String saveUrl() default "";
    @BindMenuItem(bindFormEvent = CustomFormEvent.RESET,requestParams = {RequestPathEnum.FORM, RequestPathEnum.CTX})
    String reSetUrl() default "";
    @BindMenuItem(bindItems = CustomMenuItem.DATAURL,
            requestParams = {RequestPathEnum.FORM, RequestPathEnum.CTX},
            responsePath = {ResponsePathEnum.FORM, ResponsePathEnum.CTX})
    String dataUrl() default "";
    @BindMenuItem(bindItems = CustomMenuItem.SEARCH,
            requestParams = {RequestPathEnum.FORM, RequestPathEnum.CTX}
    )
    String searchUrl() default "";
    String caption() default "";
    boolean autoSave() default false;
}

属性说明：

• expression：数据绑定表达式
• saveUrl：保存数据的URL，绑定到SAVE菜单
• reSetUrl：重置表单的URL，绑定到RESET事件
• dataUrl：获取数据的URL，绑定到DATAURL菜单
• searchUrl：搜索数据的URL，绑定到SEARCH菜单
• caption：表单标题
• autoSave：是否自动保存

2.3 列表视图

2.3.1 GridViewAnnotation

@Inherited
@CustomClass(viewType = CustomViewType.LISTMODULE, moduleType = ModuleViewType.GRIDCONFIG)
@Retention(RetentionPolicy.RUNTIME)
@Target({ElementType.METHOD})
public @interface GridViewAnnotation {
    String expression() default "";
    @BindMenuItem(bindItems = CustomMenuItem.DATAURL)
    String dataUrl() default "";
    @BindMenuItem(bindItems = CustomMenuItem.EDITOR)
    String editorPath() default "";
    @BindMenuItem(bindItems = CustomMenuItem.ADD)
    String addPath() default "";
    @BindMenuItem(bindItems = CustomMenuItem.DELETE)
    String delPath() default "";
    @BindMenuItem(bindItems = CustomMenuItem.SAVEROW)
    String saveRowPath() default "";
    @BindMenuItem(bindItems = CustomMenuItem.SAVEALLROW)
    String saveAllRowPath() default "";
}

属性说明：

• expression：数据绑定表达式
• dataUrl：获取表格数据的URL
• editorPath：编辑页面的路径
• addPath：添加页面的路径
• delPath：删除操作的路径
• saveRowPath：保存单行数据的路径
• saveAllRowPath：保存所有行数据的路径

2.4 树视图

2.4.1 TreeViewAnnotation

@Inherited
@CustomClass(viewType = CustomViewType.LISTMODULE, moduleType = ModuleViewType.TREECONFIG)
@Retention(RetentionPolicy.RUNTIME)
@Target({ElementType.METHOD})
public @interface TreeViewAnnotation {
    @NotNull
    boolean autoSave() default false;
    String expression() default "";
    String saveUrl() default "";
    String editorPath() default "";
    String loadChildUrl() default "";
    String dataUrl() default "";
    String rootId() default "00000000-0000-0000-0000-000000000000";
    @NotNull
    ResponsePathTypeEnum itemType() default ResponsePathTypeEnum.TREEVIEW;
}

属性说明：

• autoSave：是否自动保存（必填）
• expression：数据绑定表达式
• saveUrl：保存数据的URL
• editorPath：编辑页面的路径
• loadChildUrl：加载子节点的URL
• dataUrl：获取树数据的URL
• rootId：根节点ID，默认为全0的UUID
• itemType：项目类型（必填），默认为TREEVIEW

第三章 视图属性关系表

视图类型	共有属性	特有属性	适用范围
BlockViewAnnotation	expression, saveUrl, reSetUrl, dataUrl, searchUrl, caption, autoSave	无	方法、字段
FormViewAnnotation	expression, saveUrl, reSetUrl, dataUrl, searchUrl, caption, autoSave	事件绑定	方法
GridViewAnnotation	expression, dataUrl	editorPath, addPath, delPath, saveRowPath, saveAllRowPath, 事件绑定	方法
TreeViewAnnotation	expression, saveUrl, dataUrl, editorPath, autoSave	loadChildUrl, rootId, itemType	方法

第四章 示例代码

4.1 BlockViewAnnotation 示例

@BlockViewAnnotation(
    expression = "data.field",
    saveUrl = "/api/save",
    dataUrl = "/api/data",
    caption = "示例块视图",
    autoSave = true
)
public void blockViewExample() {
    // 方法实现
}

4.2 FormViewAnnotation 示例

@RequestMapping(method = RequestMethod.POST, value = "userForm")
@FormViewAnnotation(
    expression = "user.data",
    saveUrl = "/api/user/save",
    reSetUrl = "/api/user/reset",
    dataUrl = "/api/user/data",
    caption = "用户表单",
    autoSave = false
)
@ResponseBody
public ResultModel<User> submitUserForm(User user) {
    // 表单提交逻辑
    return new ResultModel<>(user);
}

4.3 GridViewAnnotation 示例

@RequestMapping(method = RequestMethod.GET, value = "userGrid")
@GridViewAnnotation(
    dataUrl = "/api/user/grid/data",
    editorPath = "/user/editor",
    addPath = "/user/add",
    delPath = "/user/delete",
    saveRowPath = "/user/save/row",
    saveAllRowPath = "/user/save/all"
)
@ResponseBody
public ResultModel<PageResult<User>> getUserGrid(int page, int pageSize) {
    // 分页获取用户数据
    return new ResultModel<>(new PageResult<>());
}

4.4 TreeViewAnnotation 示例

@RequestMapping(method = RequestMethod.GET, value = "departmentTree")
@TreeViewAnnotation(
    autoSave = false,
    dataUrl = "/api/department/tree/data",
    loadChildUrl = "/api/department/tree/loadChild",
    rootId = "12345678-1234-1234-1234-123456789012",
    itemType = ResponsePathTypeEnum.TREEVIEW
)
@ResponseBody
public ResultModel<List<Department>> getDepartmentTree() {
    // 获取部门树数据
    return new ResultModel<>(new ArrayList<>());
}

4.5 综合示例

@RequestMapping(method = RequestMethod.POST, value = "DepartmentRoleSet")
@NavGroupViewAnnotation
@ModuleAnnotation(caption = "编辑角色信息")
@DialogAnnotation(height = "480", width = "600")
@APIEventAnnotation(bindMenu = {CustomMenuItem.EDITOR})
@ResponseBody
public ResultModel<DepartmentRoleSet> getDepartmentRoleSet(String roleId, String orgRoleType) {
    // 业务逻辑实现
    DepartmentRoleSet roleSet = new DepartmentRoleSet();
    // 填充数据
    return new ResultModel<>(roleSet);
}

第五章 最佳实践

1. 选择合适的视图类型：根据数据展示和交互需求选择最适合的视图类型

2. 合理设置属性：只设置必要的属性，避免不必要的配置

3. 注意性能优化：对于大数据量的视图，考虑使用缓存和分页加载

4. 遵循命名规范：使用清晰、有意义的名称来标识视图和URL

5. 保持代码一致性：在整个项目中保持一致的视图使用方式

6. 注意权限控制：确保视图和API的访问权限符合系统安全要求

第六章 常见问题解答

1. Q: 视图注解可以组合使用吗？
   A: 是的，视图注解可以与其他注解组合使用，如@RequestMapping、@ResponseBody等。

2. Q: 如何自定义视图类型？
   A: 可以通过扩展CustomClass注解来定义新的视图类型。

3. Q: 视图属性的默认值是什么？
   A: 大多数视图属性的默认值是空字符串或false，具体可以查看注解的定义。

4. Q: 如何实现视图的数据绑定？
   A: 可以通过expression属性来实现视图与数据的绑定。

本手册涵盖了OneCode3.0中最常用的视图注解及其属性关系，通过示例代码展示了它们的使用方式。希望本手册能够帮助开发者更好地理解和使用OneCode3.0的视图体系。