實戰(zhàn)經(jīng)驗|TouchGFX控件附加ClickListener功能的方法介紹

TouchGFX 是專用于 STM32 的圖形界面設(shè)計軟件，可用來低成本開發(fā)優(yōu)秀的圖形界面，TouchGFX 現(xiàn)已變的越來越流行。為了幫助客戶更加深入地理解和使用 TouchGFX ，本文介紹了 TouchGFX Designer 中的 Mixin 功能，從基礎(chǔ)示例 Button Example 出發(fā)，為文本框控件添加 ClickListener (Mixin 功能中的一項)，并對源代碼進行簡單剖析。期望能幫助客戶更深入地理解 STM32 TouchGFX 的相關(guān)功能。

2.1. C++模板編程基礎(chǔ)

在示例介紹之前，讓我們先熟悉一下 C++模板編程的一些基礎(chǔ)知識。模板編程屬于通用編程的范疇，是為“尚未確定類型”所寫的函數(shù)或類。是可以產(chǎn)生更干凈、更快速、更精明的軟件的一個強力手段。?

模板的優(yōu)點：首先模板與某種特定類型無關(guān)，代碼可重用性好；其次模板與平臺無關(guān)，代碼移植性好；另外模板代碼在編譯時才進行解釋，在編譯時確定檢查數(shù)據(jù)類型，相比運行時檢查，類型的安全性高。?

模板的缺點：一是代碼易讀性不是很好，調(diào)試不便；二是用戶工程代碼中需要包含模板代碼（非二進制庫），編譯的時間較長，二進制擴展性差；另外有可能會造成二進制代碼膨脹（編譯后二進制代碼臃腫），我們在設(shè)計模板時，需要盡可能將 C++模板中與參數(shù)?關(guān)的代碼分離出來。

2.2. TouchGFX Mixin 功能簡介

模板一般分為函數(shù)模板和類模板。函數(shù)模板我們這里不做贅述，重點關(guān)注 TouchGFX Mixins 類模板。TouchGFX 的 Mixins 類模板用于拓展控件的功能，目前 TouchGFX v4.20.0 中有四個 Mixin 功能，分別是 Draggable、ClickListener、FadeAnimator 和MoveAnimator，分別為控件增添相關(guān)功能。如圖 1 （TouchGFX Designer Mixins 功能）所示，本文主要針對 ClickListener 做具體介紹。

圖1. TouchGFX Designer Mixins 功能

2.3. 基于 TouchGFX Button 例程使用 ClickListener 功能

2.3.1. TouchGFX 例程的代碼生成

運行 TouchGFX Designer，選擇 Examples；通過 Select Board Setup 選擇STM32H735G DK 板；從眾多例程中選擇“Button Example”例程；將 Application name 改為 Button_Example，如下圖圖 2，然后點擊 Create 創(chuàng)建工程。

圖2.TouchGFX Designer 生成 Button Example 例程

進入 TouchGFX Designer 主界面后，會看到畫布上有兩個按鈕和一個文本框，我們對界面不做更改，直接選擇 Designer 右下角 (Run Target)生成代碼。該操作將會復(fù)制TouchGFX 框架文件，生成配置文件、makefile、代碼及資源文件（images、fonts、texts），然后編譯鏈接、燒錄目標(biāo)板并運行。程序運行起來后，您可以熟悉一下該按鈕例程應(yīng)用。下面我們就針對該例程，為界面上的計數(shù)文本框控件注入 ClickListener 功能，應(yīng)用實現(xiàn)“當(dāng)點擊計數(shù)文本框時，計數(shù)數(shù)字增加 2”的功能。

2.3.2. 為計數(shù)文本框控件添加 ClickListener 功能

我們在 TouchGFX Designer 主屏界面，點擊 countTxt 文本框，然后在右側(cè)屬性欄中找到 Mixins，勾選 ClickListener，如圖 3 所示。然后重新生成代碼。

圖3.TouchGFX Designer, 計數(shù)文本框 mixin ClickListener 功能

我們可以使用 VS code 編輯代碼，或使用其它如 STM32CubeIDE 等工具編輯代碼。打開 MainView.hpp，為計數(shù)文本框，添加代碼如下（黃底色部分）：

然后我們轉(zhuǎn)到 MainView.cpp 文件，首先將 txtClickedCallback 對象與 MainView的 cntTextClickHandler（文本框點擊處理函數(shù)）綁定，這是在 MainView 類的構(gòu)造函數(shù)中初始化列表中實現(xiàn)的。將 txtClickedCallback 加入初始化列表中，參數(shù)使用指向MainView 中 cntTextClickHandler 函數(shù)的函數(shù)指針。我們還需要修改 setupScreen 函數(shù)，在這里為 countTxt 添加 ClickAction，參數(shù)使用 txtClickedCallback, 以實現(xiàn)在主屏界面創(chuàng)建時，將 countTxt 文本框的點擊事件與 txtClickedCallback 對象綁定在一起。另外我們還需要實現(xiàn) cntTextClickHandler，具體代碼如下：

修改完成后，保存，編譯，運行。您將會發(fā)現(xiàn)當(dāng)每次點擊 countTxt 文本框時，文本框計數(shù)會增加 2。至此，我們已經(jīng)實現(xiàn)了為文本框控件加入 ClickListener 的功能。大家可以看到，在 TouchGFX 應(yīng)用中使用 ClickListener 類模板做開發(fā)是十分便捷的，代碼量也較小。下面我們對代碼進一步解讀。

2.3.3. ClickListener 模板代碼

ClickListener 類模板是 TouchGFX 框架的一部分，封裝在 ClickListener.hpp 中，代碼如下：

ClickListener 是一個標(biāo)準(zhǔn)的類模板。所謂類模板，就是“包含一個或多個尚未確定類型”的類。必須將具體類型當(dāng)作模板參數(shù)傳入，才可使用。當(dāng)傳入模板參數(shù)后，該類模板便以你所指定的參數(shù)類型，由編譯器進行實例化。將具體類型傳入到類模板進行實例化，我們會得到一個新的 ClickListener 類，轉(zhuǎn)變?yōu)閺膫魅雲(yún)?shù)（某待定的類）的派生類。?

?在生成的代碼 MainViewBase.hpp 中（MainView 是 MainViewBase 的派生類），我們可以找到 countTxt 的聲明：?

touchgfx::ClickListener< touchgfx::TextAreaWithOneWildcard > countTxt;

這里，該模板示例類是從 TextAreaWithOneWildcard 類（即原計數(shù)文本框類型）繼承下來的。如果您選擇的不是為文本框增加 ClickListener 功能，而是其它控件，則新的ClickListener 實例類將派生自您所用的控件。本例中的繼承關(guān)系如下：

該 ClickListener 實例類是 TextAreaWithOneWildcard 類的派生類，不僅僅繼承了TextAreaWithOneWildcard 的屬性與方法，另外還添加了一個 GenericCallback 指針變量clickAction，該指針由附加的 setClickAction 方法賦值。由另一個方法 handleClickEvent使用，在 handleClickEvent 中在響應(yīng) Click 事件時，會調(diào)用該 clickAction。（關(guān)于callback 類的使用，我們這里不做贅述，如果您需要進一步了解，請參考 TouchGFX 相關(guān)文檔）。

2.3.4. ClickListener 模板應(yīng)用

我們清楚了 ClickListener 類模板的原理后，回頭來看例子中的 ClickListener 的應(yīng)用代碼，就會發(fā)現(xiàn)其邏輯十分清晰。?

首先在 MainView.hpp 中聲明了一個 Callback txtClickedCallback, 和一個事件處理函數(shù) cntTextClickHandler。在 MainView.cpp 中初始化該 txtClickedCallback, 將其與cntTextClickHandler 關(guān)聯(lián)，即實現(xiàn)當(dāng)調(diào)用該 Callback 時，會轉(zhuǎn)到 cntTextClickHandler 進行處理。?

再在 setupScreen 函數(shù)中調(diào)用 ClickListener 類模板接口 setClickAction 將txtClickedCallback 的地址賦給 ClickListener 實例化類的 clickAction 指針。則ClickListener 實例化類（這里即 TextAreaWithOneWildcard 類的派生類）在處理ClickEvent 時就會執(zhí)行到 txtClickedCallback 關(guān)聯(lián)的處理函數(shù) cntTextClickHandler

最后需要實現(xiàn) MainView 類中的 Click 事件處理函數(shù) cntTextClickHandler，這里的實現(xiàn)為：當(dāng) Click 事件類型為“Click 按鍵釋放”時調(diào)用 increaseValue 函數(shù)兩次。

TouchGFX 是 STM32 專用的界面設(shè)計工具，功能強大且易用。本文選擇了 Mixins 功能進行簡介，從基礎(chǔ)示例 Button Example 出發(fā)，動手添加 ClickListener (Mixin) 功能，并從源代碼的角度淺析了 ClickListener 類模板的使用，助力客戶更深入地理解 STM32 TouchGFX。