課程名稱：程式設計 授課老師：________

Presentation on theme: "課程名稱：程式設計 授課老師：________"— Presentation transcript:

1 課程名稱：程式設計 授課老師：________
第 九 章 輸入與輸出介面設計 課程名稱：程式設計 授課老師：________ 2018/11/10

2 本章學習目標 1.讓讀者瞭解視覺化程式設計的輸入與輸出介面工具。 2.說明常用控制項工具的使用時機及方法。 2018/11/10

3 本章內容 9-1 Label標籤物件 9-2 LinkLabel超連結標籤 9-3 TextBox文字方塊物件
9-4. RichTextBox豐富文字方塊 9-5. Masked TextBox遮罩文字方塊設計 9-6. Button命令控制項 9-7 GroupBox框架物件 9-8 RadioButton單選鈕物件 9-9 CheckBox複選鈕物件 9-10 CheckedListBox控制項 9-11 ComboBox綜合清單選項物件 9-12 ListBox清單選項物件 9-13 MsgBox輸出訊息窗 9-14 InputBox輸入訊息窗 2018/11/10

4 9-1 Label標籤物件 Label標籤物件是一種用來提示使用者在輸入或輸出資料時的說明，讓使用者在表單中要輸入資料時不會產生不知所措的現象。因此，Label物件使VB2010程式語言所開發的視窗介面更加有親和力。 使用時機： 是當你希望在「表單」上顯示一些文字或資料給予使用者瞭解使用者介面的使用方式，以提高介面更加親和力(Friendly)。 2018/11/10

5 「標籤」工具的使用是在「表單」某固定的位置上，對輸入的資料或顯示的資料給予提示訊息和說明，卻無法對資料做輸入或修改的動作。
注意： 「標籤」工具的使用是在「表單」某固定的位置上，對輸入的資料或顯示的資料給予提示訊息和說明，卻無法對資料做輸入或修改的動作。 2018/11/10

6 作法： 一般在設定屬性值有兩種方法： 第一種：靜態設定(利用屬性表來設定) 2018/11/10

7 第二種：動態設定(利用撰寫程式方式) 2018/11/10

8 9-2 LinkLabel超連結標籤 LinkLabel超連結標籤的功能基本上與Label標籤控制項大同小異，所不同之處在於它增加了「超連結」的功能，此功能與網頁上的超連結相同。但是，設計者要使用LinkLabel標籤時，還必須要撰寫以下的程式碼： LinkLabel.LinkVisited=False System.Diagnostics.Process.Start(“網址”) 2018/11/10

9 作法： 2018/11/10

10 2018/11/10

11 2018/11/10

12 2018/11/10

13 9-3 TextBox文字方塊物件 完成了Label標籤物件的設定之後，還有一個非常重要的物件，就是TextBox文字方塊物件，因為只有Label標籤，而沒有TextBox文字方塊，那我們所設計的程式就變成靜態的文字表單，而不能讓使用者輸入及修改資料，而無法達到雙向互動。 2018/11/10

14 使用時機： 在Form表單中提供使用者可以輸入文字或修改文字內容時的工具。因為在某些條件下你希望對表單上的資料做輸入或修改的動作，又在某些條件下卻不允許輸入資料（只能看不能改；唯讀狀態），此時就必須使用工具箱內的文字方塊工具來完成。 2018/11/10

15 作法： 2018/11/10

16 「TextBox控制項」主要是用來設計讓使用者輸入的介面， 一般而言，可以設定三種不同的模式： (1)單行文字方塊 (2)多行文字方塊
(3)密碼文字方塊。 2018/11/10

17 1.MultiLine屬性：輸入多列文字 (1) Mu1tiLine（多行）：當文字方塊內顯示文字資料超過所設定的
寬度時，決定能否採多行或單行顯示資料： 　 True：允許多行顯示 　False：不允許多行顯示（預設值） (2)使用時機 當我們設計使用者介面時，不可能每一項資料都是單列的，故當 資料量較多時最適合。 2018/11/10

18 2018/11/10

19 2018/11/10

20 MultiLine屬性要為True時，ScrollBars值才會有作用。
用來設定文字方塊中是否出現水平或垂直捲軸。對文字方塊而言可以有四個數值： 　None：表示不要捲軸（預設值） 　Horizontal：表示水平捲軸 　Vertical：表示垂直捲軸 　Both：表示兩個都要這個屬性欄位只能在設計階段做設定，而且 MultiLine屬性要為True時，ScrollBars值才會有作用。 當使用輸入的資料，想要強迫換行時，可以利用換行字元(vbCrLf)。 2018/11/10

21 2. PasswordChar屬性：密碼字元 (1)PasswordChar（密碼）：輸入的字元不顯示，改由其他符號取代，如（*）號。
(2)使用時機：當我們設計完成一套資訊系統時，並非每一個使用者都可以登入使用，不同的使用者有不同的權限範圍，因此，我們就必須要設計使用者帳號及密碼的輸入，而一套好的系統一定會讓使用者在輸入密碼時，自動產生隱藏的效果，如下面畫面所示： 2018/11/10

22 3.MaxLength屬性：設定輸入的最大長度
(2)使用時機：當我們設計使用者介面時，每一個輸入的文字框最好都要設定使用者輸入的最大長度，因為如此才能確保資料庫的一致性及正確性，如果沒有設定最大長度，則有可能產生不可預期的錯誤。因為有可能會超過後端資料庫的欄位大小。 2018/11/10

23 2018/11/10

24 9-4. RichTextBox豐富文字方塊 1.可以多樣化的顯示文字內容。 2.可以設定文字的縮排功能。 3.可以設定文字的項目符號功能。
在VB2010中，雖然提供了TextBox文字方塊來讓使用者輸入資料，但因為此控制項無法對所輸入的資料作任何的變化。因此，VB2010再提供RichTextBox控制項作為TextBox控制項的加強版，它除了保有TextBox控制項的功能之外，還具有以下的優點： 1.可以多樣化的顯示文字內容。 2.可以設定文字的縮排功能。 3.可以設定文字的項目符號功能。 4.可以載入及儲存檔案。 5.有提供Redo, Refresh及RestText等功能。 2018/11/10

25 作法： 2018/11/10

26 [實作]讀取RichTextBox.rtf檔案來顯示在RichTextBox1，並且利用Bulletlndent屬性來設定縮排的功能。
2018/11/10

27 9-5. Masked TextBox遮罩 文字方塊設計
在VB2010中除了提供前面所介紹的RichTextBox控制項來讓使用者設定喜愛的編排格式之外，它還有提供Masked TextBox來讓使用自訂遮罩格式。因此，Masked TextBox也是TextBox控制項的加強版，它除了保有TextBox控制項的功能之外，其最主要的用途就是可以讓使用者依照指定的格式來輸入資料。 2018/11/10

28 作法： 2018/11/10

29 步驟：將工具箱中的「Masked TextBox」物件加入表單中。 步驟：按「智慧型標籤」來設定遮罩。
步驟：在輸入遮罩對話方塊中選取遮罩格式。 步驟：最後再按「確定」鈕。 2018/11/10

30 [實作]學生註冊資料表的介面設計 2018/11/10

31 2018/11/10

32 9-6. Button命令控制項 Button控制項是我們在設計表單時，最常用的命令按鈕，它的主要功能是用來接收使用者Click事件，並且執行所相對的事件程序內的程式。 當使用者按下按鈕(Button)時，按鈕就會觸發Click事件。因此，我們就必須要在程式中撰寫按鈕所對映的「事件處理程序」，以便當使用者按下按鈕(Button)時，按鈕就會觸發Click事件，就會自動去執行這些處理程序。 2018/11/10

33 2018/11/10

34 作法： 2018/11/10

35 9-7 GroupBox框架物件 當一個表單中有許多控制項時，可以利用「框架」來分門別類，可使得整個畫面整齊而有條理。而且「框架」在搬移時，會連同安置其框內的控制項一起移動，使得畫面的調整工作更加輕鬆。如下圖所示： 2018/11/10

36 1.建立選項鈕群組或核取框群組時，必須分別將選項鈕群組或核取框群組安置在不同的框架中，使其各自獨立而互不干擾。
使用時機： 1.建立選項鈕群組或核取框群組時，必須分別將選項鈕群組或核取框群組安置在不同的框架中，使其各自獨立而互不干擾。 2.控制項群組建於框架內，當移動框架時，裡面的控制項會隨之移動。 2018/11/10

37 作法： 2018/11/10

38 [舉例]請利用GroupBox框架物件來設計下面的表單介面
2018/11/10

39 9-8 RadioButton單選鈕物件 RadioButton單選鈕物件可以讓使用者以點選方式來選取資料，並且每個「選項鈕」都是相互關聯的，如果其中一個「選項鈕」被按時(其Checked屬性自動變為True)，其它選項按鈕皆自動調整成未按狀態（其Checked屬性自動變為False）。如下面的畫面，相信每一個讀者關機時一定要選擇的畫面，它也是利用RadioButton單選鈕設計出來的。 2018/11/10

40 當程式中需要有多個選項可供選擇，但只能單選時，我們可以使用「選項鈕」控制項來設計。實務上的應用方面如下：
使用時機： 當程式中需要有多個選項可供選擇，但只能單選時，我們可以使用「選項鈕」控制項來設計。實務上的應用方面如下： 如果在同一表單中有多個選項鈕群組，可以利用GroupBox控制項來群組化。 男或女生 是或否 考題中的單選題 2018/11/10

41 作法： 2018/11/10

42 先了解RadioButton1如何被點選，其原理是Checked 屬性， 當Checked 屬性的屬性值為True時，代表被點選了，否則就
重要觀念： 先了解RadioButton1如何被點選，其原理是Checked 屬性， 當Checked 屬性的屬性值為True時，代表被點選了，否則就 沒有被點選。 實務上的應用：在程式中應該撰寫成 ： RadioButton1. Checked =True 屬性值 物件名稱 屬性 2018/11/10

43 2018/11/10

44 9-9 CheckBox複選鈕物件 CheckBox複選鈕物件可以提供使用者同時點選多個選項，因此，若我們所要輸入的資料項目有很多，並且可以一次同時選擇多項時，我們可以利用CheckBox複選鈕來設定，如下面的畫面，相信每一個讀者「新增或移除應用程式」時一定要選擇的畫面，它也是利用CheckBox複選鈕設計出來的。 2018/11/10

45 若我們所要輸入的資料項目有很多，下圖中的問卷調查表：同時有二種或二種以上情況：
使用時機： 若我們所要輸入的資料項目有很多，下圖中的問卷調查表：同時有二種或二種以上情況： 2018/11/10

46 作法： 2018/11/10

47 CheckBox1. Checked =True
重要觀念： 先了解CheckBox1如何被點選，其原理是Checked 屬性，當Checked 屬性的屬性值為True時，代表被點選了，當Checked 屬性的屬性值為False時，代表沒有被點選。 實務上的應用：在程式中應該撰寫成 ： CheckBox1. Checked =True 說明：若要判斷那個CheckBox控制項的核取方塊是否被選取，只要 透過下列敘述即可。 屬性值 物件名稱 屬性 If 物件名稱.checked=True Then ‘判斷CheckBox控制項是否被選取 …….. End If 2018/11/10

48 2018/11/10

49 2018/11/10

50 2018/11/10

51 9-10 CheckedListBox控制項 在「CheckBox控制項」中要判斷那一個CheckBox控制項被選取時，設計者必須要撰寫If條件式來判斷，但是當CheckBox控制項非常多個時，那就必須要使用多個If分別來判斷該CheckBox控制項(核取方塊)是否被選取，進而取得該CheckBox控制項的內容，這樣的做法太麻煩了。還好「微軟公司」在開發時有考慮到這個問題，因此，我們只要改用CheckedListBox控制項，再配合使用For迴圈就可以取得使用者所選取核取方塊的內容。 2018/11/10

52 作法： 2018/11/10

53 2018/11/10

54 2018/11/10

55 2018/11/10

56 2018/11/10

57 9-11 ComboBox綜合清單選項物件 若我們所要輸入的資料項目有很多，但是一次最多只能選擇一項時，除了OptionButton單選鈕外，還可以利用ComboBox，如下面的畫面，相信每一位讀者在Word中設定文字的字體時一定要選擇的畫面，它也是利用ComboBox綜合清單選項設計出來的。 2018/11/10

58 使用時機： 當選項有非常多時，並且只能單選，則一定要利用ComboBox綜合清單選項來設計，因為如果還是利用OptionButton是破壞整個表單畫面，並且使用者無法馬上檢視所有的選項。筆者建議選項如果超過五項最好使用這種方法。 2018/11/10

59 2018/11/10

60 作法： 一般在設定ComboBox控制項的清單有兩種方法： 第一種：靜態設定(利用屬性表) 2018/11/10

61 在「字串集合編輯器」對話方塊中編輯項目 編輯項目  2018/11/10

62 方法：使用Items.Add方法，將文字方塊輸入的資料增列到清單方塊中
第二種：動態設定(利用撰寫程式) 方法：使用Items.Add方法，將文字方塊輸入的資料增列到清單方塊中 2018/11/10

63 [實作]請利用ComboBox清單來讓使用者選擇喜歡的課程名稱，如果你喜歡的課程沒有在此清單中，可以自行新增課程名稱。
(請利用DropDown模式) 2018/11/10

64 9-12 ListBox清單選項物件 使用時機：一次同時選擇多項時。
若我們所要輸入的資料項目有很多，並且可以一次同時選擇多項時，除了可以利用CheckBox複選鈕來設定。 使用時機：一次同時選擇多項時。 2018/11/10

65 作法： 2018/11/10

66 2018/11/10

67 9-13 輸出訊息窗(MsgBox) 一般而言，輸出介面的設計有兩種：分別如下所示：
1.利用「工具箱」中的Label控制項來顯示使用者的輸出的資訊。 <在前面已經介紹過了> 2.利用訊息窗(MsgBox)來彈出使用者的輸出的資訊。 2018/11/10

68 例如：我們在撰寫VB程式時，可能不小心打錯字，而使程式無法順 利的執行，VB程式語言便會顯示一個誤錯訊息的視窗。
訊息窗(MsgBox)： 是指在Windows作業系統中，告訴使用者目前程式執行的狀態，由其程式設計師在設計程式時，適時的應用「訊息窗」的使用者介面，將可以讓使用者更容易的操作軟體。 例如：我們在撰寫VB程式時，可能不小心打錯字，而使程式無法順 利的執行，VB程式語言便會顯示一個誤錯訊息的視窗。 2018/11/10

69 2018/11/10

70 回覆按鈕設定 2018/11/10

71 2018/11/10

72 圖示設定 2018/11/10

73 2018/11/10

74 2018/11/10

75 2018/11/10

76 2018/11/10

77 9-14 InputBox輸入訊息窗 在VB2010中除了可以利用TextBox控制項來輸入資料之外，我們也可以利用InputBox函數來讓使用者作為輸入資料的對話方塊。 格式：Input_Value=InputBox(提示訊息內容[,標題][,輸入框預設值])說明：1.指讓使用者很容易的輸入資料，但是一次只能輸入一個資料。 2.與MsgBox函數一樣，都會有傳回值。 3.[]代表可以省略。 2018/11/10

78 2018/11/10

79 2018/11/10

80 2018/11/10