vc6s-chap05-程序界面設計1

第5章程序界面設計5.1界面設計原則5.2菜單5.3工具欄5.4狀態(tài)欄1Ex05_1標準菜單Ex05_2圖像菜單Ex05_3右鍵菜單Ex05_4動態(tài)菜單Ex05_5工具欄Ex05_6下拉工具欄Ex05_7ReBarEx05_8狀態(tài)欄例題5.1界面設計原則

5.1.1界面布局原則1.控件位置2.協(xié)調性3.一致性4.空間的使用5.簡單性6.顏色7.圖片和圖標8.字體5.1.2用戶幫助模型5.2菜單CMenu5.2.1菜單分類5.2.2相關的類與菜單資源5.2.3標準菜單5.2.4帶有圖標的菜單5.2.5快捷菜單5.2.6動態(tài)菜單CObjectCMenu5.2.1菜單種類1.標準菜單圖標2．帶有圖標的菜單3.快捷菜單(右鍵菜單、上下文菜單)4.動態(tài)菜單5.2.2相關類與菜單資源編輯器

函數(shù)功能AppendMenu將一新菜單項增加到一個菜單尾部Attach將一已存在的Windows菜單連接到一個CMenu對象CreatMenu創(chuàng)建一菜單，并將該對象連接到Cmenu對象CreatPopupMenu創(chuàng)建一彈出式菜單DestroyMenu銷毀菜單及所有windows資源DeleteMenu從菜單中刪除一個菜單項Detach將一菜單與CMenu對象斷開連接表5-１CMenu類的有關成員函數(shù)函數(shù)功能GetSubMenu獲得指定彈出式菜單的指針GetMenuItemCount獲得菜單所包含的項數(shù)GetMenuString拷貝指定菜單項標簽到緩沖區(qū)InsertMenu在指定位置插入一個新菜單項LoadMenu加載一個菜單資源SetMenuItemBitmaps將指定位圖與一菜單項相關聯(lián)TrackPopupMenu在指定位置處顯示一個浮動的彈出式菜單表5-1CMenu類的有關成員函數(shù)（續(xù)）函數(shù)名說明Enable使該界面對象可選或不可選SetCheck在該界面對象(菜單)前增加或刪除一個check標志SetRadio在該界面對象(菜單)項前增加或刪除一個圓點SetText改變顯示在該界面對象(菜單)上的字符串表5-2CCmdUI類的常用成員函數(shù)

CCmdUI類沒有基類，在更新命令處理函數(shù)內調用CCmdUI類的相關函數(shù)更新菜單。

菜單項下拉菜單各項圖編輯菜單資源菜單屬性對話框1.創(chuàng)建菜單項2．創(chuàng)建下拉菜單各項選項含義ID表示該菜單項的ID值Caption表示該菜單項顯示的文本Separator選中該選項表示該菜單項是一條分隔線Checked選中該選項表示該菜單項被選中時顯示一個標志Pop-up選擇該菜單項顯示一個子菜單Grayed該菜單項變灰顯示，被禁止Inactive該菜單項不被激活Help菜單被放在菜單條的最右端Break選中該菜單項后就退出其所在菜單Prompt光標移至該菜單項時狀態(tài)欄顯示的文本表5-3菜單屬性對話框各項的含義5.2.3標準菜單AppWizard自動生成的默認菜單在默認菜單上增添需要的菜單或刪除無用的菜單。

ClassWizard增加消息處理(WM_COMMAND)函數(shù)。

ClassWizard增加更新命令UI消息的處理

(UPDATE_COMMAND_UI)

On+Update+菜單名On+菜單名例5-1：Ex05_1標準菜單的使用程序菜單界面：例5-1(圖1)程序菜單界面(1)點擊消息對話框1和消息對話框2分別彈出如下的消息對話框。程序功能：(2)點擊連接菜單出現(xiàn)右邊的界面，連接菜單無效，且連接菜單前有打勾標記。點擊斷開菜單則出現(xiàn)斷開菜單無效，且斷開菜單前有打勾標記。

(1)打開IDR_MAINFRAME菜單(2)增加菜單：菜單名：菜單測試消息對話框1ID_TEST_MESSAGE1DLG消息對話框2ID_TEST_MESSAGE2DLG連接ID_TEST_CONNECT斷開ID_TEST_BREAK1.新建一單文檔應用程序Ex05_12．創(chuàng)建菜單3．添加消息響應函數(shù)ID_TEST_MESSAGE1DLGOnTestDlgMessage1dlg()ID_TEST_MESSAGE2DLGOnTestDlgMessage2dlg()ID_TEST_CONNECTOnTestConnect()ID_TEST_BREAKOnTestBreak()4.添加更新菜單消息響應函數(shù)ID_TEST_CONNECTOnUpdateTestConnect(CCmdUI*pCmdUI)ID_TEST_BREAKOnUpdateTestBreak(CCmdUI*pCmdUI)5.定義成員變量

在Ex05_1View.cpp文件的構造函數(shù)中。classCEx05_1View:publicCView{…public: BOOLbCheck; BOOLbEnable;…}CEx05_1View::CEx05_1View()//構造函數(shù){bCheck=1;bEnable=1;}在Ex05_1View.h文件中定義兩個BOOL變量。6.初始化成員變量//菜單消息響應函數(shù)//點擊消息對話1框菜單的消息函數(shù)voidCEx05_1View::OnTestMessagedlg1(){AfxMessageBox("這是消息對話框1！");}7．編寫消息響應函數(shù)//點擊消息對話2框菜單的消息函數(shù)voidCEx05_1View::OnTestMessagedlg2(){AfxMessageBox("這是消息對話框2！");}//點擊斷開菜單的消息函數(shù)voidCEx05_1View::OnTestBreak(){ bCheck=1; bEnable=1;}//點擊連接菜單的消息函數(shù)voidCEx05_1View::OnTestConnect(){ bCheck=0; bEnable=0; }//菜單更新消息響應函數(shù)//更新連接菜單voidCEx05_1View::OnUpdateTestConnect(CCmdUI*pCmdUI){ pCmdUI->SetCheck(bCheck);//打勾或不打勾 pCmdUI->Enable(!bEnable);//禁用或啟用}//更新斷開菜單voidCEx05_1View::OnUpdateTestBreak(CCmdUI*pCmdUI){ pCmdUI->SetCheck(!bCheck);//打勾或不打勾pCmdUI->Enable(bEnable);//禁用或啟用}8.編譯、運行和測試5.3工具欄5.3.1工具欄資源編輯器5.3.2CToolBar類5.3.3常規(guī)工具欄5.3.4下拉式工具欄按鈕

5.3.1工具欄資源編輯器1.創(chuàng)建工具欄2.創(chuàng)建、移動和編輯工具欄按鈕(1)創(chuàng)建一個新的工具欄按鈕(2)移動一個工具欄按鈕(3)刪除一個工具欄按鈕(4)在工具欄上的兩個按鈕中插入一個空白區(qū)(5)刪除工具欄按鈕的空白區(qū)在Prompt框中輸入提示字符串，程序運行時當鼠標移至該按鈕時，提示字符串就會顯示在狀態(tài)欄上，其中在字符‘\n'后出現(xiàn)的字符串，會在出現(xiàn)在按鈕下方的小標注欄內顯示。圖工具欄資源編輯器5.3.2CToolBar類

CToolBar是工具欄類，用于管理應用程序窗口中的工具欄。

CObjectCCmdTargetCWndCControlBarCToolBar成員函數(shù)返回值功能CommandToIndexint獲取工具欄中第一個有給定ID的按鈕的索引CreateBOOL創(chuàng)建工具欄GetButtonInfovoid獲取按鈕的有關信息GetButtonStyleUINT獲取按鈕的風格GetButtonTextCString獲取按鈕的文本GetItemIDUINT獲取給定索引按鈕的IDGetItemRectvoid獲取給定索引項目的顯示矩形GetToolBarCtrlToolBarCtrl&獲取對CtoolBar對象描述的CtoolBarCtrl對象的引用表5-4CToolBar類的主要成員函數(shù)

成員函數(shù)返回值功能LoadBitmapBOOL加載工具欄的按鈕圖像LoadToolBarBOOL加載工具欄資源SetBitmapBOOL設置新的工具欄按鈕位圖SetButtonInfovoid設置按鈕的ID風格和圖像序號SetButtonsBOOL設置工具欄按鈕的IDSettButtonStylevoid設置按鈕的風格SetButtonTextBOOL設置按鈕的文本SetHeightvoid設置工具欄的高度SetSizesvoid設置按鈕的大小表5-4CToolBar類的主要成員函數(shù)(續(xù))

5.3.3常規(guī)工具欄

1.編輯工具欄資源2.為每一個工具欄按鈕添加消息處理函數(shù)3.將工具欄載入應用程序中m_wndToolBar.LoadToolBar(IDR_MAINFRAME)4.給工具欄加上標題m_wndToolBar.SetWindowText(“標準工具欄”)5.使工具欄浮動(?？?例5-5:Ex05_5工具欄的創(chuàng)建、載入、顯示

與隱藏

程序界面：程序啟動時載入標準工具欄和繪圖工具欄，點擊查看下面的繪圖工具欄菜單可以使繪圖工具欄顯示或隱藏。

程序功能：例5-5(圖1)程序界面1.新建一單文檔應用程序Ex05_52.利用工具欄資源編輯器創(chuàng)建繪圖工具欄資源工具欄ID號：ID_DRAW_TOOLBAR直線：ID_DRAW_LINE矩形：ID_DRAW_RECTANGLE圓：ID_DRAW_CIRCLE文字：ID_DRAW_TEXT3.將工具欄載入應用程序中在應用程序中一般通過重載CMainFrame類中的OnCreate函數(shù)載入工具欄。

4.給工具欄加上標題(1)在MainFrm.h頭文件中定義Public:CToolBarm_DrawToolBar;(2)在MainFrm.cpp實現(xiàn)文件中intCMainFrame::OnCreate(LPCREATESTRUCTlpCreateStruct){//載入繪圖工具欄if(!m_DrawToolBar.CreateEx(this,TBSTYLE_FLAT,WS_CHILD|WS_VISIBLE|CBRS_TOP|CBRS_GRIPPER|CBRS_TOOLTIPS|CBRS_FLYBY|CBRS_SIZE_DYNAMIC)

||!m_DrawToolBar.LoadToolBar(IDR_DRAW_TOOLBAR)){ TRACE0("繪圖工具欄創(chuàng)建失??！\n"); return-1;//failtocreate}m_DrawToolBar.CreateEx(this,TBSTYLE_FLAT,WS_CHILD|WS_VISIBLE|CBRS_TOP|CBRS_GRIPPER|CBRS_TOOLTIPS|CBRS_FLYBY|CBRS_SIZE_DYNAMIC)各項的含義：TBSTYLE_FLAT:工具欄風格，平WS_CHILD：子窗口WS_VISIBLE：可見CBRS_TOP：工具欄?？课恢茫琓OP-頂部，BOTTOM-底部…CBRS_GRIPPER：工具欄獲得把手CBRS_TOOLTIPS：工具條將顯示工具提示CBRS_FLYBY：在對應的狀態(tài)欄中顯示提示信息CBRS_SIZE_DYNAMIC：工具欄尺寸可動態(tài)調整//浮動(停靠)//允許工具欄?？坑诳蛻魠^(qū)的任意位置m_DrawToolBar.EnableDocking(CBRS_ALIGN_ANY);//框架允許工具欄?？吭谌魏挝恢肊nableDocking(CBRS_ALIGN_ANY);DockControlBar(&m_DrawToolBar);}//給標準工具欄加上標題m_DrawToolBar.SetWindowText("繪圖工具欄");5.工具欄的顯示與隱藏

(1)編輯查看菜單下的繪圖工具欄菜單繪圖工具欄:ID_VIEW_DRAWTOOLBAR(2)添加和編寫菜單消息響應函數(shù)與菜單更新消息響應函數(shù)//菜單消息響應函數(shù)voidCMainFrame::OnViewDrawbar(){BOOLbVisible=((m_DrawToolBar.GetStyle()&WS_VISIBLE)!=0);ShowControlBar(&m_DrawToolBar,!bVisible,FALSE);RecalcLayout();}RecalcLayout來重新放置它的控制條和客戶窗口。//菜單更新消息響應函數(shù)voidCMainFrame::OnUpdateViewDrawbar(CCmdUI*pCmdUI){BOOLbVisible=((m_DrawToolBar.GetStyle()&WS_VISIBLE)!=0);

pCmdUI->SetCheck(bVisible);}6.編譯、調試和運行 5.5狀態(tài)欄CStatusBar是狀態(tài)欄類，用于管理應用程序窗口中的狀態(tài)欄。

CObjectCCmdTargetCWndCControlBarCStatusBar5.5.1CStatusBar類表5-6CStatusBar類的主要成員函數(shù)成員函數(shù)返回值說明CommandToIndexint獲取給定ID的指示器索引值，第一個指示器的索引值為0CreateBOOL創(chuàng)建狀態(tài)欄GetItemIDUINT獲取給定索引的指示器的IDGetPaneInfovoid獲取給定索引的指示器窗格樣式和寬度GetPaneStylevoid獲給定索引的指示器的樣式GetPaneTextCString獲給定索引的指示器的文本GetStatusBarCtrlCStatusBarCtrl&獲取CstatusBarCtrl類的成員函數(shù)的權限SetPaneInfovoid設置給定索引的指示器標窗格樣式和寬度SetPaneStylevoid設置定索引的指示器的樣式SetPaneTextBOOL設置定索引的指示器的文本1.定義狀態(tài)欄各窗格字符串ID數(shù)組2.聲明狀態(tài)欄對象3.創(chuàng)建狀態(tài)欄把一個窗格添加到狀態(tài)欄中的步驟：1.為窗格創(chuàng)建一個ID命令2.創(chuàng)建窗格的缺省字符串3.添加窗格的命令ID到狀態(tài)欄的描述數(shù)組4.為窗格創(chuàng)建一個處理程序5.5.2狀態(tài)欄的創(chuàng)建創(chuàng)建一個狀態(tài)欄的步驟：例5-8：Ex05_8在狀態(tài)欄顯示鼠標的位置和時間時間鼠標位置新建一單文檔應用程序Ex05_81.創(chuàng)建新的命令ID和缺省字符串新的命令ID為：ID_INDICATOR_MOUSE，缺省字符串為：鼠標位置。創(chuàng)建和設置方法：一種是View->ResourceSymbol，添加ID；然后到Stringtable中添加字符串。另一種是ID號和字符串都在StringTable中添加。當用后一種方式操作時，若完成后，時鐘欄并不顯示時間，則需要將此NewString在StringTable中對應的Value值加1（可在Resource.h中修改）。在狀態(tài)欄中顯示鼠標位置2.添加ID到指示器數(shù)組在MainFrm.cpp中的indicators聲明處添加）ID_INDICATOR_MOUSE,代碼如下：…staticUINTindicators[]={ID_SEPARATOR,ID_INDICATOR_MOUSE,//鼠標位置狀態(tài)欄ID_INDICATOR_CAPS,ID_INDICATOR_NUM,ID_INDICATOR_SCRL,};…這一步中ID_INDICATOR_MOUSE的插入位置將影響鼠標位置窗格在狀態(tài)欄中的顯示位置。3.設置狀態(tài)欄的外觀（在MainFrm.cpp的OnCreate()函數(shù)中實現(xiàn)）intindex=m_wndStatusBar.CommandToIndex(ID_INDICATOR_MOUSE);m_wndStatusBar.SetPaneInfo(index,ID_INDICATOR_MOUSE,SBPS_POPOUT,80);SBPS_POPOUT：凸SBPS_STRETCH：凹4.創(chuàng)建狀態(tài)欄窗格的更新處理程序voidCEx5_8View::OnMouseMove(UINTnFlags,CPointpoint){//設置狀態(tài)欄輸出CStatusBar*pStatus=(CStatusBar*)AfxGetApp()->m_pMainWnd->

GetDescendantWindow(ID_VIEW_STATUS_BAR);if(pStatus){charmouseposition[40];sprintf(mouseposition,"(%d,%d)",point.x,point.y);//在狀態(tài)條的第二個窗格中輸出當前鼠標的位置

pStatus->SetPaneText(1,mouseposition,TRUE);pStatus->SetPaneInfo(1,ID_INDICATOR_MOUSE,SBPS_POPOUT,80);

}

CView::OnMouseMove(nFlags,point);}在狀態(tài)欄中顯示時間（由于狀態(tài)欄根據(jù)Caption確定時間窗格的缺省寬度，使用此值將為時間的顯示預留空間）。1.創(chuàng)建新的命令ID和缺省字符串新的命令ID為：ID_INDICATOR_CLOCK缺省字符串為：00:00:00。2.添加ID到指示器數(shù)組在MainFrm.cpp中indicators聲明處添加

ID_INDICATOR_CLOCK,代碼如下：…staticUINTindicators[]={ID_SEPARATOR,ID_INDICATOR_MOUSE,//鼠標位置狀態(tài)欄ID_INDICATOR_CLOCK,//時鐘狀態(tài)欄ID_INDICATOR_CAPS,ID_INDICATOR_NUM,ID_INDICATOR_SCRL,};…這一步中ID_INDICATOR_CLOCK的插入位置將影響時間窗格在狀態(tài)欄中的顯示位置。3.設置狀態(tài)欄的外觀（在MainFrm.cpp的OnCreate()函數(shù)中實現(xiàn)）intindex=m_wndStatusBar.CommandToIndex(ID_INDICATOR_CLOCK);m_wndStatusBar.SetPaneInfo(index,ID_INDICATOR_CLOCK,SBPS_POPOUT,80);SBPS_POPOUT：凸SBPS_STRETCH：凹4.安裝定時器(在MainFrm.cpp中OnCreate函數(shù)處添加代碼)：m_wndToolBar.EnableDocking(CBRS_ALIGN_ANY);EnableDocking(CBRS_ALIGN_ANY);DockControlBar(&m_wndToolBar);SetTimer(1,1000,NULL);//安裝定時器，并將其時間間隔設為1000毫秒return0;voidCMainFrame::OnTimer(UINTnIDEvent){CTimetime;time=CTime::GetCurrentTime();//得到當前時間,此成員函數(shù)//返回一個代表當前時間的CTime對象

CStrings=time.Format("%H:%M:%S");//轉換時間格式int

index=m_wndStatusBar.CommandToIndex(ID_INDICATOR_CLOCK);m_wndStatusBar.SetPaneText(index,s);CFrameWnd::OnTimer(nIDEvent);}5.編寫時間處理函數(shù)利用ClassWizard為CMainFrame類加入WM_TIMER的消息處理函數(shù)OnTimer，并添加代碼如下：

6.銷毀定時器

利用ClassWizard為CMainFrame類加入WM_CLOSE的消息處理函數(shù)OnClose，并添加代碼如下：voidCMainFrame::OnClose(){ KillTimer(1); CFrameWnd::OnClose();}資源標識前綴資源類型IDM_菜單項IDID_菜單命令IDIDI_圖標IDIDB_位圖IDIDD_對話框IDIDR_菜單欄、工具欄、加速鍵IDIDC_控件IDIDS_字符串表資源類型及其標示voidCTestDlg::OnTimer(UINTnIDEvent){switch(nIDEvent){case1:{CTimeTime=CTime::GetCurrentTime();intHour=Time.GetHour();intMin=Time.GetMinute();if((Hour==18)&&(Min==00))::AfxMessageBox("該下班了");CDialog::OnTimer(nIDEvent);}break;

OnTimer(UINTnIDEvent)函數(shù)case2:{….}break;}SetTimer函數(shù)的原型變?yōu)椋篣INTSetTimer(UINTnIDEvent,UINTnElapse,void(CALLBACKEXPORT*lpfnTimer)(HWND,UINT,YINT,DWORD))

當使用SetTimer函數(shù)的時候，就會生成一個計時器。函數(shù)中nIDEvent指的是計時器的標識，也就是名字。nElapse指的是時間間隔，也就是每隔多長時間觸發(fā)一次事件。第三個參數(shù)是一個回調函數(shù)，在這個函數(shù)里，放入你想要做的事情的代碼，你可以將它設定為NULL，也就是使用系統(tǒng)默認的回調函數(shù)，系統(tǒng)默認認的是onTime函數(shù)。SetTimer()函數(shù)例：SetTimer(1,1000,NULL);1:計時器的名稱；1000：時間間隔，單位是毫秒；NULL:使用onTime函數(shù)。當不需要計時器的時候調用KillTimer(nIDEvent);

KillTimer()函數(shù)KillTimer(intnIDEvent)來取消定時器。(1)

在View中獲得Doc指針

CYouSDIDoc*pDoc

=GetDocument();