標準控制元件
# FastWeb 標準控制元件
- 適用平臺： WEB(桌面)
標準控制元件組中包含一些建立網頁應用時經常用到的功能按鈕元件，比如按鈕控制元件，選擇框控制元件等。
# 1. TUgToolBar
該元件為工具欄，用於放置工具按鈕。
# 2. TUgButton
該元件為按鈕元件，最常用的操作為點選按鈕，通過點選操作來觸發OnClick事件。
# 2.1. 屬性
| 屬性 | 說明 |
|---|---|
| Action | 設定觸發的操作 |
| Caption | 按鈕上顯示的文字內容 |
# 2.1.1. Action
property Action: TBasicAction;
1
Action 是與控制元件關聯的操作對象。操作允許應用程式集中響應使用者命令。當控制元件與動作相關聯時，動作確定控制元件的適當屬性和事件（例如是否啟用控制元件或它如何響應 OnClick 事件）。
要在設計時建立動作，請將動作列表元件放置在表單或數據模組上。雙擊動作列表，打開動作列表編輯器。使用其上下文功能表在編輯器中新增操作。使用動作列表編輯器新增動作后，它們會出現在對像檢查器中動作屬性的下拉選單中。
# 2.1.2. Caption
property Caption: TCaption;
1
按鈕上顯示的文字內容。
//JScript
UgButton01.Caption = "OK";
1
2
2
//PasScript
UgButton01.Caption := 'OK';
1
2
2
// Make sure to add code blocks to your code group
# 2.2. 事件
| 事件 | 觸發條件 |
|---|---|
| OnClick | 點選按鈕時觸發該事件 |
# 2.3. 應用
UgButton控制元件和UgBitBtn控制元件都是按鈕控制元件，前面已經在使用，沒有太多可言。都是點選后執行事件裡面的程式碼，但是，如果按鈕在一個子視窗裡面，按鈕有一個ModalResult屬性，可以指定點選按鈕后關閉視窗帶回什麼操作結果，比如確認、取消、關閉等。這兩種按鈕都可以通過Images屬性關聯UgNativeImageList影象集控制元件設定按鈕圖示。UgButton按鈕可以通過IconClS屬性設定內部已有圖示的樣式但是UgBitBtn沒有，UgBitBtn可以通過設定Glyph屬性選擇小影象作為按鈕圖示但是UgButton沒有。
# 2.3.1. 佈局
- UgButton01
| 屬性 | 取值 | 說明 |
|---|---|---|
| IconCls | delete | 刪除圖示 |
- UgButton02
| 屬性 | 取值 | 說明 |
|---|---|---|
| IconCls | organize | 組織圖示 |
- UgBitBtn01
| 屬性 | 取值 | 說明 |
|---|---|---|
| Glyph | 自行上傳圖示 |
- UgBitBtn02
| 屬性 | 取值 | 說明 |
|---|---|---|
| Glyph | 自行上傳圖示 |
# 2.3.2. 程式碼
//JScript
//按鈕1的點選事件
function UgButton01OnClick(sender)
{
ShowMessage(UGMM.LT("UgButton01 Click"));
}
//按鈕2的點選事件
function UgButton02OnClick(sender)
{
ShowMessage(UGMM.LT("UgButton02 Click"));
}
//按鈕3的點選事件
function UgBitBtn01OnClick(sender)
{
ShowMessage(UGMM.LT("UgBitBtn01 Click"));
}
//按鈕4的點選事件
function UgBitBtn02OnClick(sender)
{
ShowMessage(UGMM.LT("UgBitBtn02 Click"));
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//PasScript
//按鈕1的點選事件
procedure UgButton01OnClick(sender: tobject);
begin
ShowMessage(UGMM.LT('UgButton01 Click'));
end;
//按鈕2的點選事件
procedure UgButton02OnClick(sender: tobject);
begin
ShowMessage(UGMM.LT('UgButton02 Click'));
end;
//按鈕3的點選事件
procedure UgBitBtn01OnClick(sender: tobject);
begin
ShowMessage(UGMM.LT('UgBitBtn01 Click'));
end;
//按鈕4的點選事件
procedure UgBitBtn02OnClick(sender: tobject);
begin
ShowMessage(UGMM.LT('UgBitBtn02 Click'));
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Make sure to add code blocks to your code group
# 3. TUgProgressBar
該元件為進度條元件，通過設定其最小值與最大值后，向其中輸入位置數值資訊以設定進度條的顯示狀態。
# 3.1. 屬性
| 屬性 | 說明 |
|---|---|
| Max | 進度條顯示的最大值 |
| Min | 進度條顯示的最小值 |
| Position | 進度條指示的當前位置 |
| Text | 進度條顯示的文字內容 |
# 3.1.1. Max
property Max: Integer;
1
修改屬性用於設定進度條顯示的最大值。
//JScript
UgProgressBar01.Max = 100;
1
2
2
//PasScript
UgProgressBar01.Max := 100;
1
2
2
// Make sure to add code blocks to your code group
# 3.1.2. Min
property Min: Integer;
1
修改屬性用於設定進度條顯示的最小值。
//JScript
UgProgressBar01.Min = 0;
1
2
2
//PasScript
UgProgressBar01.Min := 0;
1
2
2
// Make sure to add code blocks to your code group
# 3.1.3. Position
property Position: Integer;
1
修改屬性用於設定進度條顯示的進度值。
//JScript
UgProgressBar01.Position = 40;
1
2
2
//PasScript
UgProgressBar01.Position := 40;
1
2
2
// Make sure to add code blocks to your code group
例如，當其最大值為100，最小值為0，設定的位置為40時，顯示效果如下。
# 3.1.4. Text
property Text: TCaption;
1
在進度條中顯示進度條的文字內容。
//JScript
UgProgressBar01.Text = "Progress Bar";
1
2
2
//PasScript
UgProgressBar01.Text := 'Progress Bar';
1
2
2
// Make sure to add code blocks to your code group
# 3.2. 應用
UgProgressBar是一個顯示工作進度的控制元件。
# 3.2.1. 佈局
在主窗體上放一個UgProgressBar，一個U給Timer，兩個UgBitBtn控制元件。
- UgProgressBar01
| 屬性 | 取值 | 說明 |
|---|---|---|
| Max | 100 | 最大 |
| Min | 0 | 最小 |
# 3.2.2. 功能
點選按鈕1，進度條直接定位到50%，點選按鈕2進度條開始從0到100變化。
# 3.2.3. 程式碼
//JScript
function UgBitBtn01OnClick(sender)
{
UgProgressBar01.Position = 50; //進度直接定位到一半
}
function UgBitBtn02OnClick(sender)
{
//啟動定時器模擬工作任務
UgProgressBar01.Position = 0;
UgTimer01.Enabled = True;
}
function UgTimer01OnTimer(sender)
{
//調整工作進度
if (UgProgressBar01.Position < 100)
{
UgProgressBar01.Position = UgProgressBar01.Position + 1;
}
else
{
UgProgressBar01.Position = 0;
UgTimer01.Enabled = False; //計時器停止
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//PasScript
procedure UgBitBtn01OnClick(sender: tobject);
begin
UgProgressBar01.Position := 50; //進度直接定位到一半
end;
procedure UgBitBtn02OnClick(sender: tobject);
begin
//啟動定時器模擬工作任務
UgProgressBar01.Position := 0;
UgTimer01.Enabled := True;
end;
procedure UgTimer01OnTimer(sender: tobject);
begin
//調整工作進度
if UgProgressBar01.Position < 100 Then
Begin
UgProgressBar01.Position := UgProgressBar01.Position + 1;
End
Else
Begin
UgProgressBar01.Position := 0;
UgTimer01.Enabled := False; //計時器停止
End;
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// Make sure to add code blocks to your code group
# 4. TUgRadioButton
該元件顯示為一個單選按鈕。顯示為一個帶文字標題的圓形外框圖。一組選項按鈕中的選項是相互排斥的，同一 時刻只能有一個單選按鈕被選中。
# 4.1. 屬性
| 屬性 | 說明 |
|---|---|
| Caption | 單選按鈕對應的字幕 |
| Checked | 單選按鈕是否被選中 |
| Group | 單選按鈕的分組名稱，同一個組內同時只有一個按鈕可以被選擇 |
# 4.1.1. Caption
property Caption: TCaption;
1
該屬性用於顯示單選按鈕對應的字幕內容。
//JScript
UgRadioButton01.Caption = "1";
1
2
2
//PasScript
UgRadioButton01.Caption := '1';
1
2
2
// Make sure to add code blocks to your code group
# 4.1.2. Checked
property Checked: Boolean;
1
該屬性用於顯示單選按鈕是否被選中。
//JScript
UgRadioButton01.Checked = True;
1
2
2
//PasScript
UgRadioButton01.Checked := True;
1
2
2
// Make sure to add code blocks to your code group
# 4.1.3. Group
property Group: Integer;
1
該屬性用於設定單選按鈕的分組，在同一個分組中的單選按鈕有且僅有一個可以被選中。當其中一個單選按鈕的Checked屬性變為True時，則同一個分組中的其他單選按鈕的Checked屬性變為False。
//JScript
//將兩個控制元件置於同一分組中
UgRadioButton01.Group = 1;
UgRadioButton02.Group = 1;
1
2
3
4
2
3
4
//PasScript
//將兩個控制元件置於同一分組中
UgRadioButton01.Group := 1;
UgRadioButton02.Group := 1;
1
2
3
4
2
3
4
// Make sure to add code blocks to your code group
選擇其中一項后，該項處於選中狀態。
當點選另外一項時，原先項會取消選中，新項會被選中。
# 4.2. 事件
| 事件 | 觸發條件 |
|---|---|
| OnChangeValue | 當選擇對象的值發生變化時觸發該事件 |
| OnClick | 當點選該控制元件時觸發該事件 |
| OnDbClick | 當雙擊該控制元件時觸發該事件 |
# 4.3. 應用
UgRadioButton是一個單選按鈕控制元件，一般用來設定某個可以選擇的屬性。
# 4.3.1. 佈局
在窗體上放三個UgRadioButton控制元件和一個UgEdit控制元件。
- UgRadioButton01
| 屬性 | 取值 | 說明 |
|---|---|---|
| Caption | 大號 | 選擇說明 |
| Checked | True | 選中 |
- UgRadioButton02
| 屬性 | 取值 | 說明 |
|---|---|---|
| Caption | 中號 | 選擇說明 |
| Checked | False | 選中 |
- UgRadioButton03
| 屬性 | 取值 | 說明 |
|---|---|---|
| Caption | 小號 | 選擇說明 |
| Checked | False | 選中 |
# 4.3.2. 功能
點選UgRadioButton控制元件時，按鈕之間互斥，即只有一個能夠被選中（與UgCheckBox不同，UgCheckBox是多選控制元件，UgRadioButton是單選控制元件），在UgEdit控制元件里顯示選中的按鈕內容。
# 4.3.3. 程式碼
//JScript
//選擇按鈕1的事件
function UgRadioButton01OnClick(sender)
{
//如果選擇的是按鈕1，顯示按鈕1對應的文字
if (UgRadioButton01.Checked)
UgEdit01.Text = UgRadioButton01.Caption;
}
//選擇按鈕2的事件
function UgRadioButton02OnClick(sender)
{
//如果選擇的是按鈕2，顯示按鈕2對應的文字
if (UgRadioButton02.Checked)
UgEdit01.Text = UgRadioButton02.Caption;
}
//選擇按鈕3的事件
function UgRadioButton03OnClick(sender)
{
//如果選擇的是按鈕3，顯示按鈕3對應的文字
if (UgRadioButton03.Checked)
UgEdit01.Text = UgRadioButton03.Caption;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//PasScript
//選擇按鈕1的事件
procedure UgRadioButton01OnClick(sender: tobject);
begin
//如果選擇的是按鈕1，顯示按鈕1對應的文字
if UgRadioButton01.Checked Then
UgEdit01.Text := UgRadioButton01.Caption;
end;
//選擇按鈕2的事件
procedure UgRadioButton02OnClick(sender: tobject);
begin
//如果選擇的是按鈕2，顯示按鈕2對應的文字
if UgRadioButton02.Checked Then
UgEdit01.Text := UgRadioButton02.Caption;
end;
//選擇按鈕3的事件
procedure UgRadioButton03OnClick(sender: tobject);
begin
//如果選擇的是按鈕3，顯示按鈕3對應的文字
if UgRadioButton03.Checked Then
UgEdit01.Text := UgRadioButton03.Caption;
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// Make sure to add code blocks to your code group
# 5. TUgCheckBox
該元件顯示為一個單選框。使用者可以選中該框以選擇該選項，或取消選中該選項以取消選擇該選項。
# 5.1. 屬性
| 屬性 | 說明 |
|---|---|
| Caption | 單選框對應的字幕 |
| Checked | 單選框是否被選中 |
# 5.1.1. Caption
property Caption: TCaption;
1
該屬性用於顯示選擇框對應的字幕內容。
//JScript
UgCheckBox01.Caption = "OK";
1
2
2
//PasScript
UgCheckBox01.Caption := 'OK';
1
2
2
// Make sure to add code blocks to your code group
# 5.1.2. Checked
property Checked: Boolean;
1
該屬性用於顯示選擇框是否被選中。
//JScript
UgCheckBox01.Checked = True;
1
2
2
//PasScript
UgCheckBox01.Checked := True;
1
2
2
// Make sure to add code blocks to your code group
1
# 5.2. 事件
| 事件 | 觸發條件 |
|---|---|
| OnChange | 當選擇對象的值發生變化時觸發該事件 |
| OnClick | 當點選該控制元件時觸發該事件 |
# 5.3. 應用
# 5.3.1. 佈局
UgCheckBox控制元件主要用來選擇設定可選擇的屬性。切換至UgWebRunFrame界面，在控制元件選擇區找到Standard控制元件組，找到TUgCheckBox控制元件，在窗體設計區擺放兩個UgCheckBox控制元件，一個UgLabel控制元件。控制元件屬性設定如下：
- UgCheckBox01
| 屬性 | 取值 | 說明 |
|---|---|---|
| Caption | UgCheckBox01 | 勾選框顯示的內容 |
| Checked | True | 是否勾選 |
- UgCheckBox02
| 屬性 | 取值 | 說明 |
|---|---|---|
| Caption | UgCheckBox02 | 勾選框顯示的內容 |
| Checked | False | 是否勾選 |
# 5.3.2. 功能
勾選不同屬性時兩個屬性互斥，讓UgLabel顯示勾選結果。
# 5.3.3. 程式碼
為UgCheckBox01和UgCheckBox02新增OnChange事件，分別點選選中兩個控制元件，在左下區域控制元件的屬性頁(Properties)後面有一個事件(Events)頁，找到OnChange事件，雙擊新增程式碼。
//JScript
function UgCheckBox01OnChange(sender)
{
UgCheckBox02.Checked = !UgCheckBox02.Checked;
if (UgCheckBox01.Checked)
{
UgLabel01.Caption = UgCheckBox02.Caption;
}
else
{
UgLabel01.Caption = UgCheckBox01.Caption;
}
}
function UgCheckBox02OnChange(sender)
{
UgCheckBox01.Checked = !UgCheckBox01.Checked;
if (UgCheckBox02.Checked)
{
UgLabel01.Caption = UgCheckBox01.Caption;
}
else
{
UgLabel01.Caption = UgCheckBox02.Caption;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//PasScript
procedure UgCheckBox01OnChange(sender: tobject);
begin
UgCheckBox02.Checked := not UgCheckBox02.Checked;
if UgCheckBox01.Checked then
begin
UgLabel01.Caption := UgCheckBox02.Caption;
end
else
begin
UgLabel01.Caption := UgCheckBox01.Caption;
end;
end;
procedure UgCheckBox02OnChange(sender: tobject);
begin
UgCheckBox01.Checked := not UgCheckBox01.Checked;
if UgCheckBox02.Checked then
begin
UgLabel01.Caption := UgCheckBox01.Caption;
end
else
begin
UgLabel01.Caption := UgCheckBox02.Caption;
end;
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// Make sure to add code blocks to your code group
# 6. TUgCheckComboBox
該元件顯示為一個下拉選單形式的確認選擇框。當選擇下拉選單中的多項時，選擇的項均會顯示在框中。
# 6.1. 屬性
| 屬性 | 說明 |
|---|---|
| ItemIndex | 預設選擇的項的索引值 |
| Items | 選項的內容 |
# 7. TUgMemo
該元件顯示為一個文字備忘元件。可以用於輸入或顯示多行的文字內容，適合表示冗長的資訊。
# 7.1. 屬性
| 屬性 | 說明 |
|---|---|
| ClearButton | 是否在包含內容的文字框中顯示可用於清除文字框內容的清除按鈕 |
| Lines | 文字框中顯示的文字內容，可以換行顯示 |
| ReadOnly | 若為True，則文字框中的內容僅用於顯示，不可進行編輯修改的操作 |
| WordWarp | 若為True，則文字框中的內容長度大於文字框長度時會進行自動換行 |
# 7.1.1. ClearButton
property ClearButton: Boolean;
1
該屬性可控制是否在包含內容的文字框中顯示可用於清除文字框內容的清除按鈕，若為True則顯示該按鈕。
//JScript
UgMemo01.ClearButton = True;
1
2
2
//PasScript
UgMemo01.ClearButton := True;
1
2
2
// Make sure to add code blocks to your code group
# 7.1.2. Lines
property Lines: TStrings;
1
文字框中顯示的內容，可以換行進行顯示。
//JScript
//清除文字框中的內容
UgMemo01.Lines.Clear;
//新增文字
UgMemo01.Lines.Add("First Line");
UgMemo01.Lines.Add("Second Line");
UgMemo01.Lines.Add("Third Line");
UgMemo01.Lines.Add("Forth Line");
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
//PasScript
//清除文字框中的內容
UgMemo01.Lines.Clear;
//新增文字
UgMemo01.Lines.Add('First Line');
UgMemo01.Lines.Add('Second Line');
UgMemo01.Lines.Add('Third Line');
UgMemo01.Lines.Add('Forth Line');
//顯示文字內容
ShowMessage(UGMM.LT(UgMemo01.Lines.Text));
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
// Make sure to add code blocks to your code group
# 7.1.3. ReadOnly
property ReadOnly: Boolean;
1
該屬性若為True，則文字框中的內容僅用於顯示，不可進行編輯修改的操作。
//JScript
UgMemo01.ReadOnly = True;
1
2
2
//PasScript
UgMemo01.ReadOnly := True;
1
2
2
// Make sure to add code blocks to your code group
# 7.1.4. WordWarp
property WordWrap: Boolean;
1
該屬性若為True，則文字框中的內容長度大於文字框長度時會進行自動換行。
//JScript
UgMemo01.WordWarp = True;
1
2
2
//PasScript
UgMemo01.WordWarp := True;
1
2
2
// Make sure to add code blocks to your code group
# 7.2. 應用
UgMemo控制元件可以用於輸入或顯示多行的文字內容，不像UgEdit控制元件，只能輸入或顯示單行文字內容。
# 7.2.1. 佈局
在視窗上放一個UgMemo控制元件和三個UgBitBtn控制元件。
- UgMemo
| 屬性 | 取值 | 說明 |
|---|---|---|
| ScrollBars | ssVertical | 縱向下拉條 |
| ssHorizontal | 橫向拖動條 | |
| ssNone | 縱橫都沒有 | |
| ssBoth | 縱橫都有條 |
# 7.2.2. 功能
按鈕1用來清空UgMemo中的內容，按鈕2用來新增幾行文字，按鈕3用於獲取UgMemo中的文字內容。
# 7.2.3. 程式碼
//JScript
function UgBitBtn01OnClick(sender)
{
UgMemo01.Lines.Clear;
}
function UgBitBtn02OnClick(sender)
{
UgMemo01.Lines.Add("First Line");
UgMemo01.Lines.Add("Second Line");
UgMemo01.Lines.Add("Third Line");
UgMemo01.Lines.Add("Forth Line");
}
function UgBitBtn03OnClick(sender)
{
ShowMessage(UGMM.LT(UgMemo01.Lines.Text));
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//PasScript
procedure UgBitBtn01OnClick(sender: tobject);
begin
UgMemo01.Lines.Clear;
end;
procedure UgBitBtn02OnClick(sender: tobject);
begin
UgMemo01.Lines.Add('First Line');
UgMemo01.Lines.Add('Second Line');
UgMemo01.Lines.Add('Third Line');
UgMemo01.Lines.Add('Forth Line');
end;
procedure UgBitBtn03OnClick(sender: tobject);
begin
ShowMessage(UGMM.LT(UgMemo01.Lines.Text));
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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
# 8. TUgLabel
該元件用於顯示標籤文字的內容。可新增使用者無法編輯到窗體的文字。此文字可用於標記另一個元件。
# 8.1. 屬性
| 屬性 | 說明 |
|---|---|
| Caption | 設定標籤顯示的文字內容 |
# 8.1.1. Caption
property Caption: TCaption;
1
該屬性用於設定標籤文字顯示的內容。
//JScript
UgLabel01.Caption = "Hola";
1
2
2
//PasScript
UgLabel01.Caption := 'Hola';
1
2
2
// Make sure to add code blocks to your code group
1
# 9. TUgEdit
該元件為一個編輯文字框，編輯元件用於檢索使用者鍵入的文字。編輯元件還可以向用戶顯示文字。
# 9.1. 屬性
| 屬性 | 說明 |
|---|---|
| ClearButton | 如果為True，則編輯框中有文字時會顯示用於清除編輯框中內容的清除按鈕 |
| Color | 設定控制元件的顏色 |
| EmptyText | 當控制元件內容為空時，編輯框中顯示的文字內容 |
| FieldLabel | 設定編輯框控制元件對應的欄位標籤內容 |
| FieldLabelAlign | 欄位標籤與文字編輯框的對齊方式 |
| FieldLabelSeparator | 欄位標籤與文字編輯框的分隔符號 |
| FieldLabelWidth | 欄位標籤的寬度 |
| PasswordChar | 輸入的字元為密碼形式需要進行掩飾的則顯示為設定的字元 |
| ReadOnly | 若為True，則編輯框不可進行編輯操作 |
| Text | 文字框中顯示的文字內容 |
# 9.1.1. ClearButton
property ClearButton: Boolean;
1
如果為True，則編輯框中有文字時會顯示用於清除編輯框中內容的清除按鈕。
# 9.1.2. Color
property Color: TColor;
1
設定控制元件的顏色。
//JScript
UgEdit01.color = 00FFFFCC;
1
2
2
//PasScript
UgEdit01.color := $00FFFFCC;
1
2
2
// Make sure to add code blocks to your code group
# 9.1.3. EmptyText
property EmptyText: string;
1
設定編輯框為空時顯示的文字內容，該文字內容在輸入文字后消失。
//JScript
UgEdit01.Text = "";
UgEdit01.EmptyText = "Empty";
1
2
3
2
3
//PasScript
UgEdit01.Text := '';
UgEdit01.EmptyText := 'Empty';
1
2
3
2
3
// Make sure to add code blocks to your code group
1
# 9.1.4. FieldLabel
property FieldLabel: string;
1
設定編輯框控制元件對應的欄位標籤內容。
# 9.1.5. FieldLabelAlign
property FieldLabelAlign: TUniLabelAlign;
1
設定標籤內容的對齊方式。
| 取值 | 說明 | 圖示 |
|---|---|---|
| laLeft | 標籤相對於控制元件左對齊 |  |
| laTop | 標籤位於控制元件的頂部 |  |
| laRight | 標籤相對於控制元件右對齊 |  |
在進設計模式下進行屬性變更的時候，可能會出現Ajax ERROR報錯，該情況是在設計模式下出現的情況，在運行模式下不會出現該錯誤。
# 9.1.6. FieldLabelSeparator
property FieldLabelSeparator: string;
1
設定欄位標籤與文字編輯框的分隔符號。預設為:。
# 9.1.7. FieldLabelWidth
property FieldLabelWidth: Integer;
1
設定欄位顯示的寬度。
寬度30時的顯示效果：
寬度100時的顯示效果：
# 9.1.8. PasswordChar
property PasswordChar: Char;
1
掩飾密碼用的字元。
//JScript
UgEdit01.PasswordChar = "*";
1
2
2
//PasScript
UgEdit01.PasswordChar := '*';
1
2
2
// Make sure to add code blocks to your code group
# 9.1.9. ReadOnly
property ReadOnly: Boolean;
1
該屬性若為True，則編輯框不可進行編輯操作。
# 9.1.10. Text
property Text: String;
1
用於顯示文字編輯框中的內容。
# 9.2. 事件
| 事件 | 觸發條件 |
|---|---|
| OnChange | 當用戶修改編輯框中的內容時觸發該事件 |
| OnClick | 當用戶點選控制元件時觸發該事件 |
| OnDblClick | 當用戶雙擊該控制元件時觸發該事件 |
| OnEnter | 當控制元件被啟用時觸發該事件 |
| OnExit | 當焦點從該控制元件轉移到其他控制元件時觸發該事件 |
| OnKeyDown | 當控制元件處於啟用狀態時按下鍵盤上的按鍵以觸發該事件 |
| OnKeyPress | 當按鍵按下時觸發該事件 |
| OnKeyUp | 當按下的按鍵被釋放時觸發該事件 |
| OnMouseDown | 當滑鼠在控制元件區域進行點選操作時觸發該事件 |
| OnMouseEnter | 當滑鼠指針移動至控制元件的顯示區域時觸發該事件 |
| OnMouseLeave | 當滑鼠指針離開控制元件的顯示區域時觸發該事件 |
| OnMouseUp | 當釋放滑鼠的點選操作時觸發該事件 |
# 9.3. 應用
UgEdit控制元件是文字輸入框，還可以作為一般文字和密碼輸入框使用，是單行輸入控制元件，在FastWeb下具有許多新的特性。
# 9.3.1. 佈局
在窗體上放置兩個UgEdit控制元件，一個用作輸入使用者名稱，一個用作輸入密碼。
- UgEdit01
| 屬性 | 取值 | 說明 |
|---|---|---|
| EmptyText | 請輸入使用者名稱 | 為空的時候的提示資訊 |
| FieldLabel | 使用者名稱 | 左側的輸入標籤名 |
| FieldLabelWidth | 50 | 標籤名長度 |
| FieldLabelAlign | laLeft | 標籤對齊方式 |
| Text | 空 | 初始化為空 |
- UgEdit02
| 屬性 | 取值 | 說明 |
|---|---|---|
| EmptyText | 請輸入密碼 | 為空的時候的提示資訊 |
| FieldLabel | 密碼 | 左側的輸入標籤名 |
| FieldLabelWidth | 50 | 標籤名長度 |
| FieldLabelAlign | laLeft | 標籤對齊方式 |
| Text | 空 | 初始化為空 |
| PassswordChar | * | 密碼提示符號 |
# 9.3.2. 功能
UgEdit01輸入值的同時通過UgLabel01顯示已經輸入內容的長度，點選UgBitBtn01按鈕時顯示UgEdit01輸入的內容。
# 9.3.3. 程式碼
//JScript
//顯示第一個輸入框內容
function UgBitBtn01OnClick(sender)
{
ShowMessage(UGMM.LT(UgEdit01.Text));
}
//顯示第一個輸入框長度
function UgEdit01OnChange(sender)
{
UgLabel01.Caption = IntToStr(Length(UgEdit01.Text));
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
//PasScript
//顯示第一個輸入框內容
procedure UgBitBtn01OnClick(sender: tobject);
begin
ShowMessage(UGMM.LT(UgEdit01.Text));
end;
//顯示第一個輸入框長度
procedure UgEdit01OnChange(sender: tobject);
begin
UgLabel01.Caption := IntToStr(Length(UgEdit01.Text));
end;
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
// Make sure to add code blocks to your code group
# 10. TUgSpinEdit
該元件顯示為一個可以上下調節的數值文字編輯框，帶有上下小箭頭，可以直接輸入，也可以點選箭頭增加和減少。其功能與TUgEdit類似。
# 10.1. 屬性
| 屬性 | 說明 |
|---|---|
| FieldLabel | 設定編輯框控制元件對應的欄位標籤內容 |
| FieldLabelAlign | 欄位標籤與文字編輯框的對齊方式 |
| FieldLabelSeparator | 欄位標籤與文字編輯框的分隔符號 |
| FieldLabelWidth | 欄位標籤的寬度 |
| MaxValue | 允許輸入的最大值 |
| MinValue | 允許輸入的最小值 |
| Value | 目前輸入的值 |
# 10.1.1. FieldLabel
property FieldLabel: string;
1
設定編輯框控制元件對應的欄位標籤內容。
# 10.1.2. FieldLabelAlign
property FieldLabelAlign: TUniLabelAlign;
1
設定標籤內容的對齊方式。
| 取值 | 說明 |
|---|---|
| laLeft | 標籤位於控制元件的左側 |
| laTop | 標籤位於控制元件的頂部 |
| laRight | 標籤位於控制元件的右側 |
# 10.1.3. FieldLabelSeparator
property FieldLabelSeparator: string;
1
設定欄位標籤與文字編輯框的分隔符號。預設為:。
# 10.1.4. FieldLabelWidth
property FieldLabelWidth: Integer;
1
設定欄位顯示的寬度。
# 10.1.5. MaxValue
property MaxValue: Integer;
1
允許輸入的最大值。
# 10.1.6. MinValue
property MinValue: Integer;
1
允許輸入的最小值。
# 10.1.7. Value
property Value: Integer;
1
輸入的值。
# 10.2. 事件
| 事件 | 觸發條件 |
|---|---|
| OnChange | 當用戶修改編輯框中的內容時觸發該事件 |
| OnClick | 當用戶點選控制元件時觸發該事件 |
| OnEnter | 當控制元件被啟用時觸發該事件 |
| OnExit | 當焦點從該控制元件轉移到其他控制元件時觸發該事件 |
| OnKeyDown | 當控制元件處於啟用狀態時按下鍵盤上的按鍵以觸發該事件 |
| OnKeyPress | 當按鍵按下時觸發該事件 |
| OnKeyUp | 當按下的按鍵被釋放時觸發該事件 |
# 11. TUgNumberEdit
該元件顯示為一個數值編輯的文字框。帶有輸入內容過濾功能，限制使用者輸入符合要求的數字，不允許輸入字元。其功能與TUgEdit類似。
# 11.1. 屬性
| 屬性 | 說明 |
|---|---|
| FieldLabel | 設定編輯框控制元件對應的欄位標籤內容 |
| FieldLabelAlign | 欄位標籤與文字編輯框的對齊方式 |
| FieldLabelSeparator | 欄位標籤與文字編輯框的分隔符號 |
| FieldLabelWidth | 欄位標籤的寬度 |
| MaxValue | 允許輸入的最大值 |
| MinValue | 允許輸入的最小值 |
| Value | 目前輸入的值 |
# 11.1.1. FieldLabel
property FieldLabel: string;
1
設定編輯框控制元件對應的欄位標籤內容。
# 11.1.2. FieldLabelAlign
property FieldLabelAlign: TUniLabelAlign;
1
設定標籤內容的對齊方式。
| 取值 | 說明 |
|---|---|
| laLeft | 標籤位於控制元件的左側 |
| laTop | 標籤位於控制元件的頂部 |
| laRight | 標籤位於控制元件的右側 |
# 11.1.3. FieldLabelSeparator
property FieldLabelSeparator: string;
1
設定欄位標籤與文字編輯框的分隔符號。預設為:。
# 11.1.4. FieldLabelWidth
property FieldLabelWidth: Integer;
1
設定欄位顯示的寬度。
# 11.1.5. MaxValue
property MaxValue: Integer;
1
允許輸入的最大值。
# 11.1.6. MinValue
property MinValue: Integer;
1
允許輸入的最小值。
# 11.1.7. Value
property Value: Integer;
1
輸入的值。
# 11.2. 事件
| 事件 | 觸發條件 |
|---|---|
| OnChange | 當用戶修改編輯框中的內容時觸發該事件 |
| OnClick | 當用戶點選控制元件時觸發該事件 |
| OnEnter | 當控制元件被啟用時觸發該事件 |
| OnExit | 當焦點從該控制元件轉移到其他控制元件時觸發該事件 |
| OnKeyDown | 當控制元件處於啟用狀態時按下鍵盤上的按鍵以觸發該事件 |
| OnKeyPress | 當按鍵按下時觸發該事件 |
| OnKeyUp | 當按下的按鍵被釋放時觸發該事件 |
# 11.3. 應用
UgNumber是數字輸入控制元件，該控制元件帶有輸入內容過濾功能，限制使用者輸入符合要求的數字，不允許輸入字元。
# 11.3.1. 佈局
主窗體上放置一個UgNumber控制元件和一個UgBitBtn按鈕控制元件。
# 11.3.2. 功能
限制輸入5-10的數字，如果不在這個範圍輸入框用紅邊框提示，點選按鈕顯示輸入的數字和10的和。
# 11.3.3. 程式碼
//JScript
function UgBitBtn01OnClick(sender)
{
var i,j;
i = 10;
if (UgNumberEdit01.IsBlank)
{
ShowMessage(UGMM.LT("Not Null"));
UgNumberEdit01.SetFocus;
Exit;
}
j = i + UgNumberEdit01.Value;
ShowMessage("Your Number" + FloatToStr(UgNumberEdit01.Value) + "plus 10 equal to" + FloatToStr(j));
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
//PasScript
procedure UgBitBtn01OnClick(sender: tobject);
Var
i: Real;
j: Real;
begin
i := 10;
if UgNumberEdit01.IsBlank Then
Begin
ShowMessage(UGMM.LT('Not Null'));
UgNumberEdit01.SetFocus;
Exit;
end;
j := i + UgNumberEdit01.Value;
ShowMessage('Your Number' + FloatToStr(UgNumberEdit01.Value) + 'plus 10 equal to' + FloatToStr(j));
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Make sure to add code blocks to your code group
# 12. TUgFormattedNumberEdit
該元件顯示為一個格式化數值顯示的編輯框，用於格式化金額數字的輸入，以確保輸入的數字可讀性強。
# 12.1. 屬性
| 屬性 | 說明 |
|---|---|
| DecimalPrecision | 顯示的小數位數 |
| DecimalSeparator | 顯示的小數分隔符 |
| FormattedInput.DecimalGroup | 顯示幾位分一組 |
| ThousandSeparator | 千位分隔符 |
| FieldLabel | 設定編輯框控制元件對應的欄位標籤內容 |
| FieldLabelAlign | 欄位標籤與文字編輯框的對齊方式 |
| FieldLabelSeparator | 欄位標籤與文字編輯框的分隔符號 |
| FieldLabelWidth | 欄位標籤的寬度 |
| MaxValue | 允許輸入的最大值 |
| MinValue | 允許輸入的最小值 |
| Value | 目前輸入的值 |
# 12.1.1. DecimalPrecision
property DecimalPrecision: Integer;
1
設定顯示的小數位數。
# 12.1.2. DecimalSeparator
property DecimalSeparator: Integer;
1
設定顯示的小數分隔符號。
# 12.1.3. FormattedInput.DecimalGroup
property DecimalGroup: Integer;
1
在幾位數值后顯示分隔符。
# 12.1.4. ThousandSeparator
property ThousandSeparator: String;
1
# 12.1.5. FieldLabel
property FieldLabel: string;
1
設定編輯框控制元件對應的欄位標籤內容。
# 12.1.6. FieldLabelAlign
property FieldLabelAlign: TUniLabelAlign;
1
設定標籤內容的對齊方式。
| 取值 | 說明 |
|---|---|
| laLeft | 標籤位於控制元件的左側 |
| laTop | 標籤位於控制元件的頂部 |
| laRight | 標籤位於控制元件的右側 |
# 12.1.7. FieldLabelSeparator
property FieldLabelSeparator: string;
1
設定欄位標籤與文字編輯框的分隔符號。預設為:。
# 12.1.8. FieldLabelWidth
property FieldLabelWidth: Integer;
1
設定欄位顯示的寬度。
# 12.1.9. MaxValue
property MaxValue: Float;
1
允許輸入的最大值。
# 12.1.10. MinValue
property MinValue: Float;
1
允許輸入的最小值。
# 12.1.11. Value
property Value: Float;
1
輸入的值。
# 12.2. 事件
| 事件 | 觸發條件 |
|---|---|
| OnChange | 當用戶修改編輯框中的內容時觸發該事件 |
| OnClick | 當用戶點選控制元件時觸發該事件 |
| OnEnter | 當控制元件被啟用時觸發該事件 |
| OnExit | 當焦點從該控制元件轉移到其他控制元件時觸發該事件 |
| OnKeyDown | 當控制元件處於啟用狀態時按下鍵盤上的按鍵以觸發該事件 |
| OnKeyPress | 當按鍵按下時觸發該事件 |
| OnKeyUp | 當按下的按鍵被釋放時觸發該事件 |
# 12.3. 應用
UgFormattedNumberEdit用於格式化金額數字的輸入，以確保輸入的數字可讀性強。
# 12.3.1. 佈局
在窗體上放置一個UgFormattedNumberEdit控制元件和一個UgBitBtn控制元件。
- UgFormattedNumberEdit01
| 屬性 | 取值 | 說明 |
|---|---|---|
| MaxValue | 99999.99 | 最大允許輸入值 |
| MinValue | 11111.11 | 最小允許輸入值 |
| Value | 66666.66 | 目前值 |
| FieldLabel | 帳戶餘額 | 左側的輸入標籤名 |
| FieldLabelWidth | 60 | 標籤名長度 |
| FieldLabelAlign | laLeft | 標籤對齊方式 |
| DecimalPrecision | 2 | 小數位數 |
| DecimalSeparator | . | 小數分隔符 |
| FormattedInput.DecimalGroup | 3 | 幾位分一組 |
| ThousandSeparator | , | 千分位分隔符 |
# 12.3.2. 功能
格式化顯示輸入的金額數字。
# 12.3.3. 程式碼
//JScript
function UgBitBtn01OnClick(sender)
{
var i,j;
i = 10;
if (UgFormattedNumberEdit01.IsBlank)
{
ShowMessage(UGMM.LT("Not Null"));
UgFormattedNumberEdit01.SetFocus;
Exit;
}
j = i + UgFormattedNumberEdit01.Value;
ShowMessage(UGMM.LT("Your Number" + FloatToStr(UgFormattedNumberEdit01.Value) + "plus 10 equal to" + FloatToStr(j)));
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//PasScript
procedure UgBitBtn01OnClick(sender: tobject);
Var
i: Real;
j: Real;
begin
i := 10;
if UgFormattedNumberEdit01.IsBlank Then
Begin
ShowMessage(UGMM.LT('Not Null'));
UgFormattedNumberEdit01.SetFocus;
Exit;
end;
j := i + UgFormattedNumberEdit01.Value;
ShowMessage(UGMM.LT('Your Number' + FloatToStr(UgFormattedNumberEdit01.Value) + 'plus 10 equal to' + FloatToStr(j)));
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Make sure to add code blocks to your code group
# 13. TUgTagField
該元件顯示為一個可以進行下拉選擇的選框，可以選擇多個選項，以標籤的形式顯示在選擇編輯框中。
# 13.1. 屬性
| 屬性 | 說明 |
|---|---|
| Items | 下拉選項中可選的專案 |
| SelCount | 已選擇的標籤數量 |
| Count | 下拉選項中可選的專案數量 |
| Selected[..] | 表示下拉選項中該位置的專案是否被選中 |
# 13.2. 事件
| 事件 | 觸發條件 |
|---|---|
| OnChange | 當覈取方塊選項發生變化時觸發該事件 |
| OnChangeValue | 當覈取方塊中的取值發生變化時觸發該事件 |
# 13.3. 方法
# 13.3.1. GetSelected
function GetSelected(Index:Integer):Boolean;
1
檢查選擇的索引向項是否被選中。
# 14. TUgComboBox
該元件顯示為一個可以進行下拉選擇的覈取方塊，可用於選擇同類屬性的可選框。
# 14.1. 屬性
| 屬性 | 說明 |
|---|---|
| ClearButton | 是否在包含內容的文字框中顯示可用於清除文字框內容的清除按鈕 |
| FieldLabel | 設定編輯框控制元件對應的欄位標籤內容 |
| FieldLabelAlign | 欄位標籤與文字編輯框的對齊方式 |
| FieldLabelSeparator | 欄位標籤與文字編輯框的分隔符號 |
| FieldLabelWidth | 欄位標籤的寬度 |
| ItemIndex | 目前選擇項的索引 |
| Items | 可供選擇的專案集合 |
| ReadOnly | 若為True，則文字框中的內容僅用於顯示，不可進行編輯修改的操作 |
| Text | 預設顯示的文字內容 |
# 14.1.1. ClearButton
property ClearButton: Boolean;
1
改屬性可控制是否在包含內容的文字框中顯示可用於清除文字框內容的清除按鈕，若為True則顯示該按鈕。
# 14.1.2. FieldLabel
property FieldLabel: string;
1
設定編輯框控制元件對應的欄位標籤內容。
# 14.1.3. FieldLabelAlign
property FieldLabelAlign: TUniLabelAlign;
1
設定標籤內容的對齊方式。
| 取值 | 說明 |
|---|---|
| laLeft | 標籤位於控制元件的左側 |
| laTop | 標籤位於控制元件的頂部 |
| laRight | 標籤位於控制元件的右側 |
# 14.1.4. FieldLabelSeparator
property FieldLabelSeparator: string;
1
設定欄位標籤與文字編輯框的分隔符號。預設為:。
# 14.1.5. FieldLabelWidth
property FieldLabelWidth: Integer;
1
設定欄位顯示的寬度。
# 14.1.6. ItemIndex
property ItemIndex: Integer;
1
設定當前選擇項的索引值。
# 14.1.7. Items
property Items: TStrings;
1
設定可選專案的集合。
//JScript
//清空
UgComboBox01.Items.Clear;
//新增
UgComboBox01.Items.Add("Grade1");
1
2
3
4
5
6
2
3
4
5
6
//PasScript
//清空
UgComboBox01.Items.Clear;
//新增
UgComboBox01.Items.Add('Grade1');
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
1
# 14.1.8. ReadOnly
property ReadOnly: Boolean;
1
該屬性若為True，則文字框中的內容僅用於顯示，不可進行編輯修改的操作。
# 14.1.9. Text
property Text: String;
1
預設顯示的文字內容。
# 14.2. 事件
| 事件 | 觸發條件 |
|---|---|
| OnChange | 當覈取方塊選項發生變化時觸發該事件 |
# 14.3. 應用
UgComboBox控制元件用來顯示下拉框，可用於選擇同類屬性的可選框。
# 14.3.1. 佈局
在窗體上擺放一個UgComboBox和四個UgBitBtn控制元件。
# 14.3.2. 功能
點選四個按鈕分別向UgComboBox新增可選項、顯示下拉框選中的下拉項、顯示下拉框選中的項的序號、清空下拉框的可選項。
# 14.3.3. 程式碼
//JScript
function UgBitBtn01OnClick(sender)
//新增
{
var i;
UgComboBox01.Clear;
UgComboBox01.Items.Clear;
for(i = 1; i <= 10; i++)
{
UgComboBox01.Items.Add("Grade1"+ IntToStr(i) + "Class");
}
UgComboBox01.ItemIndex = 0;
}
function UgBitBtn02OnClick(sender)
//顯示選中項
{
ShowMessage(UGMM.LT(UgComboBox01.Text));
}
function UgBitBtn03OnClick(sender)
//顯示選中項的序號
{
ShowMessage(UGMM.LT(IntToStr(UgComboBox01.ItemIndex)));
}
function UgBitBtn04OnClick(sender)
//清空
{
UgComboBox01.Clear;
UgComboBox01.Items.Clear;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//PasScript
procedure UgBitBtn01OnClick(sender: tobject);
//新增
var
i: Integer;
begin
UgComboBox01.Clear;
UgComboBox01.Items.Clear;
for i := 1 to 10 do
begin
UgComboBox01.Items.Add('Grade1'+ IntToStr(i) + 'Class');
end;
UgComboBox01.ItemIndex := 0;
end;
procedure UgBitBtn02OnClick(sender: tobject);
//顯示選中項
begin
ShowMessage(UGMM.LT(UgComboBox01.Text));
end;
procedure UgBitBtn03OnClick(sender: tobject);
//顯示選中項的序號
begin
ShowMessage(UGMM.LT(IntToStr(UgComboBox01.ItemIndex)));
end;
procedure UgBitBtn04OnClick(sender: tobject);
//清空
begin
UgComboBox01.Clear;
UgComboBox01.Items.Clear;
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// Make sure to add code blocks to your code group
# 15. TUgListBox
該元件顯示為一個列表框，在一個小視窗上可以同時顯示多個可選項。可選擇、新增或刪除其中的專案。
# 15.1. 屬性
| 屬性 | 說明 |
|---|---|
| ItemIndex | 目前選擇項的索引 |
| Items | 可供選擇的專案集合 |
# 15.1.1. ItemIndex
property ItemIndex: Integer;
1
設定當前選擇項的索引值。
# 15.1.2. Items
property Items: TStrings;
1
設定可選專案的集合。
//JScript
//清空
UgListBox01.Items.Clear;
//新增
UgKListBox01.Items.Add("Grade1");
1
2
3
4
5
6
2
3
4
5
6
//PasScript
//清空
UgListBox01.Items.Clear;
//新增
UgKListBox01.Items.Add('Grade1');
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
# 15.2. 事件
| 事件 | 觸發條件 |
|---|---|
| OnChange | 當選框選項發生變化時觸發該事件 |
UgListBox是下拉選單控制元件，功能和UgComboBox相似，區別是前者是一個小視窗可以同時顯示多個可選項，後者是一個下拉框，同時只能顯示一個選中項，點選下拉才可看見全部可選項。
# 15.3. 應用
# 15.3.1. 佈局
在主視窗上放置兩個UgListBox，四個UgBitBtn，兩個UgEdit。
# 15.3.2. 功能
點選按鈕1將右側選中項移動到左側，點按鈕2反向操作；點按鈕3將右側所有項移動到左側，點按鈕4反向操作。
# 15.3.3. 程式碼
//JScript
function UgWebRunFrameOnAfterRunScript(sender)
{
//UgListBox01中新增專案
UgListBox01.Items.Add("aaa");
UgListBox01.Items.Add("bbb");
UgListBox01.Items.Add("ccc");
UgListBox01.Items.Add("ddd");
UgListBox01.Items.Add("eee");
UgListBox01.Items.Add("fff");
//UgListBox02中新增專案
UgListBox02.Items.Add("111");
UgListBox02.Items.Add("222");
UgListBox02.Items.Add("333");
UgListBox02.Items.Add("444");
UgListBox02.Items.Add("555");
UgListBox02.Items.Add("666");
}
function UgListBox01OnClick(sender)
//UgListBox01單擊選擇顯示
{
if (UgListBox01.ItemIndex < 0)
Exit;
UgEdit01.Text = UgListBox01.Items.Strings[UgListBox01.ItemIndex];
}
function UgListBox02OnClick(sender)
//UgListBox02單擊選擇顯示
{
if (UgListBox02.ItemIndex < 0)
Exit;
UgEdit02.Text = UgListBox02.Items.Strings[UgListBox02.ItemIndex];
}
function UgBitBtn01OnClick(sender)
//UgListBox02左移一個
{
var findFlag,i,j;
findFlag = False;
if (UgListBox02.ItemIndex < 0)
Exit;
//判斷左邊有沒有，如果有僅刪除右邊，如果沒有則左邊增加右邊刪除
for (i = 0; i <= UgListBox01.Items.Count - 1; i++)
{
if (UgListBox01.Items.Strings[i] == UgListBox02.Items.Strings[UgListBox02.ItemIndex])
{
findFlag = True;
Break;
}
}
if (findFlag)
{
UgListBox02.Items.Delete(UgListBox02.ItemIndex);
}
else
{
UgListBox01.Items.Add(UgListBox02.Items.Strings[UgListBox02.ItemIndex]);
UgListBox02.Items.Delete(UgListBox02.ItemIndex);
}
}
function UgBitBtn02OnClick(sender)
//UgListBox1右移一個
{
var findFlag,i,j;
findFlag = False;
if (UgListBox01.ItemIndex < 0)
Exit;
//判斷右邊有沒有，如果有僅刪除左邊，如果沒有則右邊增加左邊刪除
for (i = 0; i <= UgListBox02.Items.Count - 1; i++)
{
if (UgListBox02.Items.Strings[i] == UgListBox01.Items.Strings[UgListBox01.ItemIndex])
{
findFlag = True;
Break;
}
}
if (findFlag)
{
UgListBox01.Items.Delete(UgListBox01.ItemIndex);
}
else
{
UgListBox02.Items.Add(UgListBox01.Items.Strings[UgListBox01.ItemIndex]);
UgListBox01.Items.Delete(UgListBox01.ItemIndex);
}
}
function UgBitBtn03OnClick(sender)
//UgListBox02左移全部
{
var findFlag,i,j;
findFlag = False;
While (UgListBox02.Items.Count > 0)
{
//判斷左邊有沒有，如果有僅刪除右邊，如果沒有則左邊增加右邊刪除
for (i = 0; i <= UgListBox01.Items.Count - 1; i++)
{
if (UgListBox01.Items.Strings[i] == UgListBox02.Items.Strings[0])
{
findFlag = True;
Break;
}
}
if (findFlag)
{
UgListBox02.Items.Delete(1);
}
else
{
UgListBox01.Items.Add(UgListBox02.Items.Strings[0]);
UgListBox02.Items.Delete(0);
}
}
}
function UgBitBtn04OnClick(sender)
//UgListBox01右移全部
{
var findFlag,i,j;
findFlag = False;
While (UgListBox01.Items.Count > 0)
{
//判斷右邊有沒有，如果有僅刪除左邊，如果沒有則右邊增加左邊刪除
for (i = 0; i <= UgListBox02.Items.Count - 1; i++)
{
if (UgListBox02.Items.Strings[i] == UgListBox01.Items.Strings[0])
{
findFlag = True;
Break;
}
}
if (findFlag)
{
UgListBox01.Items.Delete(1);
}
else
{
UgListBox02.Items.Add(UgListBox01.Items.Strings[0]);
UgListBox01.Items.Delete(0);
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
//PasScript
procedure UgWebRunFrameOnAfterRunScript(const sender: tobject);
begin
//UgListBox01中新增專案
UgListBox01.Items.Add('aaa');
UgListBox01.Items.Add('bbb');
UgListBox01.Items.Add('ccc');
UgListBox01.Items.Add('ddd');
UgListBox01.Items.Add('eee');
UgListBox01.Items.Add('fff');
//UgListBox02中新增專案
UgListBox02.Items.Add('111');
UgListBox02.Items.Add('222');
UgListBox02.Items.Add('333');
UgListBox02.Items.Add('444');
UgListBox02.Items.Add('555');
UgListBox02.Items.Add('666');
end;
procedure UgListBox01OnClick(sender: tobject);
//UgListBox01單擊選擇顯示
begin
if UgListBox01.ItemIndex < 0 Then
Exit;
UgEdit01.Text := UgListBox01.Items.Strings[UgListBox01.ItemIndex];
end;
procedure UgListBox02OnClick(sender: tobject);
//UgListBox02單擊選擇顯示
begin
if UgListBox02.ItemIndex < 0 Then
Exit;
UgEdit02.Text := UgListBox02.Items.Strings[UgListBox02.ItemIndex];
end;
procedure UgBitBtn01OnClick(sender: tobject);
//UgListBox02左移一個
var
findFlag: Boolean;
i,j: Integer;
begin
findFlag := False;
if UgListBox02.ItemIndex < 0 Then
Exit;
//判斷左邊有沒有，如果有僅刪除右邊，如果沒有則左邊增加右邊刪除
for i := 0 to UgListBox01.Items.Count - 1 Do
Begin
if UgListBox01.Items.Strings[i] = UgListBox02.Items.Strings[UgListBox02.ItemIndex] Then
Begin
findFlag := True;
Break;
End;
End;
if findFlag then
Begin
UgListBox02.Items.Delete(UgListBox02.ItemIndex);
End
else
Begin
UgListBox01.Items.Add(UgListBox02.Items.Strings[UgListBox02.ItemIndex]);
UgListBox02.Items.Delete(UgListBox02.ItemIndex);
End;
end;
procedure UgBitBtn02OnClick(sender: tobject);
//UgListBox1右移一個
var
findFlag: Boolean;
i,j: Integer;
begin
findFlag := False;
if UgListBox01.ItemIndex < 0 Then
Exit;
//判斷右邊有沒有，如果有僅刪除左邊，如果沒有則右邊增加左邊刪除
for i := 0 to UgListBox02.Items.Count - 1 Do
Begin
if UgListBox02.Items.Strings[i] = UgListBox01.Items.Strings[UgListBox01.ItemIndex] Then
Begin
findFlag := True;
Break;
End;
End;
if findFlag then
Begin
UgListBox01.Items.Delete(UgListBox01.ItemIndex);
End
else
Begin
UgListBox02.Items.Add(UgListBox01.Items.Strings[UgListBox01.ItemIndex]);
UgListBox01.Items.Delete(UgListBox01.ItemIndex);
End;
end;
procedure UgBitBtn03OnClick(sender: tobject);
//UgListBox02左移全部
var
findFlag: Boolean;
i,j: Integer;
begin
findFlag := False;
While UgListBox02.Items.Count > 0 Do
Begin
//判斷左邊有沒有，如果有僅刪除右邊，如果沒有則左邊增加右邊刪除
for i := 0 To UgListBox01.Items.Count - 1 Do
Begin
if UgListBox01.Items.Strings[i] = UgListBox02.Items.Strings[0] Then
Begin
findFlag := True;
Break;
End;
End;
if findFlag Then
Begin
UgListBox02.Items.Delete(1);
End
Else
Begin
UgListBox01.Items.Add(UgListBox02.Items.Strings[0]);
UgListBox02.Items.Delete(0);
End;
end;
end;
procedure UgBitBtn04OnClick(sender: tobject);
//UgListBox01右移全部
var
findFlag: Boolean;
i,j: Integer;
begin
findFlag := False;
While UgListBox01.Items.Count > 0 Do
Begin
//判斷右邊有沒有，如果有僅刪除左邊，如果沒有則右邊增加左邊刪除
for i := 0 To UgListBox02.Items.Count - 1 Do
Begin
if UgListBox02.Items.Strings[i] = UgListBox01.Items.Strings[0] Then
Begin
findFlag := True;
Break;
End;
End;
if findFlag Then
Begin
UgListBox01.Items.Delete(1);
End
Else
Begin
UgListBox02.Items.Add(UgListBox01.Items.Strings[0]);
UgListBox01.Items.Delete(0);
End;
end;
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
// Make sure to add code blocks to your code group
# 16. TUgPageControl
該元件為多頁面元件，在同一個視窗下，如果太多控制元件擺放不開或要分為不同功能子頁，可以使用該控制元件實現。選擇該控制元件后，點選左上角的新增按鈕可以進行新增頁面的操作。
# 16.1. 屬性
- TUgPageControl
| 屬性 | 說明 |
|---|---|
| ActivePage | 設定當前處於啟用狀態的頁面標籤 |
| Images | 設定頁面圖示集控制元件 |
- TUniTabSheet
| 屬性 | 說明 |
|---|---|
| Caption | 頁面的標籤名稱 |
| ImageIndex | 標籤使用的圖片的索引號 |
| PageControl | 設定其所屬的PageControl控制元件 |
| PageIndex | 設定頁面的索引值 |
# 16.2. 應用
UgPageControl是一個多頁面控制元件，在同一個視窗下，如果太多控制元件擺放不開或要分為不同功能子頁，可以使用該控制元件實現。
# 16.2.1. 佈局
在主窗體上擺放一個UgPageControl控制元件，點選該控制元件，點選下圖所示圖示新增三個頁面。該控制元件較為特殊，在設定屬性時要注意目前選中的是UgPageControl還是它的一個子頁面TabSheet，如果無法確定就在設計環境左上角控制元件樹結構里選擇控制元件。在頁面一TabSheet01擺放兩個UgButton，在頁面二TabSheet02上擺放兩個UgBitBtn，頁面三TabSheet03空著，再擺放一個UgRadioButton控制元件，用於外部控制頁面切換。
# 16.2.2. 功能
點選TabSheet，切換到不同界面，在不同頁面幹不同的事情。還可以通過按鈕組UgRadioGroup1實現外部控制UgPageControl的頁面更換。
# 16.2.3. 程式碼
//JScript
function UgRadioGroup01OnClick(sender)
{
//切換頁面
UgPageControl01.ActivePageIndex = UgRadioGroup01.ItemIndex;
}
1
2
3
4
5
6
2
3
4
5
6
//PasScript
procedure UgRadioGroup01OnClick(sender: tobject);
begin
//切換頁面
UgPageControl01.ActivePageIndex := UgRadioGroup01.ItemIndex;
end;
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
# 17. TUgGroupBox
該元件顯示為一個分組框，用於對窗體上的相關元件進行分組。當另一個元件元件放置在組框內時，組框將成為該元件的父元件。
# 17.1. 屬性
| 屬性 | 說明 |
|---|---|
| Caption | 分組框的名稱 |
# 17.2. 應用
UgGroupBox用於將控制元件分組組合起來，便於整體拖動和歸類顯示。除此之外無其他特殊功能。
# 17.3. 佈局
- UgGroupBox
| 屬性 | 取值 | 說明 |
|---|---|---|
| Caption | 分組 | 分組的標籤名稱 |
# 18. TUgRadioGroup
該元件是一組單選按鈕控制元件，即多個單選按鈕分成一組，組內按鈕互斥。直接放置在同一控制組件中的單選按鈕被稱為「分組」。當用戶單選按鈕時，其組中的所有其他單選按鈕都將取消選中。因此，只有將窗體放在單獨的容器（例如組框）中時，才能同時選擇窗體上的兩個單選按鈕。
# 18.1. 屬性
| 屬性 | 說明 |
|---|---|
| Columns | 設定選擇項顯示的列數 |
| Caption | 設定分組框顯示的標籤文字內容 |
| Items | 設定選項，回車換行 |
| ItemIndex | 設定預設選擇的選項 |
# 18.1.1. Columns
property Columns: Integer;
1
設定顯示的列數。
# 18.1.2. Caption
property Caption: TCaption;
1
設定顯示標籤的文字內容。
# 18.1.3. Items
property Items: TStrings;
1
設定選項的顯示資訊。
# 18.1.4. ItemIndex
property ItemIndex: Integer;
1
設定選項的索引值。
//JScript
UgEdit01.Text = UgRadioGroup01.Items.Strings[UgRadioGroup01.ItemIndex];
1
2
2
//PasScript
UgEdit01.Text := UgRadioGroup01.Items.Strings[UgRadioGroup01.ItemIndex];
1
2
2
// Make sure to add code blocks to your code group
# 18.2. 應用
UgRadioGroup控制元件就是一組單選按鈕控制元件，即多個單選按鈕分成一組，組內按鈕互斥，控制和擺放起來方便。
# 18.2.1. 佈局
在窗體上放置一個UgRadioGroup控制元件和一個UgEdit控制元件。
- UgRadioGroup01
| 屬性 | 取值 | 說明 |
|---|---|---|
| Items | 大/中/小 | 設定選項，回車換行 |
| ItemIndex | 0 | 預設第一個選中 |
| Columns | 3 | 三列顯示 |
| Caption | 請選擇型號 | 組標題 |
# 18.2.2. 功能
點選UgRadioGroup時，在UgEdit控制元件里顯示選中按鈕的內容。
# 18.2.3. 程式碼
//JScript
function UgRadioGroup01OnClick(sender)
{
UgEdit01.Text = UgRadioGroup01.Items.Strings[UgRadioGroup01.ItemIndex];
}
1
2
3
4
5
2
3
4
5
//PasScript
procedure UgRadioGroup01OnClick(sender: tobject);
begin
UgEdit01.Text := UgRadioGroup01.Items.Strings[UgRadioGroup01.ItemIndex];
end;
1
2
3
4
5
2
3
4
5
// Make sure to add code blocks to your code group
# 19. TUgContainerPanel
該元件為一個容器面板，實際運行時是顏色透明的，可以在其中放置控制元件，作為一個控制元件組來整合使用，通常用於進行整體佈局。
# 20. TUgPanel
該元件為一個容器面板，實際運行時帶有顏色以及字幕，其中可以放入控制元件，作為一個控制元件組來進行使用。此時此控制元件將作為父元件使用。
# 20.1. 屬性
| 屬性 | 說明 |
|---|---|
| Caption | 面板控制元件中顯示的字幕內容 |
| Collapsed | 面板目前是否處於收起狀態 |
| CollapseDirection | 面板收起的方向，預設為上下收起 |
| Collapsible | 面板是否支援收起 |
| Floating | 面板是否顯示出漂浮的效果 |
| ShowCaption | 是否在面板上顯示字幕檔案 |
| Title | 面板標題的名稱 |
| TitleAlign | 面板標題名稱的對齊方式 |
| TitlePosition | 面板標題的位置 |
| TitleVisible | 面板標題是否可見 |
# 20.1.1. Caption
property Caption: TCaption;
1
設定面板控制元件中顯示的字幕內容。
//JScript
UgPanel01.Caption = "Hola";
1
2
2
//PasScript
UgPanel01.Caption := 'Hola';
1
2
2
// Make sure to add code blocks to your code group
# 20.1.2. Collapsed
property Collapsed: Boolean;
1
設定面板是否處於收起狀態，該屬性僅在Collapsible屬性為True時有效。
Collapsible屬性為True且Collapsed屬性為True時面板的狀態：
Collapsible屬性為True且Collapsed屬性為False時面板的狀態：
# 20.1.3. CollapseDirection
該屬性設定面板收起的方向。該屬性需要與TitlePosition屬性配合使用。
| 名稱 | 說明 |
|---|---|
| cdDefault | 預設的模式，頂部收起 |
| cdLeft | 左側收起 |
| cdRight | 右側收起 |
| cdTop | 頂側收起 |
| cdBottom | 底側收起 |
接下來介紹幾種配合的模式。
//JScript
//頂部收起
UgPanel01.Collapsible = True;
UgPanel01.CollapseDirection = cdTop;
UgPanel01.TitlePosition = tpTop;
1
2
3
4
5
2
3
4
5
//PasScript
//頂部收起
UgPanel01.Collapsible := True;
UgPanel01.CollapseDirection := cdTop;
UgPanel01.TitlePosition := tpTop;
1
2
3
4
5
2
3
4
5
// Make sure to add code blocks to your code group
//JScript
//底部收起
UgPanel01.Collapsible = True;
UgPanel01.CollapseDirection = cdBottom;
UgPanel01.TitlePosition = tpBottom;
1
2
3
4
5
2
3
4
5
//PasScript
//底部收起
UgPanel01.Collapsible := True;
UgPanel01.CollapseDirection := cdBottom;
UgPanel01.TitlePosition := tpBottom;
1
2
3
4
5
2
3
4
5
// Make sure to add code blocks to your code group
//JScript
//左側收起
UgPanel01.Collapsible = True;
UgPanel01.CollapseDirection = cdLeft;
UgPanel01.TitlePosition = tpLeft;
1
2
3
4
5
2
3
4
5
//PasScript
//左側收起
UgPanel01.Collapsible := True;
UgPanel01.CollapseDirection := cdLeft;
UgPanel01.TitlePosition := tpLeft;
1
2
3
4
5
2
3
4
5
// Make sure to add code blocks to your code group
//JScript
//右側收起
UgPanel01.Collapsible = True;
UgPanel01.CollapseDirection = cdRight;
UgPanel01.TitlePosition = tpRight;
1
2
3
4
5
2
3
4
5
//PasScript
//右側收起
UgPanel01.Collapsible := True;
UgPanel01.CollapseDirection := cdRight;
UgPanel01.TitlePosition := tpRight;
1
2
3
4
5
2
3
4
5
// Make sure to add code blocks to your code group
# 20.1.4. Collpasible
property Collapsible: Boolean;
1
該屬性用於顯示是否能讓面板進行收起。當且僅當該選項為True時，才可以使用控制元件的相關收起的功能。
# 20.1.5. Floating
property Floating: Boolean;
1
該屬性用於顯示面板是否顯示漂浮的外觀。
# 20.1.6. ShowCaption
property ShowCaption: Boolean;
1
該屬性顯示是否顯示字幕。
# 20.1.7. Title
property Title: string;
1
面板的標題，該項僅在Collapsible屬性為True或者TitleVisible為True時顯示。
//JScript
UgPanel01.TitleVisible := True;
UgPanel01.Title = "Hola";
1
2
3
2
3
//PasScript
UgPanel01.TitleVisible := True;
UgPanel01.Title := 'Hola';
1
2
3
2
3
// Make sure to add code blocks to your code group
# 20.1.8. TitleAlign
property TitleAlign: TAlignment;
1
標題的對齊方式。
| 名稱 | 說明 | 圖例 |
|---|---|---|
| taLeftJustify | 標題左對齊 |  |
| taCenter | 標題居中 |  |
| taRightJustify | 標題右對齊 |  |
# 20.1.9. TitlePosition
property TitlePosition: TUniTitlePostion;
1
設定標題顯示的位置，該功能可以與CollapseDirection屬性配合使用。也可以單獨使用。在單獨使用時需要將TitleVisible屬性設定為True。
| 名稱 | 說明 | 圖例 |
|---|---|---|
| tpTop | 標題位於面板頂部 |  |
| tpBottom | 標題位於面板底部 |  |
| tpLeft | 標題位於面板左側 |  |
| tpRight | 標題位於面板右側 |  |
# 20.1.10. TitleVisible
property TitleVisible: Boolean;
1
是否顯示標題。
# 20.2. 應用
UgPanel是面板控制元件，可以放到視窗上和頁面上，可以把一些按鈕和輸入框等元件放到UgPanel上面，面板類控制元件還有兩個，一個是UgContainerPanel，另一個是UgHiddenPanel，前者只用來作為容器盛放控制元件，運行時顯示控制元件不顯示自己，後者運行時本身及上面的控制元件都將隱藏不顯示。UgPanel除了基本擺放控制元件的功能外還有摺疊停靠的功能。
# 20.2.1. 佈局
在主視窗上擺放一個UgPanel控制元件，設定屬性，實現在其上面擺放控制元件和左側停靠功能。再擺放一個UgContainerPanel控制元件和一個UgHiddenPanel控制元件，並分別為在三個不同類別的Panel上擺放一個UgBitBtn按鈕。
- UgPanel01
| 屬性 | 取值 | 說明 |
|---|---|---|
| Align | alLeft | 佈局沿線設定，此處為沿窗體左側佈局 |
| Collapsed | False | 是否摺疊起來 |
| Collapsible | True | 是否可以摺疊 |
| CollapseDirection | cdLeft | 摺疊的方向 |
# 20.2.2. 功能
點選摺疊按鈕左側面板摺疊，UgHiddenPanel01在運行時本身和上面的按鈕都被隱藏了，UgContainerPanel在運行時本身看不到，但是上面的按鈕能夠正常顯示。
# 21. TUgTopPanel
該元件顯示為一個帶有上側收起功能的面板，其屬性功能與TUgPanel相同。
# 22. TUgLeftPanel
該元件顯示為一個帶有左側收起功能的面板，其功能屬性與TUgPanel相同。
# 23. TUgRightPanel
該元件顯示為一個帶有右側收起功能的面板，其功能屬性與TUgPanel相同。
# 24. TUgBottomPanel
該元件顯示為一個帶有底部收起功能的面板，其功能屬性與TUgPanel相同。
# 25. TUgSimplePanel
該元件顯示為一個帶有顏色的面板，其功能與TUgContainerPanel相同。
# 26. TUgHiddenPanel
該元件預設顯示為一個不可見的面板，在其中的控制元件是不可見的狀態。可用於隱藏一些不需要顯示的控制元件。其功能屬性與TUgPanel相同。
# 27. TUgFieldSet
該元件顯示為一個框，其功能與TUgGroupBox類似，用於存放欄位相關的控制元件，在該元件中的控制元件可以自動對齊。
# 28. TUgFieldContainer
該元件顯示為一個容器，其功能與TUgContainerPanel類似，用於存放欄位相關的控制元件。
# 29. TUgNativeImageList
該元件為儲存圖示影象的列表元件，其中可存放圖片，在其他控制元件上的Image屬性中，可以指定該控制元件為該元件，指定ImageIndex為控制元件中的索引號將圖片展示在對應的控制元件中。
在設計界面上雙擊該控制元件，彈出圖片編輯的對話方塊：
點選左上角的新增按鈕，打開檔案上傳的界面：
點選[Browse...]打開圖片瀏覽選擇界面，選擇需要的圖片后，點選[確定]以返回到圖片上傳的界面，此時文字框中會顯示目前選擇的圖片。點選[Upload]即可上傳圖片至伺服器中，並且顯示在控制元件的圖片列表中；如不需要改圖片，點選[Cancel]。
圖片列表中的內容示例如圖，Index是圖片的索引號，在其他控制元件上，將其Images屬性設定為該控制元件，ImageIndex屬性設定為對應圖中的Index，即可顯示對應的影象。
UgNativeImageList是一個小圖示集合控制元件，雙擊控制元件可以增加一些16×16圖示，後續其他控制元件想用圖示裝飾，就可以在其Images屬性中關聯UgNativeImageList控制元件，然後讓其ImageIndex屬性指定要用圖示集的第幾個圖。
# 29.1. 應用
# 29.1.1. 佈局
在主窗體上放置一個UgBitBtn、一個UgPageControl，一個UgNativeImageList。雙擊UgNativeImageList01，Add Images 新增一些圖示。
將UgBitBtn01、UgPageControl01的Images屬性設定為UgNativeImageList01，分別選擇UgPageControl01的每個TabSheet，選擇UgBitBtn01將其ImageIndex設為UgNativeImageList01對應的小圖示編號。這樣就為每個控制元件或其子項關聯了小圖示。另外，還可以根據要關聯的控制元件大小清空設定UgNativeImageList01的Height和Width屬性，以設定圖示的合適大小。
# 29.1.2. 功能
# 30. TUgIconClsList
該元件是一個圖示庫元件，用於指定相簿列表控制元件引用的圖示相簿的資訊。圖示列表引用的是Font Aweson (opens new window)中的圖示，雙擊可打開圖示選擇器，自行選擇圖示匯入。
# 30.1. 屬性
| 屬性 | 說明 |
|---|---|
| IconText | 設定圖示的文字資訊 |
| ImageFilesFolderName | 圖片檔案所在的資料夾地址名稱 |
| UseGlobalCache | 設定是否使用全域性的快取 |
# 31. TUgStringGrid
該元件為一個表格元件，用於顯示錶格內容，表格中可指定顯示的文字內容。
# 31.1. 屬性
| 屬性 | 說明 |
|---|---|
| Cells | 選擇表格中的單元 |
| Col | 顯示目前選中的表格列索引 |
| ColWidths | 顯示選擇的列的寬度 |
| Row | 顯示目前選中的表格的行索引 |
| RowHeights | 顯示目前選擇的行的高度 |
| ColCount | 表格的列數 |
| DefaultColWidth | 設定預設的列寬 |
| DefaultRowHeight | 設定預設的行高 |
| FixedColor | 設定固定行與固定列的顏色 |
| FixedCols | 設定固定列的列數 |
| FixedRows | 設定固定行的行數 |
| ForceFit | 是否開啟控制元件大小隨表格的自適應功能 |
| HeaderTitle | 表格的標題 |
| HeaderTitleAlign | 表格標題的對齊方式 |
| LockFixedCols | 是否對待凍結的表格進行凍結 |
| Options | 表格設計選項 |
| RowCount | 表格的行數 |
| TabKeyBehaviour | 按下Tab按鍵時的行為 |
# 31.1.1. Cells
property Cells [ACol, ARow: Integer]: string;
1
該屬性用於選擇讀取或設定對應行列索引值對應的單元格中的內容。
//JScript
UgStringGrid01.Cells[1,1] = "Hola";
1
2
2
//PasScript
UgStringGrid01.Cells[1,1] := 'Hola';
1
2
2
// Make sure to add code blocks to your code group
# 31.1.2. Col
property Col: Integer;
1
該屬性用於獲取目前選擇的列索引值。
# 31.1.3. ColWidths
property ColWidths [Index: Longint]: Integer;
1
該屬性用於獲取目前選擇的列的列寬。
# 31.1.4. Row
property Row: Integer;
1
該屬性用於獲取目前選擇的行索引值。
# 31.1.5. RowHeights
property RowHeights [Index: Longint]: Integer;
1
該屬性用於獲取目前選擇的行的行高。
# 31.1.6. ColCount
property ColCount: Integer;
1
該屬性用於設定表格的列數。
//JScript
UgStringGrid01.ColCount = 5;
1
2
2
//PasScript
UgStringGrid01.ColCount := 5;
1
2
2
// Make sure to add code blocks to your code group
# 31.1.7. DefautltColWidth
property DefaultColWidth: Integer;
1
設定預設的表格列的寬度。
//JScript
UgStringGrid01.DefaultColWidth = 64;
1
2
2
//PasScript
UgStringGrid01.DefaultColWidth = 64;
1
2
2
// Make sure to add code blocks to your code group
# 31.1.8. DefaultRowHeight
property DefaultRowHeight: Integer;
1
設定預設的表格行的高度。
//JScript
UgStringGrid01.DefaultColWidth = 24;
1
2
2
//PasScript
UgStringGrid01.DefaultColWidth := 24;
1
2
2
// Make sure to add code blocks to your code group
# 31.1.9. FixedColor
property FixedColor: TColor;
1
設定固定單元格的顏色。
//JScript
UgStringGrid01.FixedColor = $00CBEDAE;
1
2
2
//PasScript
UgStringGrid01.FixedColor := $00CBEDAE;
1
2
2
// Make sure to add code blocks to your code group
1
# 31.1.10. FixedCols、FixedRows
property FixedCols: Integer;
property FixedRows: Integer;
1
2
2
該屬性用於設定固定行與固定列的數目。
//JScript
UgStringGrid01.FixedCols := 2;
UgStringGrid01.FixedRows := 2;
1
2
3
2
3
//PasScript
UgStringGrid01.FixedCols = 2;
UgStringGrid01.FixedRows = 2;
1
2
3
2
3
// Make sure to add code blocks to your code group
# 31.1.11. ForceFit
property ForceFit: Boolean;
1
該屬性用於開啟/關閉控制元件大小隨表格自適應的功能。
# 31.1.12. HeaderTitle
property HeaderTitle: string;
1
該屬性用於設定標題欄的內容。
//JScript
UgStringGrid01.HeaderTitle = "Hola";
1
2
2
//PasScript
UgStringGrid01.HeaderTitle := 'Hola';
1
2
2
// Make sure to add code blocks to your code group
# 31.1.13. HeaderTitleAlign
property HeaderTitleAlign: TAlignment;
1
該屬性用於設定標題的朝向。
| 取值 | 說明 | 圖示 |
|---|---|---|
| taLeftJustify | 標題左對齊 |  |
| taRightJustify | 標題右對齊 |  |
# 31.1.14. LockFixedCols
property LockFixedCols: Boolean;
1
是否凍結單元格，凍結后滾動表格時這些表格列會被固定。
# 31.1.15. RowCount
property RowCount: Integer;
1
目前表格的行數。
# 31.1.16. TabKeyBehaviour
property TabKeyBehavior: TUniGridTabKeyBehavior;
1
按下Tab按鍵后的行為。
| 取值 | 說明 |
|---|---|
| tkNextColumn | 聚焦至下一列 |
| tkNextComponent | 聚焦至下一個控制元件 |
# 32. TUgTreeView
該元件為一個樹形顯示界面控制元件，用樹形結構展示結點之間的關係。通過雙擊控制元件打開編輯器來編輯樹形結構的內容。
# 32.1. 屬性
| 屬性 | 說明 |
|---|---|
| Selected | 目前選擇的結點 |
| AutoExpand | 是否自動展開樹形結點 |
| Items | 樹形結點中的專案 |
| LoadOnDemand | 是否按需進行載入 |
| Title | 樹形列表的標題 |
| UseArrows | 是否在樹形結點的顯示上啟用箭頭 |
| UseCheckBox | 是否在樹形結點的顯示上啟用確認框 |
# 32.1.1. Selected
property Selected: TUniTreeNode;
1
顯示目前選擇的結點。
# 32.1.2. AutoExpand
property AutoExpand: Boolean;
1
是否自動展開結點。
# 32.1.3. Items
property Items: TUniTreeNodes;
1
該屬性中包含專案的新增刪除等操作。
選擇該控制元件，雙擊以打開專案編輯的視窗。在該視窗中，可以新增結點，子結點，刪除結點，結點上移、下移、左移、右移。如果該控制元件分配了影象列表元件，則可以直接通過指定索引號來獲取結點圖示。
該屬性下包含了部分方法。
- Items.Add
function Add(aParentItem: TUniTreeNode = nil; const S: string = ''): TUniTreeNode; virtual; abstract;
1
新增結點。
- Items.AddChild
function AddChild(Parent: TUniTreeNode; const S: string): TUniTreeNode; virtual; abstract;
1
新增子結點。
- Items.AddNode
function AddNode(Node: TUniTreeNode; Relative: TUniTreeNode; const S: string; Ptr: Pointer; Method: TUniNodeAttachMode): TUniTreeNode; virtual; abstract;
1
新增結點。
- Items.Clear
procedure Clear; virtual; abstract;
1
清除所有結點資訊。
- Items.Delete
procedure Delete(Node: TUniTreeNode); virtual; abstract;
1
刪除其選擇的結點以及其所屬的全部子結點。
- Items.FindNodeByCaption
function FindNodeByCaption(const ACaption: string): TUniTreeNode; virtual; abstract;
1
搜索該名稱的結點。
# 32.1.4. LoadOnDemand
property LoadOnDemand: Boolean;
1
是否根據需要進行結構的載入，這種方式可以在載入較大的樹形結構時提升效能。
# 32.1.5. Title
property Title: string;
1
樹形列表的標題。
//JScript
UgTreeView01.Title = "TreeView";
1
2
2
//PasScript
UgTreeView01.Title := 'TreeView';
1
2
2
// Make sure to add code blocks to your code group
# 32.1.6. UseArrows
property UseArrows: Boolean;
1
是否顯示箭頭。
//JScript
UgTreeView01.UseArrows = True;
1
2
2
//PasScript
UgTreeView01.UseArrows := True;
1
2
2
// Make sure to add code blocks to your code group
# 32.1.7. UseCheckBox
property UseCheckBox: Boolean;
1
是否顯示覆選框。
//JScript
UgTreeView01.UseCheckBox = True;
1
2
2
//PasScript
UgTreeView01.UseCheckBox := True;
1
2
2
// Make sure to add code blocks to your code group
# 32.2. 應用
# 32.2.1. 佈局
在視窗上擺放一個UgTreeView控制元件和幾個UgBitBtn控制元件，再放三個UgEdit控制元件。
# 32.2.2. 功能
點選UgBitBtn時在左側建立一個結構樹，點選UgBitBtn02時將左側選中的葉子節點刪除，非葉子節點不能刪除，點選UgBitBtn03時收起左側樹結構的所有節點，點選UgBitBtn04時展開左側樹結構的所有節點。
# 33. TUgTreeMenu
該元件為一個功能表欄元件，通常顯示于頁面的左側，通過指令碼向其中新增功能表專案，顯示詳細的功能表資訊。
# 33.1. 屬性
| 屬性 | 說明 |
|---|---|
| Animation | 是否在功能表收起展開時顯示動畫效果 |
| ExpanderFirst | 收起展開的標誌是否顯示在專案的左側 |
| ExpanderOnly | 是否僅點選收起展開按鈕才進行展開操作 |
| Items | 功能表欄的專案 |
| Micro | 是否僅顯示圖示按鈕 |
| MicroWidth | 在Micro模式下的功能表欄的寬度 |
| SingleExpand | 是否每次點選僅展開一個功能表結點 |
# 33.1.1. Animation
property Animation: Boolean;
1
功能表在收起與展開時會有滑動的動畫效果。
# 33.1.2. ExpanderFirst
property ExpanderFirst: Boolean;
1
功能表收起按鈕是否位於功能表項的左側。
| 取值 | 圖例 |
|---|---|
| True |  |
| False |  |
# 33.1.3. ExpanderOnly
property ExpanderOnly: Boolean;
1
該屬性如果為True，則僅在點選功能表欄中的收起按鈕時才會對功能表欄進行收起展開，否則點選功能表項就可以進行收起打開的操作。
# 33.1.4. Items
property Items: TUniTreeNodes;
1
功能表項的設定，在控制元件設計界面，雙擊該控制元件可以打開樹形功能表列表的編輯界面。在該界面下可以進行功能表建立、子功能表的建立，功能表的刪除、功能表的上移下移左移右移操作。
該屬性下包含了部分方法。
- Items.Add
function Add(aParentItem: TUniTreeNode = nil; const S: string = ''): TUniTreeNode; virtual; abstract;
1
新增結點。
- Items.AddChild
function AddChild(Parent: TUniTreeNode; const S: string): TUniTreeNode; virtual; abstract;
1
新增子結點。
- Items.AddNode
function AddNode(Node: TUniTreeNode; Relative: TUniTreeNode; const S: string; Ptr: Pointer; Method: TUniNodeAttachMode): TUniTreeNode; virtual; abstract;
1
新增結點。
- Items.Clear
procedure Clear; virtual; abstract;
1
清除所有結點資訊。
- Items.Delete
procedure Delete(Node: TUniTreeNode); virtual; abstract;
1
刪除其選擇的結點以及其所屬的全部子結點。
- Items.FindNodeByCaption
function FindNodeByCaption(const ACaption: string): TUniTreeNode; virtual; abstract;
1
搜索該名稱的結點。
# 33.1.5. Micro
property Micro: Boolean;
1
是否僅以MicroWidth設定的寬度進行功能表欄顯示。
| 取值 | 圖例 |
|---|---|
| False |  |
| True |  |
# 33.1.6. MicroWidth
property MicroWidth: Integer;
1
設定Micro下的顯示寬度。
# 33.1.7. SingleExpand
property SingleExpand: Boolean;
1
是否每次點選僅展開一個功能表結點。
UgTreeMenu是樹形結構功能表，一般可用於設計系統框架左側的功能導航功能表。
# 33.2. 應用
# 33.2.1. 佈局
在主窗體上擺放一個UgTreeMenu和兩個UgBitBtn，再放一個UgEdit。點選UgTreeMenu01,雙擊可打開樹形功能表編輯界面，也可以在指令碼中自動建立。
- UgTreeMenu01
| 屬性 | 取值 | 說明 |
|---|---|---|
| ExpanderFirst | True | 層級三角符號在前頭 |
| ExpanderOnly | True | |
| SingleExpand | True | 只有目前節點展開 |
| NavUI | True | 導航模式 |
# 33.2.2. 功能
點選按鈕1自動建立一個樹形功能表，點選按鈕2刪除選中功能表節點及其子功能表，點選功能表后將在UgEdit01中顯示點中的功能表項和層級關係。
# 33.2.3. 程式碼
//JScript
//在按鈕1的點選事件里新增建立功能表樹的程式碼
function UgBitBtn01OnClick(sender)
//建立二級功能表節點
// mainMenu: TUniTreeNode; //定義主功能表項變數
// subMenu: TUniTreeNode; //定義子功能表項變數
// i,j:Integer; //定義臨時變數
{
var MainMenu,subMenu,i,j;
for (i = 1; i <= 5; i++)
{
mainMenu = UgTreeMenu01.Items.Add(nil,"mainMenu_" + IntToStr(i)); //建立主功能表項
for (j = 1; j <= 10; j++)
{
subMenu = UgTreeMenu01.Items.Add(mainMenu,"subMenu_" + IntToStr(j)); //建立子功能表項
}
}
UgTreeMenu01.Selected = Nil //設定為不選中
}
//在UgTreeMenu樹功能表的OnClick事件中新增顯示選中功能表項的程式碼
function UgTreeMenu01OnClick(sender)
//顯示二級功能表內容
// tmpStr1,tmpStr2: String;
{
var tmpStr1,tmpStr2;
if (UgTreeMenu01.Selected.Level == 0)
{
tmpStr1 = UgTreeMenu01.Selected.Text;
UgEdit01.Text = tmpStr1;
}
else
{
tmpStr1 = UgTreeMenu01.Selected.Parent.Text;
tmpStr2 = UgTreeMenu01.Selected.Text;
UgEdit01.Text = tmpStr1 + "->" + tmpStr2;
}
}
//在按鈕2的點選事件中新增刪除選中功能表項的程式碼
function UgBitBtn02OnClick(sender)
//刪除選中功能表及所有子項
{
if (UgTreeMenu01.Selected != nil)
{
UgTreeMenu01.Selected.Free;
UgTreeMenu01.Selected = nil;
}
}
//在主視窗的OnAfterRunScript事件中新增初始化程式碼
function UgWebRunFrameOnAfterRunScript(sender)
{
UgTreeMenu01.Selected = Nil;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
//PasScript
//在按鈕1的點選事件里新增建立功能表樹的程式碼
procedure UgBitBtn01OnClick(sender: tobject);
//建立二級功能表節點
var
mainMenu: TUniTreeNode; //定義主功能表項變數
subMenu: TUniTreeNode; //定義子功能表項變數
i,j:Integer; //定義臨時變數
begin
for i := 1 to 5 do
Begin
mainMenu := UgTreeMenu01.Items.Add(nil,'mainMenu_' + IntToStr(i)); //建立主功能表項
for j := 1 to 10 Do
Begin
subMenu := UgTreeMenu01.Items.Add(mainMenu,'subMenu_' + IntToStr(j)); //建立子功能表項
End;
end;
UgTreeMenu01.Selected := Nil //設定為不選中
end;
//在UgTreeMenu樹功能表的OnClick事件中新增顯示選中功能表項的程式碼
procedure UgTreeMenu01OnClick(sender: tobject);
//顯示二級功能表內容
var
tmpStr1,tmpStr2: String;
begin
if UgTreeMenu01.Selected.Level = 0 Then
Begin
tmpStr1 := UgTreeMenu01.Selected.Text;
UgEdit01.Text := tmpStr1;
End
Else
Begin
tmpStr1 := UgTreeMenu01.Selected.Parent.Text;
tmpStr2 := UgTreeMenu01.Selected.Text;
UgEdit01.Text := tmpStr1 + '->' + tmpStr2;
End;
end;
//在按鈕2的點選事件中新增刪除選中功能表項的程式碼
procedure UgBitBtn02OnClick(sender: tobject);
//刪除選中功能表及所有子項
begin
if UgTreeMenu01.Selected <> nil Then
Begin
UgTreeMenu01.Selected.Free;
UgTreeMenu01.Selected := nil;
End;
end;
//在主視窗的OnAfterRunScript事件中新增初始化程式碼
procedure UgWebRunFrameOnAfterRunScript(const sender: tobject);
begin
UgTreeMenu01.Selected := Nil;
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
// Make sure to add code blocks to your code group
# 34. TUgTimer
該元件為一個計時器元件，能夠定時觸發OnTimer事件，完成模擬時鐘、系統延時、倒計時等工作。
# 34.1. 屬性
| 屬性 | 說明 |
|---|---|
| ChainMode | 是否開啟連鎖佇列模式 |
| DummyEvents | 啟用該模式可以定時觸發心跳事件使瀏覽器的會話連線不會因為超時斷開 |
| Interval | 計時事件的觸發間隔，以ms為單位 |
| RunOnce | 是否僅進行一次事件觸發 |
# 34.1.1. ChaimMode
property ChainMode: Boolean;
1
該屬性用於開啟/關閉連鎖佇列模式，這是一個使計時器事件連鎖化的特殊模式，計時器會按照時間間隔定時觸發事件，如果伺服器因為繁忙正在處理上一個OnTimer事件，那麼這些事件會在客戶端以佇列的形式進行排隊等待伺服器處理。
如果你的計時器觸發時間間隔為5s，你的伺服器需要使用30s的時間進行處理的話，那麼你就需要使用該屬性來為這些事件進行佇列化。
# 34.1.2. DummyEvents
property DummyEvents: Boolean;
1
該屬性用於為會話設定心跳事件，避免會話超時。
# 34.1.3. Interval
property Interval: Cardinal;
1
設定事件觸發的時間間隔。
# 34.1.4. RunOnce
property RunOnce: Boolean;
1
是否僅進行一次事件觸發操作。
# 34.2. 應用
UgTimer控制元件主要用於瀏覽器端的定時功能。比如我們可以使用該元件用於更新時間的功能。
- UgTimer01
| 屬性 | 取值 | 說明 |
|---|---|---|
| Enabled | True | 啟動 |
| Interval | 1000 | 動作週期，單位為毫秒 |
| RunOnce | False | 定時執行，並非只運行一次 |
# 34.2.1. 功能
顯示目前時間。
# 34.2.2. 程式碼
//JScript
function UgTimer01OnTimer(sender)
{
UgLabel01.Caption = "Now:" + DateTimeToStr(Now());
}
1
2
3
4
5
2
3
4
5
//PasScript
procedure UgTimer01OnTimer(sender: tobject);
begin
UgLabel01.Caption := 'Now:' + DateTimeToStr(Now());
end;
1
2
3
4
5
2
3
4
5
// Make sure to add code blocks to your code group