跳到主要內容

對話方塊程式的運作流程

對話方塊程式的運作流程
更新日期:2021/3/18

主題重點
  1. 了解對話方塊程式包含的主要類別與對應的檔案。
  2. 了解對話方塊程式的運作流程 - 建構式、初始化、結束函式。
  3. 用MessageBox測試建構式、初始化、結束函式的執行。
  4. 用MessageBox測試對話方塊程式版面上按鈕功能的執行。

準備工作
請先參考如何建立新的"對話方塊"專案的頁面內容,新建一個"所有選項都使用預設值"的對話方塊專案。

請注意:如果你需要繳交每週的練習成果,請記得將新的對話方塊的"專案名稱",設定成你的學號。以下的範例畫面,對話方塊的專案名稱會使用"MFCTest",你可以把"MFCTest"想像替換為你使用的專案名稱,來找到對應的檔案做修改與測試。

1.了解對話方塊程式包含的主要類別與對應的檔案


完成建立一個新的對話方塊專案後,開啟方案總管,應該可以看到如下圖的畫面。在對話方塊專案中,主要要編輯的檔案有兩個,分別是"MFCTestDlg.cpp"與"MFCTestDlg.h"。如果你使用的專案名稱不是"MFCTest",你看到的兩個主要要編輯的檔案應該是"你的專案名稱Dlg.cpp"與"你的專案名稱Dlg.h"。


如果切換到類別檢視,可以看到目前這個專案中已經包含的類別。其中主要需要編輯的,是名稱為"CMFCTestDlg"的類別。如果你使用的專案名稱不是"MFCTest",你看到的主要要編輯的類別名稱應該是”C你的專案名稱Dlg"。 


用滑鼠左鍵點選兩次"MFCTestDlg.h",就可以在程式碼編輯視窗將它開啟,開啟的畫面應該如下圖一樣。程式碼編輯視窗會將程式開發過程中所輸入的"關鍵字"(就是有特殊功能的字詞)顯示為特定顏色,方便我們識別。

在下圖中看到很多的綠色行,是程式中的"註解",在C++中的註解有兩種方式,一個是以兩個斜線"//"開頭,後面這一整行都是註解。另一種方式是將註解文字用"/*"與"*/"框住,這兩個符號間都算註解。程式碼在編譯的過程中,註解會被忽略,不會影響到實際運作的程式碼。

程式碼中的註解,通常是寫給自己或合作開發的夥伴看的,在"關鍵的位置"建議盡可能都要寫上註解文字,以方便日後閱讀時可以了解程式代表的意義。


建議寫上註解的關鍵位置有:1.變數(簡介變數代表的意義)、2.判斷式(例如if...else,解釋為何要這樣判斷)、3.迴圈(解釋為何要迴圈處理,以及停止條件代表的意義)。還有其他你覺得需要提醒日後的自己注意的地方,都可以寫上註解說明。 


用滑鼠左鍵點選兩次"MFCTestDlg.cpp",同樣可以在程式碼編輯視窗將它開啟,開啟的畫面應該如下圖。程式碼編輯視窗可以同時開啟多個檔案進行編輯,正在編輯的是哪個檔案,會在上方以顏色標記提醒我們。


隨著程式功能的增加,程式碼的檔案會越來越長。在程式碼編輯視窗中,可以看到小小的"-"號,點選以後可以"折疊"這一個區塊的程式碼(就是隱藏這一段不顯示,只顯示主名稱)。下圖是把"MFCTestDlg.cpp"中的程式碼都"折疊"後的畫面,行號顯示也會呈現不連續的數字。在編輯程式的過程中,可以把目前不在修改中的程式片段都"折疊"起來,方便我們檢視需要編輯的部分。



2.了解對話方塊程式的運作流程 - 建構式、初始化、結束函式

當我們啟動一個軟體,從用滑鼠點它兩下,到軟體畫面出現在電腦螢幕上,這中間其實軟體已經做了許多事情,比如說:配置需要的記憶體、檢查網路連線是否正常、確認軟體授權是否有效、...。

我們新建立的對話方塊專案程式,雖然尚未開始編輯任何額外的功能,它其實也已經具備這樣預先準備好的"啟動程序"。

以對話方塊專案程式來說,從我們啟動它,到它的視窗出現在螢幕上,會經過的程式步驟有:1.建構式、2.對話方塊初始化函式。程式啟動的過程中,執行的順序為:先執行建構式,再執行對話方塊初始化函式。

建構式是指跟類別名稱有一樣名字的函式,以這裡的例子來說,如果類別名稱是"CMFCTestDlg",建構式名稱也同樣會是"CMFCTestDlg"。函式名稱指的是括號"( )"前的那個名字,括號"( )"中的那一串則是代表要提供給這個函式的參數。


在類別檢視視窗中先點選到目前對話方塊專案的主要要編修的類別名稱(此處為"CMFCTestDlg"),類別檢視視窗的下半部就會顯示這個類別中目前有的函式與變數(紫色是函式、藍色是變數)。點選建構式名稱兩下,就會在程式碼編輯視窗顯示對應的程式區塊(如果你已經把它折疊起來,可點選"+"號將它展開)。 


對話方塊初始化函式的名稱為"OnInitDialog",請參閱下圖。同樣在類別檢視視窗中,點選到目前對話方塊專案的主要要編修的類別名稱(此處為"CMFCTestDlg"),就可以在類別檢視視窗的下半部找到這個函式。在類別檢視視窗點選"OnInitDialog"名稱兩下,就會在程式碼編輯視窗顯示它的程式區塊(比建構式要長許多)。


接著請切換到資源檢視視窗,點兩下"Dialog"資源類別中、你的專案的對話方塊資源(IDD_ABOUTBOX的另外那個),就可以在原本顯示程式碼的程式編輯視窗,顯示這個對話方塊的畫面。一個新的對話方塊專案,畫面應該如下圖。


請確認已經選取到"主對話方塊"(被選取到的物件,周圍會有八個小點),然後切換到"屬性視窗",可以看到這個對話方塊可以設定的屬性。


之後如果用同樣的操作,選取其他對話方塊上的元件,切換到屬性視窗,就可以設定該元件的屬性。目前請先選取到"主對話方塊"。 


在"屬性視窗"的上方,有一個"訊息"按鈕,可以讓我們替選定的元件,加入可以處理特定訊息的"功能"(就是"函式")。請點選"訊息"按鈕,切換到可以處理的訊息清單畫面。"WM_"開頭是指Windows Message的意思。


請在這個訊息清單中,找到一個名稱為"WM_DESTROY"的訊息項目,這是我們在編輯的這個程式、即將結束前(死掉前)會發出的訊息,如下圖所示。



在"WM_DESTROY"訊息名稱的右邊,有一個下拉選單,點選後會出現一行文字"<Add> OnDestroy",請點選這行文字,就會替程式專案加入一個名稱為"OnDestroy"的函式。這個函式"OnDestroy"會在程式被關閉前、被呼叫執行一次,也就是說如果程式在結束前有需要完成的工作,可以在這個函式內做最後的處理。 


這時切換到"類別檢視"視窗,選取"CMFCTestDlg"類別(請替換成"C你的專案名稱Dlg"),就可以在下半段的列表畫面中,看到剛剛新增的"OnDestroy"函式。用滑鼠點選它兩下,就可以在程式碼編輯視窗,顯示"OnDestroy"函式的程式碼片段,方便我們進行編修。



3.用MessageBox測試建構式、初始化、結束函式的執行

我們可以使用"MessageBox"(訊息方塊)來測試程式專案中、特定的程式碼區塊有沒有被執行,或是回傳想要了解的參數訊息。

在這個範例中,我們就用"MessageBox"(訊息方塊)來觀察上段文章說到的"建構式(CMFCTestDlg)"、"初始化函式(OnInitDialog)"、"結束函式(OnDestroy)"的執行狀況。

請切換到"類別檢視"視窗,選到主要對話方塊類別,在下半段的列表中點選兩次建構式(在這裡是CMFCTestDlg,你的專案中應該是有著"C專案名稱Dlg"的函式),在程式碼編輯畫面就可以看到這個要編輯的建構式區塊。

請把下圖的第58行到第63行,輸入到m_hIcon開頭的這一行下方。輸入程式碼的時候,請注意下列這幾項:

1.所輸入的程式碼,要包含在左右兩個"{ }"之間(下圖中"{"在第55行,"}"在第64行)。
2.每行程式碼都要用";"結尾。
3.程式碼英文文字的"大小寫"要與圖片中顯示的一致,不然會有錯誤、不能成功編譯。


輸入完畢後,請將第61行的"CMFCTestDlg"字串,改為你的建構式名稱。 


接著請在"類別檢視"視窗的下半段列表中,點選兩次"OnInitDialog"函式,開啟對應的程式碼區塊。將剛剛你在建構式中輸入的6行程式碼,複製貼上到"OnInitDialog"函式中、如下圖對應的位置。再將下圖中第115行、現在應該是建構式名稱的字串,改為"OnInitDialog"。


最後請在"類別檢視"視窗的下半段列表中,點選兩次"OnDestroy"函式,開啟對應的程式碼區塊。將剛剛貼到OnInitDialog的6行程式碼,複製貼上到"OnDestroy"函式中、如下圖對應的位置。再將下圖中第182行、現在應該是"OnInitDialog"的字串,改為"OnDestroy"。


完成上面三個部分的程式碼編修後,請按Visual Studio畫面上方、中央的"本機Windows偵錯工具"按鈕,進行修改後的程式編譯、連結。

如果都沒有輸入錯誤,就會看到下列兩個圖示,先顯示建構式中的MessageBox(文字資訊為"CMFCTestDlg"或是你的建構式名稱),按下確定後會再顯示初始化函式中的MessageBox(文字資訊為"OnInitDialog")。


萬一有發生編譯錯誤,請回頭檢查剛剛輸入或複製/貼上的程式碼,是不是哪裡有文字輸入錯誤,或是標點符號輸入錯誤(標點符號都要是英文、"半形"的符號,中文、"全形"的不行,這是剛開始輸入程式碼時常發生的問題,請特別留意有沒有發生!)。完成修正後再按"本機Windows偵錯工具"按鈕,看看是不是可以順利執行。 



出現了兩個MessageBox之後,電腦螢幕上應該會顯示主要的對話方塊視窗,如下圖。按下"確定"、"取消"、右上角的關閉按鈕,或連按兩下左上角的圖示等,都可以關閉這個對話方塊程式。


當對話方塊程式的主視窗從電腦螢幕上消失後(這時還沒有從系統記憶體中完全清除),下面這個寫在OnDestroy函式中的MessageBox會彈出到畫面上。


由這裡可以知道,建構式、初始化函式在對話方塊的主要畫面出現在螢幕前,就先被依序執行過一次了,然後主要的對話方塊程式才會被顯示在電腦螢幕上。當主對話方塊程式結束前(已經消失在畫面上時),會執行OnDestroy函式。

我們可以透過使用"MessageBox"(訊息方塊),來測試程式專案中、特定的程式碼區塊有沒有被執行,是一個簡單、便利的方法。


4.用MessageBox測試對話方塊程式版面上按鈕功能的執行

最後這段會說明如何在對話方塊面板上增加新的元件,會以"按鈕(Button)"為例,搭配上段剛剛使用過的MessageBox,用按下按鈕來顯示MessageBox的訊息。

請切換到主對話方塊面板編輯的畫面。如果你的程式碼編輯視窗沒有這個分頁,可以在"資源檢視"視窗中,點選兩下"Dialog"資源分類中的對話方塊資源,將它開啟。

通常開啟對話方塊資源時,Visual Studio會自動調整顯示"工具箱"視窗。如果沒有自動顯示,請自行點選讓它顯示出來。在"工具箱"視窗中會排列許多可以配置在主對話方塊面板上的"元件"(或稱為"控制項"),如:Button、Check Box、Edit Control、...。


請在"工具箱"視窗的"Button"元件上,用滑鼠點選兩下,就會在主對話方塊視窗上,新增一個Button元件(按鈕)。 


請在主對話方塊版面上新增兩個Button元件,並將他們用滑鼠點選後,拖曳到如下的位置(或你覺得合適的位置也可以)。然後對這兩個Button元件,各別用滑鼠點按兩下(兩個Button都要點按兩下),Visual Studio預設會幫我們新增兩個對應到這兩個Button被按下時,要執行的函式區塊。


請切換到"類別檢視"視窗,選取對話方塊專案的主要類別後,在"類別檢視"視窗的下半段列表中,我們可以看到"OnBnClickedButton1"與"OnBnClickedButton2"這兩個新增的函式,點選他們兩下後,可以在程式碼編輯視窗中看到這兩個新增的程式區塊(通常會新增在.cpp檔案的最後)。


請把剛剛在建構式、初始化函式、結束函式中使用過的MessageBox程式碼,複製貼上一份到"OnBnClickedButton1"與"OnBnClickedButton2"函式中。


再將下圖中的第197行的字串改為"測試按鈕1"、第210行的字串改為"測試按鈕2"、,完成的畫面請參考下圖。然後請編譯執行你修改後的程式。 


如果編譯順利成功,對話方塊程式出現在畫面上的樣子,就是我們剛剛新增了兩個按鈕的版面。


請按下名稱為"Button1"的按鈕,應該會顯示如下圖的MessageBox訊息。


請按下名稱為"Button2"的按鈕,應該會顯示如下圖的MessageBox訊息。



由此我們可以知道,透過"工具箱"視窗新增到主對話方塊版面上的元件(這裡是以Button為例,其他元件也可以),可以透過點按兩次加入對應要執行的函式,而我們可以用MessageBox來確認按下對應的按鈕(或其他元件)後,這個新增的函式有沒有被順利執行。

如果你是修課同學,請將這個練習專案程式碼資料夾中不需要的檔案都刪除後(可參照 如何替專案"瘦身" & 備份專案),把剩餘的程式碼以壓縮軟體(zip 或 rar 皆可)壓縮成一個檔案,再將這個檔案email給老師,當作你本週學習成果的確認。

本週的壓縮檔案email繳交的時限,**請在下一週的週五(2021/3/26) 13:00前完成逾時算缺交**,請把握時間完成。


歡迎社群分享。若要全文轉載,請先來信詢問。禁止修改內文,禁止商業使用,必須註明來自「太陽部落」及附上原文連結:https://sunblogsws.blogspot.com/2020/03/vsdialogmsgbox.html

留言

這個網誌中的熱門文章

Visual Studio 常用的視窗

Visual Studio 常用的視窗 更新日期:2020/3/24 使用Visual Studio進行程式撰寫常會使用的視窗有"方案總管"、"類別檢視"、"資源檢視"、"工具箱"跟"屬性"視窗。如果你的Visual Studio畫面上沒有看到這些視窗,可以在畫面上方的選單中,點選"檢視",在裡面可以找到並顯示這些視窗,如下圖。 如果你的Visual Studio正在編輯一個程式專案(例如 "對話方塊"專案 ),切換到"方案總管"、"類別檢視"、"資源檢視"、"工具箱"跟"屬性"視窗時,畫面應該會跟下列這些常用視窗的螢幕截圖相近。 方案總管:類似使用"檔案總管",可以檢視目前編輯中的程式專案有哪些檔案。畫面中會自動將檔案分成三類,"來源檔案"是副檔名為.cpp的主要程式碼檔案,"標頭檔”是副檔名為.h、用來宣告或定義類別、函數或變數的檔案,"資源檔"則是不歸屬上面兩類的其他檔案。  類別檢視:可以檢視目前的程式專案中有哪些類別,以及選定的類別中有哪些函數或變數。 資源檢視:可以檢視目前的程式專案中包含的資源項目,如:對話方塊、圖示、字串表、版本資訊等。 工具箱:在"資源檢視"視窗點選開啟"對話方塊"時,畫面會自動切換到"工具箱"視窗。在"工具箱"視窗中有常用的Windows元件,可以透過點選兩次,或是選擇後直接在"對話方塊"拖放,將這些元件新增到對話方塊的版面上。 屬性:當我們選取對話方塊版面上的任何一個元件時,像:按鈕、文字、對話方塊本身,切換到"屬性"視窗,就可以看到這個元件可供設定的屬性。 上面說到的這些視窗,都可以依照自己的喜好,按住滑鼠左鍵、拖曳到想放置的位置。拖曳的時候,畫面中間會顯示可以選擇放

Visual Studio Community 2019 下載 & 安裝

Visual Studio Community 2019 下載 & 安裝 更新日期:2020/3/13 下載網址  https://visualstudio.microsoft.com/zh-hant/downloads/ 安裝步驟 1.工作負載頁面:選取 通用Windows平台開發 & 使用C++的桌面開發 。  2.個別元件頁面:在搜尋框輸入" MFC x86 ",選取下列的安裝選項。 3.開始安裝:網路連線穩定的話,可能要花30-60分鐘。 4.安裝完成後可以在"開始"功能表中看到新增的圖示。 5.第一次啟動Visual Studio 2019。請將"開發設定"直接選定為” Visual C++ ”,方便之後練習範例程式使用,並選擇自己喜歡的色彩佈景主題。 6.選擇要執行的項目:可以選擇右下角的" 不使用程式碼繼續 ",應該會出現步驟7的畫面。也可以選擇"建立新的專案(N)",則會出現步驟8的畫面。  7.Visual Studio準備就緒的空白畫面。 在就緒畫面時,點選左上角功能表的"檔案/新增/專案",就會出現步驟8"建立新專案"的畫面。 8.建立新專案:在搜尋框輸入" MFC ",篩選出相關的專案開發選項。選擇" MFC應用程式 ”項目,按"下一步"按鈕。 9.設定新的專案:在這個頁面可以輸入自己要開發的" 專案名稱 ",並選擇程式碼資料要儲存在硬碟上的那個" 位置 "(請輸入自己便利找尋與管理的資料夾位置)。為方便管理所有程式碼資料,請勾選最下方的" 將解決方案與專案置於相同目錄中 "的選項(這樣會將"解決方案"的檔案跟其他程式碼放在同一個資料夾)。 10.MFC應用程式:請在" 應

身體質量指數(Body Mass Index, BMI)計算程式範例

身體質量指數(Body Mass Index, BMI)計算程式範例 更新日期:2021/3/25 本頁內容會說明如何以Visual Studio、Visual C++,使用對話方塊形式,撰寫一個可以進行 身體質量指數(Body Mass Index, BMI)計算的程式。 主題重點 了解與練習如何配置對話方塊的版面。 了解如何在對話方塊專案中加入能夠"連結版面元件"的成員變數。 了解如何設定成員變數的初始值。 了解如何取得與更新對話方塊版面上所顯示的數值(UpdataData)。 了解如何檢查輸入的數值是否在合理範圍。 準備工作 請先參考 如何建立新的"對話方塊"專案 的頁面內容,新建一個" 所有選項都使用預設值 "的對話方塊專案。 請注意: 如果你需要繳交每週的練習成果,請記得將新的對話方塊的"專案名稱",設定成你的學號。 以下的範例畫面,對話方塊的專案名稱會使用"MFCTest",你可以把"MFCTest"想像替換為你使用的專案名稱,來找到對應的檔案做修改與測試。 1. 如何配置對話方塊的版面 完成新增一個對話方塊專案後,如果沒有發生問題,Visual Studio的備妥畫面如下。 請切換到"資源檢視"視窗,開啟主對話方塊資源(這裡的範例為"IDD_MFCTEST_DIALOG",在你的專案中應該為" IDD_你的專案名稱_DIALOG "),程式編輯畫面會出現這個對話方塊的版面外觀,應該如下圖一樣。  請用滑鼠選取對話方塊上的三個預設元件:"TODO:在此放置對話方塊控制項。"、"確定(按鈕)"、"取消(按鈕)",按下鍵盤的Delete鍵將他們刪除,因為在後續的範例撰寫中,不會再使用到他們。 刪除時可能會出現下圖的錯誤訊息,提示"錯誤的字體"。這是因為對話方塊預設的字型選取有問題,可以先按"確定"關掉這個警告訊息,先把上一個步驟要刪