嵌入式Linux用Qt Designer快速開發(fā)

RAD（快速應(yīng)用程序開發(fā)）是一種高效的軟件開發(fā)形式，可以讓用戶在極短的時(shí)間里創(chuàng)建一個(gè)圖形化的用戶界面。通常情況下，在一張空白的表單上，開發(fā)人員可以通過拖拉或點(diǎn)擊的方式，在窗口的適當(dāng)位置上添加一些輸入框和按鈕等窗口組件。這時(shí)，RAD工具會(huì)自動(dòng)編寫和維護(hù)代碼。而用戶所要做的只是確定當(dāng)點(diǎn)擊按鈕或選擇選單選項(xiàng)時(shí)將要發(fā)生什么事件。

在Linux下，一個(gè)非常流行的RAD工具就是Qt Designer。它是嵌入式公司Trolltech的Qt軟件包的一個(gè)組成部分。如果用戶使用的是KDE桌面，那么Qt已經(jīng)自動(dòng)安裝上了，Qt Designer也很有可能已經(jīng)被安裝好。如果用戶的系統(tǒng)沒有安裝，那么針對(duì)不同的版本，可以很方便地找到KDE Development Tools，并安裝之。以Red Hat 9.0為例，用戶可以從主選單→系統(tǒng)設(shè)置→添加/刪除應(yīng)用程序中選擇KDE軟件開發(fā)，即可完成Qt Designer的安裝（如圖1所示）。

圖1 安裝Qt Designer

創(chuàng)建

為了快速地向大家展示一下Qt Designer功能，先創(chuàng)建一個(gè)簡單的攝氏溫度和華氏溫度的轉(zhuǎn)換程序。本文里將設(shè)計(jì)一個(gè)簡單的GUI，并且添加一些簡單的代碼來實(shí)現(xiàn)溫度的轉(zhuǎn)換。因?yàn)槭菫榱苏故疽幌驴焖俚拈_發(fā)過程，而不是一個(gè)嚴(yán)謹(jǐn)?shù)能浖?xiàng)目的開發(fā)，所以這里不會(huì)進(jìn)行任何的錯(cuò)誤檢查，也不進(jìn)行輸入檢驗(yàn)（也就是檢查用戶的輸入是否為合法的溫度形式）、緩沖溢出檢查等在日常軟件開發(fā)中一定要做的步驟。

如果用戶使用的是KDE，那么選單上應(yīng)該已經(jīng)有Qt Designer的圖標(biāo)。不同的發(fā)行版，圖標(biāo)的位置會(huì)有所不同。如果用戶的發(fā)行版沒有Qt Designer圖標(biāo)，那么可以在命令行模式下輸入“designer”命令來啟動(dòng)該開發(fā)工具。在Red Hat 9.0中，可以通過點(diǎn)擊主選單→編程→更多編程工具→Qt Designer來啟動(dòng)（如圖2）。

圖2 啟動(dòng)Qt Designer

Qt Designer首先呈現(xiàn)給用戶的是一個(gè)New/Open對(duì)話框（如圖3所示）。因?yàn)檫@里要?jiǎng)?chuàng)建一個(gè)C 程序，所以在此選擇C Project，點(diǎn)擊“OK”繼續(xù)。

圖3 New/Open對(duì)話框

選擇一個(gè)想要保存文件的位置，并且給出一個(gè)文件名，在此使用的文件名是cfconv。注意這里文件名的擴(kuò)展名一定要是.pro。點(diǎn)擊“Save”后，返回到了Project Settings對(duì)話框（見圖4）。

圖4 保存文件


圖5 Qt Designer主窗口

現(xiàn)在就已經(jīng)在Qt Designer主窗口上了（見圖5），確保Property Editor可見。如果它是不可見的，用戶可以通過Windows→Views→Property Editor/Signal Handlers選單選項(xiàng)來使其可見（缺省情況下是可見的）。

圖6 創(chuàng)建一個(gè)新的表單


圖7 更改表單的屬性

通過選擇File→New選單，然后選擇Dialog來創(chuàng)建一個(gè)新的對(duì)話框。這時(shí)Qt Designer會(huì)創(chuàng)建一個(gè)新的空白表單（見圖6），用戶可以在其上放置輸入框和按鈕。

打開Property Editor（見圖7），把name的值改為“cfconvMainForm”，把caption的值改為“Celsius to Fahrenheit Converter”。

這里表單的name是被應(yīng)用程序使用的內(nèi)部名字，在用戶編寫代碼時(shí)，有時(shí)需要使用的就是這個(gè)名字。Caption指的是要在標(biāo)題欄上顯示的名字。

從左邊的工具箱中選擇Common Widgets，并且雙擊“TextLabel”。在表單的左上角放置一個(gè)標(biāo)簽，在這個(gè)標(biāo)簽位置下方再放置一個(gè)同樣的標(biāo)簽。選中上面的標(biāo)簽，并且將其text值改為“Celsius”，相應(yīng)地把第二個(gè)標(biāo)簽的text值也改為“Fahrenheit”。在這兩個(gè)標(biāo)簽的后面加上兩個(gè)對(duì)應(yīng)的輸入框，用于輸入需要轉(zhuǎn)換的溫度和輸出轉(zhuǎn)換后的溫度。從Common Widgets中雙擊選擇LineEdit，然后在兩個(gè)標(biāo)簽后創(chuàng)建兩個(gè)LineEdit。

把兩個(gè)LineEdit框的name值分別改為“celsiusLineEdit”和“fahrenheitLineEdit”，再把fahrenheitLineEdit文本框的readOnly屬性改為True。

從Common Widgets上選擇PushButton，并且創(chuàng)建兩個(gè)按鈕，分別將其name和text屬性改為quitPushButton和Quit、convertPushButton和Convert。這時(shí)表單看起來就如圖8所示。

圖8 基本完成的GUI

現(xiàn)在按“Ctrl S”或從選單中選擇File→Save，接下來要求輸入文件名。缺省情況下，使用的是表單的name值，擴(kuò)展名使用的是.ui。用戶可以接受這個(gè)名字，然后點(diǎn)擊“Save”。

如果想看一看效果，用戶可以按“Ctrl T”或從選單中選擇Preview→Preview Form來預(yù)覽應(yīng)用程序。但是現(xiàn)在按鈕還不能做任何事情，所以下一步要做的事情就是讓按鈕和某一特定的動(dòng)作相關(guān)聯(lián)。當(dāng)點(diǎn)擊“Quit”按鈕時(shí)，要求應(yīng)用程序會(huì)被關(guān)閉；而當(dāng)點(diǎn)擊“Convert”按鈕時(shí)，要求輸入的溫度由攝氏溫度轉(zhuǎn)換為華氏溫度。

在“Quit”按鈕上點(diǎn)擊右鍵，選擇Connections，然后點(diǎn)擊“New”。從Sender列表中選擇quitPushButton，從Signal列表中選擇clicked()，從Receiver列表中選擇cfconvMainFrom，從Slot列表中選擇close()。用戶可以參見圖9所示。

圖9 為Quit按鈕創(chuàng)建關(guān)聯(lián)

現(xiàn)在，當(dāng)用戶點(diǎn)擊“Quit”按鈕時(shí)，會(huì)向表單發(fā)送一個(gè)鼠標(biāo)點(diǎn)擊的信號(hào)，這將使這個(gè)表單關(guān)閉（因?yàn)檫@個(gè)表單是主表單，所以它關(guān)閉時(shí)應(yīng)用程序也就同時(shí)關(guān)閉了）。要進(jìn)行測試，可以選擇Preview→Preview Form。這時(shí)點(diǎn)擊“Quit”按鈕，預(yù)覽窗口就會(huì)被關(guān)閉。

下面為“Convert”按鈕創(chuàng)建連接。在“Convert”按鈕上點(diǎn)擊右鍵，然后選擇Connections。這時(shí)用戶會(huì)發(fā)現(xiàn)這是一個(gè)全局連接窗口，而不是某一窗口部件的連接。點(diǎn)擊“New”來創(chuàng)建一個(gè)新的連接。從Sender列表中選擇convertPushbButton，從Signal列表中選擇clicked()，從Receiver列表中選擇cfconvMainFrom。本想將該按鈕與fahrenheitLineEdit窗口部件相關(guān)聯(lián)，但列表中卻沒有一個(gè)可以滿足這項(xiàng)要求的欄目。因此需要?jiǎng)?chuàng)建一個(gè)新的欄目來完成這個(gè)連接。

圖10 創(chuàng)建新的欄


圖11 完成連接創(chuàng)建

點(diǎn)擊“Edit Slots”和“New Function”（見圖10），把函數(shù)名改為convert()，其它的值可以保持不變，點(diǎn)擊“OK”來關(guān)閉窗口。

要完成這個(gè)連接，從Slot列表中選擇convert()（見圖11）。

現(xiàn)在來完成應(yīng)用程序的代碼部分：創(chuàng)建convert()函數(shù)。在Project Overview窗口點(diǎn)擊“cfconvmainform.ui.h”來啟動(dòng)Code Editor。此時(shí)convert()函數(shù)實(shí)際上已經(jīng)存在了，只不過是空的罷了。輸入下面的C 代碼來完成函數(shù)：

void cfconvMainForm::convert() {/* Declare some variables */double celsius_input, result = 0;/* Retrieve Celsius input */celsius_input = celsiusLineEdit->text().toDouble();/* Convert to Fahrenheit */result = (celsius_input *  (9.0/5.0))   32.0;/* Enter result and clear Celsius input box */fahrenheitLineEdit->setText(QString::number(result, 'f', 1));celsiusLineEdit->clear();}