3.5.7.5 自定义动作

动作是什么

动作(action)描述了终端用户的各种操作。这些操作可以涉及多个层面,包括但不限于:

  1. 页面间的跳转:用户可以通过动作从一个页面跳转到另一个页面。

  2. 业务交互:动作可以触发与后端服务的交互,例如提交表单、请求数据等。

  3. 界面操作:动作可以用于打开模态对话框、抽屉(侧边栏)等界面元素。

作用场景

Oinone 平台内置了一系列的基础动作,默认实现了常见的功能,如页面跳转、业务交互和界面操作等。这些内置动作旨在满足大多数标准应用场景的需求,简化开发过程,提高开发效率。以下是一些常见的内置动作示例:

  1. 页面跳转:允许用户在不同页面间导航。

  2. 业务交互:支持与后端服务的数据交互,如提交表单。

  3. 界面操作:提供动态返回上一页、校验表单、关闭弹窗等。

自定义动作的需求场景

尽管内置动作覆盖了许多常规需求,但在某些复杂或特定的业务场景中,可能需要更加个性化的处理。这些场景可能包括:

  • 特殊的业务逻辑:需要执行不同于标准流程的特定业务操作。
  • 个性化的用户界面:标准的 UI 组件无法满足特定的设计要求。
  • 高级交互功能:需要实现复杂的用户交互和数据处理。

扩展和定制动作

为了满足这些特定需求,Oinone 平台支持通过继承和扩展来自定义动作。开发者可以通过以下步骤实现自定义动作:

  1. 继承基类:从平台提供的动作基类继承,这为自定义动作提供了基础框架和必要的接口。

  2. 实现业务逻辑:在继承的基础上,添加特定的业务逻辑实现。

  3. 自定义界面:根据需要调整或完全重写界面组件,以符合特定的UI设计。

  4. 集成测试:确保自定义动作在各种情况下的稳定性和性能。

最佳实践

  • 明确需求:在进行扩展之前,清楚地定义业务需求和目标。
  • 重用现有功能:尽可能利用平台的内置功能和组件。
  • 保持一致性:确保自定义动作与平台的整体风格和标准保持一致。
  • 充分测试:进行全面的测试,确保新动作的稳定性和可靠性。

案例分析

假设有一个场景,需要一个特殊的数据提交流程,该流程不仅包括标准的表单提交,还涉及复杂的数据验证和后续处理。在这种情况下,可以创建一个自定义动作,继承基础动作类并实现特定的业务逻辑和用户界面。

自定义动作

自定义跳转动作

示例工程目录

以下是需关注的工程目录示例,main.ts更新导入./action,action/index.ts更新导出./custom-viewactioin:

image.png

图3-5-7-24 自定义跳转动作工程目录示例

步骤 1: 创建自定义动作类

首先,您创建了一个名为 CustomViewAction 的类,这个类继承自 RouterViewActionWidget。这意味着自定义动作是基于路由视图动作的,这通常涉及页面跳转或导航。

import {ActionWidget, RouterViewActionWidget, SPI} from '@kunlun/dependencies';
import CustomViewActionVue from './CustomViewAction.vue';

@SPI.ClassFactory(
    ActionWidget.Token({
        model: 'resource.ResourceCity',
        name: 'redirectCreatePage'
    })
)
export class CustomViewAction extends RouterViewActionWidget {
    public initialize(props) {
        super.initialize(props);
        this.setComponent(CustomViewActionVue);
        return this;
    }
}

图3-5-7-24 自定义跳转动作组件(TS)代码示例

  • @SPI.ClassFactory: 这是一个装饰器,用于向平台注册这个新的动作。
  • ActionWidget.Token: 通过这个Token,指定了这个动作与特定模型 (resource.ResourceCity) 关联,并给这个动作命名 (redirectCreatePage).
步骤 2: 初始化和设置组件

在 initialize 方法中,调用了父类的初始化方法,并设置了自定义的 Vue 组件。

public initialize(props) {
  super.initialize(props);
  this.setComponent(CustomViewActionVue);
  return this;
}

图3-5-7-24 初始化和设置组件

步骤 3: 定义 Vue 组件

在 CustomViewAction.vue 文件中,定义了自定义动作的视觉表示。

<template>
  <div class="view-action-wrapper">
    自定义挑战跳转动作
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  inheritAttrs: false,
  name: 'ViewActionComponent'
})
</script>

<style lang="scss">
.view-action-wrapper {
}
</style>

图3-5-7-24 自定义跳转动作组件(Vue)代码示例

步骤 4: 效果如下

image.png

图3-5-7-24 自定义跳转动作效果示例

自定义服务器动作

示例工程目录

以下是需关注的工程目录示例,action/index.ts更新导出./custom-serveraction:

image.png

图3-5-7-24 自定义服务器动作工程目录示例

步骤 1: 创建自定义动作类

首先, 创建了一个名为 CustomServerAction 的类,这个类继承自 ServerActionWidget。这表明您的自定义动作主要关注服务器端的逻辑。

import {ActionWidget, ServerActionWidget, SPI, Widget} from '@kunlun/dependencies';
import CustomServerActionVue from './CustomServerAction.vue';

@SPI.ClassFactory(
    ActionWidget.Token({
        model: 'resource.ResourceCity',
        name: 'delete'
    })
)
export class CustomServerAction extends ServerActionWidget {
    public initialize(props) {
        super.initialize(props);
        this.setComponent(CustomServerActionVue);
        return this;
    }

    @Widget.Method()
    public clickAction() {
        // 这里断点试试看
        return super.clickAction()
    }
}

图3-5-7-24 自定义服务器动作组件(TS)示例

  • @SPI.ClassFactory: 这个装饰器用于向平台注册新的动作。

  • ActionWidget.Token: 这里指定了动作与 resource.ResourceCity 模型相关联,动作名为 delete。

步骤 2: 初始化和设置组件

在 initialize 方法中,调用了父类的初始化方法,并将 Vue 组件与动作关联。

public initialize(props) {
  super.initialize(props);
  this.setComponent(CustomServerActionVue);
  return this;
}

图3-5-7-24 初始化和设置组件

步骤 3: 定义动作行为

重写了 clickAction 方法,这是触发服务器动作的主要入口点。在这个方法中,您可以添加自定义逻辑,然后调用 super.clickAction() 来执行默认的服务器动作。

@Widget.Method()
  public clickAction() {
    // 这里可以添加自定义逻辑
    return super.clickAction();
  }

图3-5-7-24 定义动作行为

步骤 4: Vue 组件
<template>
  <div class="server-action-wrapper" @click="clickAction">
    自定义服务器动作
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  inheritAttrs: false,
  name: 'ServerActionComponent',
  props: ['clickAction']
})
</script>

<style lang="scss">
.server-action-wrapper {
}
</style>

图3-5-7-24 自定义服务器动作组件(Vue)示例

Vue 组件定义了如何在前端显示和触发这个动作。

<style lang="scss">
  .server-action-wrapper {
    // 样式定义
  }
</style>

图3-5-7-24 Vue组件定义显示和触发

  • 这个模板中的 @click="clickAction" 是触发动作的关键部分。
步骤 5: 样式和行为

同样,为该组件定义了样式,并通过 defineComponent 创建了 Vue 组件。

<style lang="scss">
  .server-action-wrapper {
    // 样式定义
  }
</style>

图3-5-7-24 Vue组件定义样式

效果

image.png

图3-5-7-24 自定义服务区动作效果示例

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

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

(0)
史, 昂的头像史, 昂数式管理员
上一篇 2024年5月23日 am9:10
下一篇 2024年5月23日 am9:12

相关推荐

  • 3.4.3 函数的相关特性

    本小章会从oinone的函数拥有三方面特性,展开介绍 面向对象,继承与多态 面向切面编程,拦截器 SPI机制,扩展点

  • 开发者

    1.开发者 1.1 Webhook 通过webhook流程节点可以向第三方系统发送请求。 1.1.1 请求方式 支持GET、POST两种请求方式。 1.1.2 URL 在Webhook URL中填写发送请求的HTTP地址。 1.1.3 Headers&Body Headers的value支持通过表达式配置变量 Body的数据类型支持KEY_VALUE和APPLICATION_JSON两种。

    2024年6月20日
    62600
  • 3.4.2 函数的开放级别与类型

    一、函数开放级别 我们在日常开发中通常会因为安全性,为方法定义不同的开放层级,或者通过应用分层把需要对web开放的接口统一定义在一个独立的应用中。oinone也提供类似的策略,所有逻辑都通过Function来归口统一管理,所以在Function是可以定义其开放级别有API、REMOTE、LOCAL三种类型,配置可多选。 四种自定义新增方式与开放级别的对应关系 函数 本地调用(LOCAL) 远程调用(REMOTE) 开放(API) 伴随模型新增函数 支持 支持【默认】 支持 独立新增函数绑定到模型 支持 支持【默认】 支持 独立新增函数只作公共逻辑单元 支持 支持【默认】 伴随ServerAction新增函数 必选 表3-4-2-1 四种自定义新增方式与开放级别的对应关系 远程调用(REMOTE) 如果函数的开放级别为本地调用,则不会发布远程服务和注册远程服务消费者 非数据管理器函数 提供者:如果函数定义在当前部署包的启动应用中,则主动发布远程服务提供者。 消费者:如果函数定义在部署依赖包中但未在当前部署包的启动应用中,则系统会默认注册远程消费者。发布注册的远程服务使用命名空间和函数编码进行路由。 所以非数据管理器函数的消费者并不需要感知该服务是否是本地提供还是远程提供。而服务提供者也不需要手动注册远程服务。 数据管理器类函数 提供者:如果数据管理器函数所在模型定义在当前部署包的启动应用中,则系统会主动发布数据管理器的远程服务作为数据管理器的远程服务提供者; 消费者:如果模型定义在部署依赖包中但未在当前部署包的启动应用中,则系统会主动注册数据管理器的远程服务消费者。 所以数据管理器类函数的消费者与服务提供者并不需要感知函数的远程调用。 二、函数类型 函数的类型语义分为:增、删、改、查,在编程模式下目前用于Function为API级别,生成GraphQL的Schema时放在query还是mutation。查放在query,其余放mutation。 三、函数分类 TBD 在无代码编辑器中,函数分类主要用函数选择的分类管理。

  • 4.1.13 Action之校验

    在3.5.3【Action的类型】一文中有涉及到“ServerAction之校验”部分,本文介绍一个特殊的写法,当内置函数和表达式不够用的时候,怎么扩展。还是拿PetShopProxyAction举例,修改如下: package pro.shushi.pamirs.demo.core.action; ……引依赖类 @Model.model(PetShopProxy.MODEL_MODEL) @Component public class PetShopProxyAction extends DataStatusBehavior<PetShopProxy> { ……其他代码 // @Validation(ruleWithTips = { // @Validation.Rule(value = "!IS_BLANK(data.code)", error = "编码为必填项"), // @Validation.Rule(value = "LEN(data.shopName) < 128", error = "名称过长,不能超过128位"), // }) @Validation(check = "checkName") @Action(displayName = "启用") @Action.Advanced(rule="activeRecord.code !== undefined && !IS_BLANK(activeRecord.code)") public PetShopProxy dataStatusEnable(PetShopProxy data){ data = super.dataStatusEnable(data); data.updateById(); return data; } @Function public Boolean checkName(PetShopProxy data) { String field = "name"; String name = data.getShopName(); boolean success = true; if (StringUtils.isBlank(name)) { PamirsSession.getMessageHub() .msg(Message.init() .setLevel(InformationLevelEnum.ERROR) .setField(field) .setMessage("名称为必填项")); success = false; } if (name.length() > 128) { PamirsSession.getMessageHub() .msg(Message.init() .setLevel(InformationLevelEnum.ERROR) .setField(field) .setMessage("名称过长,不能超过128位")); success = false; } return success; } ……其他代码 } 图4-1-13-1 PetShopProxyAction扩展配置 注: check属性指定了校验函数名称,命名空间必须与服务器动作一致。 校验函数的入参必须与服务器动作一致 使用PamirsSession#getMessageHub方法可通知前端错误的属性及需要展示的提示信息,允许多个。

  • 4.5.1 研发辅助之插件-结构性代码

    研发辅助意在 消灭研发过程中的重复性工作提升研发效率,如结构性代码 提供生产示例性代码,如果根据模型生成导入导出、view自定义配置等经常性开发 一、插件安装 根据自身Idea版本下载插件并安装: 版本 插件 2023.1 pamirs-source-maker-1.0.0-2023.1.zip(2.4 MB) 2021.1 pamirs-source-maker-1.0.0-2021.1.zip(2.4 MB) 2021.2 pamirs-source-maker-1.0.0-2021.2.zip(2.4 MB) 2021.3 pamirs-source-maker-1.0.0-2021.3.zip(2.4 MB) 2022.1 pamirs-source-maker-1.0.0-2022.1.zip(2.4 MB) pamirs-source-maker-1.0.0-223-EAP-SNAPSHOT(2.4 MB) 表4-5-1-1 插件列表 二、研发辅助之配置式结构性代码生成器 我们在开发过程中为了日后代码易于维护和修改,往往会做工程性的职责划分。 除去模型外会有 代理模型和代理模型Action来负责前端交互 以面向接口的形式来定义函数,就会有api和实现类之分 如果项目有多端,那么如代理模型和代理模型Action又要为每一个端构建一份 在大型项目的初始阶段,我们需要手工重复做很多事情,特别麻烦。现在用oinone的研发辅助插件的结构性代码生成器,就可以避免前面的重复工作 插件执行的配置文件 <?xml version="1.0" encoding="utf-8" ?> <oinone> <makers> <!– 根据模型生成代理类、代理类的Action、Service、ServiceImpl –> <maker> <!– 选择模型所在位置 –> <modelPath>/Users/oinone/Documents/oinone/demo/pamirs-second/pamirs-second-api/src/main/java/pro/shushi/pamirs/second/api/model</modelPath> <!– 代理模型、代理模型Action生成相关配置信息 –> <proxyModules> <module> <!– 代理模型和代理模型Action的生成位置信息 –> <generatePath>/Users/oinone/Documents/oinone/demo/pamirs-second/pamirs-second-api/src/main/java/pro/shushi/pamirs/second/api</generatePath> <!– 代理模型和代理模型Action的模块前缀 –> <modulePrefix>second</modulePrefix> <!– 代理模型和代理模型Action的模块名,代理模型和代理模型Action类名为moduleName+模型名+"Proxy"+"Action" –> <moduleName>second</moduleName> <!– 代理模型和代理模型Action的包名,实际包名为 packageName+".proxy"或packageName+".action"–> <packageName>pro.shushi.pamirs.second.api</packageName> </module> </proxyModules> <!– 根据模型生成api,包括service(写方法)和queryService(读方法) –> <apiModule> <!– service和queryService的生成位置信息 –> <generatePath>/Users/oinone/Documents/oinone/demo/pamirs-second/pamirs-second-api/src/main/java/pro/shushi/pamirs/second/api</generatePath> <!– service和queryService的模块前缀 –> <modulePrefix>second</modulePrefix> <!– service和queryService的模块名 –> <moduleName>second</moduleName> <!– service和queryService的包名,实际包名为 packageName+".service" –> <packageName>pro.shushi.pamirs.second.api</packageName> </apiModule> <!– 根据模型生成api实现类,包括serviceImpl(写方法)和queryServiceImpl(读方法) –> <coreModule> <!– serviceImpl和queryServiceImpl的生成位置信息 –> <generatePath>/Users/oinone/Documents/oinone/demo/pamirs-second/pamirs-second-core/src/main/java/pro/shushi/pamirs/second/core</generatePath> <!– serviceImpl和queryServiceImpl的模块前缀 –> <modulePrefix>second</modulePrefix> <!– serviceImpl和queryServiceImpl的模块名 –> <moduleName>second</moduleName> <!– serviceImpl和queryServiceImpl的包名,实际包名为 packageName+".service" –> <packageName>pro.shushi.pamirs.second.core</packageName> </coreModule> </maker> </makers> </oinone> 图4-5-1-1 插件执行的配置文件 三、研发辅助之多模型结构性代码生成器 是配置式结构性代码生成器的补充,应对开发后期维护中新增模型的场景。它的不同点在于只要选择模型文件就可以,不需要专门编写xml文件。生成的文件默认就在模型所在路径下 Step1 菜单栏上找到oinone,并点击子菜单【多模型结构性代码生成器】 图4-5-1-2 多模型结构性代码生成操作步骤一 Step2 设置必要的信息 模型前缀 模型的所属模块 代理模型的模块 这三个信息分别用于构建 代理模型的MODEL_MODEL = 模型前缀.代理模型的模块.代理模型类名 服务的FUN_NAMESPACE = 模型前缀.代理模型的模块.服务类名 图4-5-1-3 多模型结构性代码生成操作步骤二 Step3 选择为哪些模型生成对应的结构性代码 图4-5-1-4 多模型结构性代码生成操作步骤三 Step4 代码在模型所在目录 生成的文件默认就在模型所在路径下,您可以手动拖动到对应的包路径当中去 图4-5-1-5 多模型结构性代码生成操作步骤四

    2024年5月23日
    58900

Leave a Reply

登录后才能评论