[Qt QML] 如何在QML裡建立與C++物件的connections

上一篇我們介紹了在QML中如何呼叫C++ class functions,這一篇我們講解一下,反過來如何從C++呼叫QML裡的JavaScript functions。不過這裡我要特別強調,實作上我們確實可以從C++這一層來呼叫QML裡的function,但實際上,以架構上的角度,並不建議如此設計。因為以架構上來說,UI這一層使用QML撰寫的程式碼只會有UI的相關邏輯,譬如說畫面流程的轉換,它不應該被屬於bussiness logic的C++這一層來操控。那應該怎麼做呢?最好是採用Qt裡的signal and slot機制來達到需要的結果,也就是說,以bussiness logic的角度,它只要在某事件發生時將signal發出即可,至於要接收該signal的物件就自行將connection建立起來,然後定義對應的動作(slot function)。

OK,既然在設計上不建議從C++呼叫QML裡的JavaScript functions,所以我覺得也沒有必要介紹該實作方式了。所以接下來就給一個簡單的範例程式,敘述如何在QML裡建立的與C++物件的connections。基於上一篇文章的範例程式,我們不修改畫面排版和組成元素,僅將按鈕上的文字修改如下圖,當按下按鈕時,經過三秒後觸發C++物件發送signal,用此來模擬bussiness logic的事件發生。

Qt C++部分

首先,我們延續上一篇文章的程式碼,在上一篇文章中我們定義了一個C++ class function名為quitApp()讓QML這一層呼叫,為了符合這裡定義的功能,我們將其改名為triggerEvent(),其實作的部分就是在seconds秒後發出signal,這裡將signal名稱定為eventTriggered()

void Controller::triggerEvent(int seconds)
{
    QTimer::singleShot(1000 * seconds, this, SIGNAL(eventTriggered()));
}

Qt QML部分

在QML建立connection就相對簡單,可以直接採用QML中的Connections元件,因為我們要建立的對象物件是C++裡的物件,在上一篇文章中我們就已經將該物件設定為QML裡的一個property,名為ctrl,所以這邊直接將target的值設為ctrl,表示連結的物件對象。

而slot function的部分比較特別,並不像在C++建立的時候,可以指定自定義的function,在QML裡有一個固定邏輯且方便的命名方式,就是固定為on<Signal>這個名稱,以這邊為例,signal名為eventTriggered,那對應的slot function就是onEventTriggered。規則就是signal的第一個字元必須是小寫英文字母,那slot function就是把第一個單字變大寫,然後前面加上“on”。

    Connections {
        target: ctrl

        onEventTriggered: {
            mainWindow.color = "red";
        }
    }

從上面程式碼可以看到,在slot function裡的實作,是將視窗底色改為紅色。不過這邊要注意的是,如果你使用的Qt版本是5.15以上,在QML這邊的語法有些改變,會在執行時出現以下這個錯誤訊息,但不影響執行結果。

QML Connections: Implicitly defined onFoo properties in Connections are deprecated. Use this syntax instead: function onFoo(<arguments>) { ... }

從訊息中可以看到,原本之前的寫法已經不再使用了,雖然還是可以正常運行,不過建議還是依這訊息提示,將程式碼改為新的正確寫法,方法也很簡單,就是前面加個function就好。

    Connections {
        target: ctrl

        function onEventTriggered() {
            mainWindow.color = "red";
        }
    }

執行結果

Read more

聽說 AI 都能寫程式了,那我還需要學程式語言嗎?

自從ChatGPT橫空問世,人們在獲取知識的方式,發生很大的改變。很多既有的知識或疑問,可以不用在透過Google等搜尋引擎,搭配正確的關鍵字,從中找到相符的結果。 有了ChatGPT,只要用聊天的方式,用人類自然語言詢問,就能在短時間統整出邏輯清晰且條理分明的結果。不論是知識的學習、文章的統整、甚至程式的撰寫,都能透過AI工具快速產生具有一定水準的成品。 那,既然AI都能幫忙寫程式,而且也寫得不錯,我還需要學習程式語言嗎?答案是「肯定」的。 AI是輔助工具,不是程式設計師 沒錯!AI能寫出不錯的程式碼,但如果你本身不懂程式設計,你如何判斷它寫出的結果,是否符合你所想要的?對懂程式的人來說,他會比較清楚該如何對AI工具「下指令」,程式設計師可以利用AI工具的輔助,節省掉實際開發與除錯的時間。 再者,要寫出一個可以應用的程式,並非如此簡單。從一開始的需求分析,到架構設計、模組化元件、單元測試等等,絕對不是透過跟AI工具講三兩句話就能產出的。 AI是透過背後龐大資料與分析模型取產生我們想要的結果,意即,它做不到「無中生有」。相較於AI,人類的優勢在於「創造」。AI工具的出現與

By 三寶爸工程師

[程式教育] 該學哪一種程式語言才好?你必須先了解程式語言的7個應用領域

之前一再強調,學習程式語言不完全是為了將來當工程師而學的。但對初學者來說,在這麼多種程式語言中,究竟要選哪一種程式語言做學習呢? 在這之前,我們要先了解,程式語言的應用,大概有哪些領域。先看看自己對哪一個領域有興趣,不妨從該領域下手,學習一種該領域會用到的程式語言,並透過學習去完成一個小作品。 以下是依照應用領域的分類,列出該領域的幾個主要採用的程式語言。 一、網頁開發 (Web Development) 網頁(網站)開發是最普遍的一種應用,幾乎每個人每天會接觸到的,都脫離不了網頁開發的相關產品。在這裡我要特別說明,「開發」網站跟「架設」網站是兩回事,如果只是要「架設」網站,那是可以不需要學會寫程式就能做到的,因為有太多現成工具就可以達到「架設」網站這件事。關於「架設」網站的工具,我們有機會再另外寫一篇文章說明。但不論如何,網頁(網站)的基本運作原理還是要懂的。 網頁開發的部分,一般來說還區分「前端」和「後端」的開發與維護。

By 三寶爸工程師

[程式教育] 我未來不想當程式設計師,那還需要學程式語言嗎?

這個問題,最中肯又八股的答案當然是「不一定,但有學比較好」。如果問我,我肯定是建議你「最好要學」。 我換個問題,我未來不想當英文老師,那我需要學英文嗎?答案應該很清楚了! 你可能會說「不一樣啊!」請你仔細想想,學習「語言」跟「程式語言」的目的,我在 [程式教育] 學習程式語言的Why and How 這篇文章內有提到,兩者的目的一樣都在「溝通」,只是對象不同。 以目前AI發展的速度,也許不久的將來,「語言」也不需要學習了也說不定。屆時,「程式語言」的角色可能反而更吃重。並不是說你要學會用程式語言來開發軟體,而是透過學習程式語言吸取基本知識和延伸的能力。以下我列出五點,學習程式語言所能帶來的價值。 一、提升問題解決能力與創造力 學習程式設計可以培養邏輯思維和系統化解決問題的能力。這些技能在各種職業中都是非常寶貴的,無論是管理、行銷、工程還是醫療領域,遇到複雜問題時,能夠分解問題並系統地找到解決方案是非常重要的。 程式設計是一種創造性的活動,讓你能夠實現自己的想法和項目。

By 三寶爸工程師