身體質量指數(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鍵將他們刪除，因為在後續的範例撰寫中，不會再使用到他們。
刪除時可能會出現下圖的錯誤訊息，提示"錯誤的字體"。這是因為對話方塊預設的字型選取有問題，可以先按"確定"關掉這個警告訊息，先把上一個步驟要刪除的三個預設元件都刪除掉。
刪除所有對話方塊版面上的預設元件後，空白版面的畫面應該如下圖。
在刪除版面上的預設元件時，出現"錯誤的字體"的警告訊息，原因是對話方塊使用的預設字型無法被Visual Studio順利辨識。請選到這個主對話方塊本身，按下滑鼠右鍵，然後在彈出的功能表中選擇"屬性"選項，Visual Studio會切換到這個主對話方塊的"屬性"視窗。
在對話方塊可以設定的屬性中，請找到"Font(Size)"這一個項目，預設狀況應該如下圖，在屬性名稱右邊的欄位是出現代表無法辨識的"????(9)"。請按下"????(9)"右邊的"..."按鈕，呼叫出"字型"對話方塊。
在字型對話方塊中，可以選擇我們正在編輯中的主對話方塊的預設字型。在下圖左方的選單中，有列出的字型都可以選用。建議使用歷代Windows作業系統都會內建的"細明體"、"新細明體"、"標楷體"等字型。這裡的範例是選擇使用"新細明體"，字型大小選定為"12"(預設是9)。選擇完畢後，請按下"確定"按鈕，以完成字型設定。
自己選定了字型後，在主對話方塊的屬性視窗中，"Font(Size)"屬性就會出現剛剛在"字型"對話方塊中選定的結果，就不會再出現找不到預設字型的警告訊息。
接著請在空白的主對話方塊版面上，使用"工具箱"視窗，新增三個"Static Text"、三個"Edit Control"、一個"Button"，新增完成的參考畫面如下。
請注意，新增三個"Static Text"、三個"Edit Control"時，請依序"由上而下"排列(最上面是第一個、中間是第二個、下面是第三個)，以避免後面撰寫程式碼時可能發生的順序錯誤問題。
新增的三個"Static Text"，將會用來顯示文字("身高(m)"、"體重(kg)"、"BMI")，新增的三個"Edit Control"前兩個會讓使用者輸入身高與體重數值，第三個則是用來顯示BMI的計算結果。新增的"Button"會用來執行BMI的計算。
請選取第一個"Static Text"，按滑鼠右鍵，在彈出的功能表中選擇"屬性"選項。注意：這個步驟將會重複執行三次(包含本次)，只是每次選取不同的"Static Text"來變更屬性值！
找到這個"Static Text"屬性列表中，名稱為"Caption"的項目，將原本為"Static"的文字，修改為"身高(m)"。修改完畢後按下Enter鍵，就可以在主對話方塊上看到修改後的文字被顯示出來，如下圖。
參照第一個"Static Text"修改"Caption"屬性的操作方法，將第二個"Static Text"的"Caption"屬性，修改為"體重(kg)"。
參照第一個"Static Text"修改"Caption"屬性的操作方法，將第三個"Static Text"的"Caption"屬性，修改為"BMI"。
三個"Static Text"的"Caption"屬性都修改完成後，如果文字有被遮蔽，可以用滑鼠選取這些文字(按著鍵盤的Shift或Control鍵可以連續選取多個元件)，用滑鼠拖曳或鍵盤的上下左右按鍵，來調整他們的位置。
2. 如何在對話方塊專案中加入能夠"連結版面元件"的成員變數
請選取第一個"Edit Control"，按滑鼠右鍵，在彈出的功能表中選擇"加入變數"，會彈出"新增控制變數"的對話方塊。注意：這個步驟將會重複執行三次(包含本次)，只是每次選取不同的"Edit Control"來加入變數！
在"新增控制變數"對話方塊中，請確定"控制項識別碼"顯示的資訊為"IDC_EDIT1"，表示選取的是第一個"Edit Control"無誤。
請點選"類別"的下拉選單，選取"值"的選項(預設原本是"控制項")。
請在"名稱"的欄位輸入"m_fHeight"，"變數類型"欄位輸入"float"，"註解"欄位輸入"記錄身高(m)的變數"。
參照第一個"Edit Control"新增控制變數的方式，選取第二個"Edit Control"，將"新增控制變數"對話方塊的設定值調整成下圖所示。
參照第一個"Edit Control"新增控制變數的方式，選取第三個"Edit Control"，將"新增控制變數"對話方塊的設定值調整成下圖所示。
完成上述步驟，我們替三個"Edit Control"都新增了對應的成員變數(member variable)，這些成員變數的數值，可以跟這些"Edit Control"產生連結，做資料的相互交換。
請切換到"類別檢視"視窗，點選主對話方塊類別(這裏的範例是"CMFCTestDlg"，你的應該會是"C你的專案名稱Dlg")，在下半段視窗顯示的資訊中，就可以看到剛剛新增的這三個成員變數(m_fBMI、m_fHeight、m_fWeight，預設是照英文字母排序)。
如果在"類別檢視"視窗中，用滑鼠點選兩次剛剛新增的成員變數名稱(m_fBMI、m_fHeight、m_fWeight，任一個皆可)，就會開啟主對話方塊所使用的"類別"的定義檔案(這裡的範例是"MFCTestDlg.h"，你的應該會是"你的專案名稱Dlg.h")，可以在程式碼編輯視窗中看到這三個成員變數的"宣告(定義)"程式碼，以及輸入的註解，可參考下圖。
此時如果按下Visual Studio畫面上方、中央的"本機Windows偵錯工具"按鈕，編譯執行這個修改過的對話方塊專案，成功的話應該會出現如下的執行畫面。
原本的"Static Text"文字顯示會變成剛才修改過的"身高(m)、"體重(kg)、BMI"，原本空白的三個"Edit Control"則會填上預設的數值"0"。
3. 如何設定成員變數的初始值
Visual Studio自動為"連結版面元件"的成員變數加入的初始值，有時候可能並不合適(例如：上面例子的"0"，身高、體重都是"0"，計算BMI就會造成錯誤)，而我們可以為這些成員變數設定一個合適的初始值。
請開啟"類別檢視"視窗，點選主對話方塊類別(這裏的範例是"CMFCTestDlg"，你的應該會是"C你的專案名稱Dlg")，在下半段視窗顯示的資訊中，找到"建構式"(這裏是名稱為"CMFCTestDlg"的函式，可參考"對話方塊程式的運作流程"的相關內容)。
在"類別檢視"視窗中，用滑鼠左鍵點選兩次建構式名稱，會在程式碼編輯視窗顯示建構式的程式碼，可參考下圖。我們可以在這裡看到"m_fHeight"、"m_fWeight"、"m_fBMI"這三個成員變數，後面還跟著"(0)"，括號中的"0"，就是預設給定的變數初始值。
請將"m_fHeight"、"m_fWeight"後面跟著的括號中的"0"，修改成一個合適的數值，例如改成：m_fHeight(1.75)、m_Weight(65)。
完成後在按Visual Studio畫面上方、中央的"本機Windows偵錯工具"按鈕，編譯執行這個修改過的專案，應該可以看到下面的畫面(前兩個Edit Control的顯示數值會是你剛剛修改的值)。代表已經成功完成"連結版面元件"的成員變數初始值的修改。
4. 如何取得與更新對話方塊版面上所顯示的數值(UpdataData)
請切換到主對話方塊版面編輯的畫面。如果已經被你關閉，可以從"資源檢視"視窗中，在"Dialog"資源類別中找到這個對話方塊(在你的專案中，這個主對話方塊的資源名稱應該是"IDD_你的專案名稱_DIALOG")，用滑鼠左鍵點兩下就可以將它開啟。
用滑鼠左鍵點一下選取"Button1"這個按鈕，再按右鍵會彈出功能表，選取"屬性"項目，來編輯按鈕的屬性。畫面應該會切換到"屬性"視窗。
在"屬性"視窗中，請先確定名稱為"ID"的屬性，其內容是"IDC_BUTTON1"，表示目前正在編輯的是畫面上僅有的這個按鈕。找到名稱為"Caption"的屬性，將原本預設的內容修改為"計算BMI"。按下Enter鍵後，可以立即在畫面上看到這個按鈕顯示的文字，已經改為剛剛輸入的"計算BMI"。
接著請用滑鼠左鍵，在主對話方塊版面上"點兩次"這個按鈕，為它加入對應要執行的函式。
為按鈕加入對應要執行的函式後，Visual Studio會自動跳轉到程式碼編輯視窗，顯示這個函式的程式碼區塊，方便我們做後續的修改。加入的函式預設名稱為"OnBnClickedButton1"，如果有多個按鈕，加入的函式名稱會依序跳號，例如："OnBnClickedButton2"、"OnBnClickedButton3"、...。
請將下圖中第168 - 173行的程式碼，輸入到"OnBnClickedButton1"函式中。
注意：如果你的畫面顯示的行號不太相同，請找到"OnBnClickedButton1"函式裡，預設已經有的唯一一行(綠色的註解那行，開頭是"TODO：...")，從這一行的結尾按Enter，然後開始輸入下圖的程式碼。
在輸入的程式碼中，主要是使用"UpdateData"這個函式，來連接主對話方塊面板上輸入的資料(在這個範例中是身高與體重兩個數值)與類別中的成員變數(在前面的步驟中建立的m_fHeight、m_fWeight、m_fBMI)，在之間做資料的傳輸與交換。
使用"UpdateData(TRUE)"(下圖範例的第169行)，意思是指把主對話方塊上輸入的資料，傳送到成員變數中。使用"UpdateData(FALSE)"(下圖範例的第173行)，意思是指把成員變數中現存的資料，傳送到對話方塊上進行顯示。
編輯完程式碼後，按下"本機Windows偵錯工具"按鈕，就可以測試剛剛完成輸入的計算BMI的程式碼功能。在主對話方塊顯示後，輸入一組身高、體重數值，按下"計算BMI"的按鈕，在BMI文字旁的"Edit Control"就會顯示出計算結果，請參考下圖。
如果我們想要以預設的身高與體重數值，先計算好BMI，然後在主對話方塊顯示在電腦螢幕上時，就顯示這個計算結果(目前代表BMI的Edit Control預設的顯示數值應該是"0")，可以依照下列步驟修改。
請在"類別檢視"視窗中選取主對話方塊的類別(此範例是"CMFCTestDlg"，在你的專案中應該是"C你的專案名稱Dlg")，"類別檢視"視窗的下半段中找到"OnInitDialog"函式，用滑鼠左鍵點按兩下，會在程式碼編輯視窗開啟這段程式碼讓我們編輯。
請參考下圖，找到"TODO: ..."開頭的這行綠色註解文字(圖中是第109行)，在它的下方輸入下圖第110-111行的程式。
在"對話方塊程式的運作流程"中，我們知道在主對話方塊被顯示在電腦螢幕前，"OnInitDialog"函式會先被執行過一次，在這裡加入"OnBnClickedButton1"的函式呼叫，意思就是說在主對話方塊被顯示在電腦螢幕前，先用預設的身高與體重數據，執行一次BMI的計算，然後將結果顯示在對話方塊上。
編修完程式碼後，請再按下"本機Windows偵錯工具"按鈕，此時應該可以發現，在主對話方塊出現在電腦螢幕上時，BMI旁的Edit Control數值不會再顯示預設的"0"，而是使用目前的身高與體重數據計算的結果，執行畫面如下圖。
5. 如何檢查輸入的數值是否在合理範圍
一般來說，我們撰寫的程式常常會需要讓使用者輸入數據，為了避免錯誤的數值造成錯誤的計算結果，或是更嚴重的造成程式崩潰，在取得使用者輸入的數據後，應該要做一些基本的檢查，確認數據是不是合理。通過檢查再來進行後續的計算，可以防止許多錯誤的發生。
在這個範例中需要讓使用者輸入身高與體重這兩個數據，身高的單位是m(米)、體重的單位是kg(公斤)，而一般人的身高與體重大致有一個合理的範圍，我們可以把這個合理範圍的檢查，變成程式碼寫入到程式中，在每次計算BMI前都先檢查一次，就比較能夠確保得到合理的計算結果。
請開啟"OnBnClickedButton1"這個函式，將下圖中的第173 - 195行，輸入到"UpdateData(TRUE)"(圖中第171行)之後的位置。各行程式碼的說明，可以參考圖中的註解文字敘述。
輸入完程式碼後，請請再按下"本機Windows偵錯工具"按鈕，重新編譯這個專案後，進行剛剛輸入的錯誤檢查程式碼的功能測試。
假設身高輸入的數值為"3.0"，而剛剛程式碼中預設的合理數值應該是"0.5 ~ 2.5"，輸入後按"計算BMI"按鈕。
在畫面上應該會看到彈出一個MessageBox，標題是"身高的輸入數值不合理"(即程式碼中strTemp1字串的訊息)，內容則是提示使用者要輸入"0.5 ~ 2.5"間的數值(程式碼中strTemp2字串的訊息)。按下確定後可以讓程式繼續運作。
接著再測試體重的輸入檢查是不是可以正常運作。假設輸入的體重值為300，按下"計算BMI"按鈕。
在畫面上應該會看到彈出一個MessageBox，標題是"體重的輸入數值不合理"(即程式碼中strTemp1字串的訊息)，內容則是提示使用者要輸入"2.0 ~ 200.0"間的數值(程式碼中strTemp2字串的訊息)。按下確定後可以讓程式繼續運作。
如果輸入的身高與體重數值都在檢查標準的合理範圍內(剛剛輸入的程式碼的檢查標準為身高介於0.5 ~ 2.5m、體重介於2.0 ~ 200.0kg)，程式就會立即顯示BMI計算結果，不會彈出錯誤提示的MessageBox。
本次的身體質量指數(Body Mass Index, BMI)計算程式範例到此結束。
如果你是修課同學，請將這個練習專案程式碼資料夾中不需要的檔案都刪除後(可參照"如何替專案"瘦身" & 備份專案")，把剩餘的程式碼以壓縮軟體(zip 或 rar 皆可)壓縮成一個檔案，再將這個檔案email給老師，當作你本週學習成果的確認。
本週的壓縮檔案email繳交的時限，**請在下一週的週五(2020/4/2) 13:00前完成，逾時算缺交**，請把握時間完成。
歡迎社群分享。若要全文轉載，請先來信詢問。禁止修改內文，禁止商業使用，必須註明來自「太陽部落」及附上原文連結：https://sunblogsws.blogspot.com/2020/04/vs-bmi.html
留言