IT9862/IT9866/IT9868 -代码&UI联动 基础

【1】功能简介

软硬件环境：

1. PC机完整良好的ITE SoC SDK环境（博主使用：SDK_v2442）；
2. 基于之前建立的Hello_ITE工程（博文：IT9862/IT9866/IT9868 - 建立并调试UI工程）；
3. 不涉及硬件，不需要；

本实验目的：

UI调用代码，代码控制UI。

1. 通过DrawrockerGUIDesigner.exe设计一个UI界面；
2. UI界面上一个Button按钮，一个text文本控件；
3. 点击button按钮，调用函数ButtonFunction();
4. ButtonFunction()函数输出一个log信息；
5. ButtonFunction()函数设置Text控件显示“Hello ITE”；

【2】设计一个UI界面

1. 双击SDK\sdk\itu\tool\bin\DrawrockerGUIDesigner.exe，开启UI设计界面；

2. 界面File->Open 弹出save file？点击 否 ；
   

3. 选中文件SDK\project\Hello_ITE\itu\1280x480\ctrlboard.xml，然后打开；

4. 建立一个自己的Layer，Layer->New 新建一个Layer；
   Layer控件是编辑系统所提供的控件当中功能最简单，但也是最重要的控件，GUI设计中的每一个显示画面，基本上就是由一个Layer来完成，通常一个设计案都包含了数十个Layer。一个设计不能超过99个Layer。

5. 用拖拽的方式，在Layer上面新建一个Background控件；
   Toolbox是软件集成好的控件集合，里面包含的各种控件用户可以直接拿来使用。
   Background控件是一个图层的背景层，为了防止图层显示的不确定性，通常建议每个Layer第一个控件为Background，Background可以设置为对应的颜色或图片等。

6. 设置Background尺寸和Layer一致（起点0,0，尺寸1280,480），名字为：helloBackground，背景色为：Black；
   起点为控件左上角的像素坐标。控件名字必须注意，全局唯一，因为名字是该控件的唯一标志。

7. 相同的方式新建一个Button，一个Text控件，并分别起名为：helloButton，helloText。鼠标随意拖拽大小，修改颜色等属性；

8. 修改Layer名字为helloLayer，保持名称一致且唯一；

9. 将helloLayer控件属性，Visibility 设置为true，并将logoLayer控件属性，Visibility 设置为false；
   Layer控件的Visibility属性很重要，通常一个项目，只有一个Layer设置为true，为该项目Layer的入口显示。比如，目前三个Layer，只有helloLayer的Visibility为true，则代表，UI界面加载后，第一个页面显示为helloLayer。

10. 保存当前UI文件，并Export到SDK\project\Hello_ITE\itu\1280x480\ctrlboard.itu文件；

【3】通过VS2013构建环境

1. 双击SDK\build\win32\Hello_ITE.cmd构建win32仿真环境；

2. 双击SDK\build\win32\Hello_ITE\Hello_ITE.sln打开工程，并仿真如下；

3. 为了方便代码管理，对应的helloLayer我们新建一个layer_hello.c；

4. 将新建的layer_hello.c放到SDK\project\Hello_ITE\下；

5. 修改makefile（SDK\project\Hello_ITE\layer.cmake）增加文件；

add_executable(${CMAKE_PROJECT_NAME}
    layer_logo.c
    layer_air_conditioner.c
    layer_hello.c
)

6. 双击SDK\build\win32\Hello_ITE.cmd重新构建win32下工程；
   win32仿真下能看到新建的layer_hello.c文件。

【4】编辑功能代码，实现UI调用代码

1. 在layer_hello.c下编辑功能函数；

//SDK\project\Hello_ITE\layer_hello.c
#include <assert.h>
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include "scene.h"

bool HelloFunction(ITUWidget* widget, char* param)
{
	printf("Hello ITE. \r\n");//用printf输出log信息

	return true;
}

2. 注册函数到全局表内；

//SDK\project\Hello_ITE\function_table.c
#include "ite/itu.h"

extern bool HelloFunction(ITUWidget* widget, char* param);

ITUActionFunction actionFunctions[] =
{
    "HelloFunction", HelloFunction,
    NULL, NULL
};

3. UI配置界面设置调用函数条件；
   主动类的控件都有很多Action，代表控件触发的动作，顺序执行。在Action01配置Action为function表示利用程序中的函数来决定执行这件事，Event配置为Press表示按下立即触发事件，Parameter为函数传参，Target为注册函数名，必须对应代码中函数。

4. 保存UI文件并Export到对应的ITU路径（SDK\project\Hello_ITE\itu\1280x480\ctrlboard.itu）；

5. 双击SDK\build\win32\Hello_ITE.cmd重新构建win32下工程，然后仿真工程；

6. 发现连续点击Button按钮，log会同步输出预设字符：Hello ITE.

【5】编辑功能代码，实现代码控制UI

1. 编辑功能函数；

//SDK\project\Hello_ITE\layer_hello.c
#include <assert.h>
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include "scene.h"

static ITUText *helloText;

bool HelloFunction(ITUWidget* widget, char* param)
{
	printf("Hello ITE. \r\n");//用printf输出log信息

	helloText = ituSceneFindWidget(&theScene, "helloText");
	assert(helloText);

	ituTextSetString(helloText, "Hello ITE.");    //设置helloText控件显示字符串Hello ITE.

	return true;
}

2. 仿真后点击Button按钮，会看到Text控件设置为预设的Hello ITE. 字样；

【6】常见问题处理

• 问题1：
  • 问题描述：UI修改后，仿真不一致；
  • 解决方式：确保修改后的UI是否Export，并且重构win32仿真环境；
• 问题2：
  • 问题描述：通过VS2013仿真失败；
  • 解决方式：参考SDK环境配置。
• 问题3：
  • 问题描述：很多反应无法打开UI编辑软件DrawrockerGUIDesigner.exe;
  • 解决方式：电脑安装Microsoft Visual Studio 2013 Tools for Office Runtime，很多电脑系统自带不需要安装，有些打不开就是电脑缺少这些，重新安装即可。