53
第第第 第第第第第第 本本本本本本本本本本本本本本本本本本本本本本本本本本

第四章 輸入介面設計

Embed Size (px)

DESCRIPTION

第四章 輸入介面設計. 本章投影片僅供本書上課 教師 使用 , 非經同意請勿拷貝或轉載. 4-1 TextBox 文字方塊. 第三章介紹表單上輸出訊息的常用控制項 , 本章將介紹 T extBox 文字方塊工具與輸出入對話方塊的函式與敘述。. 一、 TextBox 控制項常用的屬性. - PowerPoint PPT Presentation

Citation preview

Page 1: 第四章    輸入介面設計

第四章 輸入介面設計

本章投影片僅供本書上課教師使用,非經同意請勿拷貝或轉載

Page 2: 第四章    輸入介面設計

4-1 TextBox 文字方塊 一、 TextBox 控制項常用的屬性

第三章介紹表單上輸出訊息的常用控制項,本章將介紹TextBox文字方塊工具與輸出入對話方塊的函式與敘述。

Page 3: 第四章    輸入介面設計
Page 4: 第四章    輸入介面設計

【注意】 活用 MultiLine 、 WordWrap 和 ScrollBars 屬性 MultiLine = False ,使得超出文字方塊寬度的 資料無法顯示。 MultiLine = True ,可調整文字方塊的上下高度 來顯示多行文字。 MultiLine = True 且 WordWrap = True 時,超過 文字方塊控制項寬度的資料自動移到下一行繼續 顯示。 MultiLine = True 且 WordWrap = False 時,則 需要進一步設定 ScrollBars 屬性,使其出現垂直 或水平捲動軸,才能操控範圍。

Page 5: 第四章    輸入介面設計

二、字串與數值的轉換函式文字方塊 Text 屬性的資料是屬字串資料型別。欲將 Text 屬性中的資料取出作數值運算

加法時, VB 將 "+" 號視為字串合併運算, 發生錯誤。 減法、乘法、除法,取出的 Text 屬性值會

自動轉成數值,不發生錯誤。 建議 Text 屬性的資料做四則運算 先做字串轉數值後再做運算,以免發生錯誤。

VB 提供 Val() 函式將字串轉成數值。語法: Val(str)若 Text 屬性值的資料含有數字和文字

Val() 函式 只將前面是數字部份轉換成數值

Page 6: 第四章    輸入介面設計

【例】 Val("123") → 123

Val("45ABC") → 45

Val("XY4.0") → 0 ‘第一個字元非數字,傳回數值 0

【例】若 TextBox1.Text="22"和 TextBox2.Text="11"

TextBox3.Text = TextBox1.Text + TextBox2.Text TextBox3.Text = Val(TextBox1.Text)

+Val(TextBox2.Text)

TextBox3.Text = TextBox1.Text – TextBox2.Text

TextBox3.Text = Val(TextBox1.Text)-Val(TextBox2.Text)

結果: 2211

結果: 33

結果: 11

結果: 11

Page 7: 第四章    輸入介面設計

【例】若 TextBox1.Text="22"和TextBox2.Text="11"

TextBox3.Text = TextBox1.Text * TextBox2.Text

TextBox3.Text = Val(TextBox1.Text) * Val(TextBox2.Text)

TextBox3.Text = TextBox1.Text / TextBox2.Text

TextBox3.Text = Val(TextBox1.Text) / Val(TextBox2.Text)

結果: 242

結果: 242

結果: 2

結果: 2

Page 8: 第四章    輸入介面設計

三、 TextBox 控制項常用的方法表單和控制項除具有屬性外還有能執行的一些特定功能,稱為「方法」。

方法只能在程式執行階段才能呼叫使用。 TextBox 控制項提供常用方法:1. Clear() 方法 將文字方塊的顯示內容清成空白。如將 TextBox1 文字方塊內顯示的文字清除寫法:

TextBox1.Clear( ) 或 TextBox1.Text = ""

Page 9: 第四章    輸入介面設計

2. Focus() 方法設定控制項為駐停焦點,也就是成為作用物件。如將 TextBox1 文字方塊設為目前駐停焦點,寫法: TextBox1.Focus()

一個控制項擁有 TabIndex 、 TabStop 屬性,就可設為駐停焦點。

在程式中透過 Focus() 方法來指定某一控制項,成為表單目前的駐停焦點。

在程式執行間,不須使用者按 鍵,可直接指定某控制項成為作用物件。

Page 10: 第四章    輸入介面設計

表單中若有多個控制項第一個建立的控制項 TabIndex屬性值為 0( 成為第一個作用物件 );第二個為 1 ,依此類推。

使用者按 鍵時,依 TabIndex屬性值由小到大依序切換作用物件。

被指定駐停焦點控制項的 Visible與Enabled屬性值皆設為「 True」,此方法才有效。

Page 11: 第四章    輸入介面設計

【問題分析】為使 TextBox美金控制項程式開始就取得焦點,應該第一個建立該控制項 (將其建立 TabIndex屬性值設為 0),使其成為第一個停駐焦點。

可在程式執行階段用 Focus()方法,將駐停焦點移到 TextBox美金控制項。

使用 Val()函式可以將字串資料轉成數值,以便作匯率換算。

使用 Clear()方法,可將 TextBox控制項內容清成空白。

Page 12: 第四章    輸入介面設計

【實作】Step1 建立表單 專案名稱命名為『 us2nt』。 在表單內建立下圖所示之控制項:

Step2 請按照上圖來設定各物件的屬性。

Label 1

Label 2

Label 3

Page 13: 第四章    輸入介面設計

' FileName : us2nt.sln

01 Private Sub Form1_Load(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles MyBase.Load

02 lblRate.Text = "32.5" ‘ 在 Form1_Load 事件處理程序設定初值

03 lblNT.Text = ""

04 txtUs.TabIndex = 0 ‘ 設定第一個作用物件05 End Sub

06 ' ---------------------------------------------------------------------------------

07 Private Sub btnChange_Click(ByVal sender As System. _ Object, ByVal e As System.EventArgs) Handles btnChange. _ Click

08 lblNT.Text = Val(lblRate.Text) * Val(txtUs.Text) ‘ 顯示匯率換算

09 End Sub

10 ' ----------------------------------------------------------------------------------

Step3 撰寫程式碼

Page 14: 第四章    輸入介面設計

11 Private Sub btnCls_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles btnCls.Click

12 lblNT.Text = ""

13 txtUs.Clear() ‘ 用 Clear 方法清除 txtUs 的文字內容

14 txtUs.Focus() ‘ 用 Focus 方法將停駐焦點移到 txtUs 控制項

15 End Sub

Page 15: 第四章    輸入介面設計

四、 TextBox 控制項的 TextChanged 事件 是 TextBox 控制項的預設事件。程式執行階段,當文字方塊的 Text 屬性內的資料有異動時,馬上觸動該文字方塊的TextChanged 事件。因此,可將和 Text 屬性值有關的程式碼寫在此事件處理程序中。

若希望文字方塊有異動,表單上相關控制項的資料馬上跟著文字方塊的內容異動 可免去按鈕 ( 如確定鈕… ) 才知道結果。

Page 16: 第四章    輸入介面設計
Page 17: 第四章    輸入介面設計

【問題分析】 設定文字方塊控制項的 PasswordChar 屬性值以防止密碼輸入時被看到。由於密碼需完整輸入後執行按鈕控項,才知正確與否。因此常將判斷密碼正確與否的程式,寫在按鈕控制項的 Click 事件內,而不使用TextChanged 事件。

由於密碼正確後才能輸入半徑,所以表單載入時在Form1_Load 事件處理程序中,先將輸入半徑的文字方塊控制項的 ReadOnly 屬性設為 True ,待Click 事件中檢查密碼正確時,才能將 ReadOnly 屬性設為 False ,以允許輸入半徑。

本例要求輸入半徑時,馬上顯示圓面積。故需將計算圓面積的程式碼寫在 TextChanged 事件處理程序中。

Page 18: 第四章    輸入介面設計

【實作】 Step1 建立表單 專案名稱命名為『 circle』。 在表單內建立下圖所示之控制項:

Step2 請按照上圖來設定各物件的屬性。

Label 1

Label 2 Label 3

lblArea

btnCheck

Page 19: 第四章    輸入介面設計

‘FileName : circle.sln01 Private Sub Form1_Load(ByVal sender …..) Handles MyBase.Load02 lblArea.Text = "" ‘ 表單載入時設定各控制項初值03 txtPassword.MaxLength = 3 ‘ 輸入密碼最多 3 個字元04 txtPassword.PasswordChar = "? " ‘ 輸入密碼時以 ?替代05 txtPassword.TabIndex = 0 ‘ 設定 txtPassword 為第一個作用事件06 txtR.ReadOnly = True ‘ 設定 txtR 無法輸入07 End Sub08 ' ---------------------------------------------------------------------------------------------09 Private Sub btnCheck_Click(ByVal …..) Handles btnCheck.Click10 If txtPassword.Text = "abc" Then ‘ 選擇結構,輸入密碼字元為 abc

時11 txtR.ReadOnly = False ‘ 更改 txtR 設定,允許輸入半徑值12 txtR.Focus() ‘ 將駐停焦點移到 txtR13 End If14 End Sub15 ' --------------------------------------------------------------------------------------------16 Private Sub txtR_TextChanged(ByVal …..) Handles txtR.TextChanged17 lblArea.Text = 3.14 * Val(txtR.Text) ^ 2 ‘ 計算圓面積18 End Sub

Step3 撰寫程式碼

Page 20: 第四章    輸入介面設計

4-2 格式化輸出

一、 Space 函式Space 函式可以在目前游標處插入指定數目的空白字串,在程式中可利用該函式調整文字位置使其上下對齊。語法如下:

【例】在 TextBox1 文字方塊控制項上面顯示品名(iPhone) 和單價,品名和單價之間加上兩個空白字元。

TextBox1.Text = "iPhone : " & Space(2) & "9000 元 "

在文字方塊、標籤、表單、圖片方塊或印表機物件上,可以利用函式來顯示格式化的資料。

Page 21: 第四章    輸入介面設計

二、 vbNewLine 、 vbCrLf 、 vbTab 常數 Chr 函式可將數值轉成對應的 ASCII 碼字元。如

Chr(65) 的值為 "A" 。 Chr(9) 字元就相當於鍵盤的 鍵,其後文字跳到下一個定位點位置。系統定義 vbTab 常數來代表。

定位點和定位點間可容納 8 個字元,如果字串長度超過就會多佔一個定位點。

文字如要換行要用 Chr(13) + Chr(10) 兩個字元組成換行符號。

Page 22: 第四章    輸入介面設計

系統定義 vbNewLine 和 vbCrLf 常數來表示Chr(13) + Chr(10) 換行符號。

【例】TextBox1.Text = " === 單價表 === " & vbCrLf & " iPhone4 " & vbTab & " 9000 元 "會顯示成:( 代表空白字元)

=== 單價表 ===

iPhone49000 元

Page 23: 第四章    輸入介面設計

三、 Format 函式

Format 函式可將輸出資料以指定格式輸出,使得輸出資料能對齊以方便閱讀。

運算式可為數值或字串運算式。

fmt參數若省略時,會將數值轉換成字串, 並將正數前的空白去除。

Page 24: 第四章    輸入介面設計

數字的預設格式如下表:

Page 25: 第四章    輸入介面設計

常用 Format 函式的數字自訂格式如下表:

Page 26: 第四章    輸入介面設計

常用 Format 函式的時間格式:

Now() 函式用來取得系統目前的日期與時間。顯示結果會因「控制台」中「地區及語言」格式設定不同而不同。

本書採的日期及時間的格式如下:( 以 2010 年 3 月 21日上年 9 點 20 分 48秒為例 )

簡短日期 → 2010/03/21 完整日期 → 2010 年 3 月 21日 簡短時間 → 上午 09:20 完整時間 → 上午 :09:20:48

Page 27: 第四章    輸入介面設計
Page 28: 第四章    輸入介面設計
Page 29: 第四章    輸入介面設計

常用 Format 函式的日期與時間自訂格式字元如下表:

Page 30: 第四章    輸入介面設計
Page 31: 第四章    輸入介面設計

【例】設日期為 #3/17/2010 5:21:50 PM# ,然後使用各種Format 函式格式,來觀察執行結果。

Dim day As Date = #3/17/2010 5:21:50 PM#

txtShow.Text = Format(day, "h:m:s") 值為 "5:21:50"

txtShow.Text = Format(day, "hh:mm:ss tt") 值為 "05:21:50 下午 "

txtShow.Text = Format(day, "HH:mm:ss") 值為 "17:21:50"

txtShow.Text = Format(day, "yyyy MMM d,dddd") 值為 "2010 三月 17,星期三 "

txtShow.Text = Format(day, "MM/d/yy") 值為 "03/17/10"

txtShow.Text = Format(day, "yy-MMMM-d") 值為 "10- 三月 -17"

txtShow.Text = Format(day, "M/d/yyyy HH:mm") 值為 "3/17/2010 17:21"

Page 32: 第四章    輸入介面設計
Page 33: 第四章    輸入介面設計

【問題分析】1. 使用 Format 函式和 vbTab 常數做文字資料定位。2. 因為 TextBox 控制項內容是多行顯示,所以 Multiline 屬 性值要設為 True 。3. 換行符號可以使用 vbNewLine 、 vbCrLf 常數,或 是 Chr(13) + Chr(10) 。 【上機】Step1 建立表單 專案名稱命名為『 member 』。 在表單內建立下圖所示之控制項:

Page 34: 第四章    輸入介面設計

屬 性預設名稱

Name( 名稱 )

Multiline( 多行 )

Size( 大小 )

TextBox1 txtData True 370,110

設定各物件的屬性:

Page 35: 第四章    輸入介面設計

' FileName : member.sln

01 Private Sub Form1_Load(ByVal …. ) Handles MyBase.Load

02 txtData.TabStop = False ‘ 使文字方塊的內容不被選取而成反白顯示

03 txtData.Text = Space(6) & "VB俱樂部會員名冊 " & Space(4) & Format(Now(), "M-d-yyyy h:m:s") & vbCrLf & vbCrLf

04 txtData.Text &= "姓名 " & vbTab & "電話 " & vbTab & vbTab & " 生日 " & vbTab & vbTab & "消費金額 " & vbCrLf ‘電話長度超過 8 個字元

‘ 所以使用兩個 vbTab

05 txtData.Text &= "------" & vbTab & "------" & vbTab & vbTab & "------" & vbTab & vbTab & "------------" & vbCrLf

06 txtData.Text &= "楚留香 " & vbTab & "(02)12345678" & vbTab & _

Format(#3/17/1982#, " d ") & vbTab & Format(78260.5, "$000000.0") & vbCrLf ‘ 使用 Format 函數來使數字的長度相同

07 txtData.Text &= "張無忌 " & vbTab & "(02)87654321" & vbTab & _ Format(#11/6/1980#, "d") & vbTab & Format(129510, "$000000.0")

08 End Sub

Page 36: 第四章    輸入介面設計

4-3 InputBox 函式 通常使用者希望輸入文字資料時,除須建立 TextBox 文字方塊控制項外,還要使用 Label標籤控制項來提示訊息。 VB 提供 InputBox 函式會顯示輸入對話方塊,使用者只要在文字方塊內輸入資料,再按 < 確定 > 鈕,且所輸入資料會以字串型別放入指定的字串變數。語法:

Page 37: 第四章    輸入介面設計

InputBox 函式的引數說明:

1. 字串變數 呼叫 InputBox 函式時會出現一個對話方塊,輸入 文字後按 < 確定 > 鈕,文字會傳給等號左邊的字串 變數。 按 < 取消 > 鈕,傳回值是空字串 ("") 。2. 提示訊息引數 用來提醒使用者輸入資料的內容或格式,本引數不 可省略。若沒有提示訊息必須 "" 加入表示。

Page 38: 第四章    輸入介面設計

3. [ ] 引數 中括號內引數可省略,但引數間的逗號需保留。4. 標題引數 為對話方塊標題文字,屬選擇性引數,如省略以專案 名稱當做標題文字。5. 預設值引數 呼叫 InputBox 函式時,文字方塊中預設的文字資料。6. Xpos,Ypos引數 設定對話方塊在螢幕的座標,單位為 Pixel (像素 ) 。 若省略此引數,對話方塊預設在螢幕中央偏上方 1/3 處。

Page 39: 第四章    輸入介面設計
Page 40: 第四章    輸入介面設計

【問題分析】 1. 使用 InputBox 函式讓使用者輸入姓名。 2.InputBox 函式執行時,會將使用者的資料存在字串變 數中,利用該變數顯示歡迎文字。【上機】 Step1 建立表單 專案名稱命名為『 welcome 』。 在表單內建立下圖所示之控制項:

設定各物件屬性:屬 性

預設名稱Name ( 名稱 )

Font( 大小 )

Label1 lblWelcome 16pt

Page 41: 第四章    輸入介面設計

' FileName : welcome.sln

01 Private Sub Form1_Load(ByVal … ) Handles MyBase.Load

02 Dim user As String

03 user = InputBox(" 請輸入姓名: ", "姓名 ") ‘ 讓使用者輸入資料

04 lblWelcome.Text = "歡迎 " & user & " 使用本軟體 !"

05 End Sub

Page 42: 第四章    輸入介面設計

4-4 MsgBox 函式與 MsgBox 敘述當操作程式時,程式常會出現錯誤或警告訊息的對話方塊,來提醒使用者注意。 VB 提供 MsgBox 函式與 MsgBox敘述,不必在表單上建立控制項就能製作訊息方塊。MsgBox 函式可指定一些按鈕供使用者選擇,再根據所選取的回覆按鈕,作為程式流程的依據。Msgbox 敘述MsgBox 敘述沒傳回值,無法判斷使用者按下哪個按鈕。

Page 43: 第四章    輸入介面設計

一、 MsgBox 函式的語法二者用法一樣, 只是 MsgBox 函式有傳回值而

MsgBox 敘述沒有。當呼叫 MsgBox 函式時會出現指定的指令按鈕,使用者只要按下按鈕後,該鈕代碼會存入傳回值中。

函式格式: 傳回值 = MsgBox( 訊息 [, [格式碼 ][, 標題 ]] )

敘述格式: MsgBox ( 訊息 [, [格式碼 ][, 標題 ]])

Page 44: 第四章    輸入介面設計

二、MsgBox 函式的格式碼

雖然代碼是數值比較簡潔,但可讀性較低,所以建議使用列舉型別。因 0~5代碼屬於同一性質,所以不可以相互累加組合。

Page 45: 第四章    輸入介面設計

「警示圖示代碼」的相關內容如下表:

因 16~64代碼屬於同一性質,所以不可以相互累加組合。如果除了回覆按鈕外還要有警告圖示時,則必須將兩個代碼相加來組合成格式碼。例如要顯示 、 兩按鈕又要有 圖示,其格式碼等於 17 ,即 1+16 。如前所言,除了使用代碼相加外,建議使用列舉型別以Or 或 + 相加,以增加程式可讀性。

Page 46: 第四章    輸入介面設計

其他代碼如下表:

Page 47: 第四章    輸入介面設計

1. MsgBox(" 是否結束程式 ? ", 4, " 結束 ") 或2. MsgBox(" 是否結束程式 ?", MsgBoxStyle.YesNo, " 結束 ")

[ 例 ] 產生左下圖訊息方塊,程式碼有兩種寫法: MsgBox (訊息 [, [格式碼 ][, 標題 ]])

Page 48: 第四章    輸入介面設計

1. MsgBox(" 是否結束程式 ? ", 52, " 結束 ") 或 ' 4 + 48=52

2. MsgBox(" 是否結束程式 ?", MsgBoxStyle.YesNo Or _

MsgBoxStyle.Exclamation, " 結束 ") 或3. MsgBox(" 是否結束程式 ?", MsgBoxStyle.YesNo + _

MsgBoxStyle.Exclamation, " 結束 ")

MsgBox (訊息 [, [格式碼 ][, 標題 ]])

Page 49: 第四章    輸入介面設計

三、MsgBox函式的傳回值 在訊息方塊中有幾個回覆按鈕,當按下其中一個按鈕時,會傳回對應的值。可藉傳回值判斷使用者按了哪種按鈕,來做為程式流程判斷。

Page 50: 第四章    輸入介面設計

【例】以訊息方塊詢問是否結束程式,若使用者按 [ 是 ] 鈕就結束程式,程式碼有兩種寫法:

另一種寫法:

Page 51: 第四章    輸入介面設計
Page 52: 第四章    輸入介面設計

【問題分析】 1. 使用 InputBox 函式詢問密碼。 2. 密碼錯誤時,用 MsgBox 敘述顯示錯誤訊息。 3. 華式溫度 = 9/5 x攝氏溫度 +32 。【上機】 1. 專案名稱命名為『 password 』。 2. 在表單內,建立如下圖所示之控制項:

Label 1

Label 2

Page 53: 第四章    輸入介面設計

' FileName : password.sln01 Private Sub Form1_Load(ByVal ….) Handles MyBase.Load02 lblF.Text = ""03 Dim password As String04 password = InputBox(" 請輸入密碼: ", "密碼 ") ‘ 函式詢問密碼05 If password <> "123" Then06 MsgBox("密碼錯誤 ! 程式將結束 !! ", MsgBoxStyle.OkOnly _

Or MsgBoxStyle.Exclamation, " 錯誤 ") ‘ 5~8 行 : 使用選擇結構

07 End ‘ 判定如密碼不符則結束程式08 End If09 End Sub10 ' -------------------------------------------------------------------------------11 Private Sub txtC_TextChanged(ByVal ….) Handles txtC.TextChanged12 Dim c As Single ‘ 11~17 行 : 達到立即互動效果13 Dim f As Single14 c = Val(txtC.Text)15 f = c * 9 / 5 + 3216 lblF.Text = Format(f, “###.00”) ‘ 設定顯示到小數第 2位17 End Sub