当前位置: 商业快讯 > 正文

优维科技低代码-3:对构件组合的封装与自定义模板

2022-06-24 09:32:20       来源:榕城网

上一篇文章我们讲述了基于 Web Components 的构件,可复用的构件是 EasyMABuilder 的基础。

现代软件的开发追求最大化的可复用,因为软件复用带来诸多好处:提升研发效率、降低研发成本、降低过程风险、增加可靠、有利于标准化等。

构件,就是 EasyMABuilder 中可复用的单元,通过组合现有的构件就可以搭建出完整的 Web 应用。

而随着应用规模的增长,开发者可能需要更上层的复用,即:将一套构件的组合封装成一个新的可复用的单元,并且希望它能像普通构件那样使用。例如我们可能需要一个显示趋势图的卡片,它由一个卡片构件及一个趋势图构件组成,我们希望将这个定制卡片能复用在多个页面中。

EasyMABuilder 对此提供了对构件组合的封装:自定义模板,以下我们简称为模板。

创建模板的界面与编排一个普通页面的界面完全一致,因为它们都是编排一套构件的组合。

不同的是,模板将内部的构件封装了起来,并且可以按需对外暴露属、事件、方法和插槽,并将这些信息映射到内部的构件,这样,模板也有了普通构件的几大要素,因此它就可以像普通构件那样在各个地方复用。

例如,上文提到的趋势图卡片,我们可以先编排好模板的构件结构:

为了提升这个模板的可复用,我们扩展一下它的能力,支持由外部传入卡片的标题和趋势图的数据源,进行一下属映射的配置:

这样,我们的模板就有了两个属 chartTitle 和 dataSource,设置或读取它们等同于读取内部构件的对应属

例如,我们可以在页面中同时编排两个趋势图卡片,分别显示 CPU 使用率和内存使用率:

事件、方法和插槽的映射方式与属类似,其中,插槽的映射是系统在运行时通过模板展开来实现的。

例如,假设我们为上面的模板再添加一个附加按钮的插槽 addon,映射到卡片构件的对应插槽上,然后我们为上面的 CPU 使用率卡片添加一个查看详细信息的附加按钮。

在模板被展开之前的页面 storyboard 中,构件树大约长这样:

展开后:

每个模板在运行时将被分别展开,其中的插槽下的子构件也会被移植到指定的内部构件的对应插槽上。例如上面的查看详情的附加按钮 view-detail 就被移植到了 CPU 使用率所在模板内部的卡片构件的 addon 插槽中。

自定义模板可以在每个应用内维护,也可以选择在多个应用之间连接共享,还可以单独打包并纳入台的构件资源库中,就像普通的构件包一样。

由于模板就是构件组合的编排,因此可以轻易地将现有的页面编排的某个部分转换成模板,以便在别处复用,这样可以更加滑地进行应用的迭代研发。

以上我们讲诉了自定义模板在兼容普通构件的基本能力的前提下,通过对构件组合的封装,在 EasyMABuilder 中提供了更上层的可复用单元,从而让开发者以更高的效率和更好的可靠完成应用的编排。

在低代码台中,除了组织基本的 UI 界面结构外,还有一项重要的工作是维护和管理数据,特别是来自远端的异步数据和动态变更的状态数据。

免责声明:市场有风险,选择需谨慎!此文仅供参考,不作买卖依据。

关键词:

责任编辑:kj005

文章投诉热线:156 0057 2229 投诉邮箱:29132 36@qq.com
商业快讯

优维科技低代码-3:对构件组合的封装与自定义模板

2022-06-24 09:32:20   榕城网

上一篇文章我们讲述了基于 Web Components 的构件,可复用的构件是 EasyMABuilder 的基础。

现代软件的开发追求最大化的可复用,因为软件复用带来诸多好处:提升研发效率、降低研发成本、降低过程风险、增加可靠、有利于标准化等。

构件,就是 EasyMABuilder 中可复用的单元,通过组合现有的构件就可以搭建出完整的 Web 应用。

而随着应用规模的增长,开发者可能需要更上层的复用,即:将一套构件的组合封装成一个新的可复用的单元,并且希望它能像普通构件那样使用。例如我们可能需要一个显示趋势图的卡片,它由一个卡片构件及一个趋势图构件组成,我们希望将这个定制卡片能复用在多个页面中。

EasyMABuilder 对此提供了对构件组合的封装:自定义模板,以下我们简称为模板。

创建模板的界面与编排一个普通页面的界面完全一致,因为它们都是编排一套构件的组合。

不同的是,模板将内部的构件封装了起来,并且可以按需对外暴露属、事件、方法和插槽,并将这些信息映射到内部的构件,这样,模板也有了普通构件的几大要素,因此它就可以像普通构件那样在各个地方复用。

例如,上文提到的趋势图卡片,我们可以先编排好模板的构件结构:

为了提升这个模板的可复用,我们扩展一下它的能力,支持由外部传入卡片的标题和趋势图的数据源,进行一下属映射的配置:

这样,我们的模板就有了两个属 chartTitle 和 dataSource,设置或读取它们等同于读取内部构件的对应属

例如,我们可以在页面中同时编排两个趋势图卡片,分别显示 CPU 使用率和内存使用率:

事件、方法和插槽的映射方式与属类似,其中,插槽的映射是系统在运行时通过模板展开来实现的。

例如,假设我们为上面的模板再添加一个附加按钮的插槽 addon,映射到卡片构件的对应插槽上,然后我们为上面的 CPU 使用率卡片添加一个查看详细信息的附加按钮。

在模板被展开之前的页面 storyboard 中,构件树大约长这样:

展开后:

每个模板在运行时将被分别展开,其中的插槽下的子构件也会被移植到指定的内部构件的对应插槽上。例如上面的查看详情的附加按钮 view-detail 就被移植到了 CPU 使用率所在模板内部的卡片构件的 addon 插槽中。

自定义模板可以在每个应用内维护,也可以选择在多个应用之间连接共享,还可以单独打包并纳入台的构件资源库中,就像普通的构件包一样。

由于模板就是构件组合的编排,因此可以轻易地将现有的页面编排的某个部分转换成模板,以便在别处复用,这样可以更加滑地进行应用的迭代研发。

以上我们讲诉了自定义模板在兼容普通构件的基本能力的前提下,通过对构件组合的封装,在 EasyMABuilder 中提供了更上层的可复用单元,从而让开发者以更高的效率和更好的可靠完成应用的编排。

在低代码台中,除了组织基本的 UI 界面结构外,还有一项重要的工作是维护和管理数据,特别是来自远端的异步数据和动态变更的状态数据。

免责声明:市场有风险,选择需谨慎!此文仅供参考,不作买卖依据。

责任编辑:kj005

相关阅读

美图推荐

金融科技下,金融企业如何保障信息安全
主播雨化田们再接新活,这次让网友们下载的是交管12123APP
深圳看到科技发布Kandao Meeting S 180°超广角智能视频会议机
QQ音乐做了“一件有意义的小事”,让这些孩子听见“听不见”的音乐

精彩推荐