在上一讲中，我们简单讲解了touchgfx按钮控件的使用以及消息响应的编程方法。本文将介绍如何使用touchgfx开发多个屏幕界面的应用，并引出touchgfx编程使用的一个重要的基本概念：MVP框架模式。关于MVP的说明可参考这个链接。可以把MVP简单理解为一种“规范的”保存用户数据和访问数据的方法。

下面用一个模拟时钟的具体例子来说明。我们创建2个屏幕--screen，一个是时间设置界面，一个是数字时钟界面：

图一 设置界面

图二(1) 主界面，圆弧实际是伸缩的动画

图二(2)

具体实现如下：

一、启动 TouchGFX 4.10.0 Designer，创建一个新的Application（项目名称可自定）：

图三

然后将屏幕上要放置的图形控件文件copy到对应的image子目录中（图形文件资源包下载地址）：

图四

还需要做一个准备工作：新增一个25px的字体、供按钮显示提示文字之用，并设置40px字体的 Wildcard Ranges 为 0-9 （为了在Text Area控件中显示数字）：

图五

第一个Screen为时钟参数的配置界面，外观如下：

图六

左半部分的跟“小时”有关的几个控件的配置参数如下：

图七

显示小时数值的 textAreaHour 的配置如下2个图片：

图八

图九

“增大”箭头：

图十

这里，向上箭头对应的图片，是从下图的 Released Image 下拉框、然后选择 Project、出现8个方格图标、再选择向上箭头得到的：

图十一

Pressed Image下拉框做同样处理、选择那个灰色的向上箭头即可。

“小时”下方的 Save 按钮是保存设置的小时数值，命名为 buttonSaveHour，配置如下：

图十二

右半边跟“分钟”设置有关的几个控件需做类似配置，篇幅所限、此处略过。

最下边的 Clock 按钮是切换到另一个Screen的，命名为 buttonClock，配置如下：

图十三

第一个Screen的界面配置完毕，下面添加各个按钮的消息响应代码。先在 Touchgfx Designer 中配置“动作触发”对应的C++语言处理函数：

图十四

其他3个调整数值的箭头做类似配置，函数名称（即上图中的 Function Name 输入框）分别设置为：buttonHourDownClicked、 buttonMinuteUpClicked 和 buttonMinuteDownClicked。以及：

图十五

类似地配置“分钟”下方的 Save 按钮，唯一不同的是把 Function Name 改为 buttonSaveMinuteClicked。好了，下面跳转到程序代码部分，点击 TouchGFX Designer 界面右下角的 “Browse Code”，弹出生成的项目文件代码所在的目录，找到 Application.sln：

图十六

双击  Application.sln 启动VS，进入代码编辑界面。如果VS启动后弹出如下提示窗：

图十七

一定要点击 OK 按钮、免去之后VS因编译版本不同而提示错误。（Touchgfx Designer 4.00自动生成的VS项目使用的是较旧版本的编译工具链、造成与VS2003默认的编译工具链不匹配，会产生错误。这个错误是可以通过重新配置正确的编译器版本来修正的，此处就不详述了）

在VS中打开 Screen1View.hpp 文件，添加2个记录小时、分钟数值的变量 hour、minute，以及消息响应函数的声明：

图十八

在类实现文件 Screen1View.cpp 中，添加函数消息体：

图十九

编译运行一下，看看第一个 Screen 是否能正确显示：

图二十

用鼠标分别点击小时和分钟的增减箭头按钮，看看数值增减是否正确、24小时以及60分钟越界后显示是否正确。还好，小时和分钟显示都是正常的 ^_^ ！

这个例子内容稍多，只好拆成两部分来讲解，上半场先到这里，下半场请戳这里。