類似QQ可收縮界面在工程中的應用

宋勇強

(山西大眾電子信息產(chǎn)業(yè)集團有限公司，山西 太原 030024)

隨著軟件技術(shù)的蓬勃發(fā)展，用戶對軟件產(chǎn)品的要求越來越高，不僅要求有完善的功能，而且對人機交互也提出了更加嚴格的要求，軟件要有易操作性，界面美觀大方，在我們平時使用的軟件中，QQ的抽屜式菜單給大家留下了深刻的印象，可以任意顯示隱藏界面，自由切換，不用時可以收縮懸掛，用時按照實際需求展開相應對話框。雖然網(wǎng)上有很多例子和控件，但是要不就是不開源，修改困難，要不就是不夠靈活，無法滿足我們實際要求，為了真正實現(xiàn)此功能，我以Microsoft Visual C++6.0作為編譯環(huán)境，用自定義基類擴展結(jié)合BCG的方式實現(xiàn)了QQ抽屜式功能，下面以一個設(shè)備管理部分程序為例進行敘述。

1 概述

本軟件主要功能為自由顯示多設(shè)備關(guān)鍵信息，共包含6個設(shè)備，每個設(shè)備信息可以自由展開收縮，當設(shè)備對話框展開時，標題框顯示為“▲”，顯示設(shè)備信息，當設(shè)備框收縮時，標題框顯示為“▼”，設(shè)備信息隱藏。程序采取面向?qū)ο蠓绞?，編碼由CheadDlg(單個抽屜基類)，CdialogAI(多個抽屜組合形成的類)，以及若干個對話框類(不同設(shè)備的關(guān)鍵信息)組成。顯示效果調(diào)用了界面集成類BCG，使界面更加美觀大方，形成最終效果如圖1所示。

圖1 軟件界面效果圖

軟件內(nèi)部的類調(diào)用關(guān)系如圖2所示。

圖2 程序內(nèi)部類調(diào)用關(guān)系圖

軟件需要先安裝BCG,版本V22.1，這里有幾個重點設(shè)置，首先要編譯安裝好的BCG項目，生成VC下需要的庫文件和lib文件，然后程序里要包含BCG的頭文件"BCGCBProInc.h"，設(shè)置程序包含庫文件路徑指向BCG的頭文件，路徑為C:Program FilesBCGSoftBCGControlBarProBCGCBPro，設(shè)置程序lib路徑為C:Program FilesBCGSoftBCGControlBarProBin，這樣才能正常調(diào)用BCG資源。

2 主要實現(xiàn)類的設(shè)計

2.1 子類CHeadDlg的設(shè)計

CHeadDlg類主要負責顯示某一個設(shè)備的信息，包括設(shè)備標簽按鈕以及關(guān)鍵信息顯示對話框，標簽按鈕關(guān)聯(lián)一個按鈕控件，點擊按鈕時激發(fā)關(guān)鍵信息的展開和收縮功能，設(shè)備信息對話框的參數(shù)設(shè)置如圖3所示。

圖3 設(shè)備信息對話框

其中Style的風格必須設(shè)置為Child，即子對話框。CHeadDlg類的編碼實現(xiàn)如圖4所示。

圖4 CHeadDlg類圖

CHeadDlg類中應用了BCG界面效果，設(shè)置風格為黑色系，設(shè)備標簽為白色漸變背景，黑色字體。設(shè)置設(shè)備信息為黑色背景，字體顯示為黃色，這樣能讓顯示更加立體，對比強烈。設(shè)備信息對話框大小根據(jù)實際顯示內(nèi)容多少調(diào)整。保持標簽框和信息對話框?qū)挾纫恢隆?/p>

2.2 類CDialogAI的設(shè)計

CDialogAI類是通過定義多個關(guān)聯(lián)信息對話框的CHeadDlg類對象，將多個設(shè)備信息整合在一起顯示，實現(xiàn)任意子對話框的展開/收縮顯示，多個設(shè)備信息對話框整合在一起后可以整體移動，可以關(guān)閉整個信息顯示對話框。CDialogAI類的類結(jié)構(gòu)如圖5所示。

CDialogAI類定義了6個(根據(jù)實際情況可以更改個數(shù))CHeadDlg類對象并將類對象和相應設(shè)備信息對話框進行關(guān)聯(lián)，能夠設(shè)置對象標簽顯示內(nèi)容，界面選用BCG效果，能夠設(shè)置子對話框的大小。能夠設(shè)置如果子對話框內(nèi)容太長，是否顯示滾動條。

圖5 CDialogAI類圖

2.3 信息顯示子類的設(shè)計

設(shè)備信息對話框顯示設(shè)備基礎(chǔ)信息，可以包含對設(shè)備信息的顯示以及按鈕控制，根據(jù)實際情況進行定制。

設(shè)備信息對話框子類結(jié)構(gòu)如圖6所示。

圖6 CHeadDlg類對象

3 類之間的通訊和調(diào)用

CDialogA類中定義CHeadDlg對象，CHeadDlg調(diào)用類函數(shù)實現(xiàn)設(shè)置子對話框大小，子對話框標題，子對話框顯示風格，并且把CHeadDlg對象都加入隊列，在CHeadDlg中定義BCG風格的對話框?qū)ο?，在建立CHeadDlg時把其內(nèi)容區(qū)和BCG對話框進行關(guān)聯(lián)。

4 常見問題及解決方案

4.1 調(diào)整某一個設(shè)備界面時如何讓界面顯示不亂

當其中一個界面進行拉伸操作時，界面會因為內(nèi)容變化引起顯示混亂，所以對界面發(fā)生變化的對話框尺寸處理非常重要，一般來說，通過宏定義對設(shè)備子對話框的標題的寬度和高度進行設(shè)置，例如#define HEAD_WIDTH 305 #define HEAD_HEIGHT 30，在CHeadDlg中的WM_SIZE消息進行處理(對話框發(fā)生改變時自動觸發(fā))，當界面大小發(fā)生變化時，調(diào)整新窗口大小，新窗口左上角坐標為(0，HEAD_HEIGHT)，界面寬度為調(diào)整后界面寬度，界面高度為調(diào)整后界面y坐標減去HEAD_HEIGHT，這樣的話界面就可以任意調(diào)整寬度高度。

4.2 防止點擊按鍵導致屏幕刷新出錯

運行程序時會發(fā)現(xiàn)如果無意按了回車或ESC鍵，設(shè)備顯示界面會變成空白，這是因為沒有對按鍵屏蔽導致的刷新顯示錯誤，只要在CDialogAI類中增加對PreTranslateMessage函數(shù)的處理，如果判斷按鍵已經(jīng)按下并且鍵值為回車或ESC鍵，則直接返回，不進入WINDOWS消息處理，這樣就可以有效避免按鍵屏幕刷新出錯問題。

5 結(jié)束語

有這樣的思路設(shè)計的類QQ界面，不僅可以起到類似標簽的效果，而且更加靈活，可以隨意調(diào)整大小，拖動，收縮/隱藏,可以有選擇的顯示一個或多個子對話框的界面，如果作為設(shè)備管理界面，標題框還可以表示設(shè)備在線狀態(tài)，一舉多得，而且既可以作為一個獨立的類還可以生成鏈接庫，調(diào)用簡單，應用方便，還可以舉一反三，讓界面呈現(xiàn)其他多種方式的顯示。