屬性與事件
# FastWeb控制元件使用公共說明
- 適用平臺： WEB(桌面)，APP(移動端)
FastWeb控制元件包含了網頁表單的許多特性。以下內容為FastWeb中經常使用到的相關屬性的說明。
- 手冊使用說明
- 本手冊以網頁版和PDF的形式發佈，使用網頁版文件時，建議使用Chorme瀏覽器進行瀏覽，如使用其他瀏覽器導致顯示頁面出錯，請更換瀏覽器使用本文件。
- 需要查閱相關資訊時，按下Ctrl + F，在彈出的搜索框中輸入需要查詢的資訊即可。
- 本手冊中標註了「應用」的屬性、事件、方法有對應的實體demo及指令碼程式碼可供參考。
# 1. 公共屬性、方法和事件
# 1.1. 屬性（Properties）
| 屬性 | 適用範圍 | 功能簡述 |
|---|---|---|
| Align | 一些元件 | 確定控制元件在其父元件區域內的對齊方式 |
| Anchors | 一些元件 | 指定某個可視控制元件的邊界，隨調整窗體的大小時而改變 |
| AutoSize | 一些元件 | 元件是否可以根據其內容確定自己的大小 |
| Enabled | 所有元件 | 指定控制元件是否響應滑鼠、鍵盤和計時器事件。 |
| FieldLabel | 一些元件 | 設定控制元件對應的欄位標籤內容 |
| FieldLabelAlign | 一些元件 | 欄位標籤與控制元件的對齊方式 |
| FieldLabelSeparator | 一些元件 | 欄位標籤與控制元件的分隔符號 |
| FieldLabelWidth | 一些元件 | 欄位標籤的寬度 |
| Height | 所有元件 | 指定控制元件的垂直大小(以畫素為單位)。 |
| Hint | 所有元件 | 指定當使用者將滑鼠移到控制元件上時出現的文字字串。 |
| ImageIndex | 一些元件 | 指定該元件顯示的對應的圖片索引號 |
| Images | 一些元件 | 指定元件使用的對應的影象集 |
| Left | 所有元件 | 控制元件距離左側的畫素值 |
| Name | 所有元件 | 指定程式碼中引用的元件的名稱。 |
| Visible | 所有元件 | 指定元件是否顯示在螢幕上。 |
| Width | 所有元件 | 確定元件的寬度。 |
# 1.1.1. Align
property Align;
使用該屬性可在窗體或面板上將元件排列到頂端、底端、左邊或右邊等多種對齊方式，並且即使窗體、面板或包含元件的大小發生變化，也仍然會保持對齊方式。可以使窗體以某種方式對齊，下面是所選對齊方式的說明。
| 所選內容 | 說明 |
|---|---|
| alBottom | 元件被移到容器的底端 |
| alClient | 使元件填充整個容器 |
| alCustom | 以自定義方式顯示窗體 |
| alLeft | 元件被移到容器的左端 |
| alNone | 元件仍然在其原來的位置 |
| alRight | 元件被移到容器的右端 |
| alTop | 元件被移到容器的頂端 |
下面以一個UgSimplePanel為例，展示不同的對齊方式展現的效果。
| 所選內容 | 圖示 |
|---|---|
| alBottom |  |
| alClient |  |
| alCustom |  |
| alLeft |  |
| alNone | |
| alRight |  |
| alTop |  |
# 1.1.2. Anchors
property Anchors: TAnchors;
設定元件與窗體邊框是否保持相對位置不變，包含四個邊的選項設定。其中 akBottom 表示元件的底部與窗體底部的相對位置不變，akLeft 表示為元件的左邊與窗體的左邊相對位置不變，akRight 表示為元件的右邊與窗體的右邊相對位置不變，akTop 表示元件的頂部與窗體的頂部相對位置不變。
# 1.1.3. AutoSize
property AutoSize: Boolean;
說明元件是否可以根據其內容確定自己的大小。將窗體的AutoSize屬性設定為True時，窗體可根據窗體中的內容確定自己的大小，作為該窗體的預設打開的大小。
# 1.1.4. Enabled
property Enabled: Boolean;
確定元件是否啟用。為False時，元件不響應滑鼠點選以及鍵盤操作。
以TUgBitBtn為例，當Enabled屬性為True時，按鈕正常顯示，可以響應滑鼠點選以及鍵盤的操作。
而當Enabled屬性為False時，按鈕變灰，且無法響應滑鼠點選和鍵盤操作。
# 1.1.5. Height
property Height：Integer;
設定元件顯示的畫素高度。
# 1.1.6. Left
property Left: Integer;
設定元件顯示的邊界與窗體左邊框的畫素距離。
# 1.1.7. Visible
property Visible: Boolean;
確定元件是否在窗體上可見，為False時，元件不顯示在窗體上。
# 1.1.8. ClearButton
property ClearButton: Boolean;
如果為True，則編輯框中有文字時會顯示用於清除編輯框中內容的清除按鈕。
# 1.1.9. Name
property Name: String;
設定控制元件的名稱。
# 1.1.10. Color
property Color: TColor;
設定控制元件的顏色。
UgEdit01.color := $00FFFFCC;
# 1.1.11. EmptyText
property EmptyText: string;
設定編輯框為空時顯示的文字內容，該文字內容在輸入文字后消失。
UgEdit01.Text := '';
UgEdit01.EmptyText := '請輸入內容';
2
# 1.1.12. FieldLabel
property FieldLabel: string;
設定編輯框控制元件對應的欄位標籤內容。
# 1.1.13. FieldLabelAlign
property FieldLabelAlign: TUniLabelAlign;
設定標籤內容的對齊方式。
| 取值 | 說明 | 圖示 |
|---|---|---|
| laLeft | 標籤相對於控制元件左對齊 |  |
| laTop | 標籤位於控制元件的頂部 |  |
| laRight | 標籤相對於控制元件右對齊 |  |
在進設計模式下進行屬性變更的時候，可能會出現Ajax ERROR報錯，該情況是在設計模式下出現的情況，在運行模式下不會出現該錯誤。
# 1.1.14. FieldLabelSeparator
property FieldLabelSeparator: string;
設定欄位標籤與文字編輯框的分隔符號。預設為:。
# 1.1.15. FieldLabelWidth
property FieldLabelWidth: Integer;
設定欄位顯示的寬度。
寬度30時的顯示效果：
寬度100時的顯示效果：
# 1.1.16. Top
property Top: Integer;
設定控制元件的頂部與窗體頂部的畫素距離。
# 1.1.17. Width
property Width: Integer;
設定控制元件顯示的畫素寬度。
# 1.2. 事件（Events）
| 事件 | 觸發條件 |
|---|---|
| OnChange | 當用戶修改編輯框中的內容時觸發該事件 |
| OnClick | 當用戶點選控制元件時觸發該事件 |
| OnDblClick | 當用戶雙擊該控制元件時觸發該事件 |
| OnEnter | 當控制元件被啟用時觸發該事件 |
| OnExit | 當焦點從該控制元件轉移到其他控制元件時觸發該事件 |
| OnKeyDown | 當控制元件處於啟用狀態時按下鍵盤上的按鍵以觸發該事件 |
| OnKeyPress | 當按鍵按下時觸發該事件 |
| OnKeyUp | 當按下的按鍵被釋放時觸發該事件 |
| OnMouseDown | 當滑鼠在控制元件區域進行點選操作時觸發該事件 |
| OnMouseEnter | 當滑鼠指針移動至控制元件的顯示區域時觸發該事件 |
| OnMouseLeave | 當滑鼠指針離開控制元件的顯示區域時觸發該事件 |
| OnMouseUp | 當釋放滑鼠的點選操作時觸發該事件 |