進階輸出入元件(一)

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

CheckBox

通常用來讓使用者點選某項功能的有無,例如以下範(fàn)例即可讓使用者點選文字是否表現(xiàn)粗體、斜體或含底線,本物件的重要屬性如下：Checked屬性記錄選項是否致能。Caption屬性標(biāo)題。範(fàn)例11-1a示範(fàn)CheckBox的用法。11-2選項鈕(RadioButton)前面11-1節(jié)的CheckBox可以點選多個選項,但有些情況是僅能有一個選項致能,就像收音機的音源選擇,當(dāng)您選CD時,不管原來的音源為何,均會自動切掉,當(dāng)您繼續(xù)選Tape時,CD也會自動切掉,這就是RadioButton控制項的特性,它具有排它性,一次僅能一個選項成立。本物件的重要屬性如下：Checked屬性記錄選項是否致能。範(fàn)例11-2a本例示範(fàn)RadioButton的使用。11-3選項鈕群組(RadioGroup)於同一表單僅能有一個RadioButton選項為true,若有兩組的RadioButton要在同一表單同時出現(xiàn),則應(yīng)使用本節(jié)所要介紹的RadioGroup。例如範(fàn)例11-3a在同一表單需使用兩組選項鈕分別設(shè)定Edit1的字型大小及邊界樣式,此時即可使用RadioGroup元件。範(fàn)例11-3a示範(fàn)RadioGroup的使用自我練習(xí)元件盤中Standard標(biāo)籤的GroupBox及Panel亦有分組的功能,請讀者自行揣摩練習(xí),完成範(fàn)例11-3a程式的功能。11-4列表盒(ListBox)ListBox

的主要功能是將使用者需要輸入的文字、數(shù)字,預(yù)先放在ListBox,方便使用者直接點選,以減少使用者鍵入文字、數(shù)字的困擾。於範(fàn)例11-4a中,筆者以醫(yī)師開處方為例,因目前大部分的程式均是醫(yī)師需鍵入藥品名稱或代碼,本例則將處方於程式設(shè)計階段預(yù)先放入ListBox中,待醫(yī)師操作時,只要點選藥品名稱與重量即可,完全不用輸入藥品名稱或記憶代碼等工作。其次,於實務(wù)的應(yīng)用中,應(yīng)將全部藥品分門別類,放於不同的ListBox,以減少使用著目視搜尋藥品的時間。範(fàn)例11-4a試設(shè)計三個列表盒於表單：左邊放入藥品名稱、中間放入重量、右邊放入患者所需處方藥品。當(dāng)使用者依序按一下藥品名稱、重量後,右邊列表盒即輸出藥品及重量；當(dāng)使用者按一下右邊處方藥品,即應(yīng)刪除該項指定藥品。11-5雙併盒(ComboBox)ComboBox

是一種結(jié)合ListBox與Edit的輸入控制項,使用者於ComboBox中所點選的項目,可以直接放入Text屬性,因此可以簡化程式的撰寫,但ComboBox一次只能點選一個項目,因此特別適用一次只點選一個項目的場合。其待選項目(Items)亦可使用屬性視窗或撰寫程式設(shè)定,其方法同RadioGroup或ListBox,以下範(fàn)例將用ComboBox讓使用者點選其職業(yè)。範(fàn)例11-5a請寫一個程式,可以讓使用者依序輸入姓名、職業(yè)及性別,其中職業(yè)的輸入方式為事先將所有可能的職業(yè)放在ComboBox,讓使用者點選。11-6捲軸(ScrollBar)

ScrollBar

的功能為使用捲軸控制輸出的大小,其使用方式請看範(fàn)例11-6a,本物件特殊屬性如下：Kind屬性捲軸的擺設(shè)方向,有水平與垂直兩種,其值如下：sbHorizontal(以水平方式呈現(xiàn)捲軸)。sbVertical(以垂直方式呈現(xiàn)捲軸)。Position屬性設(shè)定捲軸的值。Max屬性捲軸可移動的最大值。Min屬性捲軸可移動的最小值。LargeChange屬性當(dāng)使用者用滑鼠按一下捲軸盒至捲軸端點箭頭鈕之間的區(qū)域時,可移動捲軸,而此移動的大小,稱為LargeChange。SmallChange屬性當(dāng)使用者用滑鼠按一下捲軸盒至捲軸兩端的箭頭鈕時,可令捲軸盒移動,而此移動的大小,稱為SmallChange。ScrollBar的特殊事件如下：OnChange事件當(dāng)捲軸值改變時,產(chǎn)生此事件。OnScroll事件當(dāng)使用者拖曳捲軸時,產(chǎn)生此事件。範(fàn)例11-6a示範(fàn)捲軸的用法。範(fàn)例11-6b示範(fàn)以3個捲軸分別代表顏色的(R、G、B),並改變Edit1的背景顏色。功能表(MainMenu)所有Windows的應(yīng)用程式均有功能表選單,提供功能選單(例如File、Edit及Help)及功能選項(如File選單的New、Open及Save等選項),BCB的MainMenu即是協(xié)助使用者製作此功能表的物件。以下範(fàn)例即是示範(fàn)功能表的使用。範(fàn)例11-7a請以MainMenu重作範(fàn)例11-3a的字型大小及邊界樣式設(shè)定。1.此題目所要完成的功能表選單及其選項如下,其中“字型”、“邊界樣式”及“結(jié)束”稱為選單，“8”、“12”及“18”稱為各選單的選項。2.表單配置。(1)安排一個MainMenu,其Name屬性預(yù)設(shè)值為MainMenu1,如下圖左。MainMenu圖項於程式執(zhí)行時並不會顯示,所以任意位置皆可。(2)安排一個Edit,設(shè)定其Name屬性為edi。3.編輯每一選單及選項的Name及Caption屬性。(1)於步驟1的每一選單及選項均應(yīng)有一個Caption及Name,本例將每一選單及選項的Caption及Name規(guī)定如下,括號外為Caption,括號內(nèi)為Name。(2)進入功能表編輯視窗。按一下MainMenu的Items屬性右邊的省略按鈕...,畫面如下圖右：(3)依序於物件檢視視窗輸入每一個選單或選項的Caption及Name屬性。a.下圖左是“字型”的Caption及Name屬性的設(shè)定,完成之後表單如下圖右。b.於下圖右可按一下鍵盤的“下移鍵”，繼續(xù)編輯字型的選項或按一下右移鍵,編緝“邊界樣式”與“結(jié)束”選單。c.完成所有選單與選項編輯之後,物件檢視視窗如下圖左,已有以上的mFont、mF8及mBo等物件,下圖右為功能表視窗。d.完成以上步驟的表單如下圖左。4.編輯各物件對應(yīng)的事件程式。各事件程式,如以下的程式列印。快顯功能表(PopupMenu)當(dāng)使用者按一下滑鼠右鍵時所出現(xiàn)的功能表,稱為快顯功能表(PopupMenu)。其製作與編輯方式均同MainMenu,唯一要注意的是PopupMenu製作完成之後,要將啟動此PopupMenu物件的PopupMenu屬性點選為PopupMenu,請看以下範(fàn)例說明。範(fàn)例11-7b製作快顯功能表。1.本例編輯PopupMenu1,如下圖左。2.點選edi右鍵時,應(yīng)出現(xiàn)快顯功能表,所以於edi的PopupMenu屬性點選PopupMenu1,如下圖右。3.鍵入各事件副程式。11-8影像盒(Image)

Image元件可用來展示Bitbmps(*.bmp)、Icons(*.ico)、EnhancedMetafiles(*.emf)、Metafiles(*.wmf)及JPEG(*.jpg或*.jpeg)等影像,若配合Canvas等繪圖方法,還可發(fā)展出一套類似小畫家的應(yīng)用軟體。Image的常用屬性如下：Picture屬性顯示圖片的檔名。Stretch屬性 是否將影像的大小與元件大小同步。預(yù)設(shè)值為false,如下圖左,原影像若比元件還大,則超出的部分不予顯示；若設(shè)為true,則是自動調(diào)整影像大小而填滿整個元件,如下圖右,此種方式可藉由調(diào)整元件的大小(Width與Height)來放大或縮小影像。AutoSize屬性是否將元件的大小配合影像的大小,預(yù)設(shè)值為false,也就是當(dāng)影像超出控制項大小時,將有部份影像不顯示,如下圖左；若設(shè)為true,則是自動調(diào)整元件大小以配合影像的尺寸,如下圖右。範(fàn)例11-8a示範(fàn)Image影像盒。範(fàn)例11-8b影像的移動與縮放。題目分析1.物件的Top與Left屬性是控制元件在表單的位置,若要改變元件的位置,只要重設(shè)這兩個屬性即可。2.物件的Height與Width屬性是控制元件的大小,所以重設(shè)這兩個屬性值可改變元件的大小。3.Image的Stretch屬性設(shè)為true,則影像可配合元件的大小而調(diào)整大小。4.BitBtn元件(位於Additional標(biāo)籤頁)是一個與Button功能接近的功能鈕,但比Button多一個Glyph屬性。此屬性可設(shè)定其圖示,本例即利用四個BitBtn控制Image的上下左右移動按鈕,為了使圖示能充分表現(xiàn)上下左右的效果,筆者於C:\ProgramFiles\CommonFiles\BorlandShared\Images\Button資料夾找到一些箭號圖示。11-9對話框

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

OpenDialog

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

SaveDialog

與SavePictureDialog都是用來存檔的對話框,但是後者的Filter屬性已預(yù)設(shè)為影像檔案,如下圖,但SaveDialog與OpenDialog的Filter都是空白,須由程式設(shè)計者自行設(shè)計。SaveDialog與SavePictureDialog檔案對話框常用屬性 關(guān)於以上四種檔案對話框的常用屬性說明如下：FileName屬性所欲存取檔案的名稱,若欲得到檔案的進一步資訊,可使用以下函式協(xié)助。ExtractFileName：取出之檔名。ExtractFileExt：取出副檔名。ExtractFilePath：取出完整路徑。ExtractFileDir：取出所在目錄。ExtractFileDrive：取出所在磁碟機。Filter屬性檔案過濾屬性,可指定所要存取的檔案類型,上圖是OpenPictureDialog的預(yù)設(shè)屬性,共預(yù)設(shè)六種檔案類型。FilterIndex屬性 傳回使用者使用檔案過濾屬性的索引編號。DefaultExt屬性 設(shè)定檔案對話框的預(yù)設(shè)副檔名。Options屬性 雜項設(shè)定。Execute方法 開啟所有對話框使用的方法為Execute,其語法如下： 物件->Execute()若對話框順利執(zhí)行,則上式傳回true,因此在實務(wù)的應(yīng)用上應(yīng)在上式加一個if敘述,若if條件成立時才執(zhí)行存取檔動作,如此可避免使用者沒有正確回應(yīng)對話框的內(nèi)容,但卻執(zhí)行存檔,而造成當(dāng)機。範(fàn)例11-9a同範(fàn)例11-8a,但使用檔案對話框存取影像檔案。FontDialog

FontDialog

如右圖,是一個字型設(shè)定對話框,其常用屬性如下：Font屬性記錄字型的字集(Charset)、字型名稱(Name)、字型樣式(Style)、大小(Size)、顏色(Color)等,以上存取的方式為Font->Charset、Font->Name等。Device屬性設(shè)定選取螢?zāi)蛔中?fdScreen)、印表機字型(fdPrinter)或是兩者皆要(fdBoth)。Options屬性雜項設(shè)定。以下程式可以將RichEdit元件內(nèi)所選定的文字(使用者拖曳元件內(nèi)的部份文字使之反白,稱為選定)重設(shè)字型。ColorDialogColorDialog

如右圖,可以用來設(shè)定物件的顏色,其常用屬性為Color。以下程式可以設(shè)定RichEdit元件的背景。PrintDialogPrintDialog

如下圖,可以提供印表的參數(shù)設(shè)定,PrintDialog與PrintSetupDialog都是直接呼叫Windows系統(tǒng)的PrintDialog與PrintSetupDialog對話框,所以不用再傳遞任何參數(shù),即可執(zhí)行使用者於對話框的任何設(shè)定。以下程式可以啟動PrintDialog,若使用者按一下“確定”，則可將RichEdit的內(nèi)容交由印表機列印,RichEdit的列印方法如下：PrintSetupDialogPrintSetupDialog如下圖,可協(xié)助使用者選擇印表機名稱、紙張大小、來源、及控制列印方向。PrintSetupDialog也是直接呼叫Windows系統(tǒng)的PrintSetupDialog對話框,所以程式設(shè)計者只要使用Execute方法啟動PrintSetupDialog即可,其餘的事情都是由BCB自動完成。FindDialog與ReplaceDialog

FindDialog

與ReplaceDialog會出現(xiàn)尋找與取代對話框,FindDialog對話框如下圖左,ReplaceDialog如下圖右,其常用屬性如下：FindText屬性欲尋找的文字。ReplaceText屬性欲取代的文字。FindDialog與ReplaceDialog與前面的對話框有些不同,其使用步驟如下：1.先用Execute方法啟動對話框,待使用者輸入字串。2.若使用者按一下對話框的“找下一個”,則系統(tǒng)啟動Find事件。3.若使用者按一下對話框的“取代”或“全部取代”,則系統(tǒng)啟動Replace事件。以下程式可以至RichEdit尋找字串。以上程式執(zhí)行結(jié)果如右圖,欲尋找的字串已自動反白。以下程式可至RichEdit取代字串。以上程式執(zhí)行結(jié)果如下圖,is已被取代為are。範(fàn)例11-9b對話框的使用。11-10StringGrid

StringGrid

元件可以將資料以二維的表格方式呈現(xiàn),如下圖,其常用屬性如下：ColCount屬性行數(shù)。RowCount屬性列數(shù)。FixedCols屬性當(dāng)捲軸捲動時,不被移動的行數(shù),如上圖FixedCols是1。FixedRows屬性當(dāng)捲軸捲動時,不被移動的列數(shù)。如上圖FixedRows是1。Cells[n][m]屬性第n行m列所欲填入的資料,其行列(n,m)座標(biāo)如下：以下範(fàn)例示範(fàn)將一個二維陣列填入StringGrid

。範(fàn)例11-10a設(shè)有一個二維陣列初值如下,請將其填入StringGrid。11-11DriveComboBox、DirectoryListBox、FileListBox及FilterComboBox

DriveComboBox(位於Win3.1標(biāo)籤頁)稱為磁碟機雙併盒,它可以將使用者的所有磁碟機列出供使用者點選,其常用屬性如下：Drive屬性使用者所點選的磁碟機編號。DirList屬性欲關(guān)聯(lián)的目錄列表盒。下圖是載入DriveComboBox,並執(zhí)行的畫面,BCB已將使用者的所有磁碟機列出。DriveComboBoxDirectoryListBox DirectryListBox(位於Win3.1標(biāo)籤頁)稱為目錄列表盒,它可以將指定磁碟機的所有目錄列出,其常用屬性如下：FileList屬性欲關(guān)聯(lián)的檔案列表盒。DirLabel屬性欲關(guān)聯(lián)的Label控制項,該控制項可顯示使用者所點選的目錄全名。下圖是載入DriveComboBox1與DirectoryListBox1並將DriveComboBox1的DirList點選DirectoryListBox1的執(zhí)行畫面,DirectoryListBox1已經(jīng)列出DriveComboBox1所點選磁碟機d的所有目錄。FileListBox FileListBox

稱為檔案列表盒,它可以將指定目錄的所有檔案列出,以下是FileListBox的常見屬性。Mask屬性指定所要篩選的副檔名稱類型,預(yù)設(shè)值為*.*。MultiSelect

屬性是否同意檔案可複選,預(yù)設(shè)值為False。FileEdit屬性設(shè)定欲關(guān)聯(lián)的Edit元件,該元件可顯示使用者所點選的檔名。FileType屬性設(shè)定可顯示的檔案型態(tài),其子選項有以下7個。使用DriveComboBox、DirectoryListBox及FileListBox等三個元件,並配合DirList、FileList、DirLabel、FileEdit及Mask等屬性,即可作出類似檔案總管的功能,請於物件檢視視窗完成以下設(shè)定。以上設(shè)定的執(zhí)行結(jié)果,如右圖所示。上圖若加入Image元件及以下程式,可取出指定的影像檔案,輸出結(jié)果如下圖：範(fàn)例11-11aFileComboBox

、DirectoryListBox及FileListBox示範(fàn)。FilterComboBox FilterComboBox

元件的主要功能,是將前面的FileListBox加上檔案過濾效果,其常用屬性如下：FileList屬性欲關(guān)聯(lián)的檔案列表盒。Filter屬性檔案過濾參數(shù)。雖然FileListBox的Mask屬性亦可過濾檔案,但是FilterComboBox的使用較為靈活,請看以下範(fàn)例。範(fàn)例11-11b以FilterComboBox重做以上範(fàn)例。11-12Timer Timer(位於System標(biāo)籤頁)可用來執(zhí)行某些週期性的工作,例如文字的閃爍、動畫的製作、或時鐘的顯示等。因為以上工作的特性,都是固定某一個週期,即要重複執(zhí)行某一事件函式。其常用屬性如下：Interval屬性設(shè)定Timer事件執(zhí)行的週期,單位為千分之一秒。Timer的常用事件如下：Timer事件每隔Interval的週期,均會自動執(zhí)行此事件。範(fàn)例11-12a示範(fàn)Timer控制項。範(fàn)例11-12b請設(shè)計一個紅綠燈,其時序如下(T=500ms)：11-13Shape Shape元件可由Shape屬性表現(xiàn)各種不同的形狀,以下範(fàn)例將示範(fàn)其各種形狀,其常用屬性如下：Shape屬性形狀,其常數(shù)共7個如下：Pen屬性雜項設(shè)定,有以下子屬性。範(fàn)例11-13a示範(fàn)Shape元件的各種形狀及顏色。11-14BitBtn BitBtn(位於Additional標(biāo)籤頁)是一個功能與Button相近的元件,但比Button多一個屬性Glyph,此屬性可於控制項上放置圖項。如下圖左,筆者點選“gwosheng.bmp”。若不自己輸入圖項,亦可使用Kind屬性預(yù)設(shè)的12個現(xiàn)成圖項,如下圖右,筆者點選bkAll。11-15SpeedButton SpeedButton

亦是與Button功能相近的元件,比較特殊的是多了一個GroupIndex屬性,此GroupIndex