标准控件
# 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