TouchGFX使用教程（二）

通過TouchGFX創建事件邏輯函數

TouchGFX Designer中的交互由觸發器和動作組成：
觸發器：是由用戶點擊或者進行其他操作後產生的信號。
動作：由觸發器觸發的相應的事件邏輯。
要添加interaction ，請轉到任何屏幕或自定義容器的“interaction”選項卡，然後按下標有“Add Interaction”的藍色按鈕，如下圖所示。

添加後界面樣子如下：

Trigger中用於添加觸發器類型,例如：按鈕點擊事件。Choose clicked source 中添加被點擊的是哪一個按鈕，這裏顯示的是“button1”。
Action：action的操作分爲了兩種，第一種是作爲基礎窗口的動作：
該種動作包括：

提供的內容	解釋
Call new virtual function	調用新的虛函數
Change screen	切換畫面
Execute C++ code	執行C ++代碼
Wait for	等待

第二種是控件的屬性提供的動作：

提供的內容	解釋
Move widget	移動控件
Fade widget	淡入淡出控件
Hide widget	隱藏控件
Show widget	顯示控件

在上圖的底部存在Can trigger another interaction的複選框，它的作用是連續動作，當一次觸發事件後多次響應其他的事件。

Base類中的祕密

在通過TouchGFX Designer創建完界面，並在界面中添加完相應的觸發器後，生成的代碼中將會存在相應的界面基類，這類代碼是由TouchGFX Designer自動生成的，所以不建議更改，在第一章也和大家說過，下面我們探索下這個類中有些什麼：
我們以我寫的一個例子做講解，該demo源碼在第一張中可下載。看下圖
我們以MainWindow窗口作爲例子講解窗口基類中有哪些東西，首先窗口的名字叫做“MainWindow”，其中包含和三個按鈕及一個text area還有一張背景圖片Backimage。放置的順序不同在界面上體現的層次感不同，如果將背景圖片放在最上層的話其他按鈕都將被蓋在下面。其次看右側的interaction，在其中我添加了三個邏輯，類型都是按鈕的點擊事件對應的是三個按鈕，相應的功能是“Call new virtual function”，在下方寫了函數的名字。注意函數名字和控件的名字，此時，點擊Generate Code 按鈕後在VS中打開工程。可以看到在頭文件和源文件中generated/gui_generated文件夾下有mainwindow_screen文件夾存在，在該文件夾下將存在該界面的基類。如下圖：

我們看下該類中的頭文件：

/*********************************************************************************/
/********** THIS FILE IS GENERATED BY TOUCHGFX DESIGNER, DO NOT MODIFY ***********/
/*********************************************************************************/
#ifndef MAINWINDOWVIEWBASE_HPP
#define MAINWINDOWVIEWBASE_HPP

#include <gui/common/FrontendApplication.hpp>
#include <mvp/View.hpp>
#include <gui/mainwindow_screen/MainWindowPresenter.hpp>
#include <touchgfx/widgets/ScalableImage.hpp>
#include <touchgfx/widgets/ButtonWithLabel.hpp>
#include <touchgfx/widgets/TextAreaWithWildcard.hpp>
#include <touchgfx/widgets/Button.hpp>

class MainWindowViewBase : public touchgfx::View<MainWindowPresenter>
{
public:
    MainWindowViewBase();
    virtual ~MainWindowViewBase() {}
    virtual void setupScreen();  窗口創建時響應的函數

    /*
     * Virtual Action Handlers
     */
    virtual void setBackImageIMG() 這個就是在TouchGFX Designer中function name 中填的名字他就是Designer產生的關聯性。
    {
        // Override and implement this function in MainWindow
    }

protected:
    FrontendApplication& application() {
        return *static_cast<FrontendApplication*>(touchgfx::Application::getInstance());
    }

    /*
     * Member Declarations
     */
     這部分放的就是界面上控件的名字，也就是說如果想要修改控件的動作或者狀態，除了TouchGFX Designer中修改外，也可以通過代碼調用定義修改。
    touchgfx::ScalableImage BackImage;  
    touchgfx::ButtonWithLabel ChangeImage;
    touchgfx::TextAreaWithOneWildcard textimageid;
    touchgfx::Button NextView;
    touchgfx::Button ChartARTViewButton;

    /*
     * Wildcard Buffers
     */
    static const uint16_t TEXTIMAGEID_SIZE = 3;
    touchgfx::Unicode::UnicodeChar textimageidBuffer[TEXTIMAGEID_SIZE];

private:
	這個部分就是 通過TouchGFX Designer中interaction響應的邏輯，具體的一會在cpp文件中將會看見。
    /*
     * Callback Declarations
     */
    touchgfx::Callback<MainWindowViewBase, const touchgfx::AbstractButton&> buttonCallback;

    /*
     * Callback Handler Declarations
     */
    void buttonCallbackHandler(const touchgfx::AbstractButton& src);

};

#endif // MAINWINDOWVIEWBASE_HPP

到這裏MainWindowViewBase.hpp文件參觀完了，可以接下來參觀cpp文件了。

/*********************************************************************************/
/********** THIS FILE IS GENERATED BY TOUCHGFX DESIGNER, DO NOT MODIFY ***********/
/*********************************************************************************/
#include <gui_generated/mainwindow_screen/MainWindowViewBase.hpp>
#include "BitmapDatabase.hpp"
#include <texts/TextKeysAndLanguages.hpp>
#include <touchgfx/Color.hpp>

MainWindowViewBase::MainWindowViewBase() :
    buttonCallback(this, &MainWindowViewBase::buttonCallbackHandler)
{
	在構造函數中可以看見我們添加的控件在cpp文件中體現的樣子包括設置圖片或者設置位置
    BackImage.setBitmap(touchgfx::Bitmap(BITMAP_IMG1_ID));
    BackImage.setPosition(0, 0, 800, 480);
    BackImage.setScalingAlgorithm(touchgfx::ScalableImage::NEAREST_NEIGHBOR);

    ChangeImage.setXY(315, 0);
    ChangeImage.setBitmaps(touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_EDGE_SMALL_ID), touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_EDGE_SMALL_PRESSED_ID));
    ChangeImage.setLabelText(touchgfx::TypedText(T_SINGLEUSEID1));
    ChangeImage.setLabelColor(touchgfx::Color::getColorFrom24BitRGB(255, 255, 255));
    ChangeImage.setLabelColorPressed(touchgfx::Color::getColorFrom24BitRGB(255, 255, 255));
    ChangeImage.setAction(buttonCallback);這裏可以看見添加action方法

    textimageid.setPosition(394, 68, 26, 25);
    textimageid.setColor(touchgfx::Color::getColorFrom24BitRGB(255, 0, 0));
    textimageid.setLinespacing(0);
    Unicode::snprintf(textimageidBuffer, TEXTIMAGEID_SIZE, "%s", touchgfx::TypedText(T_SINGLEUSEID3).getText());
    textimageid.setWildcard(textimageidBuffer);
    textimageid.setTypedText(touchgfx::TypedText(T_SINGLEUSEID2));

    NextView.setXY(377, 135);
    NextView.setBitmaps(touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_ICON_BUTTON_ID), touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_ICON_BUTTON_PRESSED_ID));
    NextView.setAction(buttonCallback);

    ChartARTViewButton.setXY(377, 230);
    ChartARTViewButton.setBitmaps(touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_ICON_BUTTON_ID), touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_ICON_BUTTON_PRESSED_ID));
    ChartARTViewButton.setAction(buttonCallback);頁面切換的action函數
在窗口上添加控件方法
    add(BackImage);
    add(ChangeImage);
    add(textimageid);
    add(NextView);
    add(ChartARTViewButton);
}

void MainWindowViewBase::setupScreen()
{

}

void MainWindowViewBase::buttonCallbackHandler(const touchgfx::AbstractButton& src)
{
    if (&src == &ChangeImage)
    {
        //Interaction1
        //When ChangeImage clicked call virtual function
        //Call setBackImageIMG
        setBackImageIMG();這裏可以看見是通過callback函數響應的setBackImageIMG函數，由此可以知道以此方法我們可以自己在界面上添加控件，而控件響應的函數也可以這樣添加。注意要是自定義添加不要在base文件中添加要在界面類的函數中添加。
    }
    else if (&src == &NextView)
    {
        //Interaction2
        //When NextView clicked change screen to TabView
        //Go to TabView with screen transition towards East
        application().gotoTabViewScreenSlideTransitionEast();
    }
    else if (&src == &ChartARTViewButton)
    {
        //Interaction3
        //When ChartARTViewButton clicked change screen to ChartView
        //Go to ChartView with screen transition towards East
        application().gotoChartViewScreenSlideTransitionEast();
    }
}

由此可以看到創建的界面後，base文件中的狀態。下面會給大家展示一下view文件中的內容。

View類的作用

view中的內容是可以進行修改的，可以根據需要添加自己的使用方法。
下面我們再看一下MainWindowView.hpp文件。

#ifndef MAINWINDOWVIEW_HPP
#define MAINWINDOWVIEW_HPP

#include <gui_generated/mainwindow_screen/MainWindowViewBase.hpp>
#include <gui/mainwindow_screen/MainWindowPresenter.hpp>


class MainWindowView : public MainWindowViewBase這裏看見這個類是繼承上方的基類MainWindowViewBase
{
public:
    MainWindowView();
    virtual ~MainWindowView() {}
    virtual void setupScreen(); 正常創建時，到此處就沒有了。
    下方的文件是手動添加的，如果在界面上創建了function函數，
    則在該文件中添加一樣的虛函數，具體在上方的base中能看出來。
    virtual void tearDownScreen();
    virtual void setBackImageIMG();
protected:

};

#endif // MAINWINDOWVIEW_HPP

此時就可以在cpp文件中添加相應的函數實現了。

按鍵事件響應邏輯

好了說了這麼多，我來給大家總結一下吧，通過TouchGFX Designer創建一個界面，在界面中可拖拽控件，在TouchGFX Designer下也可添加相應的action函數，在添加完函數後，要在view文件中加入相應的虛函數。
除此之外，還可以模仿base文件的方法在界面類中添加相應的button及button的action文件。此章給大家介紹了創建事件的注意示項。

TouchGFX使用教程（二）

TouchGFX使用教程（二）

通過TouchGFX創建事件邏輯函數

Base類中的祕密

View類的作用

按鍵事件響應邏輯

Spring Cloud 部署時如何使用 Kubernetes 作爲註冊中心和配置中心

TouchGFX使用教程（五）

TouchGFX使用教程（四）

TouchGFX使用教程（三）

TouchGFX使用教程（二）

TouchGFX使用教程

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結