组件介绍

在设计页面时,页面中的所有内容均是由组件组成,每个组件有不同的属性,可以灵活的对每个组件的属性进行设置,以满足业务场景。

组件分为四类,分别是布局、字段、动作、数据

1. 布局

布局类组件主要用于页面的样式排版。

  • 分组:类似一个容器,可以把业务含义相近的内容放在这个分组容器内。
  • 选项卡:类似一个容器,每个选项卡可以添加多个选项页,可以把业务含义相近的内容放在选项卡的选项页容器内。

2. 字段

字段型组件是常用,也是用于支撑页面的主要组件类,每个字段型组件都对应一个模型字段。

  • 单行文本:常用于记录名称、身份证号或其他普通的文字内容。
  • 多行文本:常用于记录字数较多的文字,如意见、复杂备注等。
  • 整数:常用于输入整数的天数、数量等,如果会出现小数,请使用小数组件。
  • 小数:常用于输入金额、单价等,会出现小数的数值。
  • 下拉单选:从多个选项中下拉选择一个数据,作为数据值。选项可以是关联模型的数据,也可以是数据字典或布尔型开关。
  • 下拉多选:从多个选项中下拉选择多个数据,作为数据值。选项可以是关联模型的数据,也可以是数据字典。
  • 开关:常用于只有是否两种对立选项的选择。
  • 单选框:常用于在直接展示的选现中单选一个值,例如选择性别。
  • 复选框:常用于在直接展示的选现中多选一个值,例如选择爱好、选择课程等。
  • 富文本编辑器:一种可内嵌于浏览器,所见即所得的文本编辑器,类似于Office Word 的编辑功能,常应用于篇幅较长的说明性文字,支持改变字体样式、插入图片等。
  • 年份:常用于选择出身年份、一项计划的年份等。
  • 日期:常用于选择颗粒度到日期的Date类型字段,例如出生日期、入职日期、入驻日期等。
  • 日期时间:常用于选择颗粒度到时间的DateTime类型的字段,例如下单时间、发货时间、审批时间等。
  • 时间:常用于选择仅时间无日期的Time类型的字段,如设置规章中的上班时间、日志的提交时间等。
  • 颜色选择器:应用于自定义颜色,如设置标签的颜色、设置产品的颜色属性、主题定制时选择色彩等。
  • 文件上传:常用于上传附件、文件,例如Office文档、图片、视频、音频、其他格式的文件等。
  • 图片上传:常用于上传记录的图片,例如上传身份证照片、头像、商品图片等。
  • 标签:可输入保存多值,例如用户的标记标签。

3. 数据

与数据可视化设计器进行联动,可以选择自定义的图表或报表,在页面展示。

  • 图表:可以选择数据可视化设计器中允许被引用的图表,展示在页面中
  • 报表:可以选择数据可视化设计器中允许被引用的报表,展示在页面中

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

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

(0)
史, 昂的头像史, 昂数式管理员
上一篇 2024年6月20日 am9:49
下一篇 2024年6月20日 am9:49

相关推荐

  • 3.4.3.1 面向对象-继承与多态

    本节为小伙伴们介绍,Function的面向对象的特性:继承与多态; 一、继承 我们在3.4.1【构建第一个Function】一文中伴随模型新增函数和独立类新增函数绑定到模型部分都是在父模型PetShop新增了sayHello的Function,同样其子模型都具备sayHello的Function。因为我们是通过Function的namespace来做依据的,子模型在继承父模型的sayHello函数后会以子模型的编码为namespace,名称则同样为sayHello。 二、多态(举例) oinone的多态,我们只提供覆盖功能,不提供重载,因为oinone相同name和fun的情况下不会去识别参数个数和类型。 Step1 为PetShop新增hello函数 package pro.shushi.pamirs.demo.api.model; …… //import @Model.model(PetShop.MODEL_MODEL) @Model(displayName = "宠物店铺",summary="宠物店铺",labelFields ={"shopName"} ) @Model.Code(sequence = "DATE_ORDERLY_SEQ",prefix = "P",size=6,step=1,initial = 10000,format = "yyyyMMdd") public class PetShop extends AbstractDemoIdModel { public static final String MODEL_MODEL="demo.PetShop"; …… //省略其他代码 @Function(openLevel = FunctionOpenEnum.API) @Function.Advanced(type= FunctionTypeEnum.QUERY) public PetShop sayHello(PetShop shop){ PamirsSession.getMessageHub().info("Hello:"+shop.getShopName()); return shop; } @Function(name = "sayHello2",openLevel = FunctionOpenEnum.API) @Function.Advanced(type= FunctionTypeEnum.QUERY) @Function.fun("sayHello2") public PetShop sayHello(PetShop shop, String s) { PamirsSession.getMessageHub().info("Hello:"+shop.getShopName()+",s:"+s); return shop; } @Function(openLevel = FunctionOpenEnum.API) @Function.Advanced(type= FunctionTypeEnum.QUERY) public PetShop hello(PetShop shop){ PamirsSession.getMessageHub().info("Hello:"+shop.getShopName()); return shop; } } 图3-4-3-1 为PetShop新增hello函数 Step2 为PetShopProxyB新增对应的三个函数 其中PetShopProxyB新增的hello函数,在java中是重载了hello,在代码中new PetShopProxyB()是可以调用父类的sayHello单参方法,也可以调用本类的双参方法。但在oinone的体系中对于PetShopProxyB只有一个可识别的Function就是双参的sayHello package pro.shushi.pamirs.demo.api.proxy; import pro.shushi.pamirs.demo.api.model.PetCatItem; import pro.shushi.pamirs.demo.api.model.PetShop; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Function; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.api.session.PamirsSession; import pro.shushi.pamirs.meta.enmu.FunctionOpenEnum; import pro.shushi.pamirs.meta.enmu.FunctionTypeEnum; import pro.shushi.pamirs.meta.enmu.ModelTypeEnum; import java.util.List; @Model.model(PetShopProxyB.MODEL_MODEL) @Model.Advanced(type = ModelTypeEnum.PROXY,inherited ={PetShopProxy.MODEL_MODEL,PetShopProxyA.MODEL_MODEL} ) @Model(displayName = "宠物店铺代理模型B",summary="宠物店铺代理模型B") public class PetShopProxyB extends PetShop { public static final String MODEL_MODEL="demo.PetShopProxyB"; @Field.one2many @Field(displayName = "萌猫商品列表") @Field.Relation(relationFields = {"id"},referenceFields = {"shopId"}) private List<PetCatItem> catItems; @Function(openLevel = FunctionOpenEnum.API) @Function.Advanced(type= FunctionTypeEnum.QUERY) public PetShop sayHello(PetShop shop){ PamirsSession.getMessageHub().info("PetShopProxyB Hello:"+shop.getShopName()); return shop; } @Function(name = "sayHello2",openLevel = FunctionOpenEnum.API) @Function.Advanced(type= FunctionTypeEnum.QUERY) @Function.fun("sayHello2") public PetShop sayHello(PetShop shop,String hello){ PamirsSession.getMessageHub().info("PetShopProxyB say:"+hello+","+shop.getShopName()); return shop; } @Function(openLevel = FunctionOpenEnum.API)…

    2024年5月23日
    1.4K00
  • 页面

    1. 页面介绍 页面是增删改查数据的入口,数据信息的填写、查看都需要通过页面来展示、交互。页面设计是界面设计器的功能之一,提供页面搭建功能,以实现数据的录入、查看/查询、搜索等等。 2. 页面列表 进入界面设计器,默认会打开以卡片形式管理页面的列表。 如图,页面卡片上可预览到的信息分别有页面标题、页面缩略图、视图类型、页面对应模型名称、页面描述。 「页面标题、页面描述」作用是通过文字定义页面的名称以及对页面进行详细描述。 「页面缩略图」是自行上传的图片,用于在页面列表通过图片预览当前页面的大致布局样式。若未上传,将显示系统默认的图片,点此查看缩略图上传。 「视图类型」通过业务角度(运营管理、官网门户、商城等,目前提供了运营管理一种业务类型)进行分类。运营管理中包括表单、表格、详情、画廊、树视图。 表单常应用于数据的创建、编辑页; 表格可理解为数据的列表查看页面,除了常规表格外,本版本支持树表、级联高级视图; 详情用于设计数据的详情页; 画廊是以卡片形式呈现内容; 树视图是包括树表、级联高级视图; 表格-树表、树视图-树表两者之间的区别:表格-树表的主模型是表格的模型,树视图-树表的主模型是树表的模型、左侧表格是展开的内容; 3. 添加页面 操作添加页面,首先需要选择添加方式。目前提供了1种添加页面方式:直接创建。 3.1 直接创建 直接创建时,弹框中填写页面的基本信息,填写完成后进入页面设计页。 4. 页面操作 4.1 设计页面 操作设计页面后直接进入该页面的设计页面,可对组件布局、交互、属性进行设置。 4.2 编辑 操作编辑弹出页面的基本信息弹框,可对当前页面的基本信息进行编辑修改。 可修改的基本信息包括页面标题、操作栏位置、页面分组、页面描述。 4.3 查看被引用的信息 4.3.1 什么是引用? 页面与页面或页面与菜单之间的若存在交互则称为具有引用关系。 举例1:【页面A】中的一个「跳转动作」配置了跳转【页面B】,则称页面B被页面A引用,在页面B下可查看被引用信息。 举例2:比如【菜单1】绑定了【页面C】,则称页面C被菜单1引用,在页面C下可查看被引用信息。 4.3.2 查看的引用信息是什么? 引用信息分别有“存在引用关系的视图”、“存在引用关系的菜单”。页面下操作查看被引用信息,是查看当前页面被引用情况,如上述举例1,页面B被引用,而页面A非被引用,所以只可以在页面B下查看到“存在引用关系的视图”。 4.4 隐藏/可见 对于暂时不使用的页面,可以进行隐藏(隐藏后可再设置可见)的操作。 4.4.1 隐藏/可见会有哪些影响? 隐藏后该页面在跳转动作选择页面和菜单绑定页面时,不可见,已被使用的不受影响。再次操作可见后,即可选择到。 4.4.2 隐藏后的页面找不到了? 若需要对隐藏的页面进行操作,但是在列表未查找到某个隐藏的页面,请切换「是否可见」筛选项,页面列表默认展示所有“可见”的页面,切换为“全部”或“隐藏”,即可找到隐藏的页面。 4.5 删除 对于不再使用且没有被引用信息的页面,可以将页面删除。页面删除后无法恢复,请谨慎操作,对于不确定是否要彻底删除的页面,建议先操作隐藏。 删除前请确保当前页面没有引用关系! 5. 页面搜索 卡片上方是页面筛选和搜索区域,可通过应用、模型、业务类型、视图类型、自定义/系统、可见/隐藏等等筛选页面;搜索时仅支持使用页面名称进行搜索。同时筛选条件也具备记忆功能,即上一次在页面列表的筛选条件是哪些,再次进入页面列表,筛选条件默认为上次的条件。 其中自定义页面是所有人工添加的页面,系统页面为非人工添加的页面,由系统默认生成,只可用于查看,不可编辑、删除或设计。 6. 页面分组管理 6.1 页面分组 当页面过多时,可以自定义添加15个分组,将页面进行归类管理。默认展示全部分组,点击「全部」展开所有分组,点击分组进行分组下的页面查看或管理分组。 6.2 管理分组 展开分组后,点击「管理分组」,出现弹框,在弹框中可以修改分组名称、添加分组、删除分组。 6.2.1 添加分组 操作「+页面分组」,可以直接输入分组名称后回车以添加一个新分组,或快捷选择其他应用使用的分组。最多添加15个分组。 6.2.2 修改分组 双击分组标签,即可对已有分组进行名称的修改。若分组在其他应用也使用,则在其他应用内,该分组名称同步变化。 6.2.3 删除分组 若分组下有页面或分组有被其他应用使用,则分组无法删除。

    2024年6月20日
    1.5K00
  • 高级组件

    本篇主要结合业务场景介绍高级组件的使用方法。 级联选择/树选择 级联选择与树选择是同一类业务场景、不同的交互体验,在这里我们一起说明。 业务场景 行业分类、产品类目/分类等自关联场景,案例以行业分类说明。 操作步骤 Step1:搭建模型 搭建行业模型,在行业模型中创建多对一字段“上级行业”,指多个子行业对应一个上级行业。如下图: Step2:界面设计 创建行业的表格视图,绑定菜单,并且在此视图中增加“跳转动作 – 新增行业”; 创建新增行业表单,将“上级行业”拖进画布中,组件切换为“级联选择”,属性面板配置“选项字段、搜索字段、透出字段”,平台低代码为每个模型自动生成了名称、编码字段,如果不使用平台提供的名称、自建名称时,需要配置这三个字段; 为“上级行业”设置联动关系,自关联默认选择行业、标题定义为行业名称、自关联的字段为上级行业。 配置后发布表格、表单视图,即可获得级联选择效果。 表单视图中将“上级行业”切换为“树选择”组件,在发布后,即可获得树选择效果。 Step3:效果展示 级联选择 树选择

    2024年6月20日
    1.9K00
  • 3.5.7.5 自定义动作

    动作是什么 动作(action)描述了终端用户的各种操作。这些操作可以涉及多个层面,包括但不限于: 页面间的跳转:用户可以通过动作从一个页面跳转到另一个页面。 业务交互:动作可以触发与后端服务的交互,例如提交表单、请求数据等。 界面操作:动作可以用于打开模态对话框、抽屉(侧边栏)等界面元素。 作用场景 Oinone 平台内置了一系列的基础动作,默认实现了常见的功能,如页面跳转、业务交互和界面操作等。这些内置动作旨在满足大多数标准应用场景的需求,简化开发过程,提高开发效率。以下是一些常见的内置动作示例: 页面跳转:允许用户在不同页面间导航。 业务交互:支持与后端服务的数据交互,如提交表单。 界面操作:提供动态返回上一页、校验表单、关闭弹窗等。 自定义动作的需求场景 尽管内置动作覆盖了许多常规需求,但在某些复杂或特定的业务场景中,可能需要更加个性化的处理。这些场景可能包括: 特殊的业务逻辑:需要执行不同于标准流程的特定业务操作。 个性化的用户界面:标准的 UI 组件无法满足特定的设计要求。 高级交互功能:需要实现复杂的用户交互和数据处理。 扩展和定制动作 为了满足这些特定需求,Oinone 平台支持通过继承和扩展来自定义动作。开发者可以通过以下步骤实现自定义动作: 继承基类:从平台提供的动作基类继承,这为自定义动作提供了基础框架和必要的接口。 实现业务逻辑:在继承的基础上,添加特定的业务逻辑实现。 自定义界面:根据需要调整或完全重写界面组件,以符合特定的UI设计。 集成测试:确保自定义动作在各种情况下的稳定性和性能。 最佳实践 明确需求:在进行扩展之前,清楚地定义业务需求和目标。 重用现有功能:尽可能利用平台的内置功能和组件。 保持一致性:确保自定义动作与平台的整体风格和标准保持一致。 充分测试:进行全面的测试,确保新动作的稳定性和可靠性。 案例分析 假设有一个场景,需要一个特殊的数据提交流程,该流程不仅包括标准的表单提交,还涉及复杂的数据验证和后续处理。在这种情况下,可以创建一个自定义动作,继承基础动作类并实现特定的业务逻辑和用户界面。 自定义动作 自定义跳转动作 示例工程目录 以下是需关注的工程目录示例,main.ts更新导入./action,action/index.ts更新导出./custom-viewactioin: 图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: 效果如下 图3-5-7-24 自定义跳转动作效果示例 自定义服务器动作 示例工程目录 以下是需关注的工程目录示例,action/index.ts更新导出./custom-serveraction: 图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' })…

    2024年5月23日
    1.3K00
  • 2.3 Oinone独特性之源,元数据与设计原则

    让我们来揭开Oinone元数据的神秘面纱,了解它的核心组成、获取方式、面向对象特性以及带来的好处。您或许会想,这些特性能否解决企业数字化转型中互联网架构遇到的挑战呢? 元数据是本文多次提到的重要概念。作为LCDP的基础,元数据支持企业所有研发范式。它数字化描述了软件本身,包括数据、行为和视图等方面。在描述数据时,元数据本身就是数据的数据;在描述行为时,它就是行为的数据;在描述视图时,它就是视图的数据。只有深入理解元数据,才能全面了解Oinone的其他特性。 本章节将介绍元数据的整体概览(如下图2-3所示),带领您了解其核心组成、面向对象特性以及组织方式。请注意,本章节将不会详细展开元数据的细节,这些细节将在后续的相关章程中深入介绍。 图2-3 元数据整体视图 一:以下是元数据的核心组成介绍: 模块(Module):它是将程序划分成若干个子功能,每个模块完成了一个子功能,再把这些模块总起来组成一个整体。它是按业务领域划分和管理的最小单元,是一组功能、界面的集合。 模型(Model):Oinone一切从模型出发,是数据及对行为的载体。它是对所需要描述的实体进行必要的简化,并用适当的变现形式或规则把它的主要特征描述出来所得到的系统模仿品。它包括元信息、字段、数据管理器和自定义函数。同时遵循面向对象设计原则,包括封装、继承和多态。 交互组件(UI Componment):它用菜单、视图和Action来勾绘出模块的前端交互拓扑,并且用组件化的方式统一管理、布局和视图。它用Action来描述所有可操作行为。 函数(Function):它是Oinone可执行逻辑单元,跟模型绑定则对应模型的方法。它描述满足数学领域函数定义,含有三个要素:定义域A、值域C{f(x),x属于A}和对应法则f。其中核心是对应法则f,它是函数关系的本质特征。它满足面向对象原则,可以设置不同开放级别,本地与远程智能切换。 元数据注册表:它以模块为单位的安装记录,在模块安装时,相关的元数据都会在元数据注册表中记录。 二:元数据的产生方式,既可以通过代码注解扫描获取,也可以通过可视化编辑器直接添加。 从代码注解中扫描获取,示例如下代码(如下图2-4所示)。 @Model.model(ResourceBank.MODEL_MODEL) @Model(displayName = "银行",labelFields = "name") public class ResourceBank extends IdModel { public static final String MODEL_MODEL = "resource.ResourceBank"; @Field.String @Field(required = true, displayName = "名称") private String name; @Field.String @Field(required = true, displayName = "银行识别号码", summary = "Bank Identifier Code, BIC 或者 Swift") private String bicCode; …… } 图2-4 从代码注解中扫描获取元数据 可视化的编辑器添加元数据,具体介绍详见7.1《Oinone的设计器》章节 三:Oinone是一种通用低代码开发平台,其元数据设计满足应用开发所需的所有元素,并支持所有研发范式。 它基于元数据的具体实现秉承以下原则: 部署与研发无关; 以模型驱动,符合面向对象设计原则; 代码与数据相互融合,编辑器产生的元数据以面向对象的方式继承扩展标准产品的元数据。 这些原则的集合使整个平台能够实现以下功能特性: 开发分布式应用与单体应用一样简单,部署方式由后期决定。如果要部署为分布式应用,则需要在boot工程中引入Oinone的rpc包。详见4.3《Oinone的分布式体验》一章节; 面向对象的特性使得每个需求都可以是独立模块,独立安装与卸载,让系统像乐高积木一样搭建; 支持两种元数据产生方式,融合的原则确保标准产品迭代与个性化保持独立,真正做到低无一体。 四:这些特性刚好也解决了2.2《互联网架构作为最佳实践为何失效》一章节中客户挑战的三个刺眼问题 互联网架构落地企业数字化转型面临的问题 Oinone应对的策略 不是说敏捷响应吗?为什么改个需求这么慢,不单时间更长,付出的成本也更高了? 特性1、特性2、特性3 不是说能力中心吗?当引入新供应商或有新场景开发的时候,为什么前期做的能力中心不能支撑了? 特性2、特性3 不是说性能好吗?为什么我投入的物理资源更多了? 特性1 表2-2互联网架构落地企业数字化转型面临的问题及Oinone应对策略

    2024年5月23日
    1.7K00

Leave a Reply

登录后才能评论