宋勇強(qiáng)

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

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

1 概述

本軟件主要功能為自由顯示多設(shè)備關(guān)鍵信息，共包含6個(gè)設(shè)備，每個(gè)設(shè)備信息可以自由展開收縮，當(dāng)設(shè)備對話框展開時(shí)，標(biāo)題框顯示為“▲”，顯示設(shè)備信息，當(dāng)設(shè)備框收縮時(shí)，標(biāo)題框顯示為“▼”，設(shè)備信息隱藏。程序采取面向?qū)ο蠓绞?，編碼由CheadDlg(單個(gè)抽屜基類)，CdialogAI(多個(gè)抽屜組合形成的類)，以及若干個(gè)對話框類(不同設(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，這里有幾個(gè)重點(diǎn)設(shè)置，首先要編譯安裝好的BCG項(xiàng)目，生成VC下需要的庫文件和lib文件，然后程序里要包含BCG的頭文件"BCGCBProInc.h"，設(shè)置程序包含庫文件路徑指向BCG的頭文件，路徑為C:Program FilesBCGSoftBCGControlBarProBCGCBPro，設(shè)置程序lib路徑為C:Program FilesBCGSoftBCGControlBarProBin，這樣才能正常調(diào)用BCG資源。

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

2.1 子類CHeadDlg的設(shè)計(jì)

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

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

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

圖4 CHeadDlg類圖

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

2.2 類CDialogAI的設(shè)計(jì)

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

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

圖5 CDialogAI類圖

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

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

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

圖6 CHeadDlg類對象

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

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

4 常見問題及解決方案

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

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

4.2 防止點(diǎn)擊按鍵導(dǎo)致屏幕刷新出錯(cuò)

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

5 結(jié)束語

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