通过TouchGFX创建事件逻辑函数
TouchGFX Designer中的交互由触发器和动作组成：
触发器：是由用户点击或者进行其他操作后产生的信号。
动作：由触发器触发的相应的事件逻辑。
要添加interaction ，请转到任何屏幕或自定义容器的“interaction”选项卡，然后按下标有“Add Interaction”的蓝色按钮，如下图所示。



  ~) q) r0 O* a$ ~2 f& \# T! C  r添加后界面样子如下：

4 c- i4 `: F) x3 L
" `+ o: d& `+ ^
Trigger中用于添加触发器类型,例如：按钮点击事件。Choose clicked source 中添加被点击的是哪一个按钮，这里显示的是“button1”。
# b0 J' u+ ~+ i2 ^3 C  h4 v+ ]Action：action的操作分为了两种，第一种是作为基础窗口的动作：
( n8 {7 y& B# E2 }/ n; w' d该种动作包括：
+ A5 Q. [- I& O' H& w

, v$ h9 R' c  _4 w2 ?& D9 c7 a7 n1 h
第二种是控件的属性提供的动作：


+ n- |3 z: n- P7 L( c: R+ S
' K( H' K7 g3 y在上图的底部存在Can trigger another interaction的复选框，它的作用是连续动作，当一次触发事件后多次响应其他的事件。

Base类中的秘密
在通过TouchGFX Designer创建完界面，并在界面中添加完相应的触发器后，生成的代码中将会存在相应的界面基类，这类代码是由TouchGFX Designer自动生成的，所以不建议更改，在第一章也和大家说过，下面我们探索下这个类中有些什么：
我们以我写的一个例子做讲解，该demo源码在第一张中可下载。看下图


# t& w) i! b+ Q  [% ^5 n
5 T3 h- P4 u; M5 U# N
我们以MainWindow窗口作为例子讲解窗口基类中有哪些东西，首先窗口的名字叫做“MainWindow”，其中包含和三个按钮及一个text area还有一张背景图片Backimage。放置的顺序不同在界面上体现的层次感不同，如果将背景图片放在最上层的话其他按钮都将被盖在下面。其次看右侧的interaction，在其中我添加了三个逻辑，类型都是按钮的点击事件对应的是三个按钮，相应的功能是“Call new virtual function”，在下方写了函数的名字。注意函数名字和控件的名字，此时，点击Generate Code 按钮后在VS中打开工程。可以看到在头文件和源文件中generated/gui_generated文件夹下有mainwindow_screen文件夹存在，在该文件夹下将存在该界面的基类。如下图：


7 c& S" |/ X& n' D) q2 f" I, Y
我们看下该类中的头文件：

1. /*********************************************************************************/
   9 v9 {, r7 h% ~  D1 M# [
2. /********** THIS FILE IS GENERATED BY TOUCHGFX DESIGNER, DO NOT MODIFY ***********/
   " h9 C9 {) ?' }( m9 [, M( M
3. /*********************************************************************************/
   
4. #ifndef MAINWINDOWVIEWBASE_HPP
   
5. #define MAINWINDOWVIEWBASE_HPP
   , V4 F: D4 A- g4 {. A# j
6. 
   8 ?0 O& t: q# F: O5 u" W: @& s, J
7. #include <gui/common/FrontendApplication.hpp>
   1 B! `% i: z" ]  q. D6 S/ T
8. #include <mvp/View.hpp>
   - B+ g0 O1 B+ E) Y0 {
9. #include <gui/mainwindow_screen/MainWindowPresenter.hpp>
   
10. #include <touchgfx/widgets/ScalableImage.hpp>
    / t4 k' \; e' P" j* b
11. #include <touchgfx/widgets/ButtonWithLabel.hpp>
    0 q0 a& _% n$ H% v8 M+ W* m
12. #include <touchgfx/widgets/TextAreaWithWildcard.hpp>
    . b4 i* \! R8 |/ f! _
13. #include <touchgfx/widgets/Button.hpp>
    
14. 
    1 i1 V5 x% v' F9 n
15. class MainWindowViewBase : public touchgfx::View<MainWindowPresenter>
    
16. {
    
17. public:
    / `* g0 f! j5 y/ k
18.     MainWindowViewBase();
    
19.     virtual ~MainWindowViewBase() {}
    
20.     virtual void setupScreen();  窗口创建时响应的函数
    
21. 
    ( z. w2 A: Z$ x7 t5 m7 A0 n- C  b
22.     /*
    4 x: C5 |; d9 S1 s, H7 d% ~
23.      * Virtual Action Handlers
    
24.      */
    ) u7 i3 K5 {/ H* }: p/ Z' ~" F
25.     virtual void setBackImageIMG() 这个就是在TouchGFX Designer中function name 中填的名字他就是Designer产生的关联性。
    $ l6 M% r7 i! p. G
26.     {
    * K! S1 `: z$ ~2 U% L% I! M% z
27.         // Override and implement this function in MainWindow
    & B$ {& s8 [: ^" j
28.     }
    % T9 l/ B. D$ s6 o( d
29. 
    
30. protected:
    
31.     FrontendApplication& application() {
    - V5 D+ G3 B/ z
32.         return *static_cast<FrontendApplication*>(touchgfx::Application::getInstance());
    % F) Y1 E# A/ K$ a1 ]
33.     }
    2 ^+ Y* t' J1 J
34. 
    ( u) C' X9 w5 }- d6 j/ z
35.     /*
    
36.      * Member Declarations
    ) N' e$ e2 }- Z* \4 S
37.      */
    
38.      这部分放的就是界面上控件的名字，也就是说如果想要修改控件的动作或者状态，除了TouchGFX Designer中修改外，也可以通过代码调用定义修改。
    
39.     touchgfx::ScalableImage BackImage;  
    $ v1 |! c3 ]2 Q" p. p! V$ C
40.     touchgfx::ButtonWithLabel ChangeImage;
    
41.     touchgfx::TextAreaWithOneWildcard textimageid;
    4 n4 [6 C8 s2 {
42.     touchgfx::Button NextView;
    ! ^9 R4 J* d- G5 g
43.     touchgfx::Button ChartARTViewButton;
    ; h9 S& ]* Q( q- ?( S
44. 
    
45.     /*
    
46.      * Wildcard Buffers
    2 m8 f; E6 l( k+ w: Q& p, p7 h" l
47.      */
    
48.     static const uint16_t TEXTIMAGEID_SIZE = 3;
    
49.     touchgfx::Unicode::UnicodeChar textimageidBuffer[TEXTIMAGEID_SIZE];
    
50. 
    
51. private:
    : I( q6 i/ b/ J# x. y
52.         这个部分就是 通过TouchGFX Designer中interaction响应的逻辑，具体的一会在cpp文件中将会看见。
    1 L5 h7 V1 [- v% I8 I$ t9 C
53.     /*
    
54.      * Callback Declarations
    ( y! F  Q8 ]5 `0 S- a* p
55.      */
    
56.     touchgfx::Callback<MainWindowViewBase, const touchgfx::AbstractButton&> buttonCallback;
    
57. 
    ! w. T- S3 h9 L' X2 A. h
58.     /*
    - c5 Z3 j2 O/ s) A# S
59.      * Callback Handler Declarations
    7 B( q0 Y3 C/ W" n
60.      */
    
61.     void buttonCallbackHandler(const touchgfx::AbstractButton& src);
    ' |5 R" m8 _- i6 \
62. 
    
63. };
    # x0 X1 B/ }, E/ K) d
64. 
    
65. #endif // MAINWINDOWVIEWBASE_HPP
    : R  t# W4 Q0 m! E  |  p& v! q
66. 
    

复制代码

6 R9 `, ~3 h, x9 H5 W到这里MainWindowViewBase.hpp文件参观完了，可以接下来参观cpp文件了。
) P+ z: ]* u/ V/ b, o

1. /*********************************************************************************/
   8 l/ d' d; ~; |; f
2. /********** THIS FILE IS GENERATED BY TOUCHGFX DESIGNER, DO NOT MODIFY ***********/
   ) d/ \9 i/ W0 ~: |$ ?6 o. q: B
3. /*********************************************************************************/
     l2 H  D# b9 N; w
4. #include <gui_generated/mainwindow_screen/MainWindowViewBase.hpp>
   
5. #include "BitmapDatabase.hpp"
   
6. #include <texts/TextKeysAndLanguages.hpp>
   
7. #include <touchgfx/Color.hpp>
   
8. 
   
9. MainWindowViewBase::MainWindowViewBase() :
   
10.     buttonCallback(this, &MainWindowViewBase::buttonCallbackHandler)
    
11. {
    6 N+ q. }- t: f6 @2 k( s
12.         在构造函数中可以看见我们添加的控件在cpp文件中体现的样子包括设置图片或者设置位置
    
13.     BackImage.setBitmap(touchgfx::Bitmap(BITMAP_IMG1_ID));
    
14.     BackImage.setPosition(0, 0, 800, 480);
    
15.     BackImage.setScalingAlgorithm(touchgfx::ScalableImage::NEAREST_NEIGHBOR);
    
16. 
    . F8 N3 s+ [% ^9 l
17.     ChangeImage.setXY(315, 0);
    ' }2 ?  P, g# h* J+ Z
18.     ChangeImage.setBitmaps(touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_EDGE_SMALL_ID), touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_EDGE_SMALL_PRESSED_ID));
    
19.     ChangeImage.setLabelText(touchgfx::TypedText(T_SINGLEUSEID1));
    
20.     ChangeImage.setLabelColor(touchgfx::Color::getColorFrom24BitRGB(255, 255, 255));
    ! T) D7 k* y; k+ k2 B
21.     ChangeImage.setLabelColorPressed(touchgfx::Color::getColorFrom24BitRGB(255, 255, 255));
    ! l8 I7 ]( ^* @' o2 E3 g/ p
22.     ChangeImage.setAction(buttonCallback);这里可以看见添加action方法
    
23. 
    + b$ e2 @' k! S+ U" z4 W
24.     textimageid.setPosition(394, 68, 26, 25);
    : X3 c0 u" f1 w! O+ [5 Q! x
25.     textimageid.setColor(touchgfx::Color::getColorFrom24BitRGB(255, 0, 0));
    
26.     textimageid.setLinespacing(0);
    
27.     Unicode::snprintf(textimageidBuffer, TEXTIMAGEID_SIZE, "%s", touchgfx::TypedText(T_SINGLEUSEID3).getText());
    " G" F5 {2 |" `& h4 o
28.     textimageid.setWildcard(textimageidBuffer);
    + B+ ~7 o* g- m7 f; ?
29.     textimageid.setTypedText(touchgfx::TypedText(T_SINGLEUSEID2));
    
30. 
    
31.     NextView.setXY(377, 135);
    
32.     NextView.setBitmaps(touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_ICON_BUTTON_ID), touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_ICON_BUTTON_PRESSED_ID));
    % @' \2 A& V/ ]: Y8 G% R6 g) B
33.     NextView.setAction(buttonCallback);
    
34. 
    9 z( G. P  N, e& c" N5 g$ K6 d
35.     ChartARTViewButton.setXY(377, 230);
    ( a% o8 {0 r5 u2 [* u
36.     ChartARTViewButton.setBitmaps(touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_ICON_BUTTON_ID), touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_ICON_BUTTON_PRESSED_ID));
    * B. W7 M7 u  k7 B
37.     ChartARTViewButton.setAction(buttonCallback);页面切换的action函数
    0 U' X% W: Z! C6 l5 }
38. 在窗口上添加控件方法
    
39.     add(BackImage);
    
40.     add(ChangeImage);
    % D# s; Z) ]0 H; S
41.     add(textimageid);
    
42.     add(NextView);
    2 c  F" z! ?# q; R# B
43.     add(ChartARTViewButton);
    9 L" G( _( J; W# N/ b
44. }
    
45. 
    
46. void MainWindowViewBase::setupScreen()
    
47. {
    4 e: e! t0 R% q
48. 
    
49. }
    
50. 
    
51. void MainWindowViewBase::buttonCallbackHandler(const touchgfx::AbstractButton& src)
    ) ?% F1 ^( K0 E' _$ M( q
52. {
    ( d, U! B* d( a/ S
53.     if (&src == &ChangeImage)
    1 g! W5 f- n& ?4 `/ `
54.     {
    
55.         //Interaction1
    % [- p3 x! U& t8 Q) \9 k
56.         //When ChangeImage clicked call virtual function
    
57.         //Call setBackImageIMG
    
58.         setBackImageIMG();这里可以看见是通过callback函数响应的setBackImageIMG函数，由此可以知道以此方法我们可以自己在界面上添加控件，而控件响应的函数也可以这样添加。注意要是自定义添加不要在base文件中添加要在界面类的函数中添加。
    
59.     }
    
60.     else if (&src == &NextView)
    
61.     {
    
62.         //Interaction2
    
63.         //When NextView clicked change screen to TabView
    # H9 R2 Q- \: E8 a+ r
64.         //Go to TabView with screen transition towards East
    2 s6 n4 B5 {" \: {) W% F" t' O9 t
65.         application().gotoTabViewScreenSlideTransitionEast();
    
66.     }
    
67.     else if (&src == &ChartARTViewButton)
    * {% K* k3 Q0 F: V
68.     {
    6 F* K- a% q- a# h. z, n
69.         //Interaction3
    8 s! n% l! F0 E4 l
70.         //When ChartARTViewButton clicked change screen to ChartView
    1 e( ]  @  c& ]1 G) u  v) A4 i
71.         //Go to ChartView with screen transition towards East
    - l3 \) d: C6 g+ V2 o
72.         application().gotoChartViewScreenSlideTransitionEast();
    . m# ]0 C$ V- ]4 I% n' l
73.     }
    
74. }
    
75. 
    

复制代码

由此可以看到创建的界面后，base文件中的状态。下面会给大家展示一下view文件中的内容。

3 ?& m& g2 M8 K
View类的作用
* p$ i+ {4 @( g- T* c3 pview中的内容是可以进行修改的，可以根据需要添加自己的使用方法。
' J, {9 a/ u& u9 N下面我们再看一下MainWindowView.hpp文件。
7 P4 V2 e- S# {9 l

1. #ifndef MAINWINDOWVIEW_HPP
   . p+ z9 S) _9 Q5 l
2. #define MAINWINDOWVIEW_HPP
   * b! s+ |8 K) [8 e4 w
3. 
   ( [$ r; ?: E; D% s
4. #include <gui_generated/mainwindow_screen/MainWindowViewBase.hpp>
   . l9 O4 M! _( G$ g  Q
5. #include <gui/mainwindow_screen/MainWindowPresenter.hpp>
   
6. 
   
7. 
   4 }# r4 L; V" L7 u
8. class MainWindowView : public MainWindowViewBase这里看见这个类是继承上方的基类MainWindowViewBase
   - x0 |2 \, ]; n3 U0 A
9. {
   ( {# [5 J1 H; _* w7 g4 M  O
10. public:
    
11.     MainWindowView();
    
12.     virtual ~MainWindowView() {}
    
13.     virtual void setupScreen(); 正常创建时，到此处就没有了。
    
14.     下方的文件是手动添加的，如果在界面上创建了function函数，
    
15.     则在该文件中添加一样的虚函数，具体在上方的base中能看出来。
    
16.     virtual void tearDownScreen();
    + z! Z4 W" I7 u# C" `0 }3 W0 a& x8 `; l
17.     virtual void setBackImageIMG();
    & L! x9 ?; V1 F/ O& E. |# \: R
18. protected:
    # B5 w- A3 i1 a" [, x% ~  R
19. 
    
20. };
    
21. 
    
22. #endif // MAINWINDOWVIEW_HPP
    ! J5 [$ N7 b  @7 C4 h/ U4 {

复制代码

( A' W0 J, z% T/ h3 m& O( @. M, {8 i此时就可以在cpp文件中添加相应的函数实现了。

按键事件响应逻辑
好了说了这么多，我来给大家总结一下吧，通过TouchGFX Designer创建一个界面，在界面中可拖拽控件，在TouchGFX Designer下也可添加相应的action函数，在添加完函数后，要在view文件中加入相应的虚函数。
除此之外，还可以模仿base文件的方法在界面类中添加相应的button及button的action文件。此章给大家介绍了创建事件的注意示项。
————————————————
' J9 m( i. ^9 b- r& I$ Z版权声明：空闲的程序员
8 N1 D3 D# B% V

0 ?( F/ y) `: f3 a  Z+ C' v