阅读之前
本文档属于高阶实战文档,已假定你了解了所有必读文档中的全部内容,并了解过界面设计器的一些基本操作。
如果在阅读过程中出现的部分概念无法理解,请自行学习相关内容。【前端】文章目录
概述
平台提供的字段组件(以下简称组件)是通过SPI机制进行查找并最终渲染在页面中。虽然平台内置了众多组件,但无法避免的是,对于业务场景复杂多变的实际情况下,我们无法完全提供所有组件。
面对这样的困境,我们提供了外部注册组件的方式。在之前文章中,我们了解到组件注册后需要应用到页面中,需要配合DSL
才能实现。其实,在平台中还提供了一种SAAS化的组件注册方式,配合界面设计器的设计能力,可以将组件在设计器页面中引入,从而更近一步的满足不同的业务场景。
通过界面设计器可以创建自定义组件,并为组件添加对应的元件。
界面设计器可以为元件设计其在指定视图下的属性面板,在页面设计时,可以使用该属性面板为元件设置相关属性。
在界面设计器的设计页面中拖入的组件,将通过SPI机制获取到一个唯一的元件,并渲染在页面中,提供给业务使用。
界面设计器-组件管理
名词解释
- 页面设计:使用界面设计器设计页面的页面。
- 属性面板设计:使用界面设计器设计属性面板的页面。
- 设计页面:页面设计和属性面板设计的统称。
- 组件库:展示在设计页面左侧的全部可拖拽组件。
- 组件:在组件库中可拖拽的最小单元。
- 元件:一个组件中的具体实现,是组件的最小单元。
- 属性面板:展示在设计页面右侧的元件属性。
页面设计
属性面板设计
组件管理入口
进入界面设计器后,可通过上方标签页切换至【组件】管理页面。
创建第一个组件
点击【添加组件】,在弹窗中输入组件名称【文本输入框】后,点击【确定】。
创建第一个元件
点击【组件卡片】或点击【管理元件】按钮进入【元件】管理页面。
点击【添加元件】,可以看到如下【创建元件】弹窗。
表单字段解释
- 元件名称:显示名称,仅在管理页面做展示使用。
- API名称:SPI中的widget属性。
- 支持字段业务类型:SPI中的ttype属性。
- 支持多值:SPI中的multi属性。
- 支持视图类型:SPI中的viewType属性。
- 元件描述:元件功能描述内容,仅在管理页面做展示使用。
填入以下内容,并点击【确定】。
设计元件属性面板
点击【元件卡片】或点击【设计元件属性】按钮进入【属性面板设计】页面。
从【模型】中搜索【标题】,将【标题】和【隐藏标题】拖放至设计区域。如果想实现的相对美观,可以额外添加【分组】组件拖放至设计区域,并修改标题为【基础】,如下图所示。
点击【发布】按钮进行页面的发布。
至此,我们设计了第一个元件属性面板,接下来,我们需要在页面设计中使用这个组件。
在页面中使用【文本输入框】
由于我们之前选择的支持的视图类型是【表单】,因此我们在【表单】页面进行接下来的操作,此处略去创建视图的过程。
从【模型】中将【名称】拖放至设计区域。并通过点击【切换】按钮切换至我们的组件【文本输入框】,并且将标题改为【这是文本输入框组件】查看其展示效果。
属性变化
在组件切换后,属性面板发生了变化,原有属性会根据当前属性面板中现有字段进行【裁剪】,相同属性名称(字段)的值会被保留,其他属性值会被丢弃。
由于我们并没有在当前属性面板添加【宽度】属性,因此原有属性的宽度被丢弃,组件会自动变成默认【宽度】,默认宽度为1
。
组件变化
由于我们并没有在【低无一体】中上传对应元件的代码实现,因此展示了默认的【单行文本】组件,目前组件的展示效果不会发生变化。
组件可切换规则
只有【组件】中包含与【当前选中字段】匹配的【元件】,才会将对应【组件】的名称展示在【可切换列表】中。
【当前选中字段】中包含了如下三个属性,这三个属性和【创建元件】时设置的属性一一对应。
(右侧属性面板切换至字段后,可查看当前选中字段的相关元数据信息。)
- 所在视图类型:根据字段在视图中的位置进行推断,当前所在位置为【表单】。当【支持视图类型】包含【表单】时条件成立。
- 字段业务类型:文本。当【支持字段业务类型】包含【文本】时条件成立。
- 是否多值:否。当【支持多值】相同时条件成立。
使用低无一体为组件上传代码实现
进入【组件】管理页面,点击【低无一体】,打开【低无一体】弹窗。
按照步骤,在【生成SDK】后,可以【下载模板工程】。在本地进行npm
相关操作后,会在packages/kunlun-plugin
目录下生成dist
目录。在dist
目录中,会有对应的kunlun-sdk.umd.js
文件,使用【上传JS文件】进行上传。如果工程中包含了css
,使用【上传CSS文件】进行上传。上传完成后点击【确定】进行保存。
PS:在模板工程中,我们提供了最简化的Hello World
示例,即使不添加任何代码也可以看到组件的具体效果,为了方便演示,我们暂时不介绍代码实现的相关内容,仅需直接上传对应js
文件,看到效果即可。如果遇到相关问题,请点击查看【前端】低无一体部署常见问题。
结语
至此,我们已经完整体验了从【创建组件】到【属性面板设计】再到【使用组件】以及【实现组件】的全部流程。
通过这一流程我们不难发现,【自定义组件】并非仅仅用于【页面设计】,在【属性面板设计】时,我们同样可以使用【自定义组件】来设计【自定义组件】的属性面板。这样便形成了一个完整的设计闭环,使得开发者可以更大程度的发挥自身创造力,开发出符合业务需求的【自定义组件】。
Oinone社区 作者:数式-海波原创文章,如若转载,请注明出处:https://doc.oinone.top/frontend/53.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验