《面向?qū)ο蟪绦蛟O(shè)計》課程界面設(shè)計練習(xí)題目.doc

面向?qū)ο蟪绦蛟O(shè)計課程界面設(shè)計練習(xí)題目Windows NT系統(tǒng)內(nèi)建了若干個的常用控件，極大地方便了Windows下可視化程序的開發(fā)。對于初學(xué)者來說，能夠熟練地使用這些控件，是學(xué)好C+面向?qū)ο缶幊痰年P(guān)鍵步驟。為了指引初學(xué)者或者檢驗(yàn)學(xué)習(xí)效果，下面設(shè)計了五個練習(xí)題目，囊括了大部分的常用控件，以及程序界面開發(fā)中常常使用的技術(shù)。練習(xí)題目如下：一、播放器配置程序二、消息提示器三、流媒體管理器四、可定制背景的視圖五、通訊簿一、播放器配置程序內(nèi)容：制作一個基于對話框的播放器配置程序，能夠從配置文件（*.ini）中讀取設(shè)置信息；能夠?qū)⑿薷暮蟮脑O(shè)置信息保存在配置文件中。界面如圖1所示：16141512111098675321341圖1 播放器設(shè)置界面目的：掌握使用VS建立基于對話框的應(yīng)用程序；熟悉標(biāo)簽（Static Text）、分組（Group Box）、按鈕（Button）、編輯框（Edit Control）、組合框（Combo Box）、單選按鈕（Radio Button）、復(fù)選框（Check Box）、熱鍵設(shè)置控件（Hot Key）等常用控件的屬性、事件；掌握配置文件（*.ini）的讀寫；學(xué)習(xí)MSDN文檔的查閱等。要求：1、 控件1（組合框）：不可輸入文字，只能從下拉列表中選取一項，列表中的內(nèi)容為：簡體中文、繁軆中文、English；2、 控件2（復(fù)選框）：默認(rèn)勾選。3、 控件3（熱鍵設(shè)置控件）：當(dāng)控件2勾選時，控件才3可編輯；當(dāng)控件2未勾選時，控件3灰掉（不可編輯）；4、 控件47（復(fù)選框）：默認(rèn)勾選控件4和控件5；5、 控件8（編輯框）：只能輸入數(shù)字，范圍160；6、 控件911（一組單選按鈕）：默認(rèn)選中控件9；7、 控件12（按鈕）：當(dāng)點(diǎn)擊按鈕時，在13中輸出如圖1所示的文字；8、 控件13（編輯框）：能夠輸入換行符，具有垂直滾動條，當(dāng)文本框內(nèi)容不能全部顯示時，滾動條自動有效；9、 控件1416（按鈕）：按鈕15初始不可用，當(dāng)更改設(shè)置信息后才激活；接收回車提交命令；點(diǎn)擊該按鈕，將新的設(shè)置信息（控件12和13不觸發(fā)配置信息改變）寫回與程序同目錄下，名稱為config.ini配置文件中；點(diǎn)擊按鈕14時，如果設(shè)置信息有更改，將設(shè)置信息寫入配置文件，并關(guān)閉對話框；若設(shè)置信息未發(fā)生改變，直接關(guān)閉對話框；點(diǎn)擊16直接關(guān)閉對話框；10、 配置文件讀寫要求：程序啟動時若沒有找到配置文件，能夠按照默認(rèn)設(shè)置初始化界面（按鈕15激活），點(diǎn)擊按鈕14和15生成配置文件并寫入設(shè)置信息，點(diǎn)擊16則不生成配置文件；若找到配置文件，從文件中加載配置信息并初始化程序界面；11、 對話框樣式：對話框可以最小化，不能最大化，不可以改變大??；界面布局要工整；對話框初始時控件1取得焦點(diǎn)，按tab鍵焦點(diǎn)將按圖中標(biāo)注的序號逐一移動到下個控件上。提示：1、 復(fù)選框勾選狀態(tài)的獲?。嚎梢詫?fù)選框與一個BOOL變量關(guān)聯(lián)，通過BOOL變量得知其勾選與否；也可以獲取其控件狀態(tài)（state）來得到是否被勾選；可以響應(yīng)復(fù)選框的單擊事件來處理復(fù)選框狀態(tài)改變時的任務(wù)；2、 單選按鈕組的概念：點(diǎn)選按鈕有組的概念，同一組內(nèi)的單選按鈕相互排斥，只能有一個被點(diǎn)選；一個單選按鈕A若具有GROUP=true屬性，則緊跟其后的GROUP=false屬性的單選按鈕同A為一組，可以為A關(guān)聯(lián)一個int型變量，改變量反應(yīng)了該組內(nèi)那個按鈕被點(diǎn)選；3、 配置文件的讀寫：配置文件(*.ini)為文本文件，常用于保存配置信息；系統(tǒng)具有GetPrivateProfileString、WritePrivateProfileString等函數(shù)用于操作配置文件，具體可參見MSDN中相關(guān)介紹；4、 使用Tab鍵移動焦點(diǎn)：需要控件具有Tabstop屬性；焦點(diǎn)移動的順序與界面控件的排放順序有關(guān)，可以在界面編輯界面按Ctrl+D顯示控件的序號，在序號上點(diǎn)擊可以修改控件的順序。二、消息提示器內(nèi)容：制作一個基于對話框的消息提示器，能夠添加、刪除消息，輪流展現(xiàn)消息。主界面如圖2所示；點(diǎn)擊“消息管理”，彈出消息管理界面，如圖3所示；在消息管理界面點(diǎn)擊“+”，彈出新建消息對話框，如圖4所示。1-31-51-41-21-1圖2 消息提示器目的：進(jìn)一步了解對話框的設(shè)置，如模態(tài)和非模態(tài)、置頂?shù)?；學(xué)會界面布局管理；掌握界面邏輯控制；掌握列表（List Box）控件的使用；掌握定時器的使用。要求：1、 控件1-1（復(fù)選框）：設(shè)置屬性為按鈕樣式；點(diǎn)擊一次，按鈕凹下，文字變?yōu)椤叭∠庙敗?，對話框置頂（主界面失去焦點(diǎn)，獲得焦點(diǎn)的其他程序界面仍不能遮蓋住主界面），再次點(diǎn)擊按鈕，按鈕彈出，文字恢復(fù)為“置頂”，主界面取消置頂；2、 控件1-2、1-3（按鈕）：點(diǎn)擊按鈕1-2彈出消息管理界面（模態(tài)），主界面不可操作；點(diǎn)擊按鈕1-3，按鈕1-2灰掉（不可操作），按鈕1-3文字變?yōu)椤巴Ｖ固崾尽保?-5中開始顯示消息；再次點(diǎn)擊按鈕1-3，按鈕1-2激活，按鈕1-3文字恢復(fù)為“開始提示”；點(diǎn)擊1-4，若正在提示消息，停止提示，然后退出程序；3、 控件1-5（編輯框）：用于顯示提示的消息，能夠顯示多行文字，具有水平、垂直滾動條，只讀，無邊框；未進(jìn)行消息提示時，內(nèi)容為空；4、 控件2-1、2-2（列表）：項為消息名稱；列表2-1顯示不進(jìn)行提示的消息；列表2-2顯示要進(jìn)行提示的消息；2-22-12-132-122-112-32-42-92-102-82-72-642-5圖3 消息管理對話框3-43-33-23-1圖4 新建消息對話框5、 控件2-3（按鈕）：點(diǎn)擊彈出新建消息對話框；6、 新建消息：輸入名稱和消息內(nèi)容，點(diǎn)擊按鈕3-3，檢查消息名稱是否不為空，若為空給出修改提示，不為空則創(chuàng)建新的消息，消息列表增加一項；點(diǎn)擊“取消”不創(chuàng)建新的消息；7、 控件2-4（按鈕）：點(diǎn)擊按鈕，若消息列表未選中一項給出提示；已選中一項，將選中項刪除；8、 控件2-5（按鈕）：點(diǎn)擊按鈕，若消息列表未選中一項給出提示；已選中一項，將其移動到提示列表；9、 控件2-6（按鈕）：點(diǎn)擊按鈕，若提示列表未選中一項給出提示；已選中一項，將其移動到消息列表；10、 控件2-7（按鈕）：點(diǎn)擊按鈕，將消息列表中的項全部移到提示列表；11、 控件2-8（按鈕）：點(diǎn)擊按鈕，將提示列表中所有項移到消息列表；12、 控件2-9（按鈕）：點(diǎn)擊按鈕，若提示列表未選中一項給出提示；已選中一項，將選中項上移一次（已位于最頂端的項不再移動）；13、 控件2-10（按鈕）：點(diǎn)擊按鈕，若提示列表未選中一項給出提示；已選中一項，將選中項下移一次（已位于最底端項不再移動）；14、 控件2-11（編輯框）：用于設(shè)定輪流提示消息的時間隔，僅可輸入數(shù)字，數(shù)值范圍50030000；15、 界面邏輯：當(dāng)提示列表中沒有要提示的消息時，1-3灰掉；當(dāng)提示列表中存在消息時，1-3激活；點(diǎn)擊1-3，啟動消息提示，按設(shè)定的時間間隔，依照提示列表中消息的順序逐一在1-5中顯示提示列表中的消息；16、 對話框樣式：標(biāo)題欄上動態(tài)顯示當(dāng)前時間；主界面可用鼠標(biāo)動態(tài)調(diào)整大小；當(dāng)主界面大小改變時，其中按鈕相對窗口邊緣的位置不變，只有1-5大小發(fā)生變化。提示：1、 定時器的使用：啟動定時器采用Cwnd:SetTimer函數(shù)，程序退出前應(yīng)該調(diào)用CWnd:KillTimer停止之前啟動的定時器；函數(shù)的具體使用方法參考MSDN文檔；2、 對話框的置頂，界面控件位置、大小修改：可通過Cwnd:SetWindowsPos函數(shù)實(shí)現(xiàn)；函數(shù)的具體使用方法參考MSDN文檔；三、流媒體管理器內(nèi)容：制作一個基于單文檔框架的流媒體管理器（視圖類的基類為CFormView），能夠添加、刪除流媒體，查看流媒體屬性等，主界面如圖5所示，菜單結(jié)構(gòu)如圖6所示，添加流媒體對話框如圖7所示：1-1 菜單結(jié)構(gòu)如圖61-31-2圖5 流媒體管理器2-62-52-42-32-12-2圖6 菜單結(jié)構(gòu)圖7 添加流媒體界面目的：熟悉單文檔程序框架；學(xué)會菜單、工具欄的編輯以及消息響應(yīng)；掌握表格控件（List Control）、IP地址控件（IP Address）、選項卡控件（Tab Control）的使用；了解右擊快捷菜單的使用等。要求：1、 程序框架：單文檔程序框架，視圖類的基類為CFormView；主框架可以用鼠標(biāo)調(diào)節(jié)大??；具備菜單欄1-1、工具欄1-2，不要狀態(tài)欄；將默認(rèn)主界面標(biāo)題欄中的“ 無標(biāo)題”去掉；按照圖5圖6修改默認(rèn)菜單和工具欄，菜單“視圖”和“幫助”項不變，工具欄按鈕依次為“添加流媒體”、“刪除流媒體”、“屬性”； 2、 控件1-3（表格）：具有如圖5示的報表樣式及表頭；填充整個View區(qū)域，改變程序窗口大小，1-3也調(diào)節(jié)大?。挥覔?-3中一項數(shù)據(jù)彈出如圖5所示的快捷菜單，內(nèi)容同主菜單“流媒體”項；3、 菜單“流媒體”-“添加流媒體”：點(diǎn)擊彈出添加流媒體對話框；4、 控件2-1（編輯框）：限最大字符數(shù)16；5、 控件2-2（組合框）：默認(rèn)列表數(shù)據(jù)為“RTSP”、“MMS”、“HTTP”；用戶也可以輸入文字；6、 控件2-3（IP地址控件）；7、 控件2-4（編輯框）：可輸入多行文字；限制最大字符數(shù)128；8、 控件2-5、2-6（按鈕）：輸入完設(shè)置信息，點(diǎn)擊按鈕2-5添加一個流媒體，同時1-3對應(yīng)添加一項；若設(shè)置信息除備注外有空，將不添加流媒體，給出提示；點(diǎn)擊按鈕2-6放棄添加新的流媒體；9、 界面邏輯：若沒有1-3中未選中一項，菜單“流媒體”中“刪除流媒體”、“屬性”不可用，工具欄對應(yīng)按鈕不可用；10、 界面邏輯：若1-3中選中一項，點(diǎn)擊菜單“流媒體”-“刪除流媒體”，彈出刪除確認(rèn)對話框，確認(rèn)后刪除選中的流媒體，點(diǎn)擊工具欄“刪除流媒體”按鈕具有同樣響應(yīng)；11、 界面邏輯：若1-3中選中一項，點(diǎn)擊菜單“流媒體”-“屬性”或工具欄按鈕“屬性”，彈出下圖8所示的“流媒體屬性”對話框；對話框具有兩個頁面，“常規(guī)”頁面顯示選中流媒體的信息（均不可編輯），“網(wǎng)絡(luò)”頁面顯示網(wǎng)絡(luò)狀態(tài)（為簡單起見，固定為圖示內(nèi)容）。點(diǎn)擊“確定”關(guān)閉屬性對話框。圖8 流媒體屬性-常規(guī)頁面圖9 流媒體屬性-網(wǎng)絡(luò)頁面提示：1、 去掉標(biāo)題欄的“ 無標(biāo)題”：可以在函數(shù)CMainFrame:PreCreateWindow中去掉框架樣式FWS_ADDTOTITLE；2、 IP 地址控件內(nèi)容的獲取：可通過關(guān)聯(lián)字符串的方式獲取輸入的IP地址；可通過關(guān)聯(lián)DWORD整數(shù)的方式獲取輸入的IP地址；3、 選項卡的使用：圖8和圖9共使用了三個對話框；通過在TabControl控件的區(qū)域內(nèi)創(chuàng)建嵌入式的子對話框?qū)崿F(xiàn)圖示效果，子對話框具有Border=None、Style=Child的樣式，然后通過CDialog:Creat函數(shù)創(chuàng)建，再調(diào)用ShowWindow顯示出來；在TabControl的切換事件中，根據(jù)選中的要顯示頁面索引，將對應(yīng)的子對話框顯示出來，將其它對話框隱藏起來；4、 選項卡的替代者：屬性頁（CPropertySheet、CPropertyPage）也能實(shí)現(xiàn)選項卡的效果，可以在網(wǎng)絡(luò)上查找使用方法；四、可定制背景的視圖內(nèi)容：制作單文檔程序，如圖10所示的效果，能夠根據(jù)設(shè)置的“畫面屬性”在視圖中繪制背景：1-1圖10 主界面及菜單結(jié)構(gòu)2-72-82-52-62-42-22-32-1圖11 畫面屬性設(shè)置界面目的：掌握滑塊控件（Slider Control）、提示條（ToolTip Control）的使用；了解自定義控件的方法；掌握文件瀏覽對話框（CFileDialog）、顏色選擇對話框(CColorDialog)等常用對話框的使用；了解使用GDI繪制簡單圖形圖像的方法等。要求：1、 主界面樣式：主窗口采用視圖基類繼承自CView的單文檔程序框架；可用鼠標(biāo)調(diào)節(jié)窗口大小，同時視圖內(nèi)容也改變大小并保持填充整個區(qū)域；標(biāo)題文字頂部居中；在默認(rèn)菜單中添加“設(shè)置”-“畫面設(shè)置”；工具欄只有一個按鈕“畫面設(shè)置”；點(diǎn)擊“畫面設(shè)置”，彈出畫面屬性對話框；狀態(tài)欄中顯示鼠標(biāo)相對于視圖左上角的位置；2、 控件2-1（編輯框）：最大字符數(shù)限制為1-16；內(nèi)容默認(rèn)為“畫面1”；3、 控件2-2（滑塊）：調(diào)節(jié)范圍（1-30），2-3為編輯框，只能輸入數(shù)字，范圍（1-30）；調(diào)節(jié)Slider，編輯框同步顯示當(dāng)前設(shè)置值；改變編輯框中的數(shù)值，Slider同步改變滑塊位置；默認(rèn)值8；4、 控件2-4（自定義按鈕）：點(diǎn)擊按鈕彈出顏色選擇對話框；選擇顏色后，在按鈕上顯示選擇的顏色；默認(rèn)顏色值為RGB(0,0,255)；5、 控件2-5（編輯框）：只讀；6、 控件2-6（按鈕）：點(diǎn)擊按鈕，彈出文件選擇對話框，文件類型過濾類型為.bmp、.jpg、.png，選中文件后，編輯框2-5中顯示文件路徑；7、 控件2-7（按鈕）：點(diǎn)擊按鈕，完成“畫面屬性”設(shè)置，主窗口視圖中按設(shè)置繪制出背景圖像；8、 控件2-8（按鈕）：點(diǎn)擊按鈕，放棄“畫面屬性”設(shè)置的修改，視圖背景不變；9、 “畫面屬性”界面初始化：程序啟動后，初次彈出“畫面屬性”對話框，加載默認(rèn)設(shè)置；之后彈出“畫面屬性”對話框加載當(dāng)前設(shè)置；10、 提示條：鼠標(biāo)放置到控件2-1、2-4、2-6上，會彈出對應(yīng)的提示條，如圖11所示。（圖中為了表示各控件的提示內(nèi)容，而全部顯示出來）；提示：1、 滑塊控件的使用：同滾動條相似，滑塊位置改變后會向窗體發(fā)送WM_HSCROLL（水平Slider）或WM_VSCROLL（垂直Slider）消息；對話框中響應(yīng)該消息的函數(shù)具有三個參數(shù)，其中一個為CScrollBar* pScrollBar，用于指定發(fā)送消息的控件，需轉(zhuǎn)換為CSliderCtrl*類型的指針獲取位置；2、 自定義按鈕：需要從CButton派生一個子類，姑且叫做CColorBtn，然后再CColorBtn類中響應(yīng)鼠標(biāo)點(diǎn)擊事件彈出顏色對話框，選擇顏色后在DrawItem函數(shù)中以選中的顏色繪制控件外觀；使用自定義控件時，在對話框中放置一個按鈕將其與CColorBtn類型的變量關(guān)聯(lián)，就可以將放置的按鈕樣式展現(xiàn)為自定義樣式；3、 提示條控件的使用：提示條在界面設(shè)計工具箱中找不到，需要完全由代碼創(chuàng)建顯示等，可通過網(wǎng)絡(luò)查找使用方法；五、通訊簿內(nèi)容：制作一個通訊錄程序，程序主界面如圖12所示：1-141-131-101-51-41-21-11-151-161-121-111-91-81-71-61-3圖12 通訊簿主界面釋放鼠標(biāo)后完成節(jié)點(diǎn)移動2-22-32-1圖13 完成拖動聯(lián)系人的效果圖14 添加分組界面目的：掌握樹形控件（Tree Control）、時間日期控件（Date Time Picker）、分割線（Picture Control）的使用；掌握拖拽、移動、釋放左鍵等鼠標(biāo)事件的使用。要求：1、 控件1-1（樹形控件）：用于顯示分組和聯(lián)系人；節(jié)點(diǎn)具備圖標(biāo)；具有Has Button、Has Lines、Lines At Root屬性；默認(rèn)具有“未分組”節(jié)點(diǎn)；點(diǎn)擊樹中的分組，右側(cè)“聯(lián)系人信息”各內(nèi)容為空；點(diǎn)擊選中一個聯(lián)系人，右側(cè)“聯(lián)系人信息”顯示該人的各項信息；2、 控件1-2、1-3、1-51-9（編輯框）：1-2、1-3最大字符樹限制為16個；1-5、1-6分別用于顯示電話1、電話2，只能輸入數(shù)字，最大字符個數(shù)限制為16個；1-7、1-8最大字符個數(shù)限制為128個；1-9可輸入換行符，具有水平、垂直滾動條，最大字符數(shù)限制為256個；3、 控件1-4（日期時間控件）：用于顯示和設(shè)置聯(lián)系人的生日；為日期模式； 4、 界面邏輯：點(diǎn)擊按鈕1-10，若姓名不為空，則以“聯(lián)系人信息”中的內(nèi)容生成一個新的聯(lián)系人并加入到“未分組”中；若姓名空給出補(bǔ)全提示；5、 界面邏輯：拖樹中未選中聯(lián)系人，按鈕1-11灰掉；若樹中選中一個聯(lián)系人，安妮1-11激活；點(diǎn)擊按鈕1-11，若姓名不為空，則以“聯(lián)系人信息”中的內(nèi)容修改樹中選中的聯(lián)系人信息；若姓名為空給出補(bǔ)全提示