從TouchGFX 4.12.3開始

使用TouchGFX 4.12.3版時,可以通過引入自定義觸發器和操作從Designer中定義自己的交互組件。應用程序中的每個Screen都可以包含可在Designer中以及在代碼中調用的動作的集合(在C ++中,這些只是簡單的void方法),而自定義容器既可以包含動作的集合也可以包含觸發器的集合,您的應用程序可以做出反應(相當於C ++中的回調)。在本文中,我們將通過此功能來學習為我們提供創建更干凈和動態的TouchGFX應用程序的可能性。

使用自定義觸發器和動作

將自定義操作添加到屏幕

在本節中,我們將:

  • 使用背景框和按鈕創建一個新的應用程序
  • 向應用程序添加自定義操作
  • 按下按鈕時,使用自定義操作更改背景顏色

首先,創建一個尺寸為480x272的新空白應用程序,並Box為背景插入一個(將其命名為“ background”)和一個Button(將其命名為一個“ button”)。您應該具有類似於下圖的內容:

white_background_and_button.png

添加白色背景BoxButton

接下來,讓我們向中添加自定義操作Screen。您可以從的屬性標簽中Screen選擇,Screen然后按“ ACTIONS”組中的+按鈕來執行此操作。將動作命名為“ setBackgroundColor”,並對其進行類似“設置背景色”的描述。這會在Screen1ViewBase.hpp中生成一個名為setBackgroundColor()的虛擬方法,而Screen1ViewBase.cpp中將有一個空實現。

add_custom_action_to_screen.png

將新的自定義操作添加到 Screen

您可以通過在Screen1View.cpp文件中的用戶代碼中覆蓋此方法或通過Designer創建交互來向該方法添加功能。讓我們嘗試一下后者,方法是轉到屏幕的“交互”選項卡,並添加一個單擊按鈕時調用新方法的交互。 

calling_setbackgroundcolor_on_click.png

單擊按鈕時調用setBackgroundColor

現在,我們指定調用setBackgroundColor時實際發生的情況。這是通過將我們的新自定義操作用作另一個交互中的觸發器來完成的。讓我們從 在觸發“ setBackgroundColor被調用”Box使用“更改框顏色”操作簡單地將背景顏色設置為黑色開始。

Implementation_setbackgroundcolor_functionality.png 

實現自定義操作setBackgroundColor的功能

現在運行模擬器並按下按鈕;背景應該變成黑色。您已經成功創建了第一個自定義操作。

black_color_result.png

按下按鈕可使背景變黑

將值傳遞給自定義操作

在我們剛剛創建的應用程序的基礎上,本節將通過以下方式擴展自定義操作概念:

  • 向setBackgroundColor自定義操作添加參數
  • 將隨機顏色傳遞給setBackgroundColor
  • 按下按鈕時使用此按鈕將背景更改為隨機顏色

通過將值傳遞給setBackgroundColor自定義操作以使其更具動態性,使該應用程序更有趣。通過為每個交互按下x按鈕來刪除這兩個當前交互,因為我們將設置新的交互。轉到“屏幕”的“屬性”選項卡,然后選中“類型”復選框並輸入“ colortype”,這將是我們要傳遞給操作的參數的類型(colortype是用於描述顏色的內置TouchGFX類型)。無法命名參數,它將被命名為“值”。

add_type_to_action.png

設置自定義操作的參數

接下來,讓我們設置一個使用新添加的參數值的交互。我們通過使用觸發器“ setBackgroundColor被調用”和動作“執行C ++代碼”來實現。我們想使用我們的新參數來設置背景框的顏色,因此要執行的代碼應為:

background.setColor(value);
background.invalidate();

set_color_execute_code.png 

使用傳遞的值更改背景顏色

請注意,觸發器將顯示參數“名稱:顏色類型”的名稱和類型。

接下來,讓我們設置單擊按鈕時實際上調用setBackgroundColor的交互。添加另一個與觸發器“單擊按鈕”和動作“調用Screen1 setBackgroundColor”的交互,並注意value屬性還顯示了期望的類型。讓我們通過使用rand()stdlib.h 中的隨機方法將隨機顏色傳遞給setBackgroundColor,  以獲取0到255之間的三個隨機數,並使用這些隨機數指定顏色。要獲得訪問權限,rand() 我們需要將其包含在我們的應用程序中。對我們來說幸運的是,還可以從Designer內為屏幕和自定義容器提供您自己的包含項。轉到屏幕的屬性選項卡,然后在“ INCLUDES”組下輸入:

#include <stdlib.h>

include_stdlib.png

包括stdlib以獲得對rand()的訪問

接下來,對於value屬性,我們將輸入:

touchgfx::Color::getColorFrom24BitRGB(rand()%256, rand()%256, rand()%256)

pass_random_color_to_action.png

單擊按鈕時傳遞隨機顏色

現在運行模擬器並嘗試按幾次按鈕。您應該看到背景變為隨機顏色。

random_color_result_initial.png

單擊按鈕時產生的隨機顏色

在自定義容器中使用自定義觸發器

最后,自定義容器還可以定義自定義觸發器的集合,因此在本節中,我們將通過執行以下操作來擴展應用程序:

  • 創建一個名為ColorEmitter的新自定義容器
  • 向ColorEmitter添加一個名為“ colorChanged”的自定義觸發器
  • 按下按鈕時,使用colorChanged觸發器向應用程序發出隨機顏色的信號
  • 在屏幕上設置交互以偵聽colorChanged觸發器
  • 使用ColorEmitter發出的任何顏色來設置背景框的顏色

讓我們嘗試使用自定義觸發器在應用程序中發出一些事件的信號。讓我們嘗試使自定義容器將隨機顏色發送給我們Screen,而不是通過按鈕交互將隨機顏色傳遞給setBackgroundColor,然后Screen使用自定義容器傳遞的任何值。這最終應該是一個簡單的示例,其中不同的UI組件在應用程序中相互通信,以使組件更小,更可重用。

首先,讓我們創建一個新的自定義容器並將其命名為“ ColorEmitter”。插入一個按鈕,並將其稱為“按鈕”。您應該具有類似於下圖的內容:

color_emitter_custom_container.png

ColorEmitter定制容器

現在,讓我們做到這一點,以便每當單擊按鈕時,ColorEmitter都會向世界發出隨機的顏色。然后,任何人都可以決定偵聽此發出的光並將其用於某種顏色。在我們的例子中,我們只想通過使用顏色設置背景顏色來模仿以前的行為。

為了使自定義容器發出顏色,首先我們需要創建一個自定義觸發器。轉到自定義容器的屬性標簽,然后按“ TRIGGERS”組中的+按鈕。將觸發器命名為“ colorChanged”,給其描述“顏色已更改”,並給其類型“ colortype”。

add_custom_trigger_to_custom_container.png

將自定義觸發器添加到自定義容器

接下來,轉到自定義容器的“交互”選項卡並創建一個新的交互。使用觸發器“單擊按鈕”和操作“發出colorChanged”。現在,我們想傳達一種隨機的顏色,因此對value屬性使用之前的相同代碼:

touchgfx::Color::getColorFrom24BitRGB(rand()%256, rand()%256, rand()%256)

glowing_color_changed.png

發出自定義觸發器

但是,由於touchgfx::Color命名空間不會自動包含在我們的自定義容器中,因此最初無法使用。因此,像之前一樣,我們將為定制容器提供我們自己的包含。轉到定制容器的屬性選項卡,然后在“ INCLUDES”組下輸入:

#include <touchgfx/Color.hpp>

extra_includes.png

供應額外物品

現在,我們要用創建的新ColorEmitter自定義容器替換舊按鈕。選擇Screen1並在此處刪除按鈕。這會在使用此按鈕的交互中產生域錯誤,因此也請刪除該交互,因為我們將為ColorEmitter創建一個新的交互。現在,在Screen1上插入我們的ColorEmitter實例,然后在Screen1上創建一個新的交互。對於觸發器,您應該看到一個名為“ ColorEmitter colorChanged發生”的選項。選擇該選項,然后使用“ Call Screen1 setBackgroundColor”進行操作。現在,我們需要使用colorChanged發射中的值,該值將始終被命名為“值”(如本文前面所述)。因此,將“值”輸入到value屬性中。

glow_colorchanged_happens_interaction.png

設置交互以偵聽colorChanged自定義觸發器

現在運行模擬器,然后嘗試再次按下按鈕。應該出現相同的行為,並且背景變為隨機顏色。但是,現在,不僅僅是在中實現了所有功能Screen,我們還成功地在Screen和它的一些較小的可重用組件(即簡單的ColorEmitter)之間創建了自己的通信。

random_color_result_final.png

單擊按鈕時產生的隨機顏色

 

來源