附控控件
# FastWeb附控控件
- 适用平台: APP(移动端)
# 1. TUgFSConfirm
此控件用于设定显示确认的提示对话框。
# 1.1. 属性
属性 | 功能说明 |
---|---|
BackgroundDismiss | 设置点击背景时是否忽视操作 |
boxWidth | 设置显示的提示框的宽度 |
ButtonEnterConfirm | 设置按下enter按键表示为确认 |
ButtonTextCancel | 设置取消按钮上显示的文本内容 |
ButtonTextConfirm | 设置确认按钮上显示的文本内容 |
ButtonTextOK | 设置OK按钮上显示的文本内容 |
ButtonTextOther | 设置Other按钮上显示的文本内容 |
CloseIcon | 设置是否显示关闭按钮 |
Content | 设置提示框中显示的正文的内容 |
Draggable | 设置提示框是否可以被鼠标拖动 |
EscapeKey | 设置控件是否响应esc按键 |
Icon | 设置显示的字体图标,所有可用的文本图标的样式请查阅https://fontawesome.com/v5.0/icons (opens new window) |
PromptType | 如果提示框需要用户输入信息以进行确认提示的,则可设置其中的相关选项 |
ScreenMask | 设置是否使用屏幕提示的友好信息框 |
Theme | 设置提示框显示的主题 |
Title | 设置提示框的标题内容 |
TypeAnimated | 设置输入框中的内容是否以动画方式显示 |
TypeColor | 设置输入框中主题显示的颜色 |
TypeConfirm | 设置输入确认提示框的样式 |
# 1.1.1. PromptType
property PromptType: TUniFSPromptType;
设置需要输入的提示框中的相关信息。
名称 | 说明 |
---|---|
CharCase | 设置文字的大小写类型Normal_ :设置文字为正常模式,即保持所有文字默认的大小写情形LowerCase_ :所有的英文字符均转换为小写UpperCase_ :所有的英文字符均转换为大写 |
RequireField | 是否设置文字输入为必须操作 |
TextRequireField | 设置文字输入为必须操作的提示信息 |
TypePrompt | 设置输入的文字显示的类型text :设置显示为文本类型password :设置显示为密码字符类型 |
# 1.1.2. ScreenMask
property ScreenMask: TUniFSScreenMask;
设置屏幕友好提示信息,用于在处理过程中的显示内容。
名称 | 说明 |
---|---|
Enabled | 设置是否启用遮罩的功能 |
Text | 设置屏幕遮罩上显示的文本内容 |
# 1.2. 事件
# 1.2.1. OnAlert
procedure UgFSConfirm01OnAlert(confirmbutton: tconfirmbutton);
当在警告的对话框中按下确认按钮后触发事件。
# 1.2.2. OnConfirm
procedure UgFSConfirm01OnConfirm(confirmbutton: tconfirmbutton);
当在确认的对话框中按下确认按钮后触发事件。
# 1.2.2.1. OnPrompt
procedure UgFSConfirm01OnPormpt(confirmbutton: tconfirmbutton;result: string);
当在输入的对话框中按下确认按钮后触发事件,result
中存储输入的文本内容。
# 1.3. 方法
# 1.3.1. Clear
procedure Clear;
设置清除内容。
# 1.3.2. ShowMask
procedure ShowMask(Msg: string);
调用显示相关信息的遮罩。
# 1.3.3. ShowMaskPercent
procedure ShowMaskPercent(Msg: string; Percent: Integer);
设置显示包含进度条信息的遮罩。
# 1.3.4. ShowMaskJSName
procedure ShowMaskJSName(Msg: string; JSName: string);
调用指定控件JS的遮罩信息。
# 1.3.5. ShowMaskUpdate
procedure ShowMaskUpdate(Msg: string; Percent: Integer);
当遮罩启用时设置遮罩的百分比数值更新。
//JScript
try{
UgFSConfirm01.ShowMaskPercent("Starting Processing...",10);
Sleep(2000);
UgFSConfirm01.ShowMaskUpdate("Creating Order...",25);
Sleep(2000);
UgFSConfirm01.ShowMaskUpdate("Processing Payment...",70);
Sleep(2000);
UgFSConfirm01.ShowMaskUpdate("Ending Asking...",90);
Sleep(1000);
UgFSConfirm01.ShowMaskUpdate("Ending Asking...",100);
Sleep(1000);
UgFSConfirm01.Alert("Thanks for the purchase","Order 561560");
}
finally{
UgFSConfirm01.RemoveMask;
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//PasScript
//更新进度的设置
try
UgFSConfirm01.ShowMaskPercent('Starting Processing...',10);
Sleep(2000);
UgFSConfirm01.ShowMaskUpdate('Creating Order...',25);
Sleep(2000);
UgFSConfirm01.ShowMaskUpdate('Processing Payment...',70);
Sleep(2000);
UgFSConfirm01.ShowMaskUpdate('Ending Asking...',90);
Sleep(1000);
UgFSConfirm01.ShowMaskUpdate('Ending Asking...',100);
Sleep(1000);
UgFSConfirm01.Alert('Thanks for the purchase','Order 561560');
finally
UgFSConfirm01.RemoveMask;
end;
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
# 1.3.6. RemoveMask
procedure RemoveMask;
如果当前正在显示遮罩,使用此方法可移除遮罩。
# 1.3.7. Alert
procedure Alert(const Title: string; const Content: string);
设置警告提示信息。
# 1.3.8. Prompt
procedure Prompt(const Title: string; const Msg: string);
设置文本的输入信息。
# 1.3.9. Question
procedure Question(const Title: string; const Content: string; TP: TTypeConfirm);
显示提问类型的对话框。
# 1.3.10. Mask
procedure Mask(const Msg: string);
显示遮罩。
# 2. TUgAppFSToggle
该组件显示为一个滑动开关,点击实现动态的滑动,以达到开关显示的效果。
# 2.1. 属性
名称 | 说明 |
---|---|
ThemeOff | 关闭状态的颜色 |
ThemeOn | 开启状态的颜色 |
TitleOff | 关闭状态下显示的文字标题 |
TitleOn | 开启状态下显示的文字标题 |
Toggled | 开关是否处于开启状态 |
# 2.1.1. ThemeOff
procedure ThemeOff: TThemeToggle;
设置关闭状态下按钮显示的样式颜色,可从下拉选框中选择颜色主题样式。
# 2.1.2. ThemeOn
procedure ThemeOn: TThemeToggle;
设置开启状态下按钮显示的样式颜色,可从下拉选框中选择颜色主题样式。
# 2.1.3. TitleOff
property TitleOff: string;
设置关闭状态下显示的文字标题。
# 2.1.4. TitleOn
property TitleOn: string;
设置开启状态下显示的文字标题。
# 2.1.5. Toggled
property Toggled: Boolean;
设置开关当前的状态,当设置为True
时,开关为On
状态,反之,开关为Off
状态。
# 2.2. 事件
事件 | 触发条件 |
---|---|
OnToggled | 当开关状态切换时触发该事件 |
# 3. TUgAppFSGoogleChart
该组件使用Google图表进行数据展示。可显示面积图,柱状图等相关的统计图表。
# 3.1. 属性
属性 | 功能说明 |
---|---|
ChartType | 设定图表的类型 |
ChartDataSet | 设定图表绑定的数据集 |
ChartOptions | 图表的相关设置选项 |
# 3.1.1. ChartType
property ChartType: TChartType;
设定GoogleChart的图表类型。
名称 | 说明 | 图示 |
---|---|---|
AreaChart | 面积图 | |
Bar | 柱状图 | |
BubbleChart | 气泡图 | |
Gauge | 仪表盘 | |
GeoChart | 地理信息图 | |
LineChart | 线型图 | |
PieChart | 饼图 |
# 3.1.2. ChartDataSet
property ChartDataSet: TDataSet;
设定数据来源的数据集控件名称。
# 3.1.3. ChartOptions
property ChartOptions: TStrings;
图表设置的相关选项。该选项以JSON
格式进行存储。
- GeoChart选项
一个GeoChart选项设置如下:
displayMode: "region",
backgroundColor: "#81d4fa",
colorAxis: {colors: ["#00853f", "black", "#e31b23"]},
tooltip: {textStyle: {color: "#FF0000"}, showColorCode: true},
2
3
4
名称 | 说明 |
---|---|
displayMode | 地理图类型,数据表类型需与数据展示的类型相匹配,支持以下类型:auto :根据数据表的类型自动选择regions :可为区域上色的地理图markers :在区域内放置标记text :为区域标记数据表中的文本内容 |
backgroundColor | 设置图表的背景颜色,可以是HTML定义的颜色,比如red 或者#00cc00 。 |
colorAxis | 规定值地图的颜色列的数值 |
tooltip | 提示工具的相关选项 |
如需要更详细的设置选项以实现自定义图表,点击GoogleChart GeoChart文档 (opens new window)查阅。
- PieChart选项
一个PieChart选项设置如下:
title: "My Daily Activities (1)",
tooltip: {textStyle: {color: "#FF0000"}, showColorCode: true},
2
名称 | 说明 |
---|---|
title | 标题名称 |
tooltip | 提示框的相关选项 |
如需要更详细的设置选项以实现自定义图表,点击GoogleChart PieChart文档 (opens new window)查阅。
- Gauge选项
一个Gauge选项设置如下:
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
2
3
名称 | 说明 |
---|---|
redFrom | 显示红色区域的起始值 |
redTo | 显示红色区域的终止值 |
yellowFrom | 显示黄色区域的起始值 |
yellowTo | 显示黄色区域的终止值 |
minorTicks | 在两个显示数值的刻度之间设置的小刻度区域的数量 |
如需要更详细的设置选项以实现自定义图表,点击GoogleChart Gauge文档 (opens new window)查阅。
- Area Charts选项
一个Area Chart选项设置如下:
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
2
3
名称 | 说明 |
---|---|
title | 图表的标题名称 |
curveType | 曲线类型function :函数曲线none :无类型 |
lengend | 图表标签的选项 |
如需要更详细的设置选项以实现自定义图表,点击GoogleChart AreaChart文档 (opens new window)查阅。
- Bar Chart选项
一个Bar Chart选项设置如下:
title: 'Company Performance',
legend: { position: 'bottom' }
2
名称 | 说明 |
---|---|
title | 图表的标题名称 |
lengend | 图表标签的选项 |
如需要更详细的设置选项以实现自定义图表,点击GoogleChart BarChart文档 (opens new window)查阅。
- Bubble Chart选项
一个Bubble Chart选项设置如下:
title: 'Correlation between life expectancy',
hAxis: {title: 'Life Expectancy'},
vAxis: {title: 'Fertility Rate'},
bubble: {textStyle: {fontSize: 11}}
2
3
4
名称 | 说明 |
---|---|
title | 图表的标题名称 |
hAxis | 设置横轴的标题名称 |
vAxis | 设置纵轴的标题名称 |
bubble | 设置气泡内的样式 |
如需要更详细的设置选项以实现自定义图表,点击GoogleChart BubbleChart文档 (opens new window)查阅。
- Line Chart选项
一个Line Chart选项设置如下:
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
2
3
名称 | 说明 |
---|---|
title | 图表的标题名称 |
curveType | 曲线类型function :函数曲线none :无类型 |
lengend | 图表标签的选项 |
如需要更详细的设置选项以实现自定义图表,点击GoogleChart LineChart文档 (opens new window)查阅。
# 3.2. 方法
# 3.2.1. LoadChart
procedure LoadChart;
该方法用于初始化并加载图表。
# 4. TUgAppFSKendoUI
该组件为图表显示组件,可用于图表数据的分析结果的汇总展示。
# 4.1. 属性
属性 | 功能说明 |
---|---|
ChartDataSet | 设置图表绑定的数据集的名称 |
ChartLengendPosition | 设置图表铭牌的位置 |
ChartNameExport | 设置图表导出时使用的文件名称 |
ChartProperties | 图表的设置选项,使用JSON 语法格式 |
ChartSeries | 设置数据系列 |
ChartSeriesDefaults | 设置数据系列的默认取值 |
ChartSeriesProperties | 设置数据系列的选项 |
ChartStacked | 设置堆栈 |
ChartTheme | 设置图表的主题 |
ChartTitle | 设置图表标题 |
ChartTitleVisible | 设置图表是否可见 |
ChartType | 设置图表类型 |
# 4.1.1. ChartDataSet
property ChartDataSet: TDataSet;
设置图表绑定的数据集控件的名称。
# 4.1.2. ChartLengendPosition
property ChartLegendPosition: TUgFSKendoUIPosition;
设置图例说明的显示位置。
# 4.1.3. ChartNameExport
property ChartNameExport: string;
设置导出文件的图表名称。
# 4.1.4. ChartProperties
property ChartProperties: TStrings;
设置图表的相关属性。
//JScript
UgAppFSKendoUI01.ChartProperties.Values["valueAxis"] = "{labels: {format: \"0:c\"}}";
2
//PasScript
UgAppFSKendoUI01.ChartProperties.Values['valueAxis'] := '{labels: {format: "0:c"}}';
2
// Make sure to add code blocks to your code group
关于属性设置的相关内容可以参考KendoUI属性文档 (opens new window)进行配置,选择对应的图表类型后进行查询。除以下属性外的剩余选项(通常处于JSON
配置的末尾)可作为该属性的内容进行填充。
# 4.1.5. ChartSeries
property ChartSeries: TStrings;
设置数据系列。关于该内容可参考KendoUI属性文档 (opens new window)进行配置,选择对应的图表类型后进行查询。配置为series
部分的内容可用于该属性的设置选项。
//JScript
UgAppFSKendoUI01.ChartSeries.Values["Mundo"] = "world_users";
2
//PasScript
UgAppFSKendoUI01.ChartSeries.Values['Mundo'] := 'world_users';
2
// Make sure to add code blocks to your code group
# 4.1.6. ChartSeriesDefaults
property ChartSeriesDefaults: string;
设置数据系列的默认值。关于该内容可参考KendoUI属性文档 (opens new window)进行配置,选择对应的图表类型后进行查询。配置为seriesDefaults
部分的内容可用于该属性的设置选项。
//JScript
UgAppFSKendoUI01.ChartSeriesDefaults = "labels: {visible: true, position: \"insideEnd\", format: \"0:c\"}";
2
//PasScript
UgAppFSKendoUI01.ChartSeriesDefaults := 'labels: {visible: true, position: "insideEnd", format: "0:c"}';
2
// Make sure to add code blocks to your code group
# 4.1.7. ChartSeriesProperties
property ChartSeriesProperties: TStrings;
设置数据系列的选项。关于该内容可参考KendoUI属性文档 (opens new window)进行配置,选择对应的图表类型后进行查询。配置在series
中的选项的展开选项项目可用于该属性的选项设置。
//JScript
UgAppFSKendoUI01.ChartSeriesProperties.Values["United States"] = "labels: {visible: true, align: \"column\", format: \"{0}%\"}";
2
//PasScript
UgAppFSKendoUI01.ChartSeriesProperties.Values['United States'] := 'labels: {visible: true, align: "column", format: "{0}%"}';
2
// Make sure to add code blocks to your code group
# 4.1.8. ChartStacked
property ChartStacked: Boolean;
是否进行图表的堆叠。
# 4.1.9. ChartTheme
property ChartTheme: TUgFSKendoUITheme;
设置图表的主题风格。
# 4.1.10. ChartTitle
property ChartTitle: string;
设置图表标题。
# 4.1.11. ChartTitleVisible
property ChartTitleVisible: Boolean;
设置图表标题是否可见。
# 4.1.12. ChartType
property ChartType: TUgFSKendoUIType;
设置图表的类型。
名称 | 说明 | 图示 |
---|---|---|
Columns | 纵向柱状图 | |
Bar | 横向柱状图 | |
Line | 折线图 | |
Pie | 饼图 | |
Scatter | 散点图 | |
ScatterLine | 散点连线图 |
# 4.2. 方法
# 4.2.1. InitChart
procedure InitChart;
初始化设置图表并打开。
# 5. TUgAppFSQrCode
此控件显示为二维码,可输入信息以呈现所需的二维码信息。
# 5.1. 属性
# 5.1.1. QrOptions
property QrOptions: TQrOptions;
设定二维码显示的选项。
名称 | 说明 |
---|---|
BackgroundColor | 设定背景的颜色,无背景颜色的使用null ,此处的颜色值以CSS颜色为基准。若需要了解在此处可使用的颜色表达式,请查看<color> (opens new window) |
Content | 设定二维码中包含的文本内容 |
Fill | 设定填充二维码的颜色,此处的颜色值以CSS颜色为基准。若需要了解在此处可使用的颜色表达式,请查看<color> (opens new window) |
FontColor | 设定二维码中心显示的字体的颜色,此处的颜色值以CSS颜色为基准。若需要了解在此处可使用的颜色表达式,请查看<color> (opens new window) |
FontName | 设定二维码中心显示的字体名称 |
ImageUrl | 输入图片的地址用于在二维码中心区域显示图标 |
LabelQr | 设置显示在二维码中心区域的文字的内容 |
Level | 设置编码的级别 |
MinVersion | 用于设置二维码的点阵密度 |
Mode | 设置二维码中心的图标的显示模式image_box :设置显示为图片盒子image_strip :设置显示为图片横条label_box :设置显示为标签盒子label_strip :设置显示为标签条normal :不显示 |
PositionLabelQrX | 设置标签的横向偏移量 |
PositionLabelQrY | 设置标签的纵向偏移量 |
QuietZone | 设置控件边框与二维码之间的空白区域宽度 |
Radius | 设置二维码点阵的弧度 |
Render | 设定二维码在浏览器中的渲染模式 |
SizeLabelQr | 设定二维码中的标签显示的尺寸大小 |
# 5.2. 方法
# 5.2.1. Generate
procedure Generate;
调用此方法可动态重新生成二维码。
# 5.2.2. GetImage
procedure GetImage;
使用此方法可动态更新获取标签中的图像信息。