歡迎您光臨本站 註冊首頁

嵌入式Linux用Qt Designer快速開發

←手機掃碼閱讀     火星人 @ 2014-03-26 , reply:0

RAD(快速應用程序開發)是一種高效的軟體開發形式,可以讓用戶在極短的時間裡創建一個圖形化的用戶界面。通常情況下,在一張空白的表單上,開發人員可以通過拖拉或點擊的方式,在窗口的適當位置上添加一些輸入框和按鈕等窗口組件。這時,RAD工具會自動編寫和維護代碼。而用戶所要做的只是確定當點擊按鈕或選擇選單選項時將要發生什麼事件。

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






圖1 安裝Qt Designer


創建

為了快速地向大家展示一下Qt Designer功能,先創建一個簡單的攝氏溫度和華氏溫度的轉換程序。本文里將設計一個簡單的GUI,並且添加一些簡單的代碼來實現溫度的轉換。因為是為了展示一下快速的開發過程,而不是一個嚴謹的軟體項目的開發,所以這裡不會進行任何的錯誤檢查,也不進行輸入檢驗(也就是檢查用戶的輸入是否為合法的溫度形式)、緩衝溢出檢查等在日常軟體開發中一定要做的步驟。

如果用戶使用的是KDE,那麼選單上應該已經有Qt Designer的圖標。不同的發行版,圖標的位置會有所不同。如果用戶的發行版沒有Qt Designer圖標,那麼可以在命令行模式下輸入「designer」命令來啟動該開發工具。在Red Hat 9.0中,可以通過點擊主選單→編程→更多編程工具→Qt Designer來啟動(如圖2)。






圖2 啟動Qt Designer


Qt Designer首先呈現給用戶的是一個New/Open對話框(如圖3所示)。因為這裡要創建一個C++程序,所以在此選擇C++ Project,點擊「OK」繼續。






圖3 New/Open對話框


選擇一個想要保存文件的位置,並且給出一個文件名,在此使用的文件名是cfconv。注意這裡文件名的擴展名一定要是.pro。點擊「Save」后,返回到了Project Settings對話框(見圖4)。






圖4 保存文件






圖5 Qt Designer主窗口


現在就已經在Qt Designer主窗口上了(見圖5),確保Property Editor可見。如果它是不可見的,用戶可以通過Windows→Views→Property Editor/Signal Handlers選單選項來使其可見(預設情況下是可見的)。






圖6 創建一個新的表單






圖7 更改表單的屬性


通過選擇File→New選單,然後選擇Dialog來創建一個新的對話框。這時Qt Designer會創建一個新的空白表單(見圖6),用戶可以在其上放置輸入框和按鈕。

打開Property Editor(見圖7),把name的值改為「cfconvMainForm」,把caption的值改為「Celsius to Fahrenheit Converter」。

這裡表單的name是被應用程序使用的內部名字,在用戶編寫代碼時,有時需要使用的就是這個名字。Caption指的是要在標題欄上顯示的名字。

從左邊的工具箱中選擇Common Widgets,並且雙擊「TextLabel」。在表單的左上角放置一個標籤,在這個標籤位置下方再放置一個同樣的標籤。選中上面的標籤,並且將其text值改為「Celsius」,相應地把第二個標籤的text值也改為「Fahrenheit」。在這兩個標籤的後面加上兩個對應的輸入框,用於輸入需要轉換的溫度和輸出轉換后的溫度。從Common Widgets中雙擊選擇LineEdit,然後在兩個標籤后創建兩個LineEdit。

把兩個LineEdit框的name值分別改為「celsiusLineEdit」和「fahrenheitLineEdit」,再把fahrenheitLineEdit文本框的readOnly屬性改為True。

從Common Widgets上選擇PushButton,並且創建兩個按鈕,分別將其name和text屬性改為quitPushButton和Quit、convertPushButton和Convert。這時表單看起來就如圖8所示。






圖8 基本完成的GUI


現在按「Ctrl+S」或從選單中選擇File→Save,接下來要求輸入文件名。預設情況下,使用的是表單的name值,擴展名使用的是.ui。用戶可以接受這個名字,然後點擊「Save」。

如果想看一看效果,用戶可以按「Ctrl+T」或從選單中選擇Preview→Preview Form來預覽應用程序。但是現在按鈕還不能做任何事情,所以下一步要做的事情就是讓按鈕和某一特定的動作相關聯。當點擊「Quit」按鈕時,要求應用程序會被關閉;而當點擊「Convert」按鈕時,要求輸入的溫度由攝氏溫度轉換為華氏溫度。

在「Quit」按鈕上點擊右鍵,選擇Connections,然後點擊「New」。從Sender列表中選擇quitPushButton,從Signal列表中選擇clicked(),從Receiver列表中選擇cfconvMainFrom,從Slot列表中選擇close()。用戶可以參見圖9所示。






圖9 為Quit按鈕創建關聯


現在,當用戶點擊「Quit」按鈕時,會向表單發送一個滑鼠點擊的信號,這將使這個表單關閉(因為這個表單是主表單,所以它關閉時應用程序也就同時關閉了)。要進行測試,可以選擇Preview→Preview Form。這時點擊「Quit」按鈕,預覽窗口就會被關閉。

下面為「Convert」按鈕創建連接。在「Convert」按鈕上點擊右鍵,然後選擇Connections。這時用戶會發現這是一個全局連接窗口,而不是某一窗口部件的連接。點擊「New」來創建一個新的連接。從Sender列表中選擇convertPushbButton,從Signal列表中選擇clicked(),從Receiver列表中選擇cfconvMainFrom。本想將該按鈕與fahrenheitLineEdit窗口部件相關聯,但列表中卻沒有一個可以滿足這項要求的欄目。因此需要創建一個新的欄目來完成這個連接。






圖10 創建新的欄






圖11 完成連接創建


點擊「Edit Slots」和「New Function」(見圖10),把函數名改為convert(),其它的值可以保持不變,點擊「OK」來關閉窗口。

要完成這個連接,從Slot列表中選擇convert()(見圖11)。

現在來完成應用程序的代碼部分:創建convert()函數。在Project Overview窗口點擊「cfconvmainform.ui.h」來啟動Code Editor。此時convert()函數實際上已經存在了,只不過是空的罷了。輸入下面的C++代碼來完成函數:
QUOTE:
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();
}

現在就已經基本完成這個應用程序了。不過在編譯和運行此應用程序之前,還要創建一個main.cpp文件。方法是選擇File→New→C++Main-File(main.cpp),只需接受預設的配置即可。main.cpp會自動在Code Editor中打開。因為這裡無需改變main.cpp中的任何東西,所以直接將Code Editor窗口關閉,並且保存main.cpp。這時也同時關閉cfconfMainForm.ui.h Code Editor窗口。

編譯

到此為止,在Qt Designer中的工作已經完成了。保存整個項目,下面來編譯和運行這個程序。在編譯程序之前,要首先生成它的Makefile文件。打開一個終端,然後切換至保存有項目的位置,使用以下命令來生成Makefile文件:
#qmake -o Makefile cfconv.pro

現在,就可以運行make來編譯程序了,根據系統的性能,這個步驟需要花費一點時間。當編譯工作完成後,輸入./cfconv來運行程序。如果一切正常,用戶應該已經看到程序了。

[火星人 ] 嵌入式Linux用Qt Designer快速開發已經有748次圍觀

http://coctec.com/docs/linux/show-post-190295.html