快速入门

更新时间:2018-11-19 11:40:15

本章节将概述性介绍Web应用可视化构建工具各个区块功能和使用方法。</span>

页面管理区

当前站点的所有页面都将展示在这个区域中,用户可以选择操作新增页面、删除页面、编辑页面名称等功能进行操作;当站点创建的时候,系统会默认创建一个空白的页面:

image.png | left | 724x414

新增:点击加号图标可以新增页面;
删除:选定一个页面后,点击回收站图标可以删除页面;
编辑:双击页面名称,可以编辑页面名称;
排序:选定一个页面,并拖动它,可以完成页面排序操作;

插件管理区

在页面管理区的下方,可以看到站点中包含的插件,点击对应的插件可以预览它的展现形式;每个站点在创建的时候不会包含任何插件,用户可以选择新增、删除官方插件或者自研插件:

image.png | left | 724x414.2888888888889

新增:点击加号图标可以打开选择插件的列表弹窗,可以勾选官方或者自研插件,点击确定按钮新增插件;
删除:选定一个插件后,点击回收站图标可以删除插件;
注:关于官方插件的介绍,可以前往插件介绍部分详细查看。

组件管理区

组件是编辑器工具的核心功能。它分门别类的提供了构成站点的基本要素,平台用户可以根据自身的需求选择并使用他们;每个组件由其功能不同,对应的属性配置也不一样,有些组件需要服务支持,有些则需要直连设备,有些则纯粹是展示用途。
注意:自研服务一定要当前应用开通以后才能使用

使用方法:选定组件图标,拖拽到画布中。

image.png | left | 724x414.2888888888889
平台组态工具会随着自身的发展,不断的提供更多更强大的组件;
当然,用户后期也可以通过市场或自研的方式获得组件(后续版本);

注:关于官方组件的介绍,可以前往组件介绍部分详细查看。

属性配置区

站点页面和组件的属性配置,都将在这个工作区域中完成;针对选中的不同目标,所展示的属性也不一样。

image.png | left | 724x414.2888888888889

当没有选择任何组件时,是针对当前页面进行配置;

注:具体组件的属性配置,可以前往组件介绍部分详细查看。

标尺管理区

image.png | left | 724x414.2888888888889

标尺:勾选后,页面边缘会以刻度尺的方式标注出当前的尺寸(位置)信息;
网格:勾选后,页面会出现5px*5px的栅格点,方便用户调整组件位置;另外,页面中所有的组件位置及尺寸都将自动按照栅格位置进行吸附和对齐;
适合画布:点击后,当前编辑界面会自适应到最佳的展示方式尽可能的显示页面中的内容;
缩放:拖动滑动条,可以放大和缩小展示当前页面;
页面尺寸:用户可以自定义页面的像素尺寸;
自适应:勾选以后,生成的页面会根据浏览器分辨率自适应页面尺寸(预览和发布后可以查看结果);

其他功能

image.png | left | 724x414.79166666666663

剪切、复制、删除、图层顺序编辑、锁定,选择一个组件后,点击鼠标右键,可以获得这些操作;

image.png | left | 724x413.2833333333333

成组,选择俩个及俩个以上组件时,点击鼠标右键,可以获得这个操作;

image.png | left | 724x413.2833333333333

选择俩个及俩个以上组件时,在右侧的属性配置区域还可以对这些组件进行水平对齐、垂直对齐和分布管理。

需注意,离开编辑器界面时,请根据提示选择是否要离开当前已操作的数据,建议先保存后再切换:

image.png | left | 724x414.86509040333794

快捷操作

鼠标按下拖动框选多个组件;或者按住 command (Mac) / ctrl (windows),鼠标点击选择多个组件:

1.gif | center | 747x364

全选,command (Mac) / ctrl (Windows) + a;复制,command (Mac) / ctrl (Windows) + c;粘贴,command (Mac) / ctrl (Windows) + v;删除,delete (Mac) / backspace (Windows):

3.gif | left | 747x364

移动、旋转、缩放、等比缩放(缩放时按住 shift 键):

2.gif | center | 747x364

撤销,command (Mac) / ctrl (Windows) + z;重做,command (Mac) / ctrl (Windows) + shift + z:

4.gif | left | 747x364

results matching ""

    No results matching ""