附加控制元件
# FastWeb附加控制元件
- 適用平臺： WEB(桌面)
附加控制元件組中包含建立網頁使用到的其他控制組件以及一些共同的界面元素。
# 1. TUgBitBtn
該元件顯示為一個可以設定圖片顯示的按鈕元件。其功能用法與TUgButton類似。
# 1.1. 屬性
| 屬性 | 說明 |
|---|---|
| Caption | 按鈕顯示的字元內容 |
| Glyph | 設定按鈕顯示的圖片 |
# 1.1.1. Caption
property Caption: TCaption;
按鈕上顯示的字元。
//JScript
UgBitBtn01.Caption = "Hola";
2
//PasScript
UgBitBtn01.Caption := 'Hola';
2
// Make sure to add code blocks to your code group
# 2. TUgSpeedButton
該元件顯示為一個按鈕。其功能與TUgBitnBtn類似。
# 2.1. 屬性
| 屬性 | 說明 |
|---|---|
| Caption | 顯示按鈕上的字幕內容 |
| Glyph | 設定按鈕顯示的圖片 |
# 2.1.1. Caption
property Caption: TCaption;
按鈕上顯示的字元。
# 3. TUgVerticalLine
該元件顯示為一條垂直的線，可在界面佈局中通常用作分組的分隔線。起到裝飾或者是美化外觀的作用。
# 3.1. 屬性
| 屬性 | 說明 |
|---|---|
| Color | 設定控制元件的背景顏色 |
| LineColor | 設定細線的顏色 |
# 3.1.1. Color
property Color: TColor;
設定控制元件的背景顏色。
# 3.1.2. LineColor
property LineColor: TColor;
設定控制元件的細線的顏色。
# 4. TUgImage
該元件顯示為一個影象顯示的控制元件。可通過其中的屬性來設定顯示圖片，可以顯示包含點陣圖，圖示，PNG，GIF或JPEG影象。
# 4.1. 屬性
| 屬性 | 說明 |
|---|---|
| Center | 影象畫面是否在控制元件中居中 |
| Picture | 屬性用於指定影象內容 |
| Stretch | 是否對畫面進行拉伸以適應影象控制元件的大小 |
| Url | 指定圖片後面的鏈接，點選以跳轉打開指定URL的網頁頁面 |
# 4.1.1. Center
property Center: Boolean;
影象畫面是否在控制元件中處於中心位置。
| 取值 | 圖例 |
|---|---|
| True |  |
| False |  |
# 4.1.2. Picture
property Picture: TPicture;
該屬性用於指定影象控制元件中顯示的控制元件。
選擇左側的Picture屬性，點選其右側的√，打開圖片載入對話方塊。
點選[Load]按鈕，打開圖片上傳對話方塊。
點選[Browse...]按鈕，打開選擇圖片的對話方塊，選擇圖片后，點選[確定]按鈕返回至該界面，此時上傳圖片的對話方塊中已包含圖片路徑。點選[Upload]按鈕以上傳圖片。
在圖片編輯器界面中顯示的是剛才上傳的圖片，確認無誤后，點選[Save]按鈕，此時圖片控制元件中會顯示出該圖片。
# 4.1.3. Stretch
property Stretch: Boolean;
是否對畫面進行拉伸以適應圖片控制元件的大小。
| 取值 | 圖例 |
|---|---|
| False | |
| True |  |
# 4.1.4. Url
property Url: string;
該屬性為圖片指定一個外部地址。
//JScript
function UgImage01OnClick(sender)
{
UgImage01.url = "\"http://isoface.net\"";
UniSession.AddJS("window.open(" + UgImage01.url + ",\"newwindow\")");
}
2
3
4
5
6
//PasScript
procedure UgImage01OnClick(sender: tobject);
begin
UgImage01.url := '"http://isoface.net"';
UniSession.AddJS('window.open(' + UgImage01.url + ',"newwindow")');
end;
2
3
4
5
6
// Make sure to add code blocks to your code group
# 4.2. 應用
UgImage是圖片控制元件，可以關聯到一個圖片檔案上，顯示圖片。
# 4.2.1. 佈局
在主窗體上放一個UgImage影象控制元件。
- UgImage01
| 屬性 | 取值 | 說明 |
|---|---|---|
| Picture | 自行上傳 | |
| Center | True | 中間對齊 |
| Stretch | True | 縮放對齊 |
# 4.2.2. 功能
顯示圖片，如果點選圖片則瀏覽器打開一個新頁面，訪問圖片關聯的一個URL鏈接。
# 4.2.3. 程式碼
//JScript
function UgImage01OnClick(sender)
{
var url;
UgImage01.url = "\"http://isoface.net\"";
UniSession.AddJS("window.open(" + UgImage01.url + ",\"newwindow\")");
}
2
3
4
5
6
7
//PasScript
procedure UgImage01OnClick(sender: tobject);
var
url: String;
begin
url := '"http://isoface.net"';
UniSession.AddJS('window.open(' + url + ',"newwindow")');
end;
2
3
4
5
6
7
8
// Make sure to add code blocks to your code group
# 5. TUgTrackBar
該元件顯示為一個軌跡條元件，設定最小值及最大值后，按住滑鼠拖動，上方會顯示一個數字標記，且隨著滑鼠的移動實現數值的動態變化。
# 5.1. 屬性
| 屬性 | 說明 |
|---|---|
| Max | 控制元件設定的最大值 |
| Min | 控制元件設定的最小值 |
| Orientaion | 控制元件的朝向 |
| Position | 滑塊指向的位置 |
# 5.1.1. Max、Min
property Max: Integer;
property Min: Integer;
2
滑軌設定的最大值。 滑軌設定的最小值。
//JScript
UgTrackBar01.Max = 20;
UgTrackBar01.Min = -2;
2
3
//PasScript
UgTrackBar01.Max := 20;
UgTrackBar01.Min := -2;
2
3
// Make sure to add code blocks to your code group
# 5.1.2. Orientation
property Orientation: TTrackBarOrientation;
該屬性設定滑塊的方向。
| 取值 | 說明 | 圖例 |
|---|---|---|
| trHorizontal | 滑軌塊水平放置 |  |
| trVertical | 滑軌垂直放置 |  |
# 5.1.3. Position
property Position: Integer;
該屬性指定滑塊所在的位置。
//JScript
UgTrackBar.Position = 3;
2
//PasScript
UgTrackBar.Position := 3;
2
// Make sure to add code blocks to your code group
# 6. TUgSplitter
該元件為一個分割條，用於分隔兩塊界面區域，拖動該份分割條還可以改變兩個區域的顯示大小。通過修改其Align屬性可以修改其拖動的方向。
# 6.1. 屬性
| 屬性 | 說明 |
|---|---|
| Align | 控制元件的對齊方式 |
# 6.1.1. Align
property Align: TAlign;
該屬性用於控制控制元件的對齊方式。
# 6.2. 應用
在界面設計時可能需要為主視窗分割槽域，不同區域顯示不同內容，比如分為左右兩個區域，UgSplitter放在兩個區域中間，用於調整兩個區域的橫向寬度或縱向寬度，本例演示調整左右寬度。UgSplitter一般和UgPanel或其他控制元件結合使用。
# 6.2.1. 佈局
在主窗體上先僅放一個UgPanel並將其Align設定為左對齊，再放置一個UgSplitter並將其Align設定為左對齊，再放置一個UgPanel並將其Align設定為剩餘控制元件佔用，此時UgSplitter01應該在兩個UgPanel的中間。
- UgPanel01
| 屬性 | 取值 | 說明 |
|---|---|---|
| Align | alLeft | 左側佔滿 |
- UgSplitter01
| 屬性 | 取值 | 說明 |
|---|---|---|
| Align | alLeft | 左側佔滿 |
- UgPanel02
| 屬性 | 取值 | 說明 |
|---|---|---|
| Align | alClient | 剩餘全部佔滿 |
# 6.2.2. 功能
拖動兩個UgPanel之間的UgSplitter分割條，就可以實現調整兩邊的控制元件大小。
# 7. TUgScrollBox
該元件可以作為一個元件容器來使用，當其中的控制元件內容小於控制元件的尺寸時，在容器中會顯示滾動條。
# 8. TUgDateTimePicker
該元件顯示為一個時間日期的選擇元件，點選編輯框右側的按鈕，在編輯框的下側會顯示可選擇的日曆進行時間日期的選擇。選擇點選后，選擇的日期會顯示在編輯框中。
# 8.1. 屬性
| 屬性 | 說明 |
|---|---|
| ClearButton | 是否在日期處顯示清除按鈕 |
| DateFormat | 日期的顯示格式 |
| DateMode | 日期的模式 |
| DateTime | 日期時間 |
| FirstDayOfWeek | 設定一週的開始 |
| Kind | 設定顯示模式 |
| TimeFormat | 在DateFormat模式下，規定時間的顯示模式 |
# 8.1.1. ClearButton
property ClearButton: Boolean;
是否在控制元件中顯示清除按鈕。
//JScript
UgDateTimePicker01.ClearButton = True;
2
//PasScript
UgDateTimePicker01.ClearButton := True;
2
// Make sure to add code blocks to your code group
# 8.1.2. DateFormat
property DateFormat: string;
設定日期的顯示格式。
//JScript
UgDateTimePicker01.DateFormat = "yyyy/MM/dd";
2
//PasScript
UgDateTimePicker01.DateFormat := 'yyyy/MM/dd';
2
// Make sure to add code blocks to your code group
# 8.1.3. DateMode
property DateMode: TUniDateMode;
設定日期時間的顯示內容。
| 名稱 | 圖示 |
|---|---|
| dtmDateOnly |  |
| dtmDateTime |  |
# 8.1.4. DateTime
property DateTime: TDateTime;
設定顯示的日期與時間。
# 8.1.5. FirstDayOfWeek
property FirstDayOfWeek: TCalDayOfWeek;
設定一週的第一天。預設為dowMonday。
# 8.1.6. Kind*
property Kind: TUniDateTimeKind;
設定控制元件的時間日期選擇框的型別。目前該控制元件暫時無法實現在屬性編輯器中進行Kind屬性的更改。推薦使用指令碼進行更改。
//JScript
UgDateTimePicker01.Kind = tUniDate;
UgDateTimePicker01.Kind = tUniDateTime;
UgDateTimePicker01.Kind = tUniTime;
2
3
4
//PasScript
UgDateTimePicker01.Kind := tUniDate;
UgDateTimePicker01.Kind := tUniDateTime;
UgDateTimePicker01.Kind := tUniTime;
2
3
4
// Make sure to add code blocks to your code group
| 名稱 | 說明 |
|---|---|
| tUniDate |  |
| tUniDateTime |  |
| tUniTime |  |
# 8.1.7. TimeFormat
property TimeFormat: string;
設定時間的顯示格式。
//JScript
UgDateTimePicker01.Kind = tUniTime;
UgDateTimePicker01.TimeFormat = "HH mm ss";
2
3
//PasScript
UgDateTimePicker01.Kind := tUniTime;
UgDateTimePicker01.TimeFormat := 'HH mm ss';
2
3
// Make sure to add code blocks to your code group
日期、時間選擇輸入控制元件。
# 8.2. 應用
# 8.2.1. 佈局
在主窗體上放兩個UgDateTimePicker控制元件和兩個UgEdit控制元件。
- UgDateTimePicker01
| 屬性 | 取值 | 說明 |
|---|---|---|
| DateFormat | yyyy-MM-dd | 日期格式 |
| DateMode | dtmDateTime | 日期型別 |
- UgDateTimePicker02
| 屬性 | 取值 | 說明 |
|---|---|---|
| DateFormat | yyyy-MM-dd | 日期格式 |
| DateMode | dtmDateOnly | 日期型別 |
# 8.2.2. 功能
UgDateTimePicker01用於設定日期與時間，UgDateTimePicker02用於設定日期，各個UgDateTimePicker控制元件日期發生改變時在右面對應的UgEdit控制元件里顯示日期時間。在程式初始化時兩個日期時間控制元件都設定為目前的日期或時間。
# 8.2.3. 程式碼
//JScript
//初始化
function UgWebRunFrameOnAfterRunScript(sender)
{
UgDateTimePicker01.DateTime = now();
UgDateTimePicker02.DateTime = now();
}
//日期控制元件的OnChange事件
function UgDateTimePicker01OnChange(sender)
{
UgEdit01.Text = FormatDateTime("yyyy-MM-dd hh:nn:ss",UgDateTimePicker01.DateTime);
}
function UgDateTimePicker02OnChange(sender)
{
UgEdit02.Text = FormatDateTime("yyyy-MM-dd",UgDateTimePicker02.DateTime);
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//PasScript
//初始化
procedure UgWebRunFrameOnAfterRunScript(const sender: tobject);
begin
UgDateTimePicker01.DateTime := now();
UgDateTimePicker02.DateTime := now();
end;
//日期控制元件的OnChange事件
procedure UgDateTimePicker01OnChange(sender: tobject);
begin
UgEdit01.Text := FormatDateTime('yyyy-MM-dd hh:nn:ss',UgDateTimePicker01.DateTime);
end;
procedure UgDateTimePicker02OnChange(sender: tobject);
begin
UgEdit02.Text := FormatDateTime('yyyy-MM-dd',UgDateTimePicker02.DateTime);
end;
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Make sure to add code blocks to your code group
# 9. TUgCalendar
該元件顯示為可點選選擇日期進行檢視的日曆控制元件，點選后，可在Date屬性中獲取到選擇的日期值。
# 9.1. 屬性
| 屬性 | 說明 |
|---|---|
| Date | 顯示日期 |
# 9.1.1. Date
property Date: TDateTime;
該屬性為顯示時間。
# 10. TUgCalendarDialog
該元件為日期選擇的對話方塊。在運行時呼叫Execute方法可彈出對話方塊。
# 10.1. 屬性
| 屬性 | 說明 |
|---|---|
| Date | 顯示日期 |
# 10.1.1. Date
property Date: TDateTime;
該屬性為顯示時間。可通過Exectue方法選擇來獲取時間資訊。
# 10.2. 方法
# 10.2.1. Execute
procedure Execute;
該方法呼叫時會彈出日期選擇的對話方塊，選擇日期后，點選[OK]，該日期會存放在Date屬性中。
UgCalendarDialog01.Execute;
# 11. TUgURLFrame
該元件顯示為一個網頁邊框，為其指定地址可顯示對應的網頁內容。比如指定HTML屬性，在其中輸入HTML標記文字后，可顯示預覽的效果。或者是在URL地址中指定URL地址，可直接打開指定的頁面。也可雙擊打開JQuery元件管理器。具體的使用方法可參考JQuery元件。
# 11.1. 屬性
| 屬性 | 說明 |
|---|---|
| GUID | 設定元件引用的全域性ID名稱 |
| HTML | 如果URL屬性為空，設定其中顯示的HTML內容 |
| URL | 指定控制元件顯示的網頁的地址 |
# 11.1.1. GUID
property GUID: string;
設定元件引用的全域性ID。
# 11.1.2. HTML
property HTML: TStrings;
該屬性為設定網頁中顯示的內容。如果URL屬性不為空，則會顯示URL指定的內容。
# 11.1.3. URL
property URL: string;
該屬性指定顯示網頁的地址。
# 11.2. 事件
| 名稱 | 觸發條件 |
|---|---|
| OnFrameLoaded | 當頁面載入完成時觸發該事件 |
# 11.3. 方法
# 11.3.1. Init
procedure Init(const AGUID: string);
初始化顯示設定。如指令碼中未填寫參數資訊，將使用控制元件中的預設設定進行顯示。
//JScript
//在GUID屬性中設定了內容的，直接初始化
UgURLFrame01.Init;
//選擇特定GUID的內容進行初始化
UgURLFrame01.Init("E65E69B8-D584-4199-AC82-F0A4D37902FF");
2
3
4
5
6
//PasScript
//在GUID屬性中設定了內容的，直接初始化
UgURLFrame01.Init;
//選擇特定GUID的內容進行初始化
UgURLFrame01.Init('E65E69B8-D584-4199-AC82-F0A4D37902FF');
2
3
4
5
6
// Make sure to add code blocks to your code group
# 11.3.2. JSONToData
procedure JSONToData(const Value: string);
將JSON序列化的數據傳遞至控制元件實現參數的傳遞。
//JScript
//單個參數傳遞
UgURLFrame01.JSONTOData("{\"param_value\":\"11\"}");
//多個參數的傳遞
UgURLFrame01.JSONTOData("{\"param_value1\":\"11\"},{\"param_value2\":\"22\"}");
2
3
4
5
//PasScript
//單個參數傳遞
UgURLFrame01.JSONTOData('{"param_value":"11"}');
//多個參數的傳遞
UgURLFrame01.JSONTOData('{"param_value1":"11"},{"param_value2":"22"}');
2
3
4
5
// Make sure to add code blocks to your code group
# 11.4. 應用
UgURLFrame顧名思義，是通過URL地址訪問一個WEB頁面。
# 11.4.1. 佈局
在主視窗上放置一個UgURLFrame控制元件。
- UgURLFrame01
| 屬性 | 取值 | 說明 |
|---|---|---|
| Align | alClient | 全部佔滿視窗 |
# 11.4.2. 功能
視窗一運行就打開預設的URL地址，本例直接訪問http://isoface.net (opens new window)。
# 11.4.3. 程式碼
//JScript
function UgWebRunFrameOnAfterRunScript(sender)
{
UgURLFrame01.URL = "http://isoface.net";
}
2
3
4
5
//PasScript
procedure UgWebRunFrameOnAfterRunScript(const sender: tobject);
begin
UgURLFrame01.URL := 'http://isoface.net';
end;
2
3
4
5
// Make sure to add code blocks to your code group
# 12. TUgPDFFrame
該元件顯示為一個PDF閱讀器。該閱讀器可載入伺服器上指定目錄下的檔案，也可以載入指定URL下的pdf檔案（該功能需調整檔案伺服器端的CROS以及本地的CROS以實現跨域請求）。
# 12.1. 屬性
| 屬性 | 說明 |
|---|---|
| PdfURL | 設定pdf檔案的地址，可以是伺服器的本地地址也可以是遠端地址 |
# 12.1.1. PdfURL
property PdfURL: string;
設定pdf檔案的地址。
//JScript
//在伺服器端的files資料夾下，放置一個pdf檔案，命名為sample.pdf。
UgPDFFrame01.PdfURL = UGSM.FilesFolder+"sample.pdf";
2
3
//PasScript
//在伺服器端的files資料夾下，放置一個pdf檔案，命名為sample.pdf。
UgPDFFrame01.PdfURL := UGSM.FilesFolder+'sample.pdf';
2
3
// Make sure to add code blocks to your code group
# 12.2. 事件
| 名稱 | 觸發條件 |
|---|---|
| OnFrameLoaded | 當頁面載入完成時觸發該事件 |
# 12.3. 應用
UgPDFFrame是一個能夠在瀏覽器里打開伺服器端PDF檔案的控制元件，支援列印功能，支援自動目錄。
# 12.3.1. 佈局
在主窗體上放一個UgPDFFrame控制元件。在伺服器端的files資料夾下，放置一個pdf資料夾，並命名為sample.pdf。
- UgPDFFrame01
| 屬性 | 取值 | 說明 |
|---|---|---|
| Align | alClient | 全部佔滿視窗 |
# 12.3.2. 功能
在瀏覽器中打開PDF檔案。
# 12.3.3. 程式碼
//JScript
function UgWebRunFrameOnAfterRunScript(sender)
{
UgPDFFrame01.PdfURL = UGSM.FilesFolder+"sample.pdf";
}
2
3
4
5
6
//PasScript
procedure UgWebRunFrameOnAfterRunScript(const sender: tobject);
begin
UgPDFFrame01.PdfURL := UGSM.FilesFolder+'sample.pdf';
end;
2
3
4
5
// Make sure to add code blocks to your code group
# 13. TUgHTMLFrame
該元件顯示為一個HTML頁面，該頁面僅可用於顯示格式化的輸入的HTML標記文字，不可自行指定URL。
# 13.1. 屬性
| 屬性 | 說明 |
|---|---|
| HTML | 設定顯示在界面中的內容 |
| AutoScroll | 是否顯示滾動條 |
# 13.1.1. HTML
property HTML: TStrings;
該屬性用於指定顯示的HTML內容。
# 13.1.2. AutoScroll
property AutoScroll:Boolean;
該屬性用於設定是否顯示滾動條。
| 名稱 | 圖例 |
|---|---|
| True |  |
| False |  |
# 14. TUgScreenMask
該元件為一個螢幕遮罩，在需要的時刻可作為一個保護控制元件使用，比如在載入過程中使用，提升系統的使用者體驗。
# 14.1. 屬性
| 屬性 | 說明 |
|---|---|
| AttachedControl | 設定關聯的控制元件 |
| DisplayMessage | 控制元件啟用時顯示的資訊 |
| TargetControl | 設定目標控制元件 |
# 14.1.1. AttachedControl
property AttachedControl: TComponent;
該屬性指定觸發活動使用的控制元件。
# 14.1.2. DisplayMessage
property DisplayMessage: string;
該屬性指定觸發活動時顯示的文字資訊。
# 14.1.3. TargetControl
property TargetControl: TControl;
該屬性設定使用該遮罩效果的控制元件。
遮罩效果的控制元件設定請在屬性編輯器中進行，指令碼中的編輯無效。
# 15. TUgFileUpload
該元件為用於向伺服器上傳檔案的對話方塊。點選Browse...可打開檔案選擇的對話方塊，在其中選擇完成檔案后，在編輯框中會顯示選擇的檔名稱，點選Upload可將檔案上傳至指定的目錄中。
# 15.1. 屬性
| 屬性 | 說明 |
|---|---|
| ButtonOnly | 對話方塊是否僅顯示按鈕 |
| ButtonWidth | 設定Browse按鈕的寬度 |
| EraseCacheAfterCompleted | 是否在完成後清除快取 |
| Filter | 設定檔案的分類 |
| MaxAllowedSize | 設定上傳檔案的大小限制 |
| Messages | 設定上傳對話方塊中顯示的資訊的內容 |
| MultipleFiles | 是否允許上傳多個檔案 |
| OptimizeMemoryUsage | 是否進行記憶體優化的管理 |
| OverWrite | 是否允許覆蓋檔案 |
| Title | 對話方塊的標題 |
# 15.1.1. ButtonOnly
property ButtonOnly: Boolean;
該屬性用於控制是否顯示內容框。
| 名稱 | 圖例 |
|---|---|
| True |  |
| False | |
# 15.1.2. ButtonWidth
property ButtonWidth: Integer;
設定按鈕的顯示寬度。
# 15.1.3. EraseCacheAfterCompleted
property EraseCacheAfterCompleted: Boolean;
該屬性設定是否在完成後清除快取。
# 15.1.4. Filter
property Filter: string;
該屬性用於指定在瀏覽對話方塊中顯示特定型別的檔案。
//JScript
UgFileUpload01.Filter = "*.jpg";
UgFileUpload01.Execute;
2
3
//PasScript
UgFileUpload01.Filter := '*.jpg';
UgFileUpload01.Execute;
2
3
// Make sure to add code blocks to your code group
# 15.1.5. MaxAllowedSize
property MaxAllowedSize: Cardinal;
該屬性為允許上傳的檔案的最大大小。單位為位元組，為0時表示不限制。
# 15.1.6. Messages
property Messages: TUniCustomUploadMessages;
該屬性設定顯示的提示資訊內容。
| 名稱 | 說明 |
|---|---|
| BrowseText | 瀏覽按鈕顯示的內容 |
| Cancel | 取消按鈕顯示的內容 |
| MaxFilesError | 上傳檔案的數量超過限制后顯示的提示資訊 |
| MaxSizeError | 上傳檔案的大小超過限制后顯示的提示資訊 |
| NoFileError | 未選擇上傳的檔案時的提示資訊 |
| PleaseWait | 等待時顯示的提示資訊 |
| Processing | 正在處理過程中顯示的提示資訊 |
| Upload | 上傳按鈕顯示的內容 |
| UploadError | 檔案上傳錯誤 |
| Uploading | 檔案正在上傳的提示資訊 |
| UploadTimeOut | 檔案上傳超時的提示資訊 |
# 15.1.7. MultipleFiles
property MultipleFiles: Boolean;
該屬性設定控制元件是否允許多個檔案上傳。
# 15.1.8. OptimizeMemoryUsage
property OptimizeMemoryUsage: Boolean;
該屬性設定控制元件是否進行記憶體優化。
# 15.1.9. OverWrite
property Overwrite: Boolean;
該屬性設定控制元件是否允許對之前的檔案進行覆蓋操作。
# 15.1.10. Title
property Title: string;
該屬性設定對話方塊的標題名稱。
# 15.2. 事件
| 名稱 | 觸發條件 |
|---|---|
| OnCompleted | 當控制元件完成上傳時觸發該事件 |
| OnMultiCompleted | 當控制元件完成多個檔案上傳時觸發該事件 |
# 15.3. 方法
# 15.3.1. Execute
function Execute: Boolean; override;
該方法用於執行打開檔案上傳的對話方塊。
//JScript
UgFileUpload01.Execute;
2
//PasScript
UgFileUpload01.Execute;
2
// Make sure to add code blocks to your code group
# 15.3.2. ExecuteN
procedure ExecuteN; override;
該方法用於執行打開檔案上傳的對話方塊。
UgFileUpload01.ExecuteN;
# 15.4. 應用
UgFileUpload是一個檔案上傳控制元件，其機制是先將檔案上傳到伺服器，再做檔案大小判斷。
# 15.4.1. 佈局
在主窗體上放置UgFileUpload和一個UgBitBtn，一個UgImage。
- UgFileUpload01
| 屬性 | 取值 | 說明 |
|---|---|---|
| MaxAllowedSize | 52428800 | 50M大小的限制，單位為位元組 |
| Message | 對話方塊資訊 | 下方包含的文字內容 |
| BrowseText | 打開 | 選擇檔案按鈕 |
| Cancel | 取消 | |
| NoFileError | 請選擇一個檔案 | |
| PleaseWait | 請等待 | |
| Processing | 正在處理 | |
| Upload | 上傳 | |
| UploadError | 上傳錯誤 | |
| Uploading | 正在上傳 | |
| Overwrite | True | 檔案存在就覆蓋 |
| targetFolder | /abc | 儲存到運行主目錄下的abc子目錄下 |
| width | 500 | 上傳對話方塊寬度 |
# 15.4.2. 功能
點選按鈕1，彈出檔案上傳對話方塊，點選[打開]選擇要上傳的檔案，點選[上傳]，上傳選擇的檔案。上傳完成後將觸發其OnCompleted事件。
# 15.4.3. 程式碼
//JScript
function UgBitBtn01OnClick(sender)
//呼叫上傳元件
{
UgFileUpload01.Execute;
}
function UgFileUpload01OnCompleted(sender,astream)
{
UgImage01.LoadFromStream(astream);
}
2
3
4
5
6
7
8
9
10
11
//PasScript
procedure UgBitBtn01OnClick(sender: tobject);
//呼叫上傳元件
begin
UgFileUpload01.Execute;
end;
procedure UgFileUpload01OnCompleted(sender: tobject;astream: tfilestream);
begin
UgImage01.LoadFromStream(astream);
end;
2
3
4
5
6
7
8
9
10
11
// Make sure to add code blocks to your code group
# 16. TUgFileUploadButton
該元件顯示為一個按鈕，點選該按鈕時打開檔案瀏覽的對話方塊。
# 16.1. 屬性
| 屬性 | 說明 |
|---|---|
| EraseCacheAfterCompleted | 是否在完成後清除快取 |
| Filter | 設定檔案的分類 |
| MaxAllowedSize | 設定上傳檔案的大小限制 |
| Messages | 設定上傳對話方塊中顯示的資訊的內容 |
| MultipleFiles | 是否允許上傳多個檔案 |
| OptimizeMemoryUsage | 是否進行記憶體優化的管理 |
| OverWrite | 是否允許覆蓋檔案 |
# 16.1.1. EraseCacheAfterCompleted
property EraseCacheAfterCompleted: Boolean;
該屬性設定是否在完成後清除快取。
# 16.1.2. Filter
property Filter: string;
該屬性用於指定在瀏覽對話方塊中顯示特定型別的檔案。
//JScript
UgFileUpload01.Filter = "*.jpg";
UgFileUpload01.Execute;
2
3
//PasScript
UgFileUpload01.Filter := '*.jpg';
UgFileUpload01.Execute;
2
3
// Make sure to add code blocks to your code group
# 16.1.3. MaxAllowedSize
property MaxAllowedSize: Cardinal;
該屬性為允許上傳的檔案的最大大小。單位為位元組，為0時表示不限制。
# 16.1.4. Messages
property Messages: TUniCustomUploadMessages;
該屬性設定顯示的提示資訊內容。
| 名稱 | 說明 |
|---|---|
| MaxFilesError | 上傳檔案的數量超過限制后顯示的提示資訊 |
| MaxSizeError | 上傳檔案的大小超過限制后顯示的提示資訊 |
| PleaseWait | 等待時顯示的提示資訊 |
| UploadError | 檔案上傳錯誤 |
| Uploading | 檔案正在上傳的提示資訊 |
| UploadTimeOut | 檔案上傳超時的提示資訊 |
# 16.1.5. MultipleFiles
property MultipleFiles: Boolean;
該屬性設定控制元件是否允許多個檔案上傳。
# 16.1.6. OptimizeMemoryUsage
property OptimizeMemoryUsage: Boolean;
該屬性設定控制元件是否進行記憶體優化。
# 16.1.7. OverWrite
property Overwrite: Boolean;
該屬性設定控制元件是否允許對之前的檔案進行覆蓋操作。
# 17. TUgHTMLMemo
該元件顯示為HTML格式的備忘錄元件。可在其中進行填寫，實現自定義格式的編輯。其中輸入的內容會儲存在Lines中，且以HTML文字的方式存在。
# 17.1. 屬性
| 屬性 | 說明 |
|---|---|
| CheckChangeDelay | 檢測內容變更的時間間隔 |
| Lines | 顯示的內容，支援HTML語法標記 |
| ReadOnly | 是否設定為只讀 |
# 17.1.1. CheckChangeDelay
property CheckChangeDelay: Integer;
檢測內容變更的時間間隔，單位為毫秒(ms)。
# 17.1.2. Lines
property Lines: TStrings;
控制元件中顯示的內容，支援HTML的語法標記。
//JScript
UgHTMLMemo01.Lines.Text = "<font color=\"#800000\" style=\"background-color: rgb(255, 255, 0);\">FastWeb</font>";
2
//PasScript
UgHTMLMemo01.Lines.Text := '<font color="#800000" style="background-color: rgb(255, 255, 0);">FastWeb</font>';
2
// Make sure to add code blocks to your code group
# 17.1.3. ReadOnly
property ReadOnly: Boolean;
該屬性設定控制元件是否為只讀模式。
# 18. TUgPopUpMenu
該控制元件為UgMenuButton設定功能表中的專案。選擇該控制元件中的Items專案，點選左上方的新增按鈕可新增功能表專案。
# 18.1. 屬性
| 屬性 | 說明 |
|---|---|
| Items | 設定功能表中的專案 |
| PopupComponent | 設定功能表專案對應顯示的按鈕 |
# 18.1.1. Items
property Items: TUgPopupMenuItems;
設定功能表中的專案。選擇該控制元件中的Items專案，點選左上方的新增按鈕可新增或者刪除功能表專案。新增或刪除的專案為TUgPopupMenuItem
# 18.1.2. PopupComponent
property PopupComponent: TComponent;
設定功能表專案對應顯示的元件，此處指定為TUgMenuButton類的元件，比如UgMenuButton01。
# 18.2. 事件
| 名稱 | 觸發條件 |
|---|---|
| UgMenuItemsOnClick | 當點選功能表項時觸發該事件 |
| UgMenuItemsOnCheck | 當點功能表項終端選項確認時觸發該事件 |
# 19. TUgPopupMenuItem
該元件由TUgPopUpMenu中的Item屬性產生。
# 19.1. 屬性
| 屬性 | 說明 |
|---|---|
| Caption | 設定功能表項的文字內容 |
| Checked | 是否確認，該項需啟用RadioItem后可用 |
| GroupIndex | 設定分組ID，同一組內僅有一個Checked屬性為True |
| RadioItem | 分組單選框 |
# 19.1.1. Caption
property Caption: string;
設定功能表項顯示的文字內容。
# 19.1.2. Checked
property Checked: Boolean;
是否確認該選項。該選項在RadioItem=True時可用。
# 19.1.3. GroupIndex
property GroupIndex: Byte;
設定分組ID，同一ID下的功能表只能選擇一項。
# 19.1.4. RadioItem
property RadioItem: Boolean;
該屬性用於指定是否進行分組。
# 20. TUgMenuButton
該元件用於顯示TUgPopupMenu中的設定的功能表專案，點選下拉箭頭即可顯示所有設定的專案。
# 20.1. 屬性
| 屬性 | 說明 |
|---|---|
| ArrowButton | 是否將箭頭顯示在按鈕下方 |
| Caption | 顯示按鈕文字內容 |
# 20.2. 事件
| 名稱 | 觸發條件 |
|---|---|
| ArrowClick | 點選按鈕的箭頭時觸發該事件 |
# 21. TUgColorPalette
該元件顯示為一個顏色選擇盤。其中包含了常見的顏色，點選以選擇對應的顏色並將顏色的編碼資訊進行傳遞。
# 21.1. 屬性
| 屬性 | 說明 |
|---|---|
| Color | 設定控制元件目前選擇的顏色 |
| Palette | 設定一組十六進制編碼的顏色列表 |
# 21.1.1. Color
property Color: TColor;
該屬性用於設定目前選擇的顏色系列。
# 21.1.2. Palette
property Palette: TStrings;
該屬性用於指定十六進制編碼的顏色列表，其形式如下所示：
558845
AA7700
FF0000
110011
000000
ABCDEF
071291
123223
123111
998811
2
3
4
5
6
7
8
9
10
# 22. TUgColorButton
該元件顯示為一個選擇顏色的按鈕，點選按鈕可展開顏色選擇的界面。選擇的顏色資訊會儲存在Color中。
# 22.1. 屬性
| 屬性 | 說明 |
|---|---|
| Caption | 按鈕字幕顯示的內容 |
| Color | 設定按鈕對應顯示選擇的顏色 |
| Palette | 設定一組十六進制編碼的顏色列表 |
# 22.1.1. Caption
property Caption: TCaption;
設定按鈕顯示的內容。
# 22.1.2. Color
property Color: TColor;
該屬性用於設定目前選擇的顏色系列。
# 22.1.3. Palette
property Palette: TStrings;
該屬性用於指定十六進制編碼的顏色列表，其形式如下所示：
558845
AA7700
FF0000
110011
000000
ABCDEF
071291
123223
123111
998811
2
3
4
5
6
7
8
9
10
# 23. TUgPropertyGrid
該元件顯示為一個屬性列表，將表格元件的AttachedComponent設定為需要顯示的元件名稱。可在其中顯示指定元件的屬性內容。
# 23.1. 屬性
# 23.1.1. AttatchedComponent
property AttachedComponent: TComponent;
該屬性設定用於顯示屬性列表的元件。例如上圖中顯示的是UgBitBtn的屬性列表。
//JScript
UgPropertyGrid01.AttachedComponent = UgBitBtn01;
2
//PasScript
UgPropertyGrid01.AttachedComponent := UgBitBtn01;
2
// Make sure to add code blocks to your code group
# 24. TUgGenericControl
該元件無特殊用途，可將其作為一個控制元件組容器來進行使用。可在其中放置其他的元件，此時此元件為父元件。
# 25. TUgSweetAlert
該元件為JavaScript顯示的提示框資訊元件，在設定好需要顯示的相關資訊后，執行控制元件方法顯示彈窗提示。
# 25.1. 屬性
| 屬性 | 說明 |
|---|---|
| AlertType | 設定對話方塊的型別 |
| AllowEscapeKey | 是否允許響應ESC |
| AllowOutesideClick | 是否允許響應對話方塊外側的點選操作 |
| Animation | 是否開啟動畫效果 |
| CancelButtonColor | 取消按鈕顯示的顏色 |
| CancelButtonText | 取消按鈕顯示的文字 |
| ConfirmButtonColor | 確認按鈕的顏色 |
| ConfirmButtonText | 確認按鈕的顏色 |
| FocusCancel | 是否預設自動選擇在取消按鈕上 |
| InputPlaceholder | 輸入框中無內容時顯示的內容 |
| InputValue | 對話方塊中的輸入內容顯示在該界面中 |
| InputType | 輸入框的型別 |
| ReverseButtons | 是否反轉按鈕 |
| ShowCancelButton | 顯示取消按鈕 |
| ShowCloseButton | 顯示關閉按鈕 |
| ShowConfirmButton | 顯示確認按鈕 |
| ShowLoaderButtonOnConfirm | 是否載入確認 |
| Text | 對話方塊顯示的文字 |
| TitleText | 對話方塊的標題 |
# 25.1.1. AlterType
property AlertType: TAlertType;
該屬性指定對話方塊的型別。
| 名稱 | 說明 | 圖例 |
|---|---|---|
| atInfo | 提示對話方塊 |  |
| atError | 錯誤對話方塊 |  |
| atQuestion | 疑問對話方塊 |  |
| atSuccess | 成功對話方塊 |  |
| atWarning | 警告對話方塊 |  |
# 25.1.2. AllowEscapeKey
property AllowEscapeKey: Boolean;
是否響應ESC按鍵。如果該項設定為True，則對話方塊也可以響應ESC。
# 25.1.3. AllowOutsideClick
property AllowOutsideClick: Boolean;
是否允許不在對話方塊按鈕進行點選操作以關閉對話方塊。
# 25.1.4. Animation
property Animation: Boolean;
是否開啟對話方塊顯示時的動畫效果。
# 25.1.5. CancelButtonColor
property CancelButtonColor: TColor;
設定取消按鈕的顏色。設定該屬性需將ShowCancelButton設定為True。
# 25.1.6. CancelButtonText
property CancelButtonText: string;
設定取消按鈕顯示的文字內容。
# 25.1.7. ConfirmButtonColor
property ConfirmButtonColor: TColor;
設定確認按鈕的顏色。設定該屬性需將ShowConfirmButton設定為True。
# 25.1.8. ConfirmButtonText
property ConfirmButtonText: string;
設定確認按鈕的文字。
# 25.1.9. FocusCancel
property FocusCancel: Boolean;
設定為True，則對話方塊打開時，取消按鈕預設選中。
# 25.1.10. InputPlaceholder
property InputPlaceholder: string;
該屬性指定輸入框為空時顯示的內容。
# 25.1.11. InputType
property InputType: TInputType;
設定對話方塊中的輸入型別。下面的設定中，包含了InputPlaceholder的內容指定。
| 名稱 | 說明 | 圖例 |
|---|---|---|
| ItNone | 無輸入框 |  |
| ItCheckBox | 覈取方塊 |  |
| ItEmail | 郵箱地址輸入框 |  |
| ItFile | 檔案選擇對話方塊 |  |
| ItNumber | 數字輸入對話方塊 |  |
| ItPassWord | 密碼輸入對話方塊 |  |
| ItRange | 範圍選擇對話方塊 |  |
| ItSelect | 選擇對話方塊 |  |
| ItTel | 電話輸入對話方塊 |  |
| ItText | 文字輸入框 | 影象同上 |
| ItTextArea | 文字區域輸入框 |  |
# 25.1.12. ReverseButtons
property ReverseButtons: Boolean;
是否對確認與取消按鈕進行反轉。使用該屬性需要將確認按鈕與取消按鈕顯示出來。即ShowCancelButton為True，ShowConfirmButton為True。
| 取值 | 圖例 |
|---|---|
| True |  |
| False | |
# 25.1.13. ShowCancelButton
property ShowCancelButton: Boolean;
該屬性用於指定對話方塊中是否顯示取消按鈕。
# 25.1.14. ShowCloseButton
property ShowCloseButton: Boolean;
該屬性用於指定對話方塊中是否顯示關閉按鈕。
# 25.1.15. ShowConfirmButton
property ShowConfirmButton: Boolean;
該屬性用於指定對話方塊中是否顯示確認按鈕。
# 25.1.16. ShowLoaderButtonOnConfirm
property ShowLoaderOnConfirm: Boolean;
該屬性用於指定在點選確認按鈕時按鈕是否顯示為載入狀態。
# 25.1.17. Text
property Text: string;
對話方塊中的文字區域的內容。
//JScript
UgSweetAlert01.Text = "Hello";
2
//PasScript
UgSweetAlert01.Text := 'Hello';
2
// Make sure to add code blocks to your code group
# 25.1.18. TitleText
property TitleText: string;
該屬性用於指定對話方塊的標題。
//JScript
UgSweetAlert01.TitleText = "Hello";
2
//PasScript
UgSweetAlert01.TitleText := 'Hello';
2
// Make sure to add code blocks to your code group
# 25.2. 事件
| 名稱 | 觸發條件 |
|---|---|
| OnConfrim | 當按下確認按鈕后觸發該事件 |
| OnDismiss | 當按下取消按鈕后觸發該事件 |
# 25.3. 方法
# 25.3.1. Show
procedure Show;
該方法為執行操作。執行后將會打開對話方塊。
UgSweetAlert01.Show;
# 26. TUgCanvas
該元件提供畫布背景的相關功能。可將其作為窗體的背景來使用。
# 26.1. 屬性
| 屬性 | 說明 |
|---|---|
| Brush | 設定畫刷的相關屬性 |
| PaintMode | 設定繪畫的相關型別 |
| Pen | 設定畫刷的相關屬性 |
# 26.1.1. Brush
property Brush: TUniBrush;
設定筆刷的相關屬性。
- Color：設定筆刷的顏色。
- Opacity：設定筆刷的透明度。
# 26.1.2. PaintMode
property PaintMode: TUniPaintMode;
設定繪畫的模式，有以下選項。
pmCircle：圓形。pmFill：填充色。pmFreeHand：自由繪畫。pmLine：線形。pmRectangle：矩形。
# 26.1.3. Pen
property Pen: TUniPen;
畫筆的相關設定。
- Color：畫筆的顏色。
- Opacity：畫筆的透明度。
- Width：設定畫筆的寬度。
# 26.2. 事件
| 名稱 | 觸發條件 |
|---|---|
| AfterSubmit | 在提交后觸發事件 |
| OnCanvasReady | 當畫布準備完畢時觸發事件 |
| OnLoadImage | 當畫布載入圖片時觸發事件 |
# 26.3. 方法
# 26.3.1. SetBounds
procedure SetBounds(ALeft: Integer; ATop: Integer; AWidth: Integer; AHeight: Integer);
此方法用於一次性設定 Left、Top、Width 和 Height 屬性。
# 26.3.2. MoveTo
procedure MoveTo(X: Integer; Y: Integer);
將目前繪圖位置更改為點 (X,Y)。
在呼叫 LineTo 之前使用MoveTo設定 PenPos 的值。呼叫MoveTo相當於設定 PenPos 屬性。
# 26.3.3. LineTo
procedure LineTo(X: Integer; Y: Integer);
在畫布上從 PenPos 到 X 和 Y 指定的點繪製一條線，並將筆位置設定為 (X, Y)。
使用LineTo從 PenPos 繪製一條直線，但不包括點 (X,Y)。LineTo將 PenPos 的值更改為 (X,Y)。
線條是使用 Pen 繪製的。
注意： 如果目前 Pen 沒有 psSolid 樣式，則使用目前畫筆指定的背景繪製線條。
# 26.3.4. LoadFromFile
procedure LoadFromFile(const FileName: string);
從指定檔案中載入畫布資訊。
# 26.3.5. LoadFromStream
procedure LoadFromStream(const Stream: TStream);
從指定的流中載入畫布資訊。
# 26.3.6. Clear
procedure Clear;
清除畫布中的內容。
# 26.3.7. FloodFill
procedure FloodFill(X: Integer; Y: Integer);
使用目前畫筆填充畫布區域。使用FloodFill以Brush的值填充影象的可能非矩形區域。要填充的區域的邊界是通過從點 (X,Y) 向外移動直到遇到涉及顏色參數的顏色邊界來確定的。X 和 X 是畫布上開始填充的座標。顏色是定義要填充區域邊界的顏色。它的解釋取決於 FillStyle 的值。FillStyle 指定區域是由具有與 Color 相同值的所有畫素定義，還是由具有不同值的所有點定義。
提示： 使用畫素屬性使用fsSurface的的FillStyle時在點（X，Y），使色彩的精確值。同樣，當 FillStyle 為 fsBorder 時，如果邊界上的點已知，則使用Pixels獲取邊界顏色的確切值。
# 26.3.8. Circle
procedure Circle(X: Integer; Y: Integer; Radius: Integer);
設定畫布中顯示圓形。
# 26.3.9. Rectangle
procedure Rectangle(X1: Integer; Y1: Integer; X2: Integer; Y2: Integer);
設定畫布中顯示矩形。
# 27. TUgCalendaPanel
元件顯示為一個日曆選擇器，可根據需要自行切換顯示的模式，可在其中顯示日程安排等相關資訊。
# 27.1. 屬性
| 屬性 | 說明 |
|---|---|
| AlwaysFireDateChange | 設定 |
| Calendars | 設定日曆列表 |
| DayText | 設定顯示于日期按鈕中的文字資訊 |
| DayTimeFormat | 設定日期時間的顯示格式 |
| DayTimeRange | 設定日期時間的顯示範圍 |
| FirstDayOfWeek | 設定一週的開始的星期數 |
| MonthText | 設定顯示于月份按鈕中的文字資訊 |
| RefreshViewAfterMove | 設定是否在移動后重新整理檢視 |
| RefreshViewAfterResize | 設定是否在改變大小后重新整理檢視 |
| ShowDayView | 設定是否顯示日期的檢視 |
| ShowMonthView | 設定是否顯示月份的檢視 |
| ShowNavBar | 設定是否顯示導航欄 |
| ShowTime | 設定是否顯示時間 |
| ShowTodayText | 設定是否顯示今日的文字 |
| ShowWeekView | 設定是否顯示周檢視 |
| StartDate | 設定顯示開始的日期 |
| Title | 設定顯示日曆的標題 |
| TitleAlign | 設定顯示日曆標題的對齊方式 |
| TodayText | 設定顯示今天按鈕的文字資訊 |
| WeekText | 設定顯示周的文字資訊 |
| WeekTimeFormat | 設定顯示周的日期格式 |
| WeekTimeRange | 設定顯示的日期範圍 |
# 27.1.1. AlwaysFireDateChange
property AlwaysFireDateChange: Boolean;
設定是否高亮顯示變化的日期。
# 27.1.2. Calendars
property Calendars: TUniCalendarList;
設定日曆的列表。可使用此屬性設定多個日曆列表資訊。
# 27.1.3. DayText
property DayText: String;
設定頂部欄Day按鈕顯示的名稱。
# 27.1.4. DayTimeFormat
property DayTimeFormat: string;
設定日期時間的顯示格式。
# 27.1.5. DayTimeRange
property DayTimeRange: TUniCalendarTimeRange;
設定日期時間設定顯示的起始結束時間範圍。
- TimeEnd：結束時間的數值。
- TimeStart：起始時間的數值。
# 27.1.6. FirstDayOfWeek
property FirstDayOfWeek: TCalDayOfWeek;
設定一週的開始的星期數。
dowFriday：以星期五為開始。dowLocaleDefault：以設定的地區預設為準。dowMonday：以星期一為開始。dowSaturday：以星期六為開始。dowSunday：以星期日為開始。dowThursday：以星期四為開始。dowTuesday：以星期二為開始。dowWednesday：以星期三為開始。
# 27.1.7. MonthText
property MonthText: String;
設定顯示于月份按鈕中的文字資訊。
# 27.1.8. RefreshViewAfterMove
property RefreshViewAfterMove: Boolean;
設定是否在移動后重新整理檢視。
# 27.1.9. RefreshViewAfterResize
property RefreshViewAfterResize: Boolean;
設定是否在改變大小后重新整理檢視。
# 27.1.10. ShowDayView
property ShowDayView: Boolean;
設定是否顯示日期的檢視。
# 27.1.11. ShowMonthView
property ShowMonthView: Boolean;
設定是否顯示月份的檢視。
# 27.1.12. ShowNavBar
property ShowNavBar: Boolean;
設定是否顯示導航欄。
# 27.1.13. ShowTime
property ShowTime: Boolean;
設定是否顯示時間。
# 27.1.14. ShowTodayText
property ShowTodayText: Boolean;
設定是否顯示今日按鈕的文字。
# 27.1.15. ShowWeekView
property ShowWeekView: Boolean;
設定是否顯示周檢視。
# 27.1.16. StartDate
property StartDate: TDateTime;
設定顯示開始的日期。
# 27.1.17. Title
property Title: string;
設定日曆抬頭顯示的標題。
# 27.1.18. TitleAlign
property TitleAlign: TAlignment;
設定顯示日曆標題的對齊方式。
# 27.1.19. TodayText
property TodayText: String;
設定顯示今天按鈕的文字資訊。
# 27.1.20. WeekText
property WeekText: String;
設定顯示周的文字資訊。
# 27.1.21. WeekTimeFormat
property WeekTimeFormat: string;
設定顯示周的日期格式。
# 27.1.22. WeekTimeRange
property WeekTimeRange: TUniCalendarTimeRange;
設定顯示的日期範圍。
# 27.2. 事件
| 事件 | 觸發條件 |
|---|---|
| OnChangeValue | 當控制元件中的欄位的值發生變化時觸發事件 |
| OnDateChange | 當控制元件中的日期發生變化時觸發事件 |
| OnDayClick | 當控制元件中的日期點選時觸發事件 |
| OnEventClick | 當控制元件中的事件點選時觸發事件 |
| OnEventMove | 當控制元件中的事件移動時觸發事件 |
| OnEventResize | 當控制元件中的事件重新設定大小時觸發事件 |
| OnRangeSelect | 當控制元件中的範圍選擇時觸發事件 |
| OnToolClick | 當控制元件中的工具欄點選時觸發事件 |
| OnViewChange | 當控制元件的檢視發生變化時觸發事件 |
# 28. TUgHTMLEditor
該元件顯示為HTML格式的文字編輯器，可對HTML文字進行編輯。
# 28.1. 事件
| 屬性 | 說明 |
|---|---|
| OnGetHTML | 當設定獲取HTML文字時觸發事件 |
| OnUpdateHtml | 當編輯框中的文字資訊在更新時觸發事件 |
# 28.2. 方法
# 28.2.1. setEditorhtml
procedure setEditorhtml(htmltxt: string);
此方法用於設定將文字內容設定進入至編輯器中，在編輯器中可以顯示相關的內容。
# 28.2.2. getEditorhtml
function getEditorhtml: string;
此方法用於設定將編輯器中的文字內容讀取出來。
# 29. TUgLookupEdit
此元件可作為查詢編輯框使用，點選右側的搜索按鈕可打開查詢界面去選擇查詢的數據來源。關於此元件的基礎屬性用法可參考 TUgEdit 。
# 29.1. 屬性
# 29.1.1. LookupCaption
property LookupCaption: string;
設定查詢界面的標題名稱。
# 29.1.2. LookUpData
property LookupData: TUgClientDataSet;
設定查詢來源的數據集元件。
# 29.1.3. LookupFields
property LookupFields: TUgLookupFields;
設定查詢界面中要顯示的欄位。在窗體結構與檢視器中選擇對應的控制元件的 LookupFields，然後點選左上角的新增按鈕可新增查詢欄位。查詢欄位有以下屬性可設定。
| 名稱 | 說明 |
|---|---|
| Caption | 設定欄位顯示的標題名稱 |
| FieldName | 設定繫結的欄位的名稱 |
| Width | 欄位顯示區域的寬度 |
# 29.1.4. LookupValueField
property LookupValueField: string;
設定查詢返回的結果欄位，此結果欄位應在 LookupFields 的範圍中。
# 29.2. 事件
# 29.2.1. OnSelectRowEvent
//JScript
function UgLookupEdit01OnSelectRowEvent(sender,selectrow)
2
//PasScript
procedure UgLookupEdit01OnSelectRowEvent(sender: tobject;selectrow: tdataset);
2
// Make sure to add code blocks to your code group
當在匯入視窗中雙擊選擇要匯入的專案后觸發事件，可回傳選擇記錄的數據集。可用於更新多個記錄。
//JScript
function UgLookupEdit01OnSelectRowEvent(sender,selectrow)
{
ShowMessage(selectrow.FieldByName("FInterID").asstring);
}
2
3
4
5
//PasScript
procedure UgLookupEdit01OnSelectRowEvent(sender: tobject;selectrow: tdataset);
begin
ShowMessage(selectrow.FieldByName('FInterID').asstring);
end；
2
3
4
5
// Make sure to add code blocks to your code group
# 29.3. 方法
# 29.3.1. Show
procedure Show;
顯示匯入表。
//JScript
UgLookupEdit01.LookupCaption = "匯入客戶";
UgLookupEdit01.LookupData = cdsProject;
UgLookupEdit01.LookupValueField = "FCustName";
UgLookupEdit01.LookupGridWidth = 400;
UgLookupEdit01.LookupGridHeight = 400;
UgLookupEdit01.Show;
2
3
4
5
6
7
//PasScript
UgLookupEdit01.LookupCaption := '匯入客戶';
UgLookupEdit01.LookupData := cdsProject;
UgLookupEdit01.LookupValueField := 'FCustName';
UgLookupEdit01.LookupGridWidth := 400;
UgLookupEdit01.LookupGridHeight := 400;
UgLookupEdit01.Show;
2
3
4
5
6
7
// Make sure to add code blocks to your code group
# 30. TUgLookupEditExtra
此元件可作為查詢編輯框使用，點選左側的搜索按鈕可打開查詢界面去選擇查詢的數據來源。關於此元件的基礎屬性用法可參考 TUgEdit 。
# 30.1. 屬性
# 30.1.1. LookupCaption
property LookupCaption: string;
設定查詢界面的標題名稱。
# 30.1.2. LookUpData
property LookupData: TUgDataSet;
設定查詢來源的數據集元件。
# 30.1.3. LookupFields
property LookupFields: TUgLookupFields;
設定查詢界面中要顯示的欄位。在窗體結構與檢視器中選擇對應的控制元件的 LookupFields，然後點選左上角的新增按鈕可新增查詢欄位。查詢欄位有以下屬性可設定。
| 名稱 | 說明 |
|---|---|
| Caption | 設定欄位顯示的標題名稱 |
| FieldName | 設定繫結的欄位的名稱 |
| Width | 欄位顯示區域的寬度 |
# 30.1.4. LookupValueField
property LookupValueField: string;
設定查詢返回的結果欄位，此結果欄位應在 LookupFields 的範圍中。
# 30.2. 事件
# 30.2.1. OnSelectRowEvent
//JScript
function UgLookupEditExtra01OnSelectRowEvent(sender,selectrow)
2
//PasScript
procedure UgLookupEditExtra01OnSelectRowEvent(sender: tobject;selectrow: tdataset);
2
// Make sure to add code blocks to your code group
當在匯入視窗中雙擊選擇要匯入的專案后觸發事件，可回傳選擇記錄的數據集。可用於更新多個記錄。
//JScript
function UgLookupEditExtra01OnSelectRowEvent(sender,selectrow)
{
ShowMessage(selectrow.FieldByName("FInterID").asstring);
}
2
3
4
5
//PasScript
procedure UgLookupEditExtra01OnSelectRowEvent(sender: tobject;selectrow: tdataset);
begin
ShowMessage(selectrow.FieldByName('FInterID').asstring);
end；
2
3
4
5
// Make sure to add code blocks to your code group
# 30.3. 方法
# 30.3.1. Show
procedure Show;
顯示匯入表。
//JScript
UgLookupEditExtra01.LookupCaption = "匯入客戶";
UgLookupEditExtra01.LookupData = cdsProject;
UgLookupEditExtra01.LookupValueField = "FCustName";
UgLookupEditExtra01.LookupGridWidth = 400;
UgLookupEditExtra01.LookupGridHeight = 400;
UgLookupEditExtra01.Show;
2
3
4
5
6
7
//PasScript
UgLookupEditExtra01.LookupCaption := '匯入客戶';
UgLookupEditExtra01.LookupData := cdsProject;
UgLookupEditExtra01.LookupValueField := 'FCustName';
UgLookupEditExtra01.LookupGridWidth := 400;
UgLookupEditExtra01.LookupGridHeight := 400;
UgLookupEditExtra01.Show;
2
3
4
5
6
7
// Make sure to add code blocks to your code group
# 31. TUgLookupForm
此控制元件用於打開一個列表視窗，通過雙擊選擇項將選擇項的數據回傳至事件中，可作為匯入表格來使用。
# 31.1. 屬性
# 31.1.1. LookupCaption
property LookupCaption: string;
設定查詢界面的標題名稱。
# 31.1.2. LookUpData
property LookupData: TUgDataSet;
設定查詢來源的數據集元件。
# 31.1.3. LookupFields
property LookupFields: TUgLookupFields;
設定查詢界面中要顯示的欄位。在窗體結構與檢視器中選擇對應的控制元件的 LookupFields，然後點選左上角的新增按鈕可新增查詢欄位。查詢欄位有以下屬性可設定。
| 名稱 | 說明 |
|---|---|
| Caption | 設定欄位顯示的標題名稱 |
| FieldName | 設定繫結的欄位的名稱 |
| Width | 欄位顯示區域的寬度 |
# 31.1.4. LookupValueField
property LookupValueField: string;
設定查詢返回的結果欄位，此結果欄位應在 LookupFields 的範圍中。
# 31.1.5. LookupGridWidth
property LookupGridWidth: Integer;
設定匯入表格顯示的畫素寬度。
# 31.1.6. LookupGridHeight
property LookupGridHeight: Integer;
設定匯入表格顯示的畫素高度。
# 31.1.7. SelectText
property SelectText: string;
在匯入視窗選擇完成後，在此屬性中儲存選擇的返回欄位的值。
# 31.2. 事件
# 31.2.1. OnSelectRowEvent
//JScript
function UgLookupForm01OnSelectRowEvent(sender,selectrow)
2
//PasScript
procedure UgLookupForm01OnSelectRowEvent(sender: tobject;selectrow: tdataset);
2
// Make sure to add code blocks to your code group
當在匯入視窗中雙擊選擇要匯入的專案后觸發事件，可回傳選擇記錄的數據集。可用於更新多個記錄。
//JScript
function UgLookupForm01OnSelectRowEvent(sender,selectrow)
{
ShowMessage(selectrow.FieldByName("FInterID").asstring);
}
2
3
4
5
//PasScript
procedure UgLookupForm01OnSelectRowEvent(sender: tobject;selectrow: tdataset);
begin
ShowMessage(selectrow.FieldByName('FInterID').asstring);
end；
2
3
4
5
// Make sure to add code blocks to your code group
# 31.3. 方法
# 31.3.1. Show
procedure Show;
顯示匯入表。
//JScript
UgLookupForm01.LookupCaption = "匯入客戶";
UgLookupForm01.LookupData = cdsProject;
UgLookupForm01.LookupValueField = "FCustName";
UgLookupForm01.LookupGridWidth = 400;
UgLookupForm01.LookupGridHeight = 400;
UgLookupForm01.Show;
2
3
4
5
6
7
//PasScript
UgLookupForm01.LookupCaption := '匯入客戶';
UgLookupForm01.LookupData := cdsProject;
UgLookupForm01.LookupValueField := 'FCustName';
UgLookupForm01.LookupGridWidth := 400;
UgLookupForm01.LookupGridHeight := 400;
UgLookupForm01.Show;
2
3
4
5
6
7
// Make sure to add code blocks to your code group
# 32. TUgComboBoxPopup
該元件顯示為一個可下拉的選擇框，可以設定在點選下拉按鈕時需要顯示的數據表格元件。
# 32.1. 屬性
# 32.1.1. IsExpand
property IsExpand: Boolean;
狀態判斷函式，判斷指定的選擇框是否處於下拉狀態。
# 32.1.2. popup
property popup: TUgControl;
設定下拉按鈕點選時鏈接的控制元件。目前支援TUgDBGrid的聯動。
# 32.2. 事件
| 屬性 | 說明 |
|---|---|
| OnCollapse | 當下拉框收起時觸發此事件 |
| OnExpand | 當下拉框內容收起時觸發此事件 |
| OnExtEdithValueChange | 當下拉框顯示的內容發生變化時觸發事件 |
| OnItemClick | 當點選下拉框中的選擇項時觸發事件 |
| OnKeyDown | 當使用按鍵操作確認時觸發事件 |
# 32.3. 方法
# 32.3.1. Expand
procedure Expand;
用於展開指定控制元件的下拉功能表。
# 32.3.2. Collapse
procedure Collapse;
用於收起指定控制元件的下拉功能表。
# 33. TUgDBComboBoxPopup
該元件顯示為一個可下拉的選擇框，可以設定在點選下拉按鈕時需要顯示的數據表格元件。選擇后顯示的數據可對應修改欄位資訊
# 33.1. 屬性
# 33.1.1. IsExpand
property IsExpand: Boolean;
狀態判斷函式，判斷指定的選擇框是否處於下拉狀態。
# 33.1.2. popup
property popup: TUgControl;
設定下拉按鈕點選時鏈接的控制元件。目前支援TUgDBGrid的聯動。
# 33.2. 事件
| 屬性 | 說明 |
|---|---|
| OnCollapse | 當下拉框收起時觸發此事件 |
| OnExpand | 當下拉框內容收起時觸發此事件 |
| OnExtEdithValueChange | 當下拉框顯示的內容發生變化時觸發事件 |
| OnItemClick | 當點選下拉框中的選擇項時觸發事件 |
| OnKeyDown | 當使用按鍵操作確認時觸發事件 |
# 33.3. 方法
# 33.3.1. Expand
procedure Expand;
用於展開指定控制元件的下拉功能表。
# 33.3.2. Collapse
procedure Collapse;
用於收起指定控制元件的下拉功能表。
# 34. TUgGridComboBox
該元件顯示為一個可下拉的選擇框，可以設定在點選下拉按鈕時需要顯示的數據集元件。
# 34.1. 屬性
# 34.1.1. GridLookupDataSet
property GridLookupDataSet: TDataSet;
設定用於下拉查詢的數據集。
# 34.1.2. GridLookUpFields
property GridLookupFields: TUgGridLookupFields;
設定顯示于下拉查詢的數據集欄位資訊。
# 34.1.3. GridValueField
property GridValueField: string;
設定用於對應查詢表顯示內容的欄位名稱。
# 34.1.4. GridHeight
property GridHeight: Integer;
設定查詢表的行高。
# 34.1.5. GridLookupDataSetFilter
property GridLookupDataSetFilter: Boolean;
設定查詢表是否設定過濾條件。
# 34.1.6. GridWebOptionPaged
property GridWebOptionPaged: Boolean;
設定查詢表是否顯示分頁。
# 34.1.7. GridWebOptionPageSize
property GridWebOptionPageSize: Integer;
設定查詢表分頁的行數。
# 34.2. 事件
| 屬性 | 說明 |
|---|---|
| OnCollapse | 當下拉框收起時觸發此事件 |
| OnExpand | 當下拉框內容收起時觸發此事件 |
| OnExtEdithValueChange | 當下拉框顯示的內容發生變化時觸發事件 |
| OnItemClick | 當點選下拉框中的選擇項時觸發事件 |
| OnKeyDown | 當使用按鍵操作確認時觸發事件 |
# 34.3. 方法
# 34.3.1. Expand
procedure Expand;
用於展開指定控制元件的下拉功能表。
# 34.3.2. Collapse
procedure Collapse;
用於收起指定控制元件的下拉功能表。
# 35. TUgDBGridComboBox
該元件顯示為一個可下拉的選擇框，可以設定在點選下拉按鈕時需要顯示的數據集元件。選擇更新的數據會對應修改數據集的欄位。
# 35.1. 屬性
# 35.1.1. GridLookupDataSet
property GridLookupDataSet: TDataSet;
設定用於下拉查詢的數據集。
# 35.1.2. GridLookUpFields
property GridLookupFields: TUgGridLookupFields;
設定顯示于下拉查詢的數據集欄位資訊。
# 35.1.3. GridValueField
property GridValueField: string;
設定用於對應查詢表顯示內容的欄位名稱。
# 35.1.4. GridHeight
property GridHeight: Integer;
設定查詢表的行高。
# 35.1.5. GridLookupDataSetFilter
property GridLookupDataSetFilter: Boolean;
設定查詢表是否設定過濾條件。
# 35.1.6. GridWebOptionPaged
property GridWebOptionPaged: Boolean;
設定查詢表是否顯示分頁。
# 35.1.7. GridWebOptionPageSize
property GridWebOptionPageSize: Integer;
設定查詢表分頁的行數。
# 35.2. 事件
| 屬性 | 說明 |
|---|---|
| OnCollapse | 當下拉框收起時觸發此事件 |
| OnExpand | 當下拉框內容收起時觸發此事件 |
| OnExtEdithValueChange | 當下拉框顯示的內容發生變化時觸發事件 |
| OnItemClick | 當點選下拉框中的選擇項時觸發事件 |
| OnKeyDown | 當使用按鍵操作確認時觸發事件 |
# 35.3. 方法
# 35.3.1. Expand
procedure Expand;
用於展開指定控制元件的下拉功能表。
# 35.3.2. Collapse
procedure Collapse;
用於收起指定控制元件的下拉功能表。
# 36. TUgGridComboBoxExtra
該元件顯示為一個可下拉的選擇框，可以設定在點選下拉按鈕時需要顯示的數據集元件。選擇更新的數據會對應修改數據集的欄位。下拉框右側可以顯示對應選擇項的另一個記錄欄位的內容。
# 36.1. 屬性
# 36.1.1. GridCheckValueExists
property GridCheckValueExists: Boolean;
檢查確認輸入的值是否存在。
# 36.1.2. GridDisplayField
property GridDisplayField: String;
設定右側顯示框對應顯示的欄位的名稱。
# 36.1.3. GridLookupDataSet
property GridLookupDataSet: TDataSet;
設定用於下拉查詢的數據集。
# 36.1.4. GridLookUpFields
property GridLookupFields: TUgGridLookupFields;
設定顯示于下拉查詢的數據集欄位資訊。
# 36.1.5. GridValueField
property GridValueField: string;
設定用於對應查詢表顯示內容的欄位名稱。
# 36.1.6. GridValueWidth
property GridValueWidth: Integer;
設定查詢欄位的顯示寬度。
# 36.1.7. GridHeight
property GridHeight: Integer;
設定查詢表的行高。
# 36.1.8. GridLookupDataSetFilter
property GridLookupDataSetFilter: Boolean;
設定查詢表是否設定過濾條件。
# 36.1.9. GridWebOptionPaged
property GridWebOptionPaged: Boolean;
設定查詢表是否顯示分頁。
# 36.1.10. GridWebOptionPageSize
property GridWebOptionPageSize: Integer;
設定查詢表分頁的行數。
# 36.2. 事件
| 屬性 | 說明 |
|---|---|
| OnCollapse | 當下拉框收起時觸發此事件 |
| OnExpand | 當下拉框內容收起時觸發此事件 |
| OnExtEdithValueChange | 當下拉框顯示的內容發生變化時觸發事件 |
| OnItemClick | 當點選下拉框中的選擇項時觸發事件 |
| OnKeyDown | 當使用按鍵操作確認時觸發事件 |
# 36.3. 方法
# 36.3.1. Expand
procedure Expand;
用於展開指定控制元件的下拉功能表。
# 36.3.2. Collapse
procedure Collapse;
用於收起指定控制元件的下拉功能表。
# 37. TUgDBGridComboboxExtra
該元件顯示為一個可下拉的選擇框，可以設定在點選下拉按鈕時需要顯示的數據集元件。選擇更新的數據會對應修改數據集的欄位。下拉框右側可以顯示對應選擇項的另一個記錄欄位的內容。選擇更新的數據會對應修改數據集的欄位。
# 37.1. 屬性
# 37.1.1. GridCheckValueExists
property GridCheckValueExists: Boolean;
檢查確認輸入的值是否存在。
# 37.1.2. GridDisplayField
property GridDisplayField: String;
設定右側顯示框對應顯示的欄位的名稱。
# 37.1.3. GridLookupDataSet
property GridLookupDataSet: TDataSet;
設定用於下拉查詢的數據集。
# 37.1.4. GridLookUpFields
property GridLookupFields: TUgGridLookupFields;
設定顯示于下拉查詢的數據集欄位資訊。
# 37.1.5. GridValueField
property GridValueField: string;
設定用於對應查詢表顯示內容的欄位名稱。
# 37.1.6. GridValueWidth
property GridValueWidth: Integer;
設定查詢欄位的顯示寬度。
# 37.1.7. GridHeight
property GridHeight: Integer;
設定查詢表的行高。
# 37.1.8. GridLookupDataSetFilter
property GridLookupDataSetFilter: Boolean;
設定查詢表是否設定過濾條件。
# 37.1.9. GridWebOptionPaged
property GridWebOptionPaged: Boolean;
設定查詢表是否顯示分頁。
# 37.1.10. GridWebOptionPageSize
property GridWebOptionPageSize: Integer;
設定查詢表分頁的行數。
# 37.2. 事件
| 屬性 | 說明 |
|---|---|
| OnCollapse | 當下拉框收起時觸發此事件 |
| OnExpand | 當下拉框內容收起時觸發此事件 |
| OnExtEdithValueChange | 當下拉框顯示的內容發生變化時觸發事件 |
| OnItemClick | 當點選下拉框中的選擇項時觸發事件 |
| OnKeyDown | 當使用按鍵操作確認時觸發事件 |
# 37.3. 方法
# 37.3.1. Expand
procedure Expand;
用於展開指定控制元件的下拉功能表。
# 37.3.2. Collapse
procedure Collapse;
用於收起指定控制元件的下拉功能表。
# 38. TUgSuperContainerPanel
此元件與ContainerPanel的功能類似，特別之處在於提供了HtmlStyle的設定。
# 38.1. 屬性
# 38.1.1. HtmlStyle
設定元件的html樣式。主要有以下設定專案可用。
| 屬性 | 說明 |
|---|---|
BackdropFilter.blur | 控制元件背景的模糊程度，0為不使用模糊 |
BackdropFilter.Saturate | 控制元件背景的色彩飽和度，0表示為飽和度最低，界面樣式顯示為黑白，100表示為正常顏色的飽和度 |
BackgroundAlpha | 控制元件背景顏色的Alpha通道值，用於表示透明度，取值範圍為0-1 |
BackgroundColor | 控制元件的背景顏色 |
BorderLineAlpha | 控制元件的邊線的Alpha通道值，用於表示透明度，取值範圍為0-1 |
BorderLineColor | 控制元件邊線的顏色 |
BorderLineSize | 控制元件邊線的畫素尺寸 |
BorderLineRadius | 控制元件邊線的矩形圓角的圓弧半徑 |