码迷,mamicode.com
首页 > 其他好文 > 详细

画画一样开发软件 显示元件介绍-总述

时间:2018-03-11 23:56:01      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:软件开发;管理软件开发;无代码管理软件

无代码开发显示元件介绍-总述

开发工具中的显示元件对应的是用户前端设计部分,默认分为模板显示元件和元件选项板中的显示元件两部分,第一部分是新建一个项目时自动生成的最底层的显示块,如我们新建时选新移动应用模板时,自动生成三个显示块:手机端显示块、平板端显示块和电脑端显示块:

技术分享图片

Mobile View:是手机端显示的块,在这个块中开发的内容将会在手机、PDA等小屏设备中显示给用户;其中默认自带了一个基本的设计,包括第一个显示页Page1(类似于手机APP打开时第一眼看到的页面),下脚菜单栏(类似微信等APP下部各功能切换用的功能),以及一个用于当前页面变量存放的数据变量(可忽略,无需管理,切换功能中用到):

技术分享图片

需注意的是,如果像微信等APP中,需要放四个功能主页面,则在上图开发区Mobile View显示块中右键->Add Element->Page,即可添加三个新页面,重命名(选中页面按“f2”)每个页面后,自动生成底部的页面菜单及功能名称,同时显示各页面时,页面名称也在顶部显示,且试运行可以切换各页面进行测试。底部功能菜单及头部都可以在属性中或CSS文件中进行样式设计,也可以添加一些图标,让菜单为为图标加文字的效果。

Tablet View:设计在这个显示块中的内容人在平板等设备是打开时自适应显示,其中的默认设计与手机端一致,不同的是默认的显示页中,带有左侧菜单及右侧内容块显示元件,很符合常规平板设计中的左菜单右内容布局。同时这个设计也是可以作为左右两栏显示框架设计的范例学习用于电脑端的类似设计:

技术分享图片

与手机端一样,在页面中会有更多的一些默认的设计,这个只是为了更灵活设计一些功能及效果,初期可完全忽略,如果有具体的用户功能需求时,才有必要使用。默认设计中也有我们会在第二部分提到的各类显示元件如List清单内容显示件,如果不需要,可以删除,重新放置自己想要的其他显示元件完成自己的定制设计。

Desktop View:是电脑端显示块,这个块中默认什么都没有,需要开发者自己来添加及从零开发,或从已有项目中复用之前的设计来修改使用:

技术分享图片

第二部分是开发平台中元件选项工具栏下的显示元件,这些元件包括了全部可用到的前端显示基本元件,每个都有自己的显示特色及默认的功能,且大多可以互相套用:

技术分享图片

这些基本显示元件包括:内容显示块(pane)元件、行显示元件(Row)、列显示元件(Column)、工具栏元件(Tool bar)、按钮组元件(Button Group)、按钮元件(Button)、图片显示元件(Image)、标签显示元件(Label)、表单无件(Form)、字符输入框元件(Text Field)、多行文本输入框元件(Text Area)、密码输入框元件(Password Field)、数字输入框元件(Number Field)、日期输入框元件(Date Field)、下拉选择菜单元件(Selection Field)、文件上传框元件(File Field)、勾选框元件(Check Box)、放射效果多选项按钮元件(Radio Button Group)、放射效果单项勾选元件(Radio Button)、带标签字符输入框元件(Text Labeled Field)、带标签数字输入框元件(Number Labeled Field)、带标签日期输入框元件(Date Labeled Field)、带标签下拉选择菜单元件(Selection Labeled Field)、带标签勾选框元件(Check Box with label)、字符显示元件(Text Display)、数字显示元件(Number Display)、日期显示元件(Date Display)、时间显示元件(Date and Time Display)、链接显示元件(Link)、组合元件(Group)、列表或清单元件(List)、子页面元件(Page Dialog)、弹窗显示元件(Modal Dialog)、分页面显示元件(Tabbed Pane)、左右可调大小两栏显示元件(Split Pane)、简单表格显示元件(Simple Table)、复杂表格显示元件(Table)、通用显示块元件(HTML Tag)、超文本内容显示元件(HTML Display)、富文本编辑显示元件(HTML Editor)。

后面的文章我们将对这些显示元件进行功能及使用说明。

画画一样开发软件 显示元件介绍-总述

标签:软件开发;管理软件开发;无代码管理软件

原文地址:http://blog.51cto.com/11967955/2085333

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!