TaskBuilder前端页面UI界面设计

taskbuilder
• 阅读 42

TaskBuilder前端页面UI界面设计 为了方便大家快速设计前端页面的UI界面,TaskBuilder提供了可视化的UI界面设计器,在该设计器内,可以从左侧的组件库中拖拽组件到页面上实现组件的添加,TaskBuilder提供了几十种丰富的UI组件,分为容器组件、只读组件、基础输入项、扩展输入项、不可视组件、导入导出组件、统计图表和媒体组件等,每个组件都可以设置详细的样式、属性和事件,可以实现UI界面的高保真设计。支持拖拽组件改变位置,支持剪切复制粘贴组件,支持撤销重做。 tfp前端页面的UI界面设计器如下图所示: TaskBuilder前端页面UI界面设计 从上图可知,整个UI界面设计器从上至下、从左至右分为以下几个区域: (1)工具栏:在此提供了保存、另存、预览、刷新、复制、剪切、粘贴、删除、撤销、重做、上移、下移等按钮,点击即可执行对应的操作; (2)样式设置栏:在此可以精确设置组件的各种外观样式,包括显示和定位、字体和文本、边框和边距、背景这几大类; (3)组件库和组件大纲:组件库里提供了几十款常用UI组件,点击左侧的组件分类图标可以分别查看各个类别里的组件列表,将组件库里的组件拖拽到页面上,即可实现组件的添加。点击组件大纲,可以按树形结构查看当前页面里所有组件的列表; (4)组件路径导航:在此可以查看从当前选中组件一直追溯到页面组件的所有父组件的路径,以便清晰了解当前组件的嵌套关系,点击其中任何一个父组件都可以直接选中该组件; (5)页面内容编辑区:在此编辑当前页面的内容,可以鼠标拖拽组件的位置,点击组件可以选中组件,然后在顶部样式栏设置组件样式,在右侧属性和事件栏设置组件的属性和事件; (6)不可视组件列表:用来显示当前页面里不可视的组件,例如服务请求组件和计时器; (7)属性和事件设置面板:在此可以设置组件的属性和事件,每种组件的属性和事件都不一样,默认显示属性列表,点击该面板顶部的“事件”选项卡,可以查看和设置组件的事件;

点赞
收藏
评论区
推荐文章
Alex799 Alex799
3年前
5款vue前端UI框架
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计。实用的Vue.js组件库可以帮助我们快速搭建页面,下面介绍小编认为比较受欢迎的五个vue前端ui框架。TOP5——VueBluVueBlu是基于Vuejs和Bulma开发的开源UI组件库。旨在为PC端的前端开发(特别是中后台产品)提供一个快速且灵
Wesley13 Wesley13
3年前
uikiller使用手册(一)
一、前言uikiller是使用名命规则来控制UI节点、组件和触摸事件,减少UI相关的代码与编辑器设置,实现原理是提前对UI树的遍历。在CocosCreator中UI编程基于组件模式,我根据自己的项目经验,将组件分为两类:法宝型与结界型。法宝型组件法宝型组件:以装饰宿主节点为己任,从不控制其它节点。特
Wesley13 Wesley13
3年前
AT
!(https://oscimg.oschina.net/oscnet/9bcf9c4a197687d0f09aa8b0d010e9470c7.jpg)ATUI是一款基于Vue2.x的前端UI组件库,主要用于快速开发PC网站产品。没错,这是又一款基于Vue的前端UI组件库,又双叒叕款UI库~又双叒叕款轮子
Stella981 Stella981
3年前
Android学习笔记(二) 布局方式的介绍
Android应用的开发的一项内容就是用户界面开发了。Android提供了大量功能丰富的UI组件。Android的界面是由布局和组件协同完成的。!(http://static.oschina.net/uploads/space/2014/0304/213204_usD8_865771.gif) Android所有UI组件都继承了View
Stella981 Stella981
3年前
React Hooks的999999个好处
最近前几个月开始,新项目都开始完全使用typescripthooks,先不说typescript吧,hooks是真的香🤣1.更好的分离页面和逻辑,重用逻辑的方法现在前端项目的组件化,一般都是基于最基础的UI组件库(里面也有组件的功能逻辑),加上业务逻辑,封装一个个component,container。组件是UI逻辑的复用,
taskbuilder taskbuilder
1个月前
TaskBuilder功能特性
1、基础功能组件化TaskBuilder将常用的功能封装成了组件,包括前端UI组件、后台业务操作等,开发业务功能时,可以像搭积木一样,通过鼠标拖拽就能快速实现前端界面设计和后台功能开发。tfp前端UI组件组件整体结构2功能设计可视化使用TaskBuilde
taskbuilder taskbuilder
1个月前
TaskBuilder内设置任擎服务器
TaskBuilder内设置任擎服务器在使用TaskBuilder进行软件开发时,必须要先连接到任擎服务器(后续文档所说的服务器如果不特别注明,皆指任擎服务器)才能继续操作,因为使用TaskBuilder开发所需的数据模型、后台服务和前端页面等文件都存放在
taskbuilder taskbuilder
1星期前
前端页面的内容格式
TaskBuilder可以编辑的前端页面类型分为HTML和tfp(TaskmsgFrontPage)两种格式,HTML格式只能用代码编辑器编辑,这种模式基本很少有人用,大家都用tfp格式,因为使用TaskBuilder向导创建的前端页面都是采用的tfp格式
taskbuilder taskbuilder
3天前
TaskBuilder前端组件简介
3.3.3.1前端组件的分类前端页面是由众多组件层层嵌套构成的,这些组件是任讯信息自主研发的一套前端UI组件,称为tfp组件,这些组件根据其功能和特点又分为几大类,它们的继承关系如下图所示:从图中可知,所有组件都是从一个名为Component的根组件继承过
taskbuilder
taskbuilder
Lv1
免费开源的企业级低代码开发工具,研发团队任讯信息参与低代码国家标准编制
文章
40
粉丝
0
获赞
0