您的位置:首页 > 产品设计 > UI/UE

基础教学丨UiBot主界面、可视化、源代码视图操作

2019-02-25 11:01 197 查看

基础教学丨UiBot主界面、可视化、源代码视图操作
今天主要讲解UiBot软件主界面、可视化视图、源代码视图的相关操作。

目录
1、软件主界面操作
2、可视化视图操作
3、源代码视图操作

1、软件主界面操作
UiBot主界面布局如下:


(1)菜单栏:
最上方的菜单栏包括了 UiBot Creator 编辑器的各种功能,在帮助菜单里,可以找到 UiBot Creator 的使用教程和命令手册:

(2)工具栏:
工具栏从左到右,功能依次为:
录制:打开录制工具,录制一段代码加入到编辑器。
新建:在当前打开的项目工程中新建一个流程(task文件)。
导入:将外部的 task 流程文件导入到当前打开的项目中。
保存:保存当前编辑器的 task 流程文件。
全部保存:保存所有已修改的 task 流程文件。
运行:运行当前正在编辑的 task 流程文件。
停止:运行状态下可用,停止当前运行的 task 流程文件(停止操作不是实时的,可能要稍等待一下才会停止完成)。
数据抓取:打开数据抓取工具,生成抓取浏览器中列表数据的代码。
社区:打开 UiBot 开发者社区网站,开发者社区中可以和其他 UiBot 用户交流技术,也可以获得很多免费的帮助和教程哦!

(3)全部命令窗格:
全部命令窗格列出了 UiBot 可以实现的各种功能,双击可以将功能添加到编辑器(详见下文),在搜索命令输入框中,输入要搜索的功能描述、命令名的一部分,可对命令列表进行筛选:



(4)项目文件窗格:
点击【项目文件】选项卡,可以切换到项目文件窗格,在这里可以管理项目工程的资源、流程:

在项目一级点击右键,可以 新建项目、关闭项目、使用资源管理器打开项目所在文件夹:

在任务上点击右键,可以快速创建、打开任务:

在项目 task 流程文件上点击右键,可以使用编辑器打开这个文件,或对这个文件进行改名、删除等操作:

(5)输出窗格:
在界面最下方,有个输出窗格,负责在代码运行时,输出产生的调试信息:

输出的调试信息可以使用鼠标拖动选择后,按 Ctrl + C 复制。
点击窗格右上角的垃圾桶图标,可以快速清空调试输出窗格中的内容:

除了上述几个窗格外,
剩余区域为编辑器区域。

2、可视化视图操作

可视化编辑分为
可视化代码编辑器
可视化组件属性设置

变量管理
三部分:

在可视化视图编辑器窗格,我们可以通过双击或拖拽全部命令窗格中的命令元件,添加一条功能到编辑器:

点击编辑器列表的指定命令可以选中这条命令,命令选中后,属性窗格将会显示与这条命令相关的各项属性设置:

在属性窗格中对命令的各项属性进行修改,可以影响到对应命令的功能和执行效果:

部分命令需要操作目标才能正常运行,点击命令描述后面跟随的【元素选择器】,使用鼠标选择要操作的元素即可:

选择元素后,命令的操作将基于选择的元素进行,例如鼠标点击操作,选择元素后,点击的即是选中的元素。

在命令列表中,除了鼠标单击可以选择命令外,也可以按住 Ctrl 键选择多个命令:

或选选中一个命令后,按住 Shift 键,再选择另一个命令,则可一次性选择两个命令之间的所有命令,包括两条命令自身:


选中命令后,按 Delete 键可以删除命令、按 Ctrl + C 键可以复制命令、按 Ctrl + X 键可以剪切命令、按 Ctrl + V 键可以粘贴命令,或在选中的命令上点击右键,在弹出的菜单中进行操作:

拖动选中的命令,可以调整的位置,命令的位置决定了命令执行的次序,拖动时在拖动的目标位置上,会显示一条红线,松开鼠标后,选中的命令就会被移动到红线处:


点击变量选项卡,可以切换到变量窗格,在这里管理脚本运行时所需的变量(存储数据的容器):

一些命令在添加时会将运行结果放入指定变量,如果变量不存在,则会自动在这里添加对应名称的变量,在表格中,可以修改变量的名字和默认值:

点击变量后面的垃圾桶图标,
可以删除这个变量:

点击添加变量按钮,
可以添加一个新的变量:

3、源代码视图操作

在编辑器上方,点击 可视化、源代码 按钮可以在两个视图间进行切换,UiBot 能够将代码在两个视图间进行无缝转换,同时兼顾初级用户和编程能力较强的用户:

在源代码视图中,没有变量管理和属性设置窗格。
变量可以直接在源代码中编写,切换视图后,会自动添加到变量列表。
属性设置窗格则作为命令的参数,在代码编写过程中写入代码。

在代码编辑器中,没有了可视化视图命令末尾的选择器,可以通过编辑器最上方的四个选择器按钮选择元素,生成对应的选择器数据:

其中,
元素表示选择器信息包含了某个界面元素的特征;
图像表示选择器信息包含了某个图像的数据;
窗口表示选择器信息包含了某个窗口的特征
区域则包含了一个矩形区域的数据。

点击对应选择器选择目标后,会弹出对话框,在对话框中可以对选择结果进行确认和筛选,然后点击复制到剪贴板按钮,复制数据到剪贴板,以便在代码编辑器中使用:

代码编辑器支持以下热键操作:
Ctrl + A:全选代码
Ctrl + X:剪切代码
Ctrl + C:复制代码
Ctrl + V:粘贴代码
Ctrl + Z:撤销

今天的教学就先到这里
我们下期再见!

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: