UI界面+IoT场景+OS应用:UIOTOS入门学习(四)页面嵌套「独家技术」

2024-11-07 20:04   湖北  

大家好,我是robbin。往期介绍和学习文章如下:

本期介绍页面嵌套

1.关于嵌套

懂html的都知道iframe。还有vue、react、amis这类高低代码框架,也大量涉及组件嵌套json嵌套

总言之,嵌套在软件开发中(尤其是前端),极为重要!

UIOTOS以无代码的方式,实现了页面之间的无限嵌套。这也是不写一行代码实现复杂前端应用的关键技术

2. 容器组件

除了单纯的嵌套容器Tab页签对话框滚动页菜单等组件,这里也属于容器。

原则:显示内容通用,任意由其他页面决定

UIOTOS容器类型的组件

容器组件的共同点:

  • 编辑时双击,能进入内嵌页

  • 进入内嵌页后,空白处双击回到上页

  • 都有页面路径属性,用于填入内嵌页地址(Tab页签、菜单容器稍特殊)。


差异点将分别展开:

① 嵌套容器

“我只管尺寸和布局,内容不管,嵌套谁显示谁!

UIOTOS常规嵌套容器

属性说明:

页面路径:填入内嵌页面。如何找页面路径?

https://www.yuque.com/liuhuo-nc809/uiotos/vsvucqlf51xt2l9p#NXnQL

② Tab页签容器

“我只管切换,每页内容嵌套的谁,就显示谁!”。常与按钮组搭配。

UIOTOS页签组件

属性说明:

  • 相对路径:页签多页共同目录的路径。

  • 多页设置:各页面的名称(可省去后缀)。页面路径属性配置可省。

  • 当前索引:当前切换显示哪个页面。


③ 对话框容器

“我只管弹窗,内容不管,嵌套谁显示谁!

UIOTOS对话框组件

属性说明:

  • 页面路径:填入内嵌页面。

  • 弹窗:勾选时,打开对话框(连线操作时,不关联属性,等同勾选)。


④ 滚动页容器

我只管超过范围就滚动,内容不管,嵌套谁显示谁!

UIOTOS滚动页容器组件

属性说明:

  • 页面路径:填入内嵌页面。

  • 自动填充宽度

    内容最小宽度:通常不用设置,默认即可。此时,当容器组件宽度,小于内嵌页面宽度时,水平方向将滚动显示。


⑤ 菜单容器

我只管侧边菜单栏,内容区域不管,菜单设置谁就显示谁!

UIOTOS菜单容器组件

属性说明:

  • 页面路径:通常只用于设置默认页。

  • 数据内容:JSON结构,用来配置菜单树结构,name字段为菜单文字,display字段为对应的内嵌页路径,点击时内容区域切换加载。


小结

容器嵌套功能十分强大!

复杂的前端应用,可以层层拆解模块化搭建。跟代码增量化、渐进式开发,以及面向对象思想,极为类似

而整个过程无限嵌套、属性继承和重写,无需任何代码开发。

下期将介绍多层嵌套,涉及的属性继承,以及重写

关于

UIOTOS是一款“神奇”的前端工具,拥有页面嵌套独家技术,支持无代码编程,一站式搭建后台管理上位机HMI大屏组态等各类IoT应用

  • UIOTOS 集成 NodeRed   =   工控设备上位机

  • UIOTOS 集成 APIJSON    =   CRUD业务系统

  • UIOTOS 集成 物联网平台 =   IoT平台上层应用


400-1188-502

产品咨询

点击阅读全文,查看文档,了解更多。

前端组态
关于页面嵌套相关技术和应用,涉及前端零代码、可视化编程等。
 最新文章