3.5.4 Ux注解详解

史, 昂 • 2024年5月23日 am9:23 • Oinone 7天入门到精通 • 阅读 1210

我们默认视图已经基本可以用了，但实际业务中还是会有一些不大不小的自定义需求，写自定义视图又太麻烦，今天我们来学习一种更加轻量的模式即：后端研发可以通过注解来配置视觉交互。该系列注解以Ux开头，例如@UxHomepage、@UxMenu、@UxAction、@UxView、@UxWidget等等。

视图XML的配置优先级大于在代码上的注解，也就是代码上的注解影响的是默认展示逻辑。

一、Ux家族图谱

我们先简单通过家族图谱做个简单了解，脑海里有一个影响当有需要的时候知道能不能做，深入了解还需要大家多多动手去尝试

图3-5-4-1 Ux家族图谱

二、默认视图后端配置举例

在下面的代码片段中UxTable、UxForm、UxDetail、UxTableSearch都有涉及，几个特殊点做些解释其他的留大家自行测试

Group分组的配置逻辑：为了不让一个分组内的字段不断的写Group，所以采取了第一个字段写了Group，到下一个出现的group之间的字段都自动归为一个Group
搜素整体不展示可以用“@UxTable(enableSearch = false)”配置在模型的类上。
字段搜索用“UxTableSearch”配置在模型的字段上，其特殊逻辑是只要你配了一个字段，系统就不自动补充了，例子中表格页的搜索栏只会留下店铺名称和店铺编码

……其他代码
//@UxTable(enableSearch = false)，整体不支持搜索
public class PetShop extends AbstractDemoIdModel {
    public static final String MODEL_MODEL="demo.PetShop";

    @Field(displayName = "店铺编码")
    @UxForm.FieldWidget(@UxWidget(group = "Form基础数据"))//Form分组
    @UxTableSearch.FieldWidget(@UxWidget())//支持搜索
    private String code;

    @Field(displayName = "店铺编码2")
    @Field.Sequence(sequence = "DATE_ORDERLY_SEQ",prefix = "C",size=6,step=1,initial = 10000,format = "yyyyMMdd")
    private String codeTwo;

    @UxTableSearch.FieldWidget(@UxWidget())//支持搜索
    @UxTable.FieldWidget(@UxWidget(invisible = "true"))//表格中不展示支持搜索
    @Field(displayName = "店铺名称",required = true,immutable=true)
    private String shopName;

    @Field(displayName = "一年内新店")
    @UxForm.FieldWidget(@UxWidget(widget = "Switch",group = "Form基础数据"))//Switch,Checkbox可以切换着看，字段可选widget参考【字段的配置】一文
    private Boolean oneYear;

    @Field(displayName = "开店时间",required = true)
    @UxDetail.FieldWidget(@UxWidget(invisible = "true"))//详情不展示
    private Time openTime;

    @Field(displayName = "闭店时间",required = true)
    @UxDetail.FieldWidget(@UxWidget(invisible = "true"))//详情不展示
    private Time closeTime;
    …… 其他代码
}

图3-5-4-2 默认视图后端配置举例

Oinone社区作者：史, 昂原创文章，如若转载，请注明出处：https://doc.oinone.top/oio4/9256.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

Oinone 7天从入门到精通

史, 昂数式管理员

0 0

3.5.5 设计器的结合（改）

上一篇 2024年5月23日 am9:22

3.5.3 Action的类型

下一篇 2024年5月23日 am9:24

Oinone 7天入门到精通

工作台

有工作台权限的用户，默认登录页为工作台，也可以通过APP Finder进入工作台。 1. 快捷处理右上角消息中会气泡展示未处理或未读的操作，点击展开后可以点过去进行快捷处理。 2. 查看、处理流程 2.1 流程查看流程管理页面共同点： 1包含选项分类筛选 2包含标签筛选 3包含应用下拉选筛选 4包含根据流程名称搜素流程管理页面名词解释：待办：当前登录用户未处理的流程节点我发起的：当前登录用户人为触发的流程（模型触发）抄送：抄送给当前登录用户的节点（审批/填写）我已办结：由当前登录用户完成人工/自动同意、人工拒绝或人工填写的节点无需办理：当前登录用户转交的任务/被退回、被撤销、被或签、被其他分支任务拒绝的还未办理的任务站内信：当前登录用户收到的站内信 2.2 流程处理每条流程数据下方有动作，点击进入流程处理页面，大致分为详情页和操作页。待办中点击“审批/填写”会进入流程操作页。审批操作页可能包含“同意、拒绝、退回、加签、转交、返回”，填写操作页可能包含“提交、暂存”，审批操作页包含哪些动作由流程设计决定。我发起的、抄送、我已办结、无需处理点击“查看”会进入流程详情页。 3. 应用快捷入口应用中心中星标的收藏应用会展示在此处，点击可快捷进入应用。应用中心中已安装的应用点击星标即可收藏。

史, 昂
2024年6月20日
1.2K000
4.1.17 框架之网关协议-GraphQL协议

GraphQL 是一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时（类型系统由你的数据定义）。GraphQL 并没有和任何特定数据库或者存储引擎绑定，而是依靠你现有的代码和数据支撑。一个 GraphQL 服务是通过定义类型和类型上的字段来创建的，然后给每个类型上的每个字段提供解析函数。例如，一个 GraphQL 服务告诉我们当前登录用户是 me，这个用户的名称可能像这样： type Query { me: User } type User { id: ID name: String } 图4-1-17-1 GraphQL定义类型和字段示意一并的还有每个类型上字段的解析函数： function Query_me(request) { return request.auth.user; } function User_name(user) { return user.getName(); } 图4-1-17-2 每个类型上字段的解析函数示意一旦一个 GraphQL 服务运行起来（通常在 web 服务的一个 URL 上），它就能接收 GraphQL 查询，并验证和执行。接收到的查询首先会被检查确保它只引用了已定义的类型和字段，然后运行指定的解析函数来生成结果。例如这个查询： { me { name } } 图4-1-17-3 GraphQL查询请求示意会产生这样的JSON结果： { "me": { "name": "Luke Skywalker" } } 图4-1-17-4 GraphQL查询结果示意了解更多 https://graphql.cn/learn/

史, 昂
Oinone 7天入门到精通 2024年5月23日
1.1K000
Oinone 7天入门到精通

3.5.7.4 自定义页面

页面是什么在Oinone前端体系中，页面是一个核心概念，它代表着终端用户所看到的当前视图。这个视图可以有多种形式，主要取决于页面是如何定义和构建的。在深入理解页面之前，我们需要了解两个关键的功能：自定义布局和自定义母版。作用场景自定义布局提供了布局调整的强大功能，但在某些情况下，它可能无法完全满足特定的需求。这时，自定义页面就显得尤为重要。自定义页面是对自定义布局的补充，允许开发者从更深层次自由地控制和设计用户界面。当标准布局无法实现所需的视觉效果或功能时，自定义页面提供了更高的灵活性。开发者可以通过自定义页面来实现独特的布局设计，添加特定的交互元素，或者整合复杂的业务逻辑，以创造独特且丰富的用户体验。自定义页面自定义视图组件允许开发者定义和使用特定于业务需求的视图布局。下面是一个具体的示例，展示了如何定义、注册和使用通过 setComponent 结合 TypeScript 和 Vue 的自定义视图组件。示例工程目录以下是需关注的工程目录示例，main.ts更新导入./view：图3-5-7-48 自定义页面工程目录示例 1. 定义 TypeScript 组件首先，我们定义了一个名为 CustomViewWidget 的 TypeScript 组件，并在该组件中通过 setComponent 结合 Vue 单文件组件。 import { BaseElementWidget, BaseElementViewWidget, SPI, ViewWidget } from '@kunlun/dependencies'; import CustomViewVue from './CustomView.vue'; @SPI.ClassFactory(BaseElementWidget.Token({ widget: 'CustomViewWidget' })) export class CustomViewWidget extends BaseElementViewWidget { public initialize(props) { super.initialize(props); this.setComponent(CustomViewVue); return this; } } 图3-5-7-49 定义TypeScript组件代码示例 2. Vue 单文件组件其次，我们创建了对应的 Vue 单文件组件 CustomView.vue，用于展示自定义视图的具体内容。 <template> <div class="custom-view-wrapper"> <h1>自定义视图</h1> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ inheritAttrs: false, name: 'ViewComponentVue' }); </script> <style lang="scss"> .custom-view-wrapper {} </style> 图3-5-7-50 定义Vue组件代码示例 3. 注册自定义视图布局接下来，我们使用 registerLayout 函数注册了一个表格视图布局，并在其中引入了通过 setComponent 结合的自定义视图组件。 import { registerLayout, ViewType } from "@kunlun/dependencies"; export const registerCustomView = () => { registerLayout( ` <view type="TABLE"> <element widget="CustomViewWidget" /> </view> `, { viewType: ViewType.Table, moduleName: 'resource', model: 'resource.ResourceCountryGroup' } ); }; registerCustomView(); 图3-5-7-51 注册自定义视图布局代码示例效果图3-5-7-52 自定义页面效果示例 4. 自定义视图在表格中的应用当我们注册了自定义视图后，它就可以在表格视图中被使用。在表格视图的布局中，我们通过标签将自定义视图嵌套在表格中，从而覆盖了表格的默认布局 5. 入参一致性值得强调的是，registerLayout 函数和自定义布局的规则是一致的，这意味着开发者可以在自定义布局中使用与 registerLayout 相同的入参规则，从而实现更加灵活和统一的视图布局设计与内置组件结合 1. 注册视图元素布局首先，我们使用 registerLayout 函数注册了一个表格视图的布局。这个布局包含了搜索框、操作栏、以及一个自定义视图组件。 import { registerLayout, ViewType } from "@kunlun/dependencies"; import { CustomViewWidget } from…

史, 昂
2024年5月23日
1.5K000
节点动作

节点动作为触发和结束结点中间的动作，点击节点名称可以进行修改。

史, 昂
Oinone 7天入门到精通 2024年6月20日
1.2K000
Oinone 7天入门到精通

3.3.2 模型的类型

本文会介绍不同类型模型以及其简单的应用场景，方便大家理解不同类型模型的用途模型分为元模型和业务模型。元数据是指描述应用程序运行所必需的数据、规则和逻辑的数据集；元模型是指用于描述内核元数据的一套模式集合；业务模型是指用于描述业务应用元数据的一套模式集合。元模型分为模块域、模型域和函数域三个域。域的划分规则是根据元模型定义数据关联关系的离散性来判断，离散程度越小越聚集到一个域。在4.1.4【模块元数据详解】一文中介绍的ModuleDefinition就是元模型。而我们在开发中涉及的就是业务模型一、模型类型抽象模型：往往是提供公共能力和字段的模型，它本身不会直接用于构建协议和基础设施（如表结构等）。传输模型：用于表现层和应用层之间的数据交互，本身不会存储，没有默认的数据管理器，只有数据构造器。存储模型：存储模型用于定义数据表结构和数据的增删改查（数据管理器）功能，是直接与连接器进行交互的数据容器。代理模型：用于代理存储模型的数据管理器能力的同时，扩展出非存储数据信息的交互功能的模型。二、模型定义种类模型定义就是模型描述，不同定义类型，代表计算描述模型的元数据的规则不同静态模型定义：模型元数据不持久化、不进行模型定义的计算（默认值、主键、继承、关联关系）静态计算模型定义：模型元数据不持久化但初始化时进行模型定义计算获得最终的模型定义动态模型定义：模型元数据持久化且初始化时进行模型定义计算获得最终的模型定义静态模型定义需要使用@Model.Static进行注解；静态计算模型定义使用@Model.Static(compute=true)进行注解;动态模型定义不注解@Model.Static注解。三、安装与更新使用@Model.model来配置模型的不可变更编码。模型一旦安装，无法在对该模型编码值进行修改，之后的模型配置更新会依据该编码进行查找并更新；如果仍然修改该注解的配置值，则系统会将该模型识别为新模型，存储模型会创建新的数据库表，而原表将会rename为废弃表。如果模型配置了@Base注解，表明在【oinone的设计器】中该模型配置不可变更；如果字段配置了@Base注解，表明在【oinone的设计器】中该字段配置不可变更。四、基础配置模型基类所有的模型都需要继承以下模型中的一种，来表明模型的类型，同时继承以下模型的默认数据管理器（详见3.3.3模型的数据管理器一节）。继承BaseModel，构建存储模型，默认无id属性。继承BaseRelation，构建多对多关系模型，默认无id属性。继承TransientModel，构建临时模型（传输模型），临时模型没有数据管理器，也没有id属性。继承EnhanceModel，构建数据源为ElasticSearch的增强模型。快捷继承继承IdModel，构建主键为id的模型。继承IdModel的模型会数据管理器会增加queryById方法（根据id查询单条记录）继承CodeModel，构建带有唯一编码code的主键为id的模型。可以使用@Model.Code注解配置编码生成规则。也可以直接覆盖CodeModel的generateCode方法或者自定义新增的前置扩展点自定义编码生成逻辑。继承CodeModel的模型会数据管理器会增加queryByCode方法（根据唯一编码查询单条记录）继承VersionModel，构建带有乐观锁，唯一编码code且主键为id的模型。继承IdRelation，构建主键为id的多对多关系模型。模型继承关系图图3-3-2-1 模型继承关系图 AbstractModel抽象基类是包含createDate创建时间、writeDate更新时间、createUid创建用户ID、writeUid更新用户ID、aggs聚合结果和activePks批量主键列表等基础字段的抽象模型。 TransientModel传输模型抽象基类是所有传输模型的基类，传输模型不存储，没有数据管理器。 TransientRelation传输关系模型是所有传输关系模型的基类，传输关系模型不存储，用于承载多对多关系，没有数据管理器。 BaseModel存储模型基类提供数据管理器功能，数据模型主键可以不是ID。 IdModel带id模型抽象基类，在BaseModel数据管理器基础之上提供根据ID查询、更新、删除数据的功能。 BaseRelation关系模型抽象基类用于承载多对多关系，是多对多关系的中间模型，数据模型主键可以不是ID。 IdRelation带id关系模型抽象基类，在BaseRelation数据管理器基础之上提供根据ID查询、更新、删除数据的功能。 CodeModel带code模型抽象基类，提供按配置生成业务唯一编码功能，根据code查询、更新、删除数据的功能。 EnhanceModel增强模型，提供全文检索能力。此模型会在4.1.25【框架之搜索引擎】一文中展开介绍。五、抽象模型（举例）抽象模型本身不会直接用于构建协议和基础设施（如表结构等），而是通过继承的机制供子模型复用其字段和函数。子模型可以是所有类型的模型。比如demo模块要管理的一些公共模型字段，我们可以建一个AbstractDemoIdModel和AbstractDemoCodeModel，demo模块中的实体模型就可以继承它们。我们来为demo模块的模型统一增加一个数据状态这么一个字段，用做数据的生效与失效管理。 Step1 引入DataStatusEnum类 pamirs-demo-api的pom.xml包增加依赖，便于引入DataStatusEnum类，当然也可以自己建，这里只是oinone提供了统一的数据记录状态的枚举，以及相应的通用方法，这边就直接引入 <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-core-common</artifactId> </dependency> 图3-3-2-2 引入通用类库 Step2 修改DemoModule DataStatusEnum枚举类本身也会做为数据字典，以元数据的方式被管理起来，当一个模块依赖另一个模块的元数据相关对象，则需要改模块的模块依赖定义。为DemoModule增加CommonModule的依赖注解 package pro.shushi.pamirs.demo.api; import org.springframework.stereotype.Component; import pro.shushi.pamirs.boot.base.ux.annotation.action.UxRoute; import pro.shushi.pamirs.boot.base.ux.annotation.navigator.UxHomepage; import pro.shushi.pamirs.core.common.CommonModule; import pro.shushi.pamirs.demo.api.model.PetShop; import pro.shushi.pamirs.meta.annotation.Module; import pro.shushi.pamirs.meta.base.PamirsModule; import pro.shushi.pamirs.meta.common.constants.ModuleConstants; @Component @Module( name = DemoModule.MODULE_NAME, displayName = "oinoneDemo工程", version = "1.0.0", dependencies = {ModuleConstants.MODULE_BASE, CommonModule.MODULE_MODULE} ) @Module.module(DemoModule.MODULE_MODULE) @Module.Advanced(selfBuilt = true, application = true) @UxHomepage(@UxRoute(PetShop.MODEL_MODEL)) public class DemoModule implements PamirsModule { public static final String MODULE_MODULE = "demo_core"; public static final String MODULE_NAME = "DemoCore"; @Override public String[] packagePrefix() { return new String[]{ "pro.shushi.pamirs.demo"}; } } 图3-3-2-3 定义模块依赖 Step3 新建AbstractDemoCodeModel和AbstractDemoIdModel 并新增AbstractDemoIdModel和AbstractDemoCodeModel分别继承IdModel和CodeModel，实现IDataStatus接口不是必须的，刚好DataStatus有配套的通用逻辑，暂时也先加进去，具体使用会在本文的【代理模型】这段介绍 package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.core.common.behavior.IDataStatus; import pro.shushi.pamirs.core.common.enmu.DataStatusEnum; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.annotation.sys.Base; import pro.shushi.pamirs.meta.base.common.CodeModel; import pro.shushi.pamirs.meta.enmu.ModelTypeEnum; @Base @Model.model(AbstractDemoCodeModel.MODEL_MODEL) @Model.Advanced(type = ModelTypeEnum.ABSTRACT) @Model(displayName = "AbstractDemoCodeModel") public abstract class AbstractDemoCodeModel extends CodeModel implements IDataStatus { public static final String MODEL_MODEL="demo.AbstractDemoCodeModel"; @Base @Field.Enum @Field(displayName = "数据状态",defaultValue = "DISABLED",required =…

史, 昂
2024年5月23日
1.6K002

登录后才能评论

3.5.4 Ux注解详解

一、Ux家族图谱

二、默认视图后端配置举例

相关推荐

工作台

4.1.17 框架之网关协议-GraphQL协议

3.5.7.4 自定义页面

节点动作

3.3.2 模型的类型

Leave a Reply