页面布局及各个功能区块描述:


designer界面

designer界面主要分为6个部分:
分别是顶部菜单栏、左侧控件栏、中部功能栏、中下部的操作栏、右侧场景栏,以及右下角的属性栏。
顶部的菜单栏,左侧的文件、编译、布局、帮助各有一个下拉菜单。

顶部菜单栏

顶部菜单栏有着文件、编辑、布局、帮助、发布、分享、评论,共七个功能控件。

文件下拉菜单如下,有着保存并复制、新建及删除选中场景、导入导出项目、上传自定义代码、资源、清理编译缓存以及版本等选项。
保存:保存当前项目进行的修改
新建场景:在项目中添加一个新的页面,和右侧场景栏中的新建场景作用相同
删除选中场景:删除当前选择的场景(screen_main无法删除)
导出项目:将当前保存的项目代码打包成zip文件并下载
导入项目:
上传自定义代码:从本地选择特定文件后上传到项目中
资源:可从本地选择.png、.jpg、.c及.h文件添加到项目中
清理编译缓存:可清理当前项目制作时产生的缓存文件,能够有效缓解打开积木页面时发生卡顿的情况。
版本:可以创建版本号并将当前进度保存到该版本中,并能够在之后以后的开发过程中对之前保存的版本代码进行下载访问。

编译下拉选单

编译下拉选单如下,有着编译、编译(在线预览)、预览、刷新、下载源码、开发板运行、下载bin、下载编译日志共八种选项。


编译:对当前项目进行编译操作,查看是否有逻辑上的错误。
若没有出错,则会出现如下提示:“编译成功!!!”及“Done!!!”都出现,此时证明项目代码没有错误,可运行。

编译(在线预览):对当前项目进行编译操作,并可通过下方的“预览”选项在线预览编译结果,如下图所示:

刷新:可刷新当前界面;
下载源码:将当前保存的项目源码打包成source.zip文件并下载;
开发板运行:需绑定设备;
下载bin:可生成一个包含bootloader.bin、partition-table.bin、qmsd-demo.bin、readme.txt四个文件的bin.zip压缩包,
可以将三个.bin文件利用flash_download_tool_3.9.2烧录工具,烧录到开发板上。
下载编译日志:可将编译生成的log文件下载下来,便于检测问题。

布局下拉选单

布局下拉选单如下,有设计器、混合、积木三个选项。


设计器:访问blockly界面;
Blockly:将各种函数及功能实现封装好以进行可视化编程的一款工具,可以显著降低编程的难度,方便不同部门之间的沟通,缩短产品开发周期。

混合:让designer界面的操作框和积木化编程界面同框显示;

帮助下拉选单

帮助下拉选单如下,有文档中心、入门指南、视频案例、关于四种选项。

文档中心:可跳转至8ms GUI开发平台简介页面;
入门指南:可跳转至8ms GUI开发平台简介页面;
视频案例:可跳转至8ms GUI开发平台简介页面;
关于:可跳转至8ms GUI开发平台简介页面;

发布,分享,评论

右侧三个功能按键:
发布:可将项目发布到8ms平台,以供大家进行技术交流;点击发布后,会弹出发布并公开到8ms平台的选框,您可以在此添加项目描述,
并修改项目的公开权限。完成修改后,点击右下角确定键。

分享:可将当前项目以可见模式生成网址,并复制分享。

复制链接后在新窗口打开,左侧的控件栏会消失,项目仅以可见模式呈现。

评论:在输入框中输入评论内容并点击确定键,可将评论提交到评论栏。

控件栏

左侧控件栏有着五大种分类,分别是页面布局简单显示、动态显示、人机交互、功能控件;各控件的具体功能将在之后的控件文档章节进行详细介绍。


页面布局部分,有页签切换、滑动面板、页面、容器四种控件。


简单显示部分,有文本、图片、圆环、文本域、列表,共五种控件。


动态显示部分,有滑块、复选框、开关、进度条、下拉框、对话框、预加载提示、选择器、显示面板,共九种控件。


人机交互部分,有按钮、列表、折现,共三种控件。


功能控件部分,有日历、仪表盘、LED、时钟控件,共四种控件。


功能栏有调整大小、保存、上一步、下一步、对齐方式、编译、下载bin、编辑,共九种按键。


调整大小的功能控件可以调整操作栏的区域大小;100%后继续放大,则会部分显示画布区域。

保存:将当前的项目进度保存,方便后续进行下载编译等工作。

上一步:将当前操作还原到上一步。

下一步:将当前操作还原到下一步。

对齐方式:选中控件后,可以修改该控件的对齐方式:左对齐、水平居中对齐、右对齐、上对齐、垂直居中对齐、下对齐。

编译:编译当前工程,直到当前编译日志显示进度达到100%,出现编译成功及done!!字样,则说明编译完成。


下载bin:与顶部菜单栏控件同功能,可生成一个包含bootloader.bin、partition-table.bin、qmsd-demo.bin、readme.txt四个文件的bin.zip压缩包。
可以将三个.bin文件利用flash_download_tool_3.9.2烧录工具,烧录到开发板上。

编辑:可在弹框中对项目名称、闪存容量、描述、标签等您想要进行修改的信息进行修改。


场景栏

右侧场景栏可显示当前工程所包含的界面及控件名称。

新建场景:能够在当前工程中添加一个新的界面。输入场景名称后,点击确认,即可完成新界面的创建。

新创建的界面则会出现到右侧场景栏内。

属性栏:可在此修改场景及控件的属性。场景有着场景类型、创建方式、接收事件、背景颜色等属性,而控件的属性除了基础的位置及大小外各不相同。

页面、控件的添加删除:页面的添加在上述场景栏的新建场景中提过,而控件的添加,则是在左侧的控件栏,点击想要添加到当前界面的控件即可。

页面与控件的删除操作类似,右击控件或界面,在弹框中选择删除。

blockly部分

Blockly的添加和删除:

以一段点击进度条跳转到其他屏幕的简单逻辑为例:

从右侧的UI控件栏找到按钮事件拖动到blockly操作栏,然后将显示界面功能拖动并嵌合到点击时的凹槽内,即可完成点击进度条跳转到其他界面的逻辑。
若想要删除某个blockly控件,则右击该控件,在弹窗中选择删除块。