三、集成开发环境界面介绍

通过本节你将了解 iVX 在线集成开发环境界面，快速建立对在线集成开发环境的认识。

文章目录

三、集成开发环境界面介绍
- 3.1 界面区域
- 3.2 舞台
- 3.3 组件工具栏
- 3.4 对象树/素材面板
- 3.5 属性面板
- 3.6 菜单面板
- 3.7 逻辑工具面板
- 3.8 辅助工具

3.1 界面区域

在线集成开发环境界面分为以下几个区域：

舞台
组件工具栏
对象树/素材面板
素材面板
属性面板
菜单栏
逻辑工具栏
辅助工具

以下将创建一个默认设置的 WebApp 对在线集成开发环境界面的主要区域进行介绍。

3.2 舞台

创建一个默认设置的 WebApp 应用后，在出现的窗口中间的白色区域即为舞台：

在舞台中可以编辑当前应用的 UI 界面，该舞台与 Photoshop 等主流图像处理软件中的 “画布” 类似，它定义了项目的编辑区域，所有对界面的编辑和创作都在这一区域通过可视化的方式进行编辑。

3.3 组件工具栏

在在线集成开发环境界面中，最左侧区域为组件栏：

在组件栏中的小图标则是组件，这些组件都有特定的功能和用法；例如需要在舞台区中添加图片，需要在组件栏中找到图片组件，点击后即可添加至舞台区中。

了解 iVX 组件的功能及使用方法是 iVX 进行开发的基础。iVX 组件丰富，包括基础网页应用、小程序应用、小游戏应用的基础元素组件以及一些的动效组等。iVX 组件并不只限于 UI 元素，还包括后台组件，可编辑的逻辑、服务、数据库等，具体的使用方式在该教程中将会详细讲解。

iVX 组件在不同类型应用下略有不同，但基础组件相同。若出现不会使用的组件，想要了解其功能，我们可以通过鼠标悬浮任意一个组件几秒，点击其出现的 “查看详情” 即可查看该组件的使用文档。

3.4 对象树/素材面板

对象树是当前项目中包括前后台所有对象的管理窗口，以树状结构对组件进行可视化的展示，位于在线集成开发环境界面的最右侧：

通过对对象树对象进行操作，可以实现对选中对象的属性更改；例如调整对象之间的层级关系、复制、删除对象、对象重命名、搜索对象、为对象添加动画、添加数据库、添加服务等操作。具体操作将在之后教程中详细讲解。

3.5 属性面板

当我们通过对象树或舞台任意点选一个对象时，可以看到组件栏右侧将对应显示该对象的属性面板：

一般情况下对象拥有多种属性，比如表示位置信息的 X 与 Y 坐标、尺寸属性宽度与高度等；在属性栏中可以编辑这些属性改变当前对象的外观或者对应功能。

3.6 菜单面板

菜单面板位于在线集成开发环境界面的顶部，主要分为左、中、右三个区域：

菜单栏左侧主要功能为文件操作、文件保存、后端资源管理、前端资源管理：

菜单栏中部主要功能为对项目的发布、预览以及配置：

菜单栏右侧主要功能为项目的对其操作、等间距操作、舞台（画布）大小操作、辅助线可视设置以及舞台缩放大小设置：

3.7 逻辑工具面板

逻辑工具面板位于对象树窗格右侧，用于为对象添加事件、自定义函数、动作组、服务等交互逻辑功能：

3.8 辅助工具

当我们在使用中遇到任何问题时，都可以通过查看文档、教学视频或直接求助于客服来解答疑问：

客服系统可通过右下角的帮助按钮进行访问：

三、界面介绍（IVX快速手册）相关推荐

c++做界面_Adobe Photoshop基本介绍②，快速入门界面
Adobe Photoshop基本介绍②,快速入门界面.此篇文章意在讲解Adobe Photoshop界面的介绍.在本篇文章,up主会使用Adobe Photoshop CC 2018 作为讲解.(以 ...
3DMAX快速入门界面介绍【下】
今天咱们就来接着讲一下3dmax的界面介绍,让我们对软件可以有一个更加全面的了解. 3ds Max 是运用在windows系统之下的三维动画制作软件,界面主要是由标题栏.菜单栏.主工具栏.命令面板.绘 ...
miniui mysql_三分钟介绍强大方便的前端框架Jquery MiniUI
原标题:三分钟介绍强大方便的前端框架Jquery MiniUI jQuery MiniUI - 专业WebUI控件库. 它能缩短开发时间,减少代码量,使开发者更专注于业务和服务端,轻松实现界面开发,带 ...
python软件界面-python软件界面介绍(python软件介绍)
python软件界面介绍 1.接口初始化当我们使用pycharm工具时,我们将遇到的第一个问题是,在进行各种配置后界面变得混乱时,我们该怎么办?我们应该还原,那么如何还原初始设置? 尽管此工具是从e ...
gimp教程：gimp界面介绍
GIMP(跨平台图像处理程序)是一个开发源代码的光栅与图像编辑的先进功能,关于GIMP的界面,初学者都了解吗?下面是小编整理的关于gimp教程中gimp界面介绍,快来分享吧! gimp界面介绍:gim ...
VISIO2010界面介绍
原文地址:VISIO2010界面介绍作者:visio123 新的VISIO2010界面主要分为1.快速访问工具栏,2.文件菜单,3.选项卡,4.功能区,5,形状窗口,6.绘图区.7.状态栏.以下一一解 ...
PyQt5 Qt Designer 新手教程（一）—— 软件界面介绍
PyQt5 Qt Designer 新手教程(一)-- 软件界面介绍教程博文一.前言终于学到了 PyQt5 Qt 设计师(Qt Designer)这个软件,博主感觉心情还是很激动的.因为,当初学 ...
python软件介绍-python软件界面介绍(python软件介绍)
python软件界面介绍 1.接口初始化当我们使用pycharm工具时,我们将遇到的第一个问题是,在进行各种配置后界面变得混乱时,我们该怎么办?我们应该还原,那么如何还原初始设置? 尽管此工具是从e ...
MIKE 21 教程 1.1 网格搭建界面介绍之点线面的创建（Mesh Generator 工具）
目录 1 打开网格创建界面 2 网格创建界面的工具介绍页面显示模块: 选择模块: 插入要素模块: 插入点要素: 插入线要素: 插入面要素: 1 打开网格创建界面为河道创建网格文件,是MIKE21建 ...

三、界面介绍（IVX快速手册）