使用HTML擴(kuò)展Qt控件

邵 剛 貴 恒 胡楊超

中國(guó)船舶重工集團(tuán)公司第七一三研究所 河南 鄭州 450001

0 引言

在工業(yè)控制系統(tǒng)中，經(jīng)常需要通過(guò)上位機(jī)的圖形用戶界面（GUI）來(lái)和下位機(jī)進(jìn)行一些必要的交互[1]。隨著工業(yè)控制系統(tǒng)不斷的發(fā)展，用戶對(duì)工業(yè)控制系統(tǒng)的圖形用戶界面的需求也不斷提高。為了滿足特定環(huán)境的需求，尤其是針對(duì)一些特定的工控系統(tǒng)，我們經(jīng)常需要定制一些個(gè)性化的GUI。

目前，在工業(yè)控制系統(tǒng)中的圖形用戶界面，除了采用通用的組態(tài)軟件之外，自行開(kāi)發(fā)相應(yīng)的工業(yè)控制圖形軟件是在特定項(xiàng)目中常見(jiàn)的手段。以傳統(tǒng)的 MFC（Microsoft Foundation Classes）方法開(kāi)發(fā)復(fù)雜的圖形界面，需要程序員編寫(xiě)大量的代碼，對(duì)控件的實(shí)現(xiàn)需要調(diào)用底層的繪圖函數(shù)進(jìn)行繪制[2]。本文采用Qt開(kāi)發(fā)平臺(tái)，通過(guò)Qt對(duì)HTML標(biāo)簽支持的特性，完成圖文顯示控件的快速開(kāi)發(fā)。

1 Qt概述

Qt是一個(gè)多平臺(tái)的C++圖形用戶界面應(yīng)用程序框架[3]。它提供給應(yīng)用程序開(kāi)發(fā)者建立圖形用戶界面應(yīng)用程序所需的所有功能，并提供 Qt Designer 圖形界面開(kāi)發(fā)工具直接用來(lái)設(shè)計(jì)可視化的應(yīng)用程序界面，可進(jìn)行拖拽式的界面控件排布，便于程序開(kāi)發(fā)。Qt 具有跨平臺(tái)性能，可以一次編寫(xiě)多處編譯，具有良好的封裝機(jī)制、友好的信號(hào)-槽連接事件驅(qū)動(dòng)機(jī)制，能夠非常優(yōu)雅的完成事件的投遞與響應(yīng)。Qt是KDE等項(xiàng)目所使用的支持庫(kù)，完全面向?qū)ο螅苋菀讛U(kuò)展，并且具有可移植性、易用性和運(yùn)行速度快等特點(diǎn)[4]。

2 Qt的可擴(kuò)展性

Qt具備非常完善的可擴(kuò)展性，通過(guò)Qt的面向?qū)ο筇匦院筒寮C(jī)制，用戶可以很方便的擴(kuò)展Qt本身和應(yīng)用程序。

一般來(lái)說(shuō)，在Qt中擴(kuò)展自定義控件，基本上都是對(duì)Qt已有控件的直接繼承，通過(guò)繼承并重載父類中的虛函數(shù)來(lái)實(shí)現(xiàn)。當(dāng)需要繪制時(shí)，首先調(diào)用update()或者repaint()方法來(lái)產(chǎn)生繪圖事件，然后應(yīng)用程序的notify()函數(shù)把它發(fā)送到事件接收者，最后事件接收者通過(guò)paintEvent()函數(shù)調(diào)用特定的繪制方法來(lái)實(shí)現(xiàn)自身的繪制[5]。其流程圖如下：

圖1 Qt控件自繪流程圖

上述方法是傳統(tǒng)的Qt控件擴(kuò)展方法，但是，該方法對(duì)使用稍顯繁瑣，而且針對(duì)工控軟件的圖文顯示需求而言，需要是動(dòng)態(tài)、靈活的顯示下位設(shè)備的實(shí)時(shí)狀態(tài)，一個(gè)控件會(huì)有多種現(xiàn)實(shí)需求。而這種方法對(duì)每個(gè)不同圖像的顯示都需要定義一個(gè)擴(kuò)展類，不具備靈活性。

在這種情況下，通過(guò)Qt的QLabel等控件支持HTML標(biāo)簽的特性，通過(guò)實(shí)時(shí)更換控件文本參數(shù)就可以切換其顯示內(nèi)容，可以很方便的實(shí)現(xiàn)自定義圖文的功能，達(dá)到事半功倍的效果。

3 QLabel對(duì)HTML的支持

Qt的某些文本窗體部件能夠顯示富文本，使用HTML4標(biāo)記。能夠以這種方式顯示富文本的窗體控件有：QTextDocument,以及QLabel、QTextEdit等。而作為顯示控件而言，QLabel是最具備多場(chǎng)景適應(yīng)性的。對(duì)于QLabel而言，HTML4的大多數(shù)基本標(biāo)簽都是支持的，其中包括，這樣就能夠通過(guò)標(biāo)簽，在QLabel中顯示圖片。同時(shí)，QLabel還支持基本的CSS語(yǔ)法，通過(guò)組合HTML和CSS元素，可以較為靈活的組合各種效果。例如：QLabel("hello
")；其顯示效果為下圖所示：

圖2 HTML顯示效果圖

4 使用HTML擴(kuò)展QLabel

在工控項(xiàng)目中，經(jīng)常需要各種各樣的圖文混排顯示控件，根據(jù)下位設(shè)備設(shè)施的實(shí)際情況來(lái)動(dòng)態(tài)設(shè)置標(biāo)簽的顯示。類似下圖：

圖3 工控圖文顯示效果圖

面對(duì)這種需求，可以很簡(jiǎn)單的通過(guò)HTML來(lái)達(dá)到希望的效果。

為了達(dá)到靈活控制的目的，我們自定義一個(gè)類sgLabel繼承于QLabel，同時(shí)，自定義幾個(gè)接口函數(shù)：

表1 擴(kuò)展控件接口函數(shù)表

其中，setContent的第3個(gè)參數(shù)align是一個(gè)ALIGN 型的枚舉值，我們通過(guò)這個(gè)值來(lái)定義圖片與文本的布局方式，包括文本與圖片的橫向排列、縱向排列、前后順序、上下順序、對(duì)齊方式等定義，以此來(lái)適應(yīng)不同場(chǎng)景對(duì)圖文顯示控件的不同需求。

需要注意的是，QLabel對(duì)某些布局性的CSS是不支持的，因此在這里，我們使用了HTML的表格標(biāo)簽，配合HTML的標(biāo)簽屬性來(lái)實(shí)現(xiàn)圖片和文本內(nèi)容的居中對(duì)齊。其部分關(guān)鍵代碼如下：

switch (_align) {

case H_R_CENTER：

{

"").arg(_picture).arg(_text))；

}

break；

case H_L_CENTER：

{

this->setText(QString(""

}

break；

case V_B_CENTER：

{

}

break；

case V_T_CENTER：

{

this->setText(QString("

}

break；

…………

}

經(jīng)過(guò)這樣定義后，通過(guò)3個(gè)接口函數(shù)的靈活使用，就可以在軟件運(yùn)行中，根據(jù)需求調(diào)用不同的接口函數(shù)，靈活的動(dòng)態(tài)更改圖文顯示控件的顯示效果，達(dá)到上位機(jī)監(jiān)控軟件的顯示需求。其實(shí)際的工程應(yīng)用效果如下：

圖4 擴(kuò)展控件工程應(yīng)用效果圖

上圖中的主體部分，各類圖文顯示控件都是基于上述方法擴(kuò)展而來(lái)，可以根據(jù)現(xiàn)場(chǎng)設(shè)備的實(shí)際運(yùn)行情況靈活的顯示動(dòng)態(tài)內(nèi)容，達(dá)到了使用簡(jiǎn)單、靈活的效果。

5 結(jié)論

利用QLabel對(duì)HTML標(biāo)簽的支持，擴(kuò)展QLabel控件，可以使得QLabel作為工控上位機(jī)軟件的圖文顯示控件，同時(shí)能夠進(jìn)行靈活的動(dòng)態(tài)設(shè)置，為基于Qt框架的工控圖文顯示控件提供了新的思路。