附加控件
# FastWeb附加控件
- 适用平台： WEB(桌面)
附加控件组中包含建立网页使用到的其他控制组件以及一些共同的界面元素。
# 1. TUgBitBtn
该组件显示为一个可以设置图片显示的按钮组件。其功能用法与TUgButton类似。
# 1.1. 属性
| 属性 | 说明 |
|---|---|
| Caption | 按钮显示的字符内容 |
| Glyph | 设置按钮显示的图片 |
# 1.1.1. Caption
property Caption: TCaption;
按钮上显示的字符。
//JScript
UgBitBtn01.Caption = "Hola";
2
//PasScript
UgBitBtn01.Caption := 'Hola';
2
// Make sure to add code blocks to your code group
# 2. TUgSpeedButton
该组件显示为一个按钮。其功能与TUgBitnBtn类似。
# 2.1. 属性
| 属性 | 说明 |
|---|---|
| Caption | 显示按钮上的字幕内容 |
| Glyph | 设置按钮显示的图片 |
# 2.1.1. Caption
property Caption: TCaption;
按钮上显示的字符。
# 3. TUgVerticalLine
该组件显示为一条垂直的线，可在界面布局中通常用作分组的分隔线。起到装饰或者是美化外观的作用。
# 3.1. 属性
| 属性 | 说明 |
|---|---|
| Color | 设置控件的背景颜色 |
| LineColor | 设置细线的颜色 |
# 3.1.1. Color
property Color: TColor;
设置控件的背景颜色。
# 3.1.2. LineColor
property LineColor: TColor;
设置控件的细线的颜色。
# 4. TUgImage
该组件显示为一个图像显示的控件。可通过其中的属性来设置显示图片，可以显示包含位图，图标，PNG，GIF或JPEG图像。
# 4.1. 属性
| 属性 | 说明 |
|---|---|
| Center | 图像画面是否在控件中居中 |
| Picture | 属性用于指定图像内容 |
| Stretch | 是否对画面进行拉伸以适应图像控件的大小 |
| Url | 指定图片后面的链接，点击以跳转打开指定URL的网页页面 |
# 4.1.1. Center
property Center: Boolean;
图像画面是否在控件中处于中心位置。
| 取值 | 图例 |
|---|---|
| True |  |
| False |  |
# 4.1.2. Picture
property Picture: TPicture;
该属性用于指定图像控件中显示的控件。
选择左侧的Picture属性，点击其右侧的√，打开图片加载对话框。
点击[Load]按钮，打开图片上传对话框。
点击[Browse...]按钮，打开选择图片的对话框，选择图片后，点击[确定]按钮返回至该界面，此时上传图片的对话框中已包含图片路径。点击[Upload]按钮以上传图片。
在图片编辑器界面中显示的是刚才上传的图片，确认无误后，点击[Save]按钮，此时图片控件中会显示出该图片。
# 4.1.3. Stretch
property Stretch: Boolean;
是否对画面进行拉伸以适应图片控件的大小。
| 取值 | 图例 |
|---|---|
| False | |
| True |  |
# 4.1.4. Url
property Url: string;
该属性为图片指定一个外部地址。
//JScript
function UgImage01OnClick(sender)
{
UgImage01.url = "\"http://www.isoface.cn\"";
UniSession.AddJS("window.open(" + UgImage01.url + ",\"newwindow\")");
}
2
3
4
5
6
//PasScript
procedure UgImage01OnClick(sender: tobject);
begin
UgImage01.url := '"http://www.isoface.cn"';
UniSession.AddJS('window.open(' + UgImage01.url + ',"newwindow")');
end;
2
3
4
5
6
// Make sure to add code blocks to your code group
# 4.2. 应用
UgImage是图片控件，可以关联到一个图片文件上，显示图片。
# 4.2.1. 布局
在主窗体上放一个UgImage图像控件。
- UgImage01
| 属性 | 取值 | 说明 |
|---|---|---|
| Picture | 自行上传 | |
| Center | True | 中间对齐 |
| Stretch | True | 缩放对齐 |
# 4.2.2. 功能
显示图片，如果点击图片则浏览器打开一个新页面，访问图片关联的一个URL链接。
# 4.2.3. 代码
//JScript
function UgImage01OnClick(sender)
{
var url;
UgImage01.url = "\"http://www.isoface.cn\"";
UniSession.AddJS("window.open(" + UgImage01.url + ",\"newwindow\")");
}
2
3
4
5
6
7
//PasScript
procedure UgImage01OnClick(sender: tobject);
var
url: String;
begin
url := '"http://www.isoface.cn"';
UniSession.AddJS('window.open(' + url + ',"newwindow")');
end;
2
3
4
5
6
7
8
// Make sure to add code blocks to your code group
# 5. TUgTrackBar
该组件显示为一个轨迹条组件，设定最小值及最大值后，按住鼠标拖动，上方会显示一个数字标记，且随着鼠标的移动实现数值的动态变化。
# 5.1. 属性
| 属性 | 说明 |
|---|---|
| Max | 控件设定的最大值 |
| Min | 控件设定的最小值 |
| Orientaion | 控件的朝向 |
| Position | 滑块指向的位置 |
# 5.1.1. Max、Min
property Max: Integer;
property Min: Integer;
2
滑轨设定的最大值。 滑轨设定的最小值。
//JScript
UgTrackBar01.Max = 20;
UgTrackBar01.Min = -2;
2
3
//PasScript
UgTrackBar01.Max := 20;
UgTrackBar01.Min := -2;
2
3
// Make sure to add code blocks to your code group
# 5.1.2. Orientation
property Orientation: TTrackBarOrientation;
该属性设定滑块的方向。
| 取值 | 说明 | 图例 |
|---|---|---|
| trHorizontal | 滑轨块水平放置 |  |
| trVertical | 滑轨垂直放置 |  |
# 5.1.3. Position
property Position: Integer;
该属性指定滑块所在的位置。
//JScript
UgTrackBar.Position = 3;
2
//PasScript
UgTrackBar.Position := 3;
2
// Make sure to add code blocks to your code group
# 6. TUgSplitter
该组件为一个分割条，用于分隔两块界面区域，拖动该份分割条还可以改变两个区域的显示大小。通过修改其Align属性可以修改其拖动的方向。
# 6.1. 属性
| 属性 | 说明 |
|---|---|
| Align | 控件的对齐方式 |
# 6.1.1. Align
property Align: TAlign;
该属性用于控制控件的对齐方式。
# 6.2. 应用
在界面设计时可能需要为主窗口分区域，不同区域显示不同内容，比如分为左右两个区域，UgSplitter放在两个区域中间，用于调整两个区域的横向宽度或纵向宽度，本例演示调整左右宽度。UgSplitter一般和UgPanel或其他控件结合使用。
# 6.2.1. 布局
在主窗体上先仅放一个UgPanel并将其Align设置为左对齐，再放置一个UgSplitter并将其Align设置为左对齐，再放置一个UgPanel并将其Align设置为剩余控件占用，此时UgSplitter01应该在两个UgPanel的中间。
- UgPanel01
| 属性 | 取值 | 说明 |
|---|---|---|
| Align | alLeft | 左侧占满 |
- UgSplitter01
| 属性 | 取值 | 说明 |
|---|---|---|
| Align | alLeft | 左侧占满 |
- UgPanel02
| 属性 | 取值 | 说明 |
|---|---|---|
| Align | alClient | 剩余全部占满 |
# 6.2.2. 功能
拖动两个UgPanel之间的UgSplitter分割条，就可以实现调整两边的控件大小。
# 7. TUgScrollBox
该组件可以作为一个组件容器来使用，当其中的控件内容小于控件的尺寸时，在容器中会显示滚动条。
# 8. TUgDateTimePicker
该组件显示为一个时间日期的选择组件，点击编辑框右侧的按钮，在编辑框的下侧会显示可选择的日历进行时间日期的选择。选择点击后，选择的日期会显示在编辑框中。
# 8.1. 属性
| 属性 | 说明 |
|---|---|
| ClearButton | 是否在日期处显示清除按钮 |
| DateFormat | 日期的显示格式 |
| DateMode | 日期的模式 |
| DateTime | 日期时间 |
| FirstDayOfWeek | 设定一周的开始 |
| Kind | 设定显示模式 |
| TimeFormat | 在DateFormat模式下，规定时间的显示模式 |
# 8.1.1. ClearButton
property ClearButton: Boolean;
是否在控件中显示清除按钮。
//JScript
UgDateTimePicker01.ClearButton = True;
2
//PasScript
UgDateTimePicker01.ClearButton := True;
2
// Make sure to add code blocks to your code group
# 8.1.2. DateFormat
property DateFormat: string;
设置日期的显示格式。
//JScript
UgDateTimePicker01.DateFormat = "yyyy/MM/dd";
2
//PasScript
UgDateTimePicker01.DateFormat := 'yyyy/MM/dd';
2
// Make sure to add code blocks to your code group
# 8.1.3. DateMode
property DateMode: TUniDateMode;
设置日期时间的显示内容。
| 名称 | 图示 |
|---|---|
| dtmDateOnly |  |
| dtmDateTime |  |
# 8.1.4. DateTime
property DateTime: TDateTime;
设置显示的日期与时间。
# 8.1.5. FirstDayOfWeek
property FirstDayOfWeek: TCalDayOfWeek;
设置一周的第一天。默认为dowMonday。
# 8.1.6. Kind*
property Kind: TUniDateTimeKind;
设定控件的时间日期选择框的类型。目前该控件暂时无法实现在属性编辑器中进行Kind属性的更改。推荐使用脚本进行更改。
//JScript
UgDateTimePicker01.Kind = tUniDate;
UgDateTimePicker01.Kind = tUniDateTime;
UgDateTimePicker01.Kind = tUniTime;
2
3
4
//PasScript
UgDateTimePicker01.Kind := tUniDate;
UgDateTimePicker01.Kind := tUniDateTime;
UgDateTimePicker01.Kind := tUniTime;
2
3
4
// Make sure to add code blocks to your code group
| 名称 | 说明 |
|---|---|
| tUniDate |  |
| tUniDateTime |  |
| tUniTime |  |
# 8.1.7. TimeFormat
property TimeFormat: string;
设置时间的显示格式。
//JScript
UgDateTimePicker01.Kind = tUniTime;
UgDateTimePicker01.TimeFormat = "HH mm ss";
2
3
//PasScript
UgDateTimePicker01.Kind := tUniTime;
UgDateTimePicker01.TimeFormat := 'HH mm ss';
2
3
// Make sure to add code blocks to your code group
日期、时间选择输入控件。
# 8.2. 应用
# 8.2.1. 布局
在主窗体上放两个UgDateTimePicker控件和两个UgEdit控件。
- UgDateTimePicker01
| 属性 | 取值 | 说明 |
|---|---|---|
| DateFormat | yyyy-MM-dd | 日期格式 |
| DateMode | dtmDateTime | 日期类型 |
- UgDateTimePicker02
| 属性 | 取值 | 说明 |
|---|---|---|
| DateFormat | yyyy-MM-dd | 日期格式 |
| DateMode | dtmDateOnly | 日期类型 |
# 8.2.2. 功能
UgDateTimePicker01用于设定日期与时间，UgDateTimePicker02用于设定日期，各个UgDateTimePicker控件日期发生改变时在右面对应的UgEdit控件里显示日期时间。在程序初始化时两个日期时间控件都设置为当前的日期或时间。
# 8.2.3. 代码
//JScript
//初始化
function UgWebRunFrameOnAfterRunScript(sender)
{
UgDateTimePicker01.DateTime = now();
UgDateTimePicker02.DateTime = now();
}
//日期控件的OnChange事件
function UgDateTimePicker01OnChange(sender)
{
UgEdit01.Text = FormatDateTime("yyyy-MM-dd hh:nn:ss",UgDateTimePicker01.DateTime);
}
function UgDateTimePicker02OnChange(sender)
{
UgEdit02.Text = FormatDateTime("yyyy-MM-dd",UgDateTimePicker02.DateTime);
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//PasScript
//初始化
procedure UgWebRunFrameOnAfterRunScript(const sender: tobject);
begin
UgDateTimePicker01.DateTime := now();
UgDateTimePicker02.DateTime := now();
end;
//日期控件的OnChange事件
procedure UgDateTimePicker01OnChange(sender: tobject);
begin
UgEdit01.Text := FormatDateTime('yyyy-MM-dd hh:nn:ss',UgDateTimePicker01.DateTime);
end;
procedure UgDateTimePicker02OnChange(sender: tobject);
begin
UgEdit02.Text := FormatDateTime('yyyy-MM-dd',UgDateTimePicker02.DateTime);
end;
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Make sure to add code blocks to your code group
# 9. TUgCalendar
该组件显示为可点击选择日期进行查看的日历控件，点击后，可在Date属性中获取到选择的日期值。
# 9.1. 属性
| 属性 | 说明 |
|---|---|
| Date | 显示日期 |
# 9.1.1. Date
property Date: TDateTime;
该属性为显示时间。
# 10. TUgCalendarDialog
该组件为日期选择的对话框。在运行时调用Execute方法可弹出对话框。
# 10.1. 属性
| 属性 | 说明 |
|---|---|
| Date | 显示日期 |
# 10.1.1. Date
property Date: TDateTime;
该属性为显示时间。可通过Exectue方法选择来获取时间信息。
# 10.2. 方法
# 10.2.1. Execute
procedure Execute;
该方法调用时会弹出日期选择的对话框，选择日期后，点击[OK]，该日期会存放在Date属性中。
UgCalendarDialog01.Execute;
# 11. TUgURLFrame
该组件显示为一个网页边框，为其指定地址可显示对应的网页内容。比如指定HTML属性，在其中输入HTML标记文本后，可显示预览的效果。或者是在URL地址中指定URL地址，可直接打开指定的页面。也可双击打开JQuery组件管理器。具体的使用方法可参考JQuery组件。
# 11.1. 属性
| 属性 | 说明 |
|---|---|
| GUID | 设置组件引用的全局ID名称 |
| HTML | 如果URL属性为空，设定其中显示的HTML内容 |
| URL | 指定控件显示的网页的地址 |
# 11.1.1. GUID
property GUID: string;
设置组件引用的全局ID。
# 11.1.2. HTML
property HTML: TStrings;
该属性为设定网页中显示的内容。如果URL属性不为空，则会显示URL指定的内容。
# 11.1.3. URL
property URL: string;
该属性指定显示网页的地址。
# 11.2. 事件
| 名称 | 触发条件 |
|---|---|
| OnFrameLoaded | 当页面加载完成时触发该事件 |
# 11.3. 方法
# 11.3.1. Init
procedure Init(const AGUID: string);
初始化显示设置。如脚本中未填写参数信息，将使用控件中的默认设置进行显示。
//JScript
//在GUID属性中设置了内容的，直接初始化
UgURLFrame01.Init;
//选择特定GUID的内容进行初始化
UgURLFrame01.Init("E65E69B8-D584-4199-AC82-F0A4D37902FF");
2
3
4
5
6
//PasScript
//在GUID属性中设置了内容的，直接初始化
UgURLFrame01.Init;
//选择特定GUID的内容进行初始化
UgURLFrame01.Init('E65E69B8-D584-4199-AC82-F0A4D37902FF');
2
3
4
5
6
// Make sure to add code blocks to your code group
# 11.3.2. JSONToData
procedure JSONToData(const Value: string);
将JSON序列化的数据传递至控件实现参数的传递。
//JScript
//单个参数传递
UgURLFrame01.JSONTOData("{\"param_value\":\"11\"}");
//多个参数的传递
UgURLFrame01.JSONTOData("{\"param_value1\":\"11\"},{\"param_value2\":\"22\"}");
2
3
4
5
//PasScript
//单个参数传递
UgURLFrame01.JSONTOData('{"param_value":"11"}');
//多个参数的传递
UgURLFrame01.JSONTOData('{"param_value1":"11"},{"param_value2":"22"}');
2
3
4
5
// Make sure to add code blocks to your code group
# 11.4. 应用
UgURLFrame顾名思义，是通过URL地址访问一个WEB页面。
# 11.4.1. 布局
在主窗口上放置一个UgURLFrame控件。
- UgURLFrame01
| 属性 | 取值 | 说明 |
|---|---|---|
| Align | alClient | 全部占满窗口 |
# 11.4.2. 功能
窗口一运行就打开预设的URL地址，本例直接访问http://www.isoface.cn (opens new window)。
# 11.4.3. 代码
//JScript
function UgWebRunFrameOnAfterRunScript(sender)
{
UgURLFrame01.URL = "http://www.isoface.cn";
}
2
3
4
5
//PasScript
procedure UgWebRunFrameOnAfterRunScript(const sender: tobject);
begin
UgURLFrame01.URL := 'http://www.isoface.cn';
end;
2
3
4
5
// Make sure to add code blocks to your code group
# 12. TUgPDFFrame
该组件显示为一个PDF阅读器。该阅读器可加载服务器上指定目录下的文件，也可以载入指定URL下的pdf文件（该功能需调整文件服务器端的CROS以及本地的CROS以实现跨域请求）。
# 12.1. 属性
| 属性 | 说明 |
|---|---|
| PdfURL | 设置pdf文件的地址，可以是服务器的本地地址也可以是远程地址 |
# 12.1.1. PdfURL
property PdfURL: string;
设置pdf文件的地址。
//JScript
//在服务器端的files文件夹下，放置一个pdf文件，命名为sample.pdf。
UgPDFFrame01.PdfURL = UGSM.FilesFolder+"sample.pdf";
2
3
//PasScript
//在服务器端的files文件夹下，放置一个pdf文件，命名为sample.pdf。
UgPDFFrame01.PdfURL := UGSM.FilesFolder+'sample.pdf';
2
3
// Make sure to add code blocks to your code group
# 12.2. 事件
| 名称 | 触发条件 |
|---|---|
| OnFrameLoaded | 当页面加载完成时触发该事件 |
# 12.3. 应用
UgPDFFrame是一个能够在浏览器里打开服务器端PDF文件的控件，支持打印功能，支持自动目录。
# 12.3.1. 布局
在主窗体上放一个UgPDFFrame控件。在服务器端的files文件夹下，放置一个pdf文件夹，并命名为sample.pdf。
- UgPDFFrame01
| 属性 | 取值 | 说明 |
|---|---|---|
| Align | alClient | 全部占满窗口 |
# 12.3.2. 功能
在浏览器中打开PDF文件。
# 12.3.3. 代码
//JScript
function UgWebRunFrameOnAfterRunScript(sender)
{
UgPDFFrame01.PdfURL = UGSM.FilesFolder+"sample.pdf";
}
2
3
4
5
6
//PasScript
procedure UgWebRunFrameOnAfterRunScript(const sender: tobject);
begin
UgPDFFrame01.PdfURL := UGSM.FilesFolder+'sample.pdf';
end;
2
3
4
5
// Make sure to add code blocks to your code group
# 13. TUgHTMLFrame
该组件显示为一个HTML页面，该页面仅可用于显示格式化的输入的HTML标记文本，不可自行指定URL。
# 13.1. 属性
| 属性 | 说明 |
|---|---|
| HTML | 设定显示在界面中的内容 |
| AutoScroll | 是否显示滚动条 |
# 13.1.1. HTML
property HTML: TStrings;
该属性用于指定显示的HTML内容。
# 13.1.2. AutoScroll
property AutoScroll:Boolean;
该属性用于设置是否显示滚动条。
| 名称 | 图例 |
|---|---|
| True |  |
| False |  |
# 14. TUgScreenMask
该组件为一个屏幕遮罩，在需要的时刻可作为一个保护控件使用，比如在加载过程中使用，提升系统的用户体验。
# 14.1. 属性
| 属性 | 说明 |
|---|---|
| AttachedControl | 设定关联的控件 |
| DisplayMessage | 控件启用时显示的信息 |
| TargetControl | 设定目标控件 |
# 14.1.1. AttachedControl
property AttachedControl: TComponent;
该属性指定触发活动使用的控件。
# 14.1.2. DisplayMessage
property DisplayMessage: string;
该属性指定触发活动时显示的文字信息。
# 14.1.3. TargetControl
property TargetControl: TControl;
该属性设定使用该遮罩效果的控件。
遮罩效果的控件设置请在属性编辑器中进行，脚本中的编辑无效。
# 15. TUgFileUpload
该组件为用于向服务器上传文件的对话框。点击Browse...可打开文件选择的对话框，在其中选择完成文件后，在编辑框中会显示选择的文件名称，点击Upload可将文件上传至指定的目录中。
# 15.1. 属性
| 属性 | 说明 |
|---|---|
| ButtonOnly | 对话框是否仅显示按钮 |
| ButtonWidth | 设定Browse按钮的宽度 |
| EraseCacheAfterCompleted | 是否在完成后清除缓存 |
| Filter | 设定文件的分类 |
| MaxAllowedSize | 设定上传文件的大小限制 |
| Messages | 设定上传对话框中显示的信息的内容 |
| MultipleFiles | 是否允许上传多个文件 |
| OptimizeMemoryUsage | 是否进行内存优化的管理 |
| OverWrite | 是否允许覆盖文件 |
| Title | 对话框的标题 |
# 15.1.1. ButtonOnly
property ButtonOnly: Boolean;
该属性用于控制是否显示内容框。
| 名称 | 图例 |
|---|---|
| True |  |
| False | |
# 15.1.2. ButtonWidth
property ButtonWidth: Integer;
设定按钮的显示宽度。
# 15.1.3. EraseCacheAfterCompleted
property EraseCacheAfterCompleted: Boolean;
该属性设定是否在完成后清除缓存。
# 15.1.4. Filter
property Filter: string;
该属性用于指定在浏览对话框中显示特定类型的文件。
//JScript
UgFileUpload01.Filter = "*.jpg";
UgFileUpload01.Execute;
2
3
//PasScript
UgFileUpload01.Filter := '*.jpg';
UgFileUpload01.Execute;
2
3
// Make sure to add code blocks to your code group
# 15.1.5. MaxAllowedSize
property MaxAllowedSize: Cardinal;
该属性为允许上传的文件的最大大小。单位为字节，为0时表示不限制。
# 15.1.6. Messages
property Messages: TUniCustomUploadMessages;
该属性设置显示的提示信息内容。
| 名称 | 说明 |
|---|---|
| BrowseText | 浏览按钮显示的内容 |
| Cancel | 取消按钮显示的内容 |
| MaxFilesError | 上传文件的数量超过限制后显示的提示信息 |
| MaxSizeError | 上传文件的大小超过限制后显示的提示信息 |
| NoFileError | 未选择上传的文件时的提示信息 |
| PleaseWait | 等待时显示的提示信息 |
| Processing | 正在处理过程中显示的提示信息 |
| Upload | 上传按钮显示的内容 |
| UploadError | 文件上传错误 |
| Uploading | 文件正在上传的提示信息 |
| UploadTimeOut | 文件上传超时的提示信息 |
# 15.1.7. MultipleFiles
property MultipleFiles: Boolean;
该属性设置控件是否允许多个文件上传。
# 15.1.8. OptimizeMemoryUsage
property OptimizeMemoryUsage: Boolean;
该属性设置控件是否进行内存优化。
# 15.1.9. OverWrite
property Overwrite: Boolean;
该属性设置控件是否允许对之前的文件进行覆盖操作。
# 15.1.10. Title
property Title: string;
该属性设定对话框的标题名称。
# 15.2. 事件
| 名称 | 触发条件 |
|---|---|
| OnCompleted | 当控件完成上传时触发该事件 |
| OnMultiCompleted | 当控件完成多个文件上传时触发该事件 |
# 15.3. 方法
# 15.3.1. Execute
function Execute: Boolean; override;
该方法用于执行打开文件上传的对话框。
//JScript
UgFileUpload01.Execute;
2
//PasScript
UgFileUpload01.Execute;
2
// Make sure to add code blocks to your code group
# 15.3.2. ExecuteN
procedure ExecuteN; override;
该方法用于执行打开文件上传的对话框。
UgFileUpload01.ExecuteN;
# 15.4. 应用
UgFileUpload是一个文件上传控件，其机制是先将文件上传到服务器，再做文件大小判断。
# 15.4.1. 布局
在主窗体上放置UgFileUpload和一个UgBitBtn，一个UgImage。
- UgFileUpload01
| 属性 | 取值 | 说明 |
|---|---|---|
| MaxAllowedSize | 52428800 | 50M大小的限制，单位为字节 |
| Message | 对话框信息 | 下方包含的文字内容 |
| BrowseText | 打开 | 选择文件按钮 |
| Cancel | 取消 | |
| NoFileError | 请选择一个文件 | |
| PleaseWait | 请等待 | |
| Processing | 正在处理 | |
| Upload | 上传 | |
| UploadError | 上传错误 | |
| Uploading | 正在上传 | |
| Overwrite | True | 文件存在就覆盖 |
| targetFolder | /abc | 保存到运行主目录下的abc子目录下 |
| width | 500 | 上传对话框宽度 |
# 15.4.2. 功能
点击按钮1，弹出文件上传对话框，点击[打开]选择要上传的文件，点击[上传]，上传选择的文件。上传完成后将触发其OnCompleted事件。
# 15.4.3. 代码
//JScript
function UgBitBtn01OnClick(sender)
//调用上传组件
{
UgFileUpload01.Execute;
}
function UgFileUpload01OnCompleted(sender,astream)
{
UgImage01.LoadFromStream(astream);
}
2
3
4
5
6
7
8
9
10
11
//PasScript
procedure UgBitBtn01OnClick(sender: tobject);
//调用上传组件
begin
UgFileUpload01.Execute;
end;
procedure UgFileUpload01OnCompleted(sender: tobject;astream: tfilestream);
begin
UgImage01.LoadFromStream(astream);
end;
2
3
4
5
6
7
8
9
10
11
// Make sure to add code blocks to your code group
# 16. TUgFileUploadButton
该组件显示为一个按钮，点击该按钮时打开文件浏览的对话框。
# 16.1. 属性
| 属性 | 说明 |
|---|---|
| EraseCacheAfterCompleted | 是否在完成后清除缓存 |
| Filter | 设定文件的分类 |
| MaxAllowedSize | 设定上传文件的大小限制 |
| Messages | 设定上传对话框中显示的信息的内容 |
| MultipleFiles | 是否允许上传多个文件 |
| OptimizeMemoryUsage | 是否进行内存优化的管理 |
| OverWrite | 是否允许覆盖文件 |
# 16.1.1. EraseCacheAfterCompleted
property EraseCacheAfterCompleted: Boolean;
该属性设定是否在完成后清除缓存。
# 16.1.2. Filter
property Filter: string;
该属性用于指定在浏览对话框中显示特定类型的文件。
//JScript
UgFileUpload01.Filter = "*.jpg";
UgFileUpload01.Execute;
2
3
//PasScript
UgFileUpload01.Filter := '*.jpg';
UgFileUpload01.Execute;
2
3
// Make sure to add code blocks to your code group
# 16.1.3. MaxAllowedSize
property MaxAllowedSize: Cardinal;
该属性为允许上传的文件的最大大小。单位为字节，为0时表示不限制。
# 16.1.4. Messages
property Messages: TUniCustomUploadMessages;
该属性设置显示的提示信息内容。
| 名称 | 说明 |
|---|---|
| MaxFilesError | 上传文件的数量超过限制后显示的提示信息 |
| MaxSizeError | 上传文件的大小超过限制后显示的提示信息 |
| PleaseWait | 等待时显示的提示信息 |
| UploadError | 文件上传错误 |
| Uploading | 文件正在上传的提示信息 |
| UploadTimeOut | 文件上传超时的提示信息 |
# 16.1.5. MultipleFiles
property MultipleFiles: Boolean;
该属性设置控件是否允许多个文件上传。
# 16.1.6. OptimizeMemoryUsage
property OptimizeMemoryUsage: Boolean;
该属性设置控件是否进行内存优化。
# 16.1.7. OverWrite
property Overwrite: Boolean;
该属性设置控件是否允许对之前的文件进行覆盖操作。
# 17. TUgHTMLMemo
该组件显示为HTML格式的备忘录组件。可在其中进行填写，实现自定义格式的编辑。其中输入的内容会保存在Lines中，且以HTML文本的方式存在。
# 17.1. 属性
| 属性 | 说明 |
|---|---|
| CheckChangeDelay | 检测内容变更的时间间隔 |
| Lines | 显示的内容，支持HTML语法标记 |
| ReadOnly | 是否设置为只读 |
# 17.1.1. CheckChangeDelay
property CheckChangeDelay: Integer;
检测内容变更的时间间隔，单位为毫秒(ms)。
# 17.1.2. Lines
property Lines: TStrings;
控件中显示的内容，支持HTML的语法标记。
//JScript
UgHTMLMemo01.Lines.Text = "<font color=\"#800000\" style=\"background-color: rgb(255, 255, 0);\">FastWeb</font>";
2
//PasScript
UgHTMLMemo01.Lines.Text := '<font color="#800000" style="background-color: rgb(255, 255, 0);">FastWeb</font>';
2
// Make sure to add code blocks to your code group
# 17.1.3. ReadOnly
property ReadOnly: Boolean;
该属性设置控件是否为只读模式。
# 18. TUgPopUpMenu
该控件为UgMenuButton设定菜单中的项目。选择该控件中的Items项目，点击左上方的新增按钮可添加菜单项目。
# 18.1. 属性
| 属性 | 说明 |
|---|---|
| Items | 设定菜单中的项目 |
| PopupComponent | 设定菜单项目对应显示的按钮 |
# 18.1.1. Items
property Items: TUgPopupMenuItems;
设定菜单中的项目。选择该控件中的Items项目，点击左上方的新增按钮可添加或者删除菜单项目。新增或删除的项目为TUgPopupMenuItem
# 18.1.2. PopupComponent
property PopupComponent: TComponent;
设定菜单项目对应显示的组件，此处指定为TUgMenuButton类的组件，比如UgMenuButton01。
# 18.2. 事件
| 名称 | 触发条件 |
|---|---|
| UgMenuItemsOnClick | 当点击菜单项时触发该事件 |
| UgMenuItemsOnCheck | 当点菜单项终端选项确认时触发该事件 |
# 19. TUgPopupMenuItem
该组件由TUgPopUpMenu中的Item属性生成。
# 19.1. 属性
| 属性 | 说明 |
|---|---|
| Caption | 设置菜单项的文字内容 |
| Checked | 是否确认，该项需启用RadioItem后可用 |
| GroupIndex | 设置分组ID，同一组内仅有一个Checked属性为True |
| RadioItem | 分组单选框 |
# 19.1.1. Caption
property Caption: string;
设置菜单项显示的文字内容。
# 19.1.2. Checked
property Checked: Boolean;
是否确认该选项。该选项在RadioItem=True时可用。
# 19.1.3. GroupIndex
property GroupIndex: Byte;
设置分组ID，同一ID下的菜单只能选择一项。
# 19.1.4. RadioItem
property RadioItem: Boolean;
该属性用于指定是否进行分组。
# 20. TUgMenuButton
该组件用于显示TUgPopupMenu中的设定的菜单项目，点击下拉箭头即可显示所有设定的项目。
# 20.1. 属性
| 属性 | 说明 |
|---|---|
| ArrowButton | 是否将箭头显示在按钮下方 |
| Caption | 显示按钮文字内容 |
# 20.2. 事件
| 名称 | 触发条件 |
|---|---|
| ArrowClick | 点击按钮的箭头时触发该事件 |
# 21. TUgColorPalette
该组件显示为一个颜色选择盘。其中包含了常见的颜色，点击以选择对应的颜色并将颜色的编码信息进行传递。
# 21.1. 属性
| 属性 | 说明 |
|---|---|
| Color | 设定控件当前选择的颜色 |
| Palette | 设定一组十六进制编码的颜色列表 |
# 21.1.1. Color
property Color: TColor;
该属性用于设置当前选择的颜色系列。
# 21.1.2. Palette
property Palette: TStrings;
该属性用于指定十六进制编码的颜色列表，其形式如下所示：
558845
AA7700
FF0000
110011
000000
ABCDEF
071291
123223
123111
998811
2
3
4
5
6
7
8
9
10
# 22. TUgColorButton
该组件显示为一个选择颜色的按钮，点击按钮可展开颜色选择的界面。选择的颜色信息会存储在Color中。
# 22.1. 属性
| 属性 | 说明 |
|---|---|
| Caption | 按钮字幕显示的内容 |
| Color | 设定按钮对应显示选择的颜色 |
| Palette | 设定一组十六进制编码的颜色列表 |
# 22.1.1. Caption
property Caption: TCaption;
设定按钮显示的内容。
# 22.1.2. Color
property Color: TColor;
该属性用于设置当前选择的颜色系列。
# 22.1.3. Palette
property Palette: TStrings;
该属性用于指定十六进制编码的颜色列表，其形式如下所示：
558845
AA7700
FF0000
110011
000000
ABCDEF
071291
123223
123111
998811
2
3
4
5
6
7
8
9
10
# 23. TUgPropertyGrid
该组件显示为一个属性列表，将表格组件的AttachedComponent设定为需要显示的组件名称。可在其中显示指定组件的属性内容。
# 23.1. 属性
# 23.1.1. AttatchedComponent
property AttachedComponent: TComponent;
该属性设置用于显示属性列表的组件。例如上图中显示的是UgBitBtn的属性列表。
//JScript
UgPropertyGrid01.AttachedComponent = UgBitBtn01;
2
//PasScript
UgPropertyGrid01.AttachedComponent := UgBitBtn01;
2
// Make sure to add code blocks to your code group
# 24. TUgGenericControl
该组件无特殊用途，可将其作为一个控件组容器来进行使用。可在其中放置其他的组件，此时此组件为父组件。
# 25. TUgSweetAlert
该组件为JavaScript显示的提示框信息组件，在设定好需要显示的相关信息后，执行控件方法显示弹窗提示。
# 25.1. 属性
| 属性 | 说明 |
|---|---|
| AlertType | 设定对话框的类型 |
| AllowEscapeKey | 是否允许响应ESC |
| AllowOutesideClick | 是否允许响应对话框外侧的点击操作 |
| Animation | 是否开启动画效果 |
| CancelButtonColor | 取消按钮显示的颜色 |
| CancelButtonText | 取消按钮显示的文字 |
| ConfirmButtonColor | 确认按钮的颜色 |
| ConfirmButtonText | 确认按钮的颜色 |
| FocusCancel | 是否默认自动选择在取消按钮上 |
| InputPlaceholder | 输入框中无内容时显示的内容 |
| InputValue | 对话框中的输入内容显示在该界面中 |
| InputType | 输入框的类型 |
| ReverseButtons | 是否反转按钮 |
| ShowCancelButton | 显示取消按钮 |
| ShowCloseButton | 显示关闭按钮 |
| ShowConfirmButton | 显示确认按钮 |
| ShowLoaderButtonOnConfirm | 是否加载确认 |
| Text | 对话框显示的文本 |
| TitleText | 对话框的标题 |
# 25.1.1. AlterType
property AlertType: TAlertType;
该属性指定对话框的类型。
| 名称 | 说明 | 图例 |
|---|---|---|
| atInfo | 提示对话框 |  |
| atError | 错误对话框 |  |
| atQuestion | 疑问对话框 |  |
| atSuccess | 成功对话框 |  |
| atWarning | 警告对话框 |  |
# 25.1.2. AllowEscapeKey
property AllowEscapeKey: Boolean;
是否响应ESC按键。如果该项设置为True，则对话框也可以响应ESC。
# 25.1.3. AllowOutsideClick
property AllowOutsideClick: Boolean;
是否允许不在对话框按钮进行点击操作以关闭对话框。
# 25.1.4. Animation
property Animation: Boolean;
是否开启对话框显示时的动画效果。
# 25.1.5. CancelButtonColor
property CancelButtonColor: TColor;
设定取消按钮的颜色。设置该属性需将ShowCancelButton设置为True。
# 25.1.6. CancelButtonText
property CancelButtonText: string;
设定取消按钮显示的文字内容。
# 25.1.7. ConfirmButtonColor
property ConfirmButtonColor: TColor;
设定确认按钮的颜色。设置该属性需将ShowConfirmButton设置为True。
# 25.1.8. ConfirmButtonText
property ConfirmButtonText: string;
设定确认按钮的文字。
# 25.1.9. FocusCancel
property FocusCancel: Boolean;
设置为True，则对话框打开时，取消按钮默认选中。
# 25.1.10. InputPlaceholder
property InputPlaceholder: string;
该属性指定输入框为空时显示的内容。
# 25.1.11. InputType
property InputType: TInputType;
设定对话框中的输入类型。下面的设定中，包含了InputPlaceholder的内容指定。
| 名称 | 说明 | 图例 |
|---|---|---|
| ItNone | 无输入框 |  |
| ItCheckBox | 复选框 |  |
| ItEmail | 邮箱地址输入框 |  |
| ItFile | 文件选择对话框 |  |
| ItNumber | 数字输入对话框 |  |
| ItPassWord | 密码输入对话框 |  |
| ItRange | 范围选择对话框 |  |
| ItSelect | 选择对话框 |  |
| ItTel | 电话输入对话框 |  |
| ItText | 文本输入框 | 图像同上 |
| ItTextArea | 文本区域输入框 |  |
# 25.1.12. ReverseButtons
property ReverseButtons: Boolean;
是否对确认与取消按钮进行反转。使用该属性需要将确认按钮与取消按钮显示出来。即ShowCancelButton为True，ShowConfirmButton为True。
| 取值 | 图例 |
|---|---|
| True |  |
| False | |
# 25.1.13. ShowCancelButton
property ShowCancelButton: Boolean;
该属性用于指定对话框中是否显示取消按钮。
# 25.1.14. ShowCloseButton
property ShowCloseButton: Boolean;
该属性用于指定对话框中是否显示关闭按钮。
# 25.1.15. ShowConfirmButton
property ShowConfirmButton: Boolean;
该属性用于指定对话框中是否显示确认按钮。
# 25.1.16. ShowLoaderButtonOnConfirm
property ShowLoaderOnConfirm: Boolean;
该属性用于指定在点击确认按钮时按钮是否显示为加载状态。
# 25.1.17. Text
property Text: string;
对话框中的文字区域的内容。
//JScript
UgSweetAlert01.Text = "Hello";
2
//PasScript
UgSweetAlert01.Text := 'Hello';
2
// Make sure to add code blocks to your code group
# 25.1.18. TitleText
property TitleText: string;
该属性用于指定对话框的标题。
//JScript
UgSweetAlert01.TitleText = "Hello";
2
//PasScript
UgSweetAlert01.TitleText := 'Hello';
2
// Make sure to add code blocks to your code group
# 25.2. 事件
| 名称 | 触发条件 |
|---|---|
| OnConfrim | 当按下确认按钮后触发该事件 |
| OnDismiss | 当按下取消按钮后触发该事件 |
# 25.3. 方法
# 25.3.1. Show
procedure Show;
该方法为执行操作。执行后将会打开对话框。
UgSweetAlert01.Show;
# 26. TUgCanvas
该组件提供画布背景的相关功能。可将其作为窗体的背景来使用。
# 26.1. 属性
| 属性 | 说明 |
|---|---|
| Brush | 设置画刷的相关属性 |
| PaintMode | 设置绘画的相关类型 |
| Pen | 设置画刷的相关属性 |
# 26.1.1. Brush
property Brush: TUniBrush;
设置笔刷的相关属性。
- Color：设置笔刷的颜色。
- Opacity：设置笔刷的透明度。
# 26.1.2. PaintMode
property PaintMode: TUniPaintMode;
设置绘画的模式，有以下选项。
pmCircle：圆形。pmFill：填充色。pmFreeHand：自由绘画。pmLine：线形。pmRectangle：矩形。
# 26.1.3. Pen
property Pen: TUniPen;
画笔的相关设置。
- Color：画笔的颜色。
- Opacity：画笔的透明度。
- Width：设置画笔的宽度。
# 26.2. 事件
| 名称 | 触发条件 |
|---|---|
| AfterSubmit | 在提交后触发事件 |
| OnCanvasReady | 当画布准备完毕时触发事件 |
| OnLoadImage | 当画布加载图片时触发事件 |
# 26.3. 方法
# 26.3.1. SetBounds
procedure SetBounds(ALeft: Integer; ATop: Integer; AWidth: Integer; AHeight: Integer);
此方法用于一次性设置 Left、Top、Width 和 Height 属性。
# 26.3.2. MoveTo
procedure MoveTo(X: Integer; Y: Integer);
将当前绘图位置更改为点 (X,Y)。
在调用 LineTo 之前使用MoveTo设置 PenPos 的值。调用MoveTo相当于设置 PenPos 属性。
# 26.3.3. LineTo
procedure LineTo(X: Integer; Y: Integer);
在画布上从 PenPos 到 X 和 Y 指定的点绘制一条线，并将笔位置设置为 (X, Y)。
使用LineTo从 PenPos 绘制一条直线，但不包括点 (X,Y)。LineTo将 PenPos 的值更改为 (X,Y)。
线条是使用 Pen 绘制的。
注意： 如果当前 Pen 没有 psSolid 样式，则使用当前画笔指定的背景绘制线条。
# 26.3.4. LoadFromFile
procedure LoadFromFile(const FileName: string);
从指定文件中加载画布信息。
# 26.3.5. LoadFromStream
procedure LoadFromStream(const Stream: TStream);
从指定的流中加载画布信息。
# 26.3.6. Clear
procedure Clear;
清除画布中的内容。
# 26.3.7. FloodFill
procedure FloodFill(X: Integer; Y: Integer);
使用当前画笔填充画布区域。使用FloodFill以Brush的值填充图像的可能非矩形区域。要填充的区域的边界是通过从点 (X,Y) 向外移动直到遇到涉及颜色参数的颜色边界来确定的。X 和 X 是画布上开始填充的坐标。颜色是定义要填充区域边界的颜色。它的解释取决于 FillStyle 的值。FillStyle 指定区域是由具有与 Color 相同值的所有像素定义，还是由具有不同值的所有点定义。
提示： 使用像素属性使用fsSurface的的FillStyle时在点（X，Y），使色彩的精确值。同样，当 FillStyle 为 fsBorder 时，如果边界上的点已知，则使用Pixels获取边界颜色的确切值。
# 26.3.8. Circle
procedure Circle(X: Integer; Y: Integer; Radius: Integer);
设置画布中显示圆形。
# 26.3.9. Rectangle
procedure Rectangle(X1: Integer; Y1: Integer; X2: Integer; Y2: Integer);
设置画布中显示矩形。
# 27. TUgCalendaPanel
组件显示为一个日历选择器，可根据需要自行切换显示的模式，可在其中显示日程安排等相关信息。
# 27.1. 属性
| 属性 | 说明 |
|---|---|
| AlwaysFireDateChange | 设置 |
| Calendars | 设置日历列表 |
| DayText | 设置显示于日期按钮中的文本信息 |
| DayTimeFormat | 设置日期时间的显示格式 |
| DayTimeRange | 设置日期时间的显示范围 |
| FirstDayOfWeek | 设置一周的开始的星期数 |
| MonthText | 设置显示于月份按钮中的文本信息 |
| RefreshViewAfterMove | 设置是否在移动后刷新视图 |
| RefreshViewAfterResize | 设置是否在改变大小后刷新视图 |
| ShowDayView | 设置是否显示日期的视图 |
| ShowMonthView | 设置是否显示月份的视图 |
| ShowNavBar | 设置是否显示导航栏 |
| ShowTime | 设置是否显示时间 |
| ShowTodayText | 设置是否显示今日的文本 |
| ShowWeekView | 设置是否显示周视图 |
| StartDate | 设置显示开始的日期 |
| Title | 设置显示日历的标题 |
| TitleAlign | 设置显示日历标题的对齐方式 |
| TodayText | 设置显示今天按钮的文本信息 |
| WeekText | 设置显示周的文本信息 |
| WeekTimeFormat | 设置显示周的日期格式 |
| WeekTimeRange | 设置显示的日期范围 |
# 27.1.1. AlwaysFireDateChange
property AlwaysFireDateChange: Boolean;
设置是否高亮显示变化的日期。
# 27.1.2. Calendars
property Calendars: TUniCalendarList;
设置日历的列表。可使用此属性设置多个日历列表信息。
# 27.1.3. DayText
property DayText: String;
设置顶部栏Day按钮显示的名称。
# 27.1.4. DayTimeFormat
property DayTimeFormat: string;
设置日期时间的显示格式。
# 27.1.5. DayTimeRange
property DayTimeRange: TUniCalendarTimeRange;
设置日期时间设置显示的起始结束时间范围。
- TimeEnd：结束时间的数值。
- TimeStart：起始时间的数值。
# 27.1.6. FirstDayOfWeek
property FirstDayOfWeek: TCalDayOfWeek;
设置一周的开始的星期数。
dowFriday：以星期五为开始。dowLocaleDefault：以设定的地区默认为准。dowMonday：以星期一为开始。dowSaturday：以星期六为开始。dowSunday：以星期日为开始。dowThursday：以星期四为开始。dowTuesday：以星期二为开始。dowWednesday：以星期三为开始。
# 27.1.7. MonthText
property MonthText: String;
设置显示于月份按钮中的文本信息。
# 27.1.8. RefreshViewAfterMove
property RefreshViewAfterMove: Boolean;
设置是否在移动后刷新视图。
# 27.1.9. RefreshViewAfterResize
property RefreshViewAfterResize: Boolean;
设置是否在改变大小后刷新视图。
# 27.1.10. ShowDayView
property ShowDayView: Boolean;
设置是否显示日期的视图。
# 27.1.11. ShowMonthView
property ShowMonthView: Boolean;
设置是否显示月份的视图。
# 27.1.12. ShowNavBar
property ShowNavBar: Boolean;
设置是否显示导航栏。
# 27.1.13. ShowTime
property ShowTime: Boolean;
设置是否显示时间。
# 27.1.14. ShowTodayText
property ShowTodayText: Boolean;
设置是否显示今日按钮的文本。
# 27.1.15. ShowWeekView
property ShowWeekView: Boolean;
设置是否显示周视图。
# 27.1.16. StartDate
property StartDate: TDateTime;
设置显示开始的日期。
# 27.1.17. Title
property Title: string;
设置日历抬头显示的标题。
# 27.1.18. TitleAlign
property TitleAlign: TAlignment;
设置显示日历标题的对齐方式。
# 27.1.19. TodayText
property TodayText: String;
设置显示今天按钮的文本信息。
# 27.1.20. WeekText
property WeekText: String;
设置显示周的文本信息。
# 27.1.21. WeekTimeFormat
property WeekTimeFormat: string;
设置显示周的日期格式。
# 27.1.22. WeekTimeRange
property WeekTimeRange: TUniCalendarTimeRange;
设置显示的日期范围。
# 27.2. 事件
| 事件 | 触发条件 |
|---|---|
| OnChangeValue | 当控件中的字段的值发生变化时触发事件 |
| OnDateChange | 当控件中的日期发生变化时触发事件 |
| OnDayClick | 当控件中的日期点击时触发事件 |
| OnEventClick | 当控件中的事件点击时触发事件 |
| OnEventMove | 当控件中的事件移动时触发事件 |
| OnEventResize | 当控件中的事件重新设置大小时触发事件 |
| OnRangeSelect | 当控件中的范围选择时触发事件 |
| OnToolClick | 当控件中的工具栏点击时触发事件 |
| OnViewChange | 当控件的视图发生变化时触发事件 |
# 28. TUgHTMLEditor
该组件显示为HTML格式的文本编辑器，可对HTML文本进行编辑。
# 28.1. 事件
| 属性 | 说明 |
|---|---|
| OnGetHTML | 当设置获取HTML文本时触发事件 |
| OnUpdateHtml | 当编辑框中的文本信息在更新时触发事件 |
# 28.2. 方法
# 28.2.1. setEditorhtml
procedure setEditorhtml(htmltxt: string);
此方法用于设置将文本内容设置进入至编辑器中，在编辑器中可以显示相关的内容。
# 28.2.2. getEditorhtml
function getEditorhtml: string;
此方法用于设置将编辑器中的文本内容读取出来。
# 29. TUgLookupEdit
此组件可作为查找编辑框使用，点击右侧的搜索按钮可打开查找界面去选择查找的数据来源。关于此组件的基础属性用法可参考 TUgEdit 。
# 29.1. 属性
# 29.1.1. LookupCaption
property LookupCaption: string;
设定查找界面的标题名称。
# 29.1.2. LookUpData
property LookupData: TUgClientDataSet;
设定查找来源的数据集组件。
# 29.1.3. LookupFields
property LookupFields: TUgLookupFields;
设定查找界面中要显示的字段。在窗体结构与检视器中选择对应的控件的 LookupFields，然后点击左上角的添加按钮可添加查找字段。查找字段有以下属性可设置。
| 名称 | 说明 |
|---|---|
| Caption | 设定字段显示的标题名称 |
| FieldName | 设定绑定的字段的名称 |
| Width | 字段显示区域的宽度 |
# 29.1.4. LookupValueField
property LookupValueField: string;
设置查找返回的结果字段，此结果字段应在 LookupFields 的范围中。
# 29.2. 事件
# 29.2.1. OnSelectRowEvent
//JScript
function UgLookupEdit01OnSelectRowEvent(sender,selectrow)
2
//PasScript
procedure UgLookupEdit01OnSelectRowEvent(sender: tobject;selectrow: tdataset);
2
// Make sure to add code blocks to your code group
当在导入窗口中双击选择要导入的项目后触发事件，可回传选择记录的数据集。可用于更新多个记录。
//JScript
function UgLookupEdit01OnSelectRowEvent(sender,selectrow)
{
ShowMessage(selectrow.FieldByName("FInterID").asstring);
}
2
3
4
5
//PasScript
procedure UgLookupEdit01OnSelectRowEvent(sender: tobject;selectrow: tdataset);
begin
ShowMessage(selectrow.FieldByName('FInterID').asstring);
end；
2
3
4
5
// Make sure to add code blocks to your code group
# 29.3. 方法
# 29.3.1. Show
procedure Show;
显示导入表。
//JScript
UgLookupEdit01.LookupCaption = "导入客户";
UgLookupEdit01.LookupData = cdsProject;
UgLookupEdit01.LookupValueField = "FCustName";
UgLookupEdit01.LookupGridWidth = 400;
UgLookupEdit01.LookupGridHeight = 400;
UgLookupEdit01.Show;
2
3
4
5
6
7
//PasScript
UgLookupEdit01.LookupCaption := '导入客户';
UgLookupEdit01.LookupData := cdsProject;
UgLookupEdit01.LookupValueField := 'FCustName';
UgLookupEdit01.LookupGridWidth := 400;
UgLookupEdit01.LookupGridHeight := 400;
UgLookupEdit01.Show;
2
3
4
5
6
7
// Make sure to add code blocks to your code group
# 30. TUgLookupEditExtra
此组件可作为查找编辑框使用，点击左侧的搜索按钮可打开查找界面去选择查找的数据来源。关于此组件的基础属性用法可参考 TUgEdit 。
# 30.1. 属性
# 30.1.1. LookupCaption
property LookupCaption: string;
设定查找界面的标题名称。
# 30.1.2. LookUpData
property LookupData: TUgDataSet;
设定查找来源的数据集组件。
# 30.1.3. LookupFields
property LookupFields: TUgLookupFields;
设定查找界面中要显示的字段。在窗体结构与检视器中选择对应的控件的 LookupFields，然后点击左上角的添加按钮可添加查找字段。查找字段有以下属性可设置。
| 名称 | 说明 |
|---|---|
| Caption | 设定字段显示的标题名称 |
| FieldName | 设定绑定的字段的名称 |
| Width | 字段显示区域的宽度 |
# 30.1.4. LookupValueField
property LookupValueField: string;
设置查找返回的结果字段，此结果字段应在 LookupFields 的范围中。
# 30.2. 事件
# 30.2.1. OnSelectRowEvent
//JScript
function UgLookupEditExtra01OnSelectRowEvent(sender,selectrow)
2
//PasScript
procedure UgLookupEditExtra01OnSelectRowEvent(sender: tobject;selectrow: tdataset);
2
// Make sure to add code blocks to your code group
当在导入窗口中双击选择要导入的项目后触发事件，可回传选择记录的数据集。可用于更新多个记录。
//JScript
function UgLookupEditExtra01OnSelectRowEvent(sender,selectrow)
{
ShowMessage(selectrow.FieldByName("FInterID").asstring);
}
2
3
4
5
//PasScript
procedure UgLookupEditExtra01OnSelectRowEvent(sender: tobject;selectrow: tdataset);
begin
ShowMessage(selectrow.FieldByName('FInterID').asstring);
end；
2
3
4
5
// Make sure to add code blocks to your code group
# 30.3. 方法
# 30.3.1. Show
procedure Show;
显示导入表。
//JScript
UgLookupEditExtra01.LookupCaption = "导入客户";
UgLookupEditExtra01.LookupData = cdsProject;
UgLookupEditExtra01.LookupValueField = "FCustName";
UgLookupEditExtra01.LookupGridWidth = 400;
UgLookupEditExtra01.LookupGridHeight = 400;
UgLookupEditExtra01.Show;
2
3
4
5
6
7
//PasScript
UgLookupEditExtra01.LookupCaption := '导入客户';
UgLookupEditExtra01.LookupData := cdsProject;
UgLookupEditExtra01.LookupValueField := 'FCustName';
UgLookupEditExtra01.LookupGridWidth := 400;
UgLookupEditExtra01.LookupGridHeight := 400;
UgLookupEditExtra01.Show;
2
3
4
5
6
7
// Make sure to add code blocks to your code group
# 31. TUgLookupForm
此控件用于打开一个列表窗口，通过双击选择项将选择项的数据回传至事件中，可作为导入表格来使用。
# 31.1. 属性
# 31.1.1. LookupCaption
property LookupCaption: string;
设定查找界面的标题名称。
# 31.1.2. LookUpData
property LookupData: TUgDataSet;
设定查找来源的数据集组件。
# 31.1.3. LookupFields
property LookupFields: TUgLookupFields;
设定查找界面中要显示的字段。在窗体结构与检视器中选择对应的控件的 LookupFields，然后点击左上角的添加按钮可添加查找字段。查找字段有以下属性可设置。
| 名称 | 说明 |
|---|---|
| Caption | 设定字段显示的标题名称 |
| FieldName | 设定绑定的字段的名称 |
| Width | 字段显示区域的宽度 |
# 31.1.4. LookupValueField
property LookupValueField: string;
设置查找返回的结果字段，此结果字段应在 LookupFields 的范围中。
# 31.1.5. LookupGridWidth
property LookupGridWidth: Integer;
设置导入表格显示的像素宽度。
# 31.1.6. LookupGridHeight
property LookupGridHeight: Integer;
设置导入表格显示的像素高度。
# 31.1.7. SelectText
property SelectText: string;
在导入窗口选择完成后，在此属性中存储选择的返回字段的值。
# 31.2. 事件
# 31.2.1. OnSelectRowEvent
//JScript
function UgLookupForm01OnSelectRowEvent(sender,selectrow)
2
//PasScript
procedure UgLookupForm01OnSelectRowEvent(sender: tobject;selectrow: tdataset);
2
// Make sure to add code blocks to your code group
当在导入窗口中双击选择要导入的项目后触发事件，可回传选择记录的数据集。可用于更新多个记录。
//JScript
function UgLookupForm01OnSelectRowEvent(sender,selectrow)
{
ShowMessage(selectrow.FieldByName("FInterID").asstring);
}
2
3
4
5
//PasScript
procedure UgLookupForm01OnSelectRowEvent(sender: tobject;selectrow: tdataset);
begin
ShowMessage(selectrow.FieldByName('FInterID').asstring);
end；
2
3
4
5
// Make sure to add code blocks to your code group
# 31.3. 方法
# 31.3.1. Show
procedure Show;
显示导入表。
//JScript
UgLookupForm01.LookupCaption = "导入客户";
UgLookupForm01.LookupData = cdsProject;
UgLookupForm01.LookupValueField = "FCustName";
UgLookupForm01.LookupGridWidth = 400;
UgLookupForm01.LookupGridHeight = 400;
UgLookupForm01.Show;
2
3
4
5
6
7
//PasScript
UgLookupForm01.LookupCaption := '导入客户';
UgLookupForm01.LookupData := cdsProject;
UgLookupForm01.LookupValueField := 'FCustName';
UgLookupForm01.LookupGridWidth := 400;
UgLookupForm01.LookupGridHeight := 400;
UgLookupForm01.Show;
2
3
4
5
6
7
// Make sure to add code blocks to your code group
# 32. TUgComboBoxPopup
该组件显示为一个可下拉的选择框，可以设定在点击下拉按钮时需要显示的数据表格组件。
# 32.1. 属性
# 32.1.1. IsExpand
property IsExpand: Boolean;
状态判断函数，判断指定的选择框是否处于下拉状态。
# 32.1.2. popup
property popup: TUgControl;
设置下拉按钮点击时链接的控件。目前支持TUgDBGrid的联动。
# 32.2. 事件
| 属性 | 说明 |
|---|---|
| OnCollapse | 当下拉框收起时触发此事件 |
| OnExpand | 当下拉框内容收起时触发此事件 |
| OnExtEdithValueChange | 当下拉框显示的内容发生变化时触发事件 |
| OnItemClick | 当点击下拉框中的选择项时触发事件 |
| OnKeyDown | 当使用按键操作确认时触发事件 |
# 32.3. 方法
# 32.3.1. Expand
procedure Expand;
用于展开指定控件的下拉菜单。
# 32.3.2. Collapse
procedure Collapse;
用于收起指定控件的下拉菜单。
# 33. TUgDBComboBoxPopup
该组件显示为一个可下拉的选择框，可以设定在点击下拉按钮时需要显示的数据表格组件。选择后显示的数据可对应修改字段信息
# 33.1. 属性
# 33.1.1. IsExpand
property IsExpand: Boolean;
状态判断函数，判断指定的选择框是否处于下拉状态。
# 33.1.2. popup
property popup: TUgControl;
设置下拉按钮点击时链接的控件。目前支持TUgDBGrid的联动。
# 33.2. 事件
| 属性 | 说明 |
|---|---|
| OnCollapse | 当下拉框收起时触发此事件 |
| OnExpand | 当下拉框内容收起时触发此事件 |
| OnExtEdithValueChange | 当下拉框显示的内容发生变化时触发事件 |
| OnItemClick | 当点击下拉框中的选择项时触发事件 |
| OnKeyDown | 当使用按键操作确认时触发事件 |
# 33.3. 方法
# 33.3.1. Expand
procedure Expand;
用于展开指定控件的下拉菜单。
# 33.3.2. Collapse
procedure Collapse;
用于收起指定控件的下拉菜单。
# 34. TUgGridComboBox
该组件显示为一个可下拉的选择框，可以设定在点击下拉按钮时需要显示的数据集组件。
# 34.1. 属性
# 34.1.1. GridLookupDataSet
property GridLookupDataSet: TDataSet;
设置用于下拉查找的数据集。
# 34.1.2. GridLookUpFields
property GridLookupFields: TUgGridLookupFields;
设置显示于下拉查找的数据集字段信息。
# 34.1.3. GridValueField
property GridValueField: string;
设置用于对应查找表显示内容的字段名称。
# 34.1.4. GridHeight
property GridHeight: Integer;
设置查找表的行高。
# 34.1.5. GridLookupDataSetFilter
property GridLookupDataSetFilter: Boolean;
设置查找表是否设置过滤条件。
# 34.1.6. GridWebOptionPaged
property GridWebOptionPaged: Boolean;
设置查找表是否显示分页。
# 34.1.7. GridWebOptionPageSize
property GridWebOptionPageSize: Integer;
设置查找表分页的行数。
# 34.2. 事件
| 属性 | 说明 |
|---|---|
| OnCollapse | 当下拉框收起时触发此事件 |
| OnExpand | 当下拉框内容收起时触发此事件 |
| OnExtEdithValueChange | 当下拉框显示的内容发生变化时触发事件 |
| OnItemClick | 当点击下拉框中的选择项时触发事件 |
| OnKeyDown | 当使用按键操作确认时触发事件 |
# 34.3. 方法
# 34.3.1. Expand
procedure Expand;
用于展开指定控件的下拉菜单。
# 34.3.2. Collapse
procedure Collapse;
用于收起指定控件的下拉菜单。
# 35. TUgDBGridComboBox
该组件显示为一个可下拉的选择框，可以设定在点击下拉按钮时需要显示的数据集组件。选择更新的数据会对应修改数据集的字段。
# 35.1. 属性
# 35.1.1. GridLookupDataSet
property GridLookupDataSet: TDataSet;
设置用于下拉查找的数据集。
# 35.1.2. GridLookUpFields
property GridLookupFields: TUgGridLookupFields;
设置显示于下拉查找的数据集字段信息。
# 35.1.3. GridValueField
property GridValueField: string;
设置用于对应查找表显示内容的字段名称。
# 35.1.4. GridHeight
property GridHeight: Integer;
设置查找表的行高。
# 35.1.5. GridLookupDataSetFilter
property GridLookupDataSetFilter: Boolean;
设置查找表是否设置过滤条件。
# 35.1.6. GridWebOptionPaged
property GridWebOptionPaged: Boolean;
设置查找表是否显示分页。
# 35.1.7. GridWebOptionPageSize
property GridWebOptionPageSize: Integer;
设置查找表分页的行数。
# 35.2. 事件
| 属性 | 说明 |
|---|---|
| OnCollapse | 当下拉框收起时触发此事件 |
| OnExpand | 当下拉框内容收起时触发此事件 |
| OnExtEdithValueChange | 当下拉框显示的内容发生变化时触发事件 |
| OnItemClick | 当点击下拉框中的选择项时触发事件 |
| OnKeyDown | 当使用按键操作确认时触发事件 |
# 35.3. 方法
# 35.3.1. Expand
procedure Expand;
用于展开指定控件的下拉菜单。
# 35.3.2. Collapse
procedure Collapse;
用于收起指定控件的下拉菜单。
# 36. TUgGridComboBoxExtra
该组件显示为一个可下拉的选择框，可以设定在点击下拉按钮时需要显示的数据集组件。选择更新的数据会对应修改数据集的字段。下拉框右侧可以显示对应选择项的另一个记录字段的内容。
# 36.1. 属性
# 36.1.1. GridCheckValueExists
property GridCheckValueExists: Boolean;
检查确认输入的值是否存在。
# 36.1.2. GridDisplayField
property GridDisplayField: String;
设置右侧显示框对应显示的字段的名称。
# 36.1.3. GridLookupDataSet
property GridLookupDataSet: TDataSet;
设置用于下拉查找的数据集。
# 36.1.4. GridLookUpFields
property GridLookupFields: TUgGridLookupFields;
设置显示于下拉查找的数据集字段信息。
# 36.1.5. GridValueField
property GridValueField: string;
设置用于对应查找表显示内容的字段名称。
# 36.1.6. GridValueWidth
property GridValueWidth: Integer;
设置查找栏位的显示宽度。
# 36.1.7. GridHeight
property GridHeight: Integer;
设置查找表的行高。
# 36.1.8. GridLookupDataSetFilter
property GridLookupDataSetFilter: Boolean;
设置查找表是否设置过滤条件。
# 36.1.9. GridWebOptionPaged
property GridWebOptionPaged: Boolean;
设置查找表是否显示分页。
# 36.1.10. GridWebOptionPageSize
property GridWebOptionPageSize: Integer;
设置查找表分页的行数。
# 36.2. 事件
| 属性 | 说明 |
|---|---|
| OnCollapse | 当下拉框收起时触发此事件 |
| OnExpand | 当下拉框内容收起时触发此事件 |
| OnExtEdithValueChange | 当下拉框显示的内容发生变化时触发事件 |
| OnItemClick | 当点击下拉框中的选择项时触发事件 |
| OnKeyDown | 当使用按键操作确认时触发事件 |
# 36.3. 方法
# 36.3.1. Expand
procedure Expand;
用于展开指定控件的下拉菜单。
# 36.3.2. Collapse
procedure Collapse;
用于收起指定控件的下拉菜单。
# 37. TUgDBGridComboboxExtra
该组件显示为一个可下拉的选择框，可以设定在点击下拉按钮时需要显示的数据集组件。选择更新的数据会对应修改数据集的字段。下拉框右侧可以显示对应选择项的另一个记录字段的内容。选择更新的数据会对应修改数据集的字段。
# 37.1. 属性
# 37.1.1. GridCheckValueExists
property GridCheckValueExists: Boolean;
检查确认输入的值是否存在。
# 37.1.2. GridDisplayField
property GridDisplayField: String;
设置右侧显示框对应显示的字段的名称。
# 37.1.3. GridLookupDataSet
property GridLookupDataSet: TDataSet;
设置用于下拉查找的数据集。
# 37.1.4. GridLookUpFields
property GridLookupFields: TUgGridLookupFields;
设置显示于下拉查找的数据集字段信息。
# 37.1.5. GridValueField
property GridValueField: string;
设置用于对应查找表显示内容的字段名称。
# 37.1.6. GridValueWidth
property GridValueWidth: Integer;
设置查找栏位的显示宽度。
# 37.1.7. GridHeight
property GridHeight: Integer;
设置查找表的行高。
# 37.1.8. GridLookupDataSetFilter
property GridLookupDataSetFilter: Boolean;
设置查找表是否设置过滤条件。
# 37.1.9. GridWebOptionPaged
property GridWebOptionPaged: Boolean;
设置查找表是否显示分页。
# 37.1.10. GridWebOptionPageSize
property GridWebOptionPageSize: Integer;
设置查找表分页的行数。
# 37.2. 事件
| 属性 | 说明 |
|---|---|
| OnCollapse | 当下拉框收起时触发此事件 |
| OnExpand | 当下拉框内容收起时触发此事件 |
| OnExtEdithValueChange | 当下拉框显示的内容发生变化时触发事件 |
| OnItemClick | 当点击下拉框中的选择项时触发事件 |
| OnKeyDown | 当使用按键操作确认时触发事件 |
# 37.3. 方法
# 37.3.1. Expand
procedure Expand;
用于展开指定控件的下拉菜单。
# 37.3.2. Collapse
procedure Collapse;
用于收起指定控件的下拉菜单。
# 38. TUgSuperContainerPanel
此组件与ContainerPanel的功能类似，特别之处在于提供了HtmlStyle的设置。
# 38.1. 属性
# 38.1.1. HtmlStyle
设置组件的html样式。主要有以下设置项目可用。
| 属性 | 说明 |
|---|---|
BackdropFilter.blur | 控件背景的模糊程度，0为不使用模糊 |
BackdropFilter.Saturate | 控件背景的色彩饱和度，0表示为饱和度最低，界面样式显示为黑白，100表示为正常颜色的饱和度 |
BackgroundAlpha | 控件背景颜色的Alpha通道值，用于表示透明度，取值范围为0-1 |
BackgroundColor | 控件的背景颜色 |
BorderLineAlpha | 控件的边线的Alpha通道值，用于表示透明度，取值范围为0-1 |
BorderLineColor | 控件边线的颜色 |
BorderLineSize | 控件边线的像素尺寸 |
BorderLineRadius | 控件边线的矩形圆角的圆弧半径 |