進階輸出入元件(一) 本書第三章已介紹Form 、Label 、Edit 及Button 等最基本的輸出入元件, 本章將繼續介紹一些可以提昇輸出入視覺效果的元件, 例如CheckBox 、RadioButton 及RadioGroup 等17 個進階元件, 學習本章將可提昇使用介面的親和性。 核對框(CheckBox)

Presentation on theme: "進階輸出入元件(一) 本書第三章已介紹Form 、Label 、Edit 及Button 等最基本的輸出入元件, 本章將繼續介紹一些可以提昇輸出入視覺效果的元件, 例如CheckBox 、RadioButton 及RadioGroup 等17 個進階元件, 學習本章將可提昇使用介面的親和性。 核對框(CheckBox)"— Presentation transcript:

1 進階輸出入元件(一) 本書第三章已介紹Form 、Label 、Edit 及Button 等最基本的輸出入元件, 本章將繼續介紹一些可以提昇輸出入視覺效果的元件, 例如CheckBox 、RadioButton 及RadioGroup 等17 個進階元件, 學習本章將可提昇使用介面的親和性。 核對框(CheckBox) 選像鈕(RadioButton) 選像鈕群組(RadioGroup) 列表盒(ListBox) 雙併盒(ComboBox) 捲軸(ScrollBar) 功能表(MainMenu)與快顯功能表(PopupMenu)

2 影像盒(lmage) 對話框 StringGrid DriveComboBox`DirveListBox`FileListBox及FileListBox Timer Shape BitBtn SpeedButton Chart Animate 習題

3 核對框(CheckBox) CheckBox 通常用來讓使用者點選某項功能的有無, 例如以下範例即可讓使用者點選文字是否表現粗體、斜體或含底線, 本物件的重要屬性如下： Checked 屬性 記錄選項是否致能。 Caption 屬性 標題。

4 範例11-1a 示範CheckBox 的用法。

5 選項鈕(RadioBut ton) 前面11-1 節的CheckBox 可以點選多個選項, 但有些情況是僅能有一個選項致能, 就像收音機的音源選擇, 當您選CD 時, 不管原來的音源為何,均會自動切掉, 當您繼續選Tape 時, CD 也會自動切掉, 這就是RadioButton 控制項的特性, 它具有排它性, 一次僅能一個選項成立。本物件的重要屬性如下： Checked 屬性 記錄選項是否致能。

6 範例11-2a 本例示範RadioButton 的使用。

7 選項鈕群組(RadioGroup) 於同一表單僅能有一個RadioButton 選項為true, 若有兩組的RadioButton要在同一表單同時出現, 則應使用本節所要介紹的RadioGroup 。例如範例11-3a 在同一表單需使用兩組選項鈕分別設定Edit1 的字型大小及邊界樣式,此時即可使用RadioGroup 元件。

8 範例11-3a 示範RadioGroup 的使用

9 自我練習 元件盤中Standard 標籤的GroupBox 及Panel 亦有分組的功能, 請讀者自行揣摩練習, 完成範例11-3a 程式的功能。

10 列表盒(ListBox) ListBox 的主要功能是將使用者需要輸入的文字、數字, 預先放在ListBox, 方便使用者直接點選, 以減少使用者鍵入文字、數字的困擾。於範例11-4a 中, 筆者以醫師開處方為例, 因目前大部分的程式均是醫師需鍵入藥品名稱或代碼, 本例則將處方於程式設計階段預先放入ListBox 中,待醫師操作時, 只要點選藥品名稱與重量即可, 完全不用輸入藥品名稱或記憶代碼等工作。其次, 於實務的應用中, 應將全部藥品分門別類, 放於不同的ListBox, 以減少使用著目視搜尋藥品的時間。

11 範例11-4a 試設計三個列表盒於表單：左邊放入藥品名稱、中間放入重量、右邊放入患者所需處方藥品。當使用者依序按一下藥品名稱、重量後, 右邊列表盒即輸出藥品及重量；當使用者按一下右邊處方藥品, 即應刪除該項指定藥品。

12 雙併盒(ComboBox) ComboBox 是一種結合ListBox 與Edit 的輸入控制項, 使用者於ComboBox中所點選的項目, 可以直接放入Text 屬性, 因此可以簡化程式的撰寫, 但ComboBox 一次只能點選一個項目, 因此特別適用一次只點選一個項目的場合。其待選項目(Items) 亦可使用屬性視窗或撰寫程式設定, 其方法同RadioGroup 或ListBox, 以下範例將用ComboBox 讓使用者點選其職業。

13 範例11-5a 請寫一個程式, 可以讓使用者依序輸入姓名、職業及性別, 其中職業的輸入方式為事先將所有可能的職業放在ComboBox, 讓使用者點選。

14 捲軸(ScrollBar ) ScrollBar 的功能為使用捲軸控制輸出的大小, 其使用方式請看範例11-6a, 本物件特殊屬性如下： Kind 屬性 捲軸的擺設方向, 有水平與垂直兩種, 其值如下： sbHorizontal (以水平方式呈現捲軸)。 sbVertical (以垂直方式呈現捲軸)。 Position 屬性 設定捲軸的值。 Max 屬性 捲軸可移動的最大值。

15 Min 屬性 LargeChange 屬性 SmallChange 屬性 OnChange 事件 OnScroll 事件
捲軸可移動的最小值。 LargeChange 屬性 當使用者用滑鼠按一下捲軸盒至捲軸端點箭頭鈕之間的區域時, 可移動捲軸, 而此移動的大小, 稱為LargeChange 。 SmallChange 屬性 當使用者用滑鼠按一下捲軸盒至捲軸兩端的箭頭鈕時, 可令捲軸盒移動, 而此移動的大小, 稱為SmallChange 。 ScrollBar 的特殊事件如下： OnChange 事件 當捲軸值改變時, 產生此事件。 OnScroll 事件 當使用者拖曳捲軸時, 產生此事件。

16 範例11-6a 示範捲軸的用法。

17 範例11-6b 示範以3 個捲軸分別代表顏色的(R 、G 、B), 並改變Edit1 的背景顏色。

18 功能表(MainMenu) 所有Windows 的應用程式均有功能表選單, 提供功能選單(例如File 、Edit 及Help) 及功能選項(如File 選單的New、Open 及Save 等選項), BCB 的MainMenu 即是協助使用者製作此功能表的物件。以下範例即是示範功能表的使用。

19 範例11-7a 請以MainMenu 重作範例11-3a 的字型大小及邊界樣式設定。
1. 此題目所要完成的功能表選單及其選項如下, 其中“字型”、“邊界樣式”及“結束”稱為選單，“8”、“12”及“18”稱為各選單的選項。

20 3. 編輯每一選單及選項的Name 及Caption 屬性。
2. 表單配置。 (1) 安排一個MainMenu, 其Name 屬性預設值為MainMenu1, 如下圖左。MainMenu 圖項於程式執行時並不會顯示, 所以任意位置皆可。 (2) 安排一個Edit, 設定其Name 屬性為edi 。 3. 編輯每一選單及選項的Name 及Caption 屬性。 (1) 於步驟1 的每一選單及選項均應有一個Caption 及Name, 本例將每一選單及選項的Caption 及Name 規定如下, 括號外為Caption, 括號內為Name 。 (2) 進入功能表編輯視窗。 按一下MainMenu 的Items 屬性右邊的省略按鈕... , 畫面如下圖右：

21 (3) 依序於物件檢視視窗輸入每一個選單或選項的Caption 及Name 屬性。
a. 下圖左是“字型”的Caption 及Name 屬性的設定, 完成之後表單如下圖右。 b. 於下圖右可按一下鍵盤的“下移鍵”，繼續編輯字型的選項或按一下右移鍵, 編緝“邊界樣式”與“結束”選單。

22 c. 完成所有選單與選項編輯之後, 物件檢視視窗如下圖左, 已有以上的mFont 、mF8 及mBo 等物件, 下圖右為功能表視窗。
d. 完成以上步驟的表單如下圖左。 4. 編輯各物件對應的事件程式。 各事件程式, 如以下的程式列印。

23 快顯功能表(PopupMenu) 當使用者按一下滑鼠右鍵時所出現的功能表, 稱為快顯功能表(PopupMenu)。其製作與編輯方式均同MainMenu, 唯一要注意的是PopupMenu製作完成之後, 要將啟動此PopupMenu 物件的PopupMenu 屬性點選為PopupMenu, 請看以下範例說明。

24 範例11-7b製作快顯功能表。 1. 本例編輯PopupMenu1, 如下圖左。
2. 點選edi 右鍵時, 應出現快顯功能表, 所以於edi 的PopupMenu 屬性點選PopupMenu1, 如下圖右。 3. 鍵入各事件副程式。

25 影像盒(Image) Image 元件可用來展示Bitbmps (*.bmp) 、Icons (*.ico) 、Enhanced Metafiles(*.emf) 、Metafiles (*.wmf) 及JPEG (*.jpg 或*.jpeg) 等影像, 若配合Canvas 等繪圖方法, 還可發展出一套類似小畫家的應用軟體。Image 的常用屬性如下： Picture 屬性 顯示圖片的檔名。 Stretch 屬性 是否將影像的大小與元件大小同步。預設值為false, 如下圖左, 原影像若比元件還大, 則超出的部分不予顯示；若設為true, 則是自動調整影像大小而填滿整個元件, 如下圖右, 此種方式可藉由調整元件的大小(Width 與Height) 來放大或縮小影像。

26 AutoSize 屬性 是否將元件的大小配合影像的大小, 預設值為false, 也就是當影像超出控制項大小時, 將有部份影像不顯示, 如下圖左；若設為true, 則是自動調整元件大小以配合影像的尺寸, 如下圖右。

27 範例11-8a 示範Image 影像盒。

28 範例11-8b影像的移動與縮放。 題目分析 1. 物件的Top 與Left 屬性是控制元件在表單的位置, 若要改變元件的位置, 只要重設這兩個屬性即可。 2. 物件的Height 與Width 屬性是控制元件的大小, 所以重設這兩個屬性值可改變元件的大小。 3. Image 的Stretch 屬性設為true, 則影像可配合元件的大小而調整大小。 4. BitBtn 元件(位於Additional 標籤頁) 是一個與Button 功能接近的功能鈕,但比Button 多一個Glyph 屬性。此屬性可設定其圖示, 本例即利用四個BitBtn 控制Image 的上下左右移動按鈕, 為了使圖示能充分表現上下左右的效果, 筆者於C:\Program Files\Common Files\Borland Shared\Images \Button資料夾找到一些箭號圖示。

29 對話框 BCB 的對話框元件如下圖, 共有OponDialog (取檔) 、SaveDialog (存檔) 、OpenPictureDialog (取影像檔) 、SavePictureDialog (存影像檔) 、FontDialog (字型) 、ColorDialog (顏色) 、PrintDialog (印表) 、PrintSetup Dialog (印表機設定)、FindDialog (尋找文字) 、ReplaceDialog (尋找文字) 等。

30 OpenDialog 與penPictureDialog
OpenDialog 與OpenPictureDialog 都是取檔對話框, 其中OpenDialog 如下圖、OpenPictureDialog 如下下圖, 兩者都可取任何類型檔案, 但是後者多了影像預覽功能, 以及已預設Filter 屬性為影像檔案, 可專門用來取得影像類別的檔案。

31

32 SaveDialog 與SavePictureDialog
SaveDialog 與SavePictureDialog 都是用來存檔的對話框, 但是後者的Filter屬性已預設為影像檔案, 如下圖, 但SaveDialog 與OpenDialog 的Filter 都是空白, 須由程式設計者自行設計。

33 檔案對話框常用屬性 關於以上四種檔案對話框的常用屬性說明如下： FileName 屬性 Filter 屬性
所欲存取檔案的名稱, 若欲得到檔案的進一步資訊, 可使用以下函式協助。 Ex t r a c tF i l eName：取出之檔名。 Ex t r a c tF i l e Ex t：取出副檔名。 E x t r a c tF i l e P a t h：取出完整路徑。 Ex t r a c tF i l eDi r：取出所在目錄。 E x t r a c tF i l e D r i v e：取出所在磁碟機。 Filter 屬性 檔案過濾屬性, 可指定所要存取的檔案類型, 上圖是OpenPictureDialog的預設屬性, 共預設六種檔案類型。

34 FilterIndex 屬性 傳回使用者使用檔案過濾屬性的索引編號。 DefaultExt 屬性 設定檔案對話框的預設副檔名。 Options 屬性 雜項設定。 Execute 方法 開啟所有對話框使用的方法為Execute, 其語法如下： 物件->Execute() 若對話框順利執行, 則上式傳回true, 因此在實務的應用上應在上式加一個if 敘述, 若if 條件成立時才執行存取檔動作, 如此可避免使用者沒有正確回應對話框的內容, 但卻執行存檔, 而造成當機。

35 範例11-9a 同範例11-8a, 但使用檔案對話框存取影像檔案。

36 Font Dialog FontDialog 如右圖, 是一個字型設定對話框, 其常用屬性如下： Font 屬性
記錄字型的字集(Charset) 、字型名稱(Name) 、字型樣式(Style) 、大小(Size) 、顏色(Color) 等, 以上存取的方式為Font->Charset、Font->Name 等。

37 Device 屬性 設定選取螢幕字型(fdScreen) 、印表機字型(fdPrinter) 或是兩者皆要(fdBoth)。 Options 屬性 雜項設定。 以下程式可以將RichEdit 元件內所選定的文字(使用者拖曳元件內的部份文字使之反白, 稱為選定) 重設字型。

38 Color Dialog ColorDialog 如右圖, 可以用來設定物件的顏色, 其常用屬性為Color 。
以下程式可以設定RichEdit 元件的背景。

39 Print Dialog PrintDialog 如下圖, 可以提供印表的參數設定, PrintDialog 與PrintSetupDialog 都是直接呼叫Windows 系統的PrintDialog 與PrintSetupDialog 對話框, 所以不用再傳遞任何參數, 即可執行使用者於對話框的任何設定。

40 以下程式可以啟動PrintDialog, 若使用者按一下“確定”，則可將RichEdit 的內容交由印表機列印, RichEdit 的列印方法如下：

41 PrintSetupDialog PrintSetupDialog 如下圖, 可協助使用者選擇印表機名稱、紙張大小、來源、及控制列印方向。PrintSetupDialog 也是直接呼叫Windows 系統的PrintSetupDialog 對話框, 所以程式設計者只要使用Execute 方法啟動PrintSetupDialog 即可, 其餘的事情都是由BCB 自動完成。

42 FindDialog 與ReplaceDialog
FindDialog 與ReplaceDialog 會出現尋找與取代對話框, FindDialog 對話框如下圖左, ReplaceDialog 如下圖右,其常用屬性如下：

43 FindDialog 與ReplaceDialog 與前面的對話框有些不同, 其使用步驟如下：
FindText 屬性 欲尋找的文字。 ReplaceText 屬性 欲取代的文字。 FindDialog 與ReplaceDialog 與前面的對話框有些不同, 其使用步驟如下： 1. 先用Execute 方法啟動對話框, 待使用者輸入字串。 2. 若使用者按一下對話框的“找下一個”, 則系統啟動Find 事件。 3. 若使用者按一下對話框的“取代”或“全部取代”, 則系統啟動Replace事件。 以下程式可以至RichEdit 尋找字串。

44 以上程式執行結果如右圖,欲尋找的字串已自動反白。

45 以下程式可至RichEdit 取代字串。

46 以上程式執行結果如下圖, is 已被取代為are 。

47 範例11-9b 對話框的使用。

48 StringGrid StringGrid 元件可以將資料以二維的表格方式呈現, 如下圖, 其常用屬性如下：

49 ColCount 屬性 RowCount 屬性 FixedCols 屬性 FixedRows 屬性 Cells[n][m]屬性
行數。 RowCount 屬性 列數。 FixedCols 屬性 當捲軸捲動時, 不被移動的行數, 如上圖FixedCols 是1 。 FixedRows 屬性 當捲軸捲動時, 不被移動的列數。如上圖FixedRows 是1。 Cells[n][m]屬性 第n 行m 列所欲填入的資料, 其行列(n, m) 座標如下： 以下範例示範將一個二維陣列填入StringGrid 。

50 範例11-10a 設有一個二維陣列初值如下, 請將其填入StringGrid 。

51 11-11 DriveComboBox、DirectoryListBox、FileListBox 及FilterComboBox

52 DriveComboBox Drive 屬性 DirList 屬性
DriveComboBox (位於Win3.1 標籤頁) 稱為磁碟機雙併盒, 它可以將使用者的所有磁碟機列出供使用者點選, 其常用屬性如下： Drive 屬性 使用者所點選的磁碟機編號。 DirList 屬性 欲關聯的目錄列表盒。 下圖是載入DriveComboBox, 並執行的畫面, BCB 已將使用者的所有磁碟機列出。

53 DirectoryListBox FileList 屬性 DirLabel 屬性
DirectryListBox (位於Win3.1 標籤頁) 稱為目錄列表盒, 它可以將指定磁碟機的所有目錄列出, 其常用屬性如下： FileList 屬性 欲關聯的檔案列表盒。 DirLabel 屬性 欲關聯的Label 控制項, 該控制項可顯示使用者所點選的目錄全名。 下圖是載入DriveComboBox1 與DirectoryListBox1 並將DriveComboBox1 的DirList 點選DirectoryListBox1 的執行畫面, DirectoryListBox1 已經列出DriveComboBox1 所點選磁碟機d 的所有目錄。

54 FileListBox FileListBox 稱為檔案列表盒, 它可以將指定目錄的所有檔案列出, 以下是FileListBox 的常見屬性。 Mask 屬性 指定所要篩選的副檔名稱類型, 預設值為*.* 。 MultiSelect 屬性 是否同意檔案可複選, 預設值為False 。 FileEdit 屬性 設定欲關聯的Edit 元件, 該元件可顯示使用者所點選的檔名。 FileType 屬性 設定可顯示的檔案型態, 其子選項有以下7 個。

55 使用DriveComboBox 、DirectoryListBox 及FileListBox 等三個元件, 並配合DirList、FileList、DirLabel、FileEdit 及Mask 等屬性, 即可作出類似檔案總管的功能, 請於物件檢視視窗完成以下設定。 以上設定的執行結果, 如右圖所示。

56 上圖若加入Image 元件及以下程式, 可取出指定的影像檔案, 輸出結果如下圖：

57 範例11-11a FileComboBox 、DirectoryListBox 及FileListBox 示範。

58 FilterComboBox FileList 屬性 Filter 屬性
FilterComboBox 元件的主要功能, 是將前面的FileListBox 加上檔案過濾效果, 其常用屬性如下： FileList 屬性 欲關聯的檔案列表盒。 Filter 屬性 檔案過濾參數。 雖然FileListBox 的Mask 屬性亦可過濾檔案, 但是FilterComboBox 的使用較為靈活, 請看以下範例。

59 範例11-11b 以FilterComboBox 重做以上範例。

60 1 1 - 12 Timer Interval 屬性 Timer 事件
Timer (位於System 標籤頁) 可用來執行某些週期性的工作, 例如文字的閃爍、動畫的製作、或時鐘的顯示等。因為以上工作的特性, 都是固定某一個週期, 即要重複執行某一事件函式。其常用屬性如下： Interval 屬性 設定Timer 事件執行的週期, 單位為千分之一秒。 Timer 的常用事件如下： Timer 事件 每隔Interval 的週期, 均會自動執行此事件。

61 範例11-12a 示範Timer 控制項。

62 範例11-12b 請設計一個紅綠燈, 其時序如下(T=500ms) ：

63 Shape Shape 元件可由Shape 屬性表現各種不同的形狀, 以下範例將示範其各種形狀, 其常用屬性如下： Shape 屬性 形狀, 其常數共7 個如下： Pen 屬性 雜項設定, 有以下子屬性。

64 範例11-13a 示範Shape 元件的各種形狀及顏色。

65 BitBtn BitBtn (位於Additional 標籤頁) 是一個功能與Button 相近的元件, 但比Button 多一個屬性Glyph, 此屬性可於控制項上放置圖項。如下圖左, 筆者點選“gwosheng.bmp”。若不自己輸入圖項, 亦可使用Kind 屬性預設的12個現成圖項, 如下圖右, 筆者點選bkAll 。

66 SpeedButton SpeedButton 亦是與Button 功能相近的元件, 比較特殊的是多了一個GroupIndex 屬性, 此GroupIndex 屬性預設值為0, 表示各個按鈕獨立操作, 程式設計者若將多個SpeedButton 的GroupIndex 的值設為相同, 則他們與RadioButton (選項鈕) 功能相近, 具有同組互斥的功能。

67 範例11-15a 以SpeedButton 重做11-2a 的字型大小設定。

68 Ch a r t Chart 是一個統計圖元件, 它可以協助使用者迅速完成Line 、Bar 、Horiz.Bar、Area 、Point 、Pie 、Fast Line 、Shape 、Gantt 、Arrow 及Bubble等圖形, 如下圖, 以下範例將示範如何繪製Bar Chart 及以股價走勢圖繪製Fast Line Chart 。

69 範例11-16a 設有員工業績如下, 請繪製Bar Chart 。

70 範例11-16b 同上範例, 但繪製以下業績的統計圖。

71 範例11-16c 繪製股價走勢圖。

72 範例11-16d Animate 元件的功能為播放一個動畫檔(*.avi), 其常用屬性為Active, Active設為True 則開始播放, False 則停止播放, FileName 屬性則為欲播放的檔名。此外CommonAVI 屬性亦已內定8 種動畫檔, 例如CopyFile 、CopyFiles、DeleteFile 、EmptyRecycle 、FindComputer、FindFile 、FindFolder 及RecycleFile等8 個動畫, 程式設計者可於CommonAVI 屬性點選以上動畫。同上範例, 但同時繪製2 支股價走勢圖。

73 範例11-17a示範Animate 的動畫播放。 1. 於表單配置一個Animate 元件(位於元件盤的Win32 標籤頁), 其Name 預設值為Animate1。 2. 使用檔案搜尋的方式, 搜尋自己硬碟的*.avi 類型檔案, 結果如下圖, 請於Animate1 的FileName 點選以下任意檔案。

74 1 1 - 1 8 習題 請實際參觀保齡球館的計分方式, 寫一程式完成以下功能。 (1) 可單人單球道擊球, 並逐一顯示此人的分數。
(2) 可2 至3 人單球道擊球, 並逐一顯示此2 ～3 人的分數。