第十二章 進階輸出入元件(二) ActionList ImageList Panel ColorBox UpDown

Presentation on theme: "第十二章 進階輸出入元件(二) ActionList ImageList Panel ColorBox UpDown"— Presentation transcript:

1 第十二章 進階輸出入元件(二) ActionList ImageList Panel ColorBox UpDown
第十二章 進階輸出入元件(二) ActionList ImageList Panel ColorBox UpDown DateTimePicker MonthCalendar PageControl TabControl Splitter ScrollBar TreeView ListView HeaderControl與StatusBar

2 12 -1 Ac t ionList 當兩個以上的功能鈕, 需要共同使用相同的程式碼, 此時即可將此程式碼放在ActionList, 再由這些功能鈕共同呼叫即可, 以上即為ActionList 的第一功能, 請看範例12-1a 。其次, ActionLit 亦內儲一些程式碼, 共分為12 大類,例如, Edit 、Format 、File 、及Search 等功能, 如下圖左與右所示。這些動作可直接於功能表中取用, 請看範例12-1b 。

3 範例12-1a 示範ActionList。

4 範例12-1b 示範ActionList 內儲的Action。本範例使用ActionList 裏的EditCopy 、EditPaste 、RichEditBold 、RichEditItalic 、FileOpen 及FileSaveAs 等6 個Action 做示範。

5 12 -2 ImageLis t 當一個程式需要使用多個圖項時, 此時即可藉助ImageList, 其使用方式為先將所要的圖項放到ImageList 。當個別元件需要使用這些圖項時, 只要這些元件含有images 屬性, 均可使用這些圖項。使用時只要將images 屬性點選對應的ImageList 元件, 再將ImageIndex 屬性點選圖項的編號即可。

6 範例12-2a 示範ImageList 的用法。

7 12 -3 Pane l 當我們完成一個表單的元件配置時, 如下圖左, 若表單的大小被使用者更動, 如下圖右, 則所有元件並不會自動變更大小, 使得畫面變得不協調。

8 此時, 若使用Panel 元件(位於元件盤的Standard 標籤), 進行版面的配置, 如下圖左, 並點選適當的Align 屬性則可改善以上缺失。如下圖共有5個Panel 元件, 其Name 屬性分別是Panel1 、Panel2 、Panel3 、Panel4 及Panel5,Align 屬性分別點選Align 屬性, 其物件編號分別是alTop 、alLeft 、alRight 、alBottom 及alClient, 則當表單的大小改變時, 這些元件仍依比例調整大小, 如下圖右。此即為Panel 元件的主要功能, 這個功能在Java 而言已是標準的動作。因為對跨平台而言, 使用者的螢幕可能是手機或PDA, 也可能是大尺寸的螢幕, 也就是不管表單的大小為何, 所有的元件均要等比例配置。

9 12 -4 ColorBox ColorBox 元件(位於元件盤的Additional 標籤) 是一種顏色設定對話框,與11-9 節ColorDialog 不同的是, ColorBox 僅提供基本的顏色, 且程式撰寫較為容易, 請看以下範例說明。

10 範例12-4a 示範ColorBox。

11 12 -5 UpDown 當我們需要進行簡單的鄰近數字輸入時, 即可使用UpDown 元件輸入數值。此元件的使用方式是利用Associate 屬性設定所要協同工作的物件,請看以下範例說明。

12 範例12-5a 示範UpDown 的用法。

13 12 -6 DateTimePicke r 程式執行中, 若需要使用者輸入日期與時間, 則可使用DateTimePicker元件, 請看以下範例說明。

14 範例12-6 示範DateTimePicker 的用法。

15 12 -7 MonthCalenda r MonthCalendar 元件的功能與DateTimePicker 的功能相近, 都是用來輸入日期。但是後者能輸入日期與時間, 且不佔空間; 而前者僅能輸入日期, 且較佔空間, 但卻能讓使用者使用拖曳的方式, 輸入日期的起迄點, 請看以下範例說明。

16 範例12-7a 示範MonthCalendar 的用法。

17 12 -8 PageControl 當我們按一下功能表的"Tools"/"Environment Options", 畫面出現如下圖, 共含有9 個頁次的標籤, 本單元的PageControl(位於元件盤的"Win32" 標籤)即可實做此介面。

18 TabSheet 物件 PageControl 為了達到多頁的效果, 所以並不希望使用者直接在PageControl上面佈置元件, 而是先佈置若干個TabSheet 物件, 每一個TabSheet 即代表一個頁籤。新增TabSheet 物件的方式是, 載入此元件, 並點選此元件快選功能表的"New Page", 畫面如下圖左, 下圖左筆者已新增6 個TabSheet 物件, 其Name 分別預設為TabSheet1 至6, 如下圖右。這6 個物件分別都是獨立的個體, 使用者可分別在這些物件上佈置不同的輸出入元件。

19 ActivePage 屬性 Images 屬性 傳回或設定那一個頁是使用的頁。
 可於此設定每一頁標題所要顯示的圖片。例如, 於ImageList1 放入若干圖片, 如下圖左。其次, 於Image 屬性點選ImageList1, 則各頁的標題均出現圖項, 如下圖右。

20 MultiLine 屬性 當標題內容超出一頁時, 是否允許以多列顯示。例如, 下圖左是false的結果, 下圖右是true 的結果。

21 OnChanging/OnChange 事件
當使用者按一下某個頁籤時, 均會引發OnChanging 與OnChange 事件。OnChanging 發生在頁籤改變之前, OnChange 發生在後, 此兩事件的函式原型分別如下, 其中AllowChange 代表是否允許頁籤改變。 以下敘述則可分別印出使用者所選的頁籤名稱與索引。

22 自我練習 請使用PageControl 物件完成BCB 的Environment Options 設定視窗。

23 TabCo nt r o l TabControl 是一個類似PageControl 的物件, 但其功能非常陽春, 雖然與PageControl 同樣具有頁籤的功能, 如下圖, 但卻無分頁的功能, 所有的頁籤都對應到同一頁, 所以你並不能像PageControl 一樣, 將不同的輸出入元件放到不同的頁籤。

24 Tabs 屬性 用於編輯頁籤的地方。例如, 上圖的Tabs 屬性設定如下圖。

25 TabIndex 記錄使用中的頁籤。例如, 右圖的TabIndex 為0 。以下敘述可傳回使用者所點選的頁籤。

26 範例12-9a 示範TabControl 的用法。

27 Splitter Splitter 元件(位於"Additional"標籤) 如下圖左, 它的效果同檔案總管(如下圖右) 的可拖曳分隔線, 可讓使用者改變框架的大小。

28 Align 屬性 設定控制項的對齊方式。並非任一元件均有Align 屬性, 只有具有Align屬性的控制項才能與Splitter 控制項一起展示拖曳的效果。

29 範例12-10a 示範Splitter。

30 ScrollBar ScrollBar (位於Additional 標籤) 是一個與Panel 相近的容器元件, 如下圖左, 但是當所配置的元件超出ScrollBar 時, ScrollBar 將會自動出現捲軸, 如下圖右

31 TreeView 檔案總管左邊的資料夾(如下圖左) 及BCB 的線上說明(如下圖右) 都是一種樹狀結構的展示, TreeView 元件(位於Win32 標籤) 的功能即與此類似。 本單元將以兩個範例示範以TreeView 製作電子書, 電子書的內容如下:

32 TreeView Items Editor 按二下所載入的TreeView, 出現TreeView Items Editor 如下圖。
New Item 此按鈕用於新增一個項目(Item), 此項目的位階同游標所在項目。 New SubItem 此按鈕用於新增一個子項目(SubItem), 此項目的位階為游標所在項目的子項目。

33 Text Image Index Selected Index State Index Delete Load 新增項目的標題。
新增項目所要對應的圖項(Icon) 編號, 圖項來源為Images 屬性所指定Image List 元件。 Selected Index 項目被點選時所要使用的圖項編號, 圖項來源為Images 屬性所指定ImageList 元件。 State Index 狀態圖項編號, 圖項來源為StateImages 屬性所指定的ImageList 元件。例如, 你可以使用此圖項標示此項目的類別或重要性。 Delete 刪除游標所在位置的項目。 Load 載入指定的文字檔案。其項目的階層必須以Tab 鍵表示, 如下圖所示。下圖的chap.txt 是筆者所鍵入的文字檔。

34 LoadFromFile 將指定的檔案載入TreeView 。例如, 以下敘述可將上圖的chap.txt 載入TreeView1 。

35 SaveToFile 將TreeView 的內容存入指定的檔案, 唯不含圖項。例如, 以下敘述可將TreeView1 的內容存入chap.txt 。

36 範例12-12a 請於設計階段製作線上可展開與縮合的電子書。

37 範例12-12b 同上範例, 但寫程式完成。

38 ListView 檔案總管的檔案顯示方式, 可以是大型圖示、小型圖示、清單、詳細資料及縮圖等, ListView (位於Win32 標籤) 的功能即與此相近, 請看以下範例說明。

39 範例12-13a 示範ListView 的用法。

40 12 - 14 HeaderControl 與StatusBar
HeaderControl 與StatusBar (位於"Win32"標籤) 都是一種狀態列, 只是預設的位置不同。HeaderControl 通常預設在表單的上方; StatusBar 通常預設在表單下方。其用法請看以下範例。

41 範例12-14a 示範HeaderControl/StatusBar 的用法。