---
tags: 110-2視窗程式設計
---

# 實作：單位轉換程式（介面設計）

程式設計的學習，如果能從範例開始，學習絕對是最快的，所以我們先從簡單的程式開始。

但同學也別擔心，偶而老師還是會回去複習基本的程式設計。

現在我們來製作一個簡單的單位轉換程式，類似這個網站的畫面與功能，[所以我們先來看看這個網站...](http://www.mold.net.tw/classroom/unit.htm)。

## 單位轉換程式的運作流程

如果你先把這個單位轉換程式網站操作過一次，大概可以確認以下的重點：

:::info
* 這個程式提供各種單位轉換
* 使用方式：選擇任一個單位，輸入數字，按下 Enter 或「離開焦點」，其他單位就會同步計算單位轉換的結果
* 按下「重新計算」的按鍵，就會清除所有欄位
:::

其實，你有沒有發現，在寫程式之前，先瞭解「==**要做什麼事情？**==」可能才是最重要的。因為這可以幫助我們思考有哪些工作要做，避免浪費時間重複試誤，並且能夠聚焦在重點。

接下來，我們就跟之前第二部分的基本視窗程式設計相同，先開啟一個新專案，來完成這個單位轉換程式的設計，為了減少複雜度，我們先來設計簡單的 **長度轉換程式** 就好。

## 開啟新專案

開啟新專案之前有教學過，如果你忘記了或不太熟悉，請點選[這裡](https://hackmd.io/@chohsunlu/H1wnHYMTt)。

:::success
我們的專案名稱可以叫做「LengthCalculator」，簡單就好。
:::

## 使用 GitHub 開始追蹤專案

這次我們一開始開好專案後，就先追蹤它，其實我們不只是用 GitHub 交作業，更重要的是「記錄你寫程式的歷程」。

## 開始吧！

還記得第二部分的基本視窗程式設計嗎？同樣的，我們依照之前說過的兩個主要程式設計流程來設計：

:::success
1. 介面基本設計
2. 程式撰寫
:::

因此，我們也是先初步設計介面，再來進行程式撰寫。

## 第一步：進行介面基本設計

[再回到我們剛剛說到的網站...](http://www.mold.net.tw/classroom/unit.htm)，同學應該可以先瞭解一下大致有哪些控制項需要放上去？


看起來大概就需要放三種控制項：

:::info
* 按鍵控制項
* 輸入文字框
* 文字標籤（Label）
:::

前兩項我們在[基本視窗程式設計](https://hackmd.io/@chohsunlu/H15sUL-TK)章節看過了，現在我們介紹第三種也是非常常用的「**文字標籤（Label）**」，顧名思義，他就是用來顯示文字用的，跟輸入文字框不一樣的地方在於**使用者無法修改內容**。


使用方式也和按鍵與輸入文字框一樣，選擇之後，再到空白的視窗內拉出你要的內容即可。


一個「**文字標籤（Label）**」預設會有文字在裡面，你可以自行修改，請到「**屬性視窗**」中尋找「**Text**」項目直接修改就可以了，可以輸入英文字也可以輸入中文字。


### 完成視窗設計

接下來，我們讓同學一一將需要的控制項，置放到空白的設計視窗內。如果你忘記了或不太熟悉，請點選[這裡](https://hackmd.io/@chohsunlu/H15sUL-TK)。

同樣為了簡化，我們就選擇「公分」、「公尺」、「公里」、「英吋」、「英呎」、「碼」共六種單位來轉換。以下是一個你可以參考的設計畫面，請花一點時間從工具箱拉入你需要的控制項，並且調整文字內容、元件大小、字體大小等等。


你可能會覺得一個一個拉很累，這裡有一個訣竅：

:::success
可以直接按Ctrl不放，多選數個控制項，再按Ctrl+C複製，按Ctrl+P貼上。

或者直接用滑鼠圈選要複製的項目，再複製貼上。
:::

和之前提及的網站不同的地方，我們有增加一個「說明文字」以及一個長條的輸入文字框，請也要記得做進去，我們會拿這個做一些狀態顯示的效果。

### 不要忘記，你要對控制項取一個名字

還記得嗎？控制項最重要的屬性就是「==**控制項名稱（Name）**==」，也就是這個控制項的「**名字**」叫什麼？所以別忘了，也要對你的控制項在「屬性視窗」中，選擇「名稱」，輸入一個有意義的名字。

例如清除按鍵，我們設定一個名稱「btnAllClear」給它，就像下圖的作法。


不過，你不用對每一個控制項都設定一個名字，那麼哪些控制項要有名字？哪些不用？原則很簡單：

:::info
不會變動內容、不用來操作的控制項，不需要設定名稱
:::

你可以思考一下我們這個程式，有哪個東西不會變動內容？也不會用來操作？

:::success
答案：文字標籤控制項，因為只用來顯示文字，不會變動，也不用來操作
:::

但是假設你要讓文字標籤會改變內容，那就要設定名稱。所以， ==**什麼時候要設定控制項的名稱？重點在於：是否要更改內容？是否要用來操作？**== 因此，請在所有的按鍵、輸入文字框，分別設定它們的名稱，這樣我們才能在程式中控制這些控制項。你可以自己設定名稱，只要不和別的控制項重複就好，或者你可以也參考以下來設定名稱。

1. 清除按鍵：btnAllClear
2. 公分輸入文字框：txtCM
3. 公尺輸入文字框：txtM
4. 公里輸入文字框：txtKM
5. 英吋輸入文字框：txtIn
6. 英呎輸入文字框：txtFt
7. 英碼輸入文字框：txtYard
8. 說明文字輸入文字框：txtInfo

這些名稱你可以仔細觀察，好像都有一定的規則？為什麼要這樣做呢？這是有原因的，因為到時候在寫程式的時候，你只要看名稱就可以知道這是什麼樣的控制項。

## 結語

在這裡我們已經初步完成基本的介面設計，接下來要完成程式撰寫，讓這個單位轉換程式可以「動起來」。

## 別忘了「Commit」你的專案

### 為什麼要「Commit」

在程式設計中，尤其是使用像 Git 這樣的版本控制系統時，「Commit」是指將你的程式碼變更正式提交到版本庫的動作。為什麼要這樣做呢？以下是幾個主要原因：

* 紀錄變更歷史：每次 Commit 都會記錄你對程式碼做了什麼改變，像是修 bug、加功能或改進效能。這樣你隨時可以回溯，看看什麼時候改了什麼。
* 方便回滾：如果新改的東西出了問題（比如引入了 bug），你可以輕鬆回到上一個穩定的版本，不用從頭重寫。
* 團隊協作：如果你跟別人一起開發，Commit 讓大家知道你做了什麼，方便同步工作，避免衝突。
* 進度管理：把大任務拆成小步驟，每次完成一步就 Commit，這樣感覺更有條理，也不會丟失進度。

舉個例子：假設你在寫一個程式，改了一堆東西但沒 Commit，結果電腦突然壞了，沒保存的東西就沒了。如果有 Commit，至少之前的進度還在。

### 怎麼用 GitHub Desktop 做「Commit」？

如果你修改過專案內容，你就會發現 GitHub Desktop 以下的畫面有變化，會顯示你修改後的檔案有哪些？修改內容的差異標示等等。如下圖。


這時請到左下角，你可以輸入標題內容(Summary)以及修改敘述(Description)，標題內容是必要的，你可以大致寫一下這次修改的概要是甚麼，修改敘述則是非必要，你可以輸入這次修改的完整敘述。

如果完成了，就可以按下「Commit to main」，完成這次的修改進度。接下來你可以按「History」顯示修改歷程。如下圖，這樣你就可以追蹤每次修改的記錄。


### 上傳到 GitHub

記錄完之後，你也可以上傳到 GitHub，這樣就可以將修改紀錄上傳到 GitHub 中的儲藏庫，請按下右上方的「Push origin」。上傳時間就看網路速度，不過應該不會太久的。

完成後，你可以到 GitHub 看看你的專案，應該也可以看到類似的修改紀錄。就像下圖。


同學之後都可以隨時隨地，只要你覺得需要「Commit」，都可以做一次「Commit」，老師之後的評分都會看看同學有沒有做這個動作？以及紀錄的文字內容是甚麼？藉此來評分。