FastWeb标准控件

• 适用平台： APP(移动端)

  标准控件组中包含一些建立网页应用时经常用到的功能按钮组件，比如按钮控件，选择框控件等。

1. TUgNativeImageList

  该组件为存储图标图像的列表组件，其中可存放图片，在其他控件上，可以指定图像控件为该组件，指定索引号将图片展示在对应的控件中。

  在设计界面上双击该控件，弹出图片编辑的对话框：

  点击左上角的新增按钮，打开文件上传的界面：

  点击[Browse...]打开图片浏览选择界面，选择需要的图片后，点击[确定]以返回到图片上传的界面，此时文本框中会显示当前选择的图片。点击[Upload]即可上传图片至服务器中，并且显示在控件的图片列表中；如不需要改图片，点击[Cancel]。

  图片列表中的内容示例如图，Index是图片的索引号，在其他控件上，将其Images属性设置为该控件，ImageIndex属性设置为对应图中的Index，即可显示对应的图像。

2. TUgIconClsList

  该组件是一个图标库组件，用于指定图库列表控件引用的图标图库的信息。图标列表引用的是Font Aweson (opens new window)中的图标，双击可打开图标选择器，自行选择图标导入。

2.1. 属性

属性	说明
IconText	设置图标的文本信息
ImageFilesFolderName	图片文件所在的文件夹地址名称
UseGlobalCache	设置是否使用全局的缓存

3. TUgAppButton

  该控件显示为一个按钮。是最常用的一种按钮控件，可以增加小图标，可以设置出圆角样式，可以设置不同的UI风格。

3.1. 属性

属性	功能说明
BadgeText	按钮右上角的红色标记中显示的内容
Caption	按钮显示的文字内容
IconAlign	设置显示按钮图标的对齐方式
IconCls	设置按钮显示的图标名称
UI	设置按钮显示的外观样式风格

3.1.1. BadgeText

property BadgeText: string;

  设置按钮右上角的红色标记中显示的内容。标记显示的样式如下图。

3.1.2. Caption

property Caption: string;

  设置按钮显示的文字的内容。显示的内容可参考上图中的HelloWorld。

3.1.3. IconAlign

property IconAlign: TUniIconAlign;

  设置图标在按钮中的位置。

名称	图例
iaLeft
iaBottom
iaCenter
iaRight
iaTop

3.1.4. IconCls

property IconCls: string;

  设置图标的名称。

  其中可使用的部分图标类型如下：

3.1.5. UI

property UI: string;

  设置按钮的外观风格。

名称	说明	图示
normal	普通按钮
round	圆角矩形
action	执行按钮
decline	拒绝按钮
confirm	确认按钮
plain	扁平按钮
raised	悬浮按钮

3.2. 事件

3.2.1. OnClick

property OnClick: TNotifyEvent;

  点击按钮以触发该事件。

3.3. 应用

  UgAppButton是最常用的一种按钮控件，可以增加小图标，可以设置出圆角样式，可以设置不同的UI风格。

3.3.1. 布局

  在主窗体上放置17个UgAppButton，配置不同的属性。

• UgAppButton01

属性	取值	说明
Caption	Button01	按钮显示的文字内容
IconAlign	iaLeft	图标位置：左侧
IconCls	arrow_left	图标名称：左箭头

• UgAppButton02

属性	取值	说明
Caption	Button02	按钮显示的文字内容
IconAlign	iaRight	图标位置：右侧
IconCls	arrow_right	图标名称：右箭头

• UgAppButton03

属性	取值	说明
Caption	Button03	按钮显示的文字内容
IconAlign	iaTop	图标位置：顶部
IconCls	arrow_up	图标名称：上箭头

• UgAppButton04

属性	取值	说明
Caption	Button04	按钮显示的文字内容
IconAlign	iaBottom	图标位置：底部
IconCls	arrow_down	图标名称：下箭头

• UgAppButton05

属性	取值	说明
Caption	Button05	按钮显示的文字内容
UI	normal	UI风格：正常

• UgAppButton06

属性	取值	说明
Caption	Button06	按钮显示的文字内容
UI	back	UI风格：返回

• UgAppButton07

属性	取值	说明
Caption	Button07	按钮显示的文字内容
UI	round	UI风格：圆角按钮

• UgAppButton08

属性	取值	说明
Caption	Button08	按钮显示的文字内容
UI	action	UI风格：执行

• UgAppButton09

属性	取值	说明
Caption	Button09	按钮显示的文字内容
UI	forward	UI风格：继续

• UgAppButton10

属性	取值	说明
Caption	Button10	按钮显示的文字内容
UI	decline	UI风格：拒绝

• UgAppButton11

属性	取值	说明
Caption	Button11	按钮显示的文字内容
UI	confirm	UI风格：确认

• UgAppButton12

属性	取值	说明
Caption	Button12	按钮显示的文字内容
UI	small	UI风格：小型

• UgAppButton13

属性	取值	说明
Caption	Button13	按钮显示的文字内容
UI	plain	UI风格：扁平

• UgAppButton14

属性	取值	说明
Caption	Button14	按钮显示的文字内容
UI	raised	UI风格：凸起

• UgAppButton15

属性	取值	说明
Caption	Button15	按钮显示的文字内容
ModalResult	mrYes	执行结果：是

• UgAppButton16

属性	取值	说明
Caption	Button16	按钮显示的文字内容
ModalResult	mrNo	执行结果：否

• UgAppButton17

属性	取值	说明
Caption	Button17	按钮显示的文字内容
Width	47	宽度
Height	47	高度
UI	round	UI风格：圆角按钮

3.3.2. 功能

1. UgAppButton01按钮初始显示时右上角提示信息为0，点击一次增加1。
2. UgAppButton05按钮点击后变为不可用，同时UgAppButton06按钮可用。
3. UgAppButton06按钮点击后变为不可用，同时UgAppButton05按钮可用。
4. UgAppButton15按钮点击后关闭窗口，返回mrYes结果。
5. UgAppButton16按钮点击后关闭窗口，返回mrNo结果。

3.3.3. 代码

//JScript
var  badgeCount;
  
function UgAppButton01OnClick(sender)
//点击按钮，右上角的徽标数值加1
{
  badgeCount = badgeCount + 1;
  UgAppButton01.BadgeText = IntToStr(badgeCount); //增加1
}

function UgAppButton05OnClick(sender)
//禁用UgAppButton05,
{
  UgAppButton05.Enabled = False;
  UgAppButton06.Enabled = True;
}

function UgAppButton06OnClick(sender)
{
  UgAppButton06.Enabled = False;
  UgAppButton05.Enabled = True;
}

function UgAppRunFrameOnAfterRunScript(sender)
{
  badgeCount = 0;
}

//PasScript
var
  badgeCount: Integer;
  
procedure UgAppButton01OnClick(sender: tobject);
//点击按钮，右上角的徽标数值加1
begin
  badgeCount := badgeCount + 1;
  UgAppButton01.BadgeText := IntToStr(badgeCount); //增加1
end;

procedure UgAppButton05OnClick(sender: tobject);
//禁用UgAppButton05,
begin
  UgAppButton05.Enabled := False;
  UgAppButton06.Enabled := True;
end;

procedure UgAppButton06OnClick(sender: tobject);
begin
  UgAppButton06.Enabled := False;
  UgAppButton05.Enabled := True;
end;

procedure UgAppRunFrameOnAfterRunScript(const sender: tobject);
begin
  badgeCount := 0;
end;

Begin
  
End.

// Make sure to add code blocks to your code group

4. TUgAppEdit

  TUgAppEdit是单行文本输入组件，可以设置其标签、大小写、只读、是否可用、密码等属性，常用事件有输入内容发生变化事件，光标进入事件、光标离开事件、键盘离开事件等。

4.1. 属性

属性	功能说明
CharCase	字符的大小写转换类型
ClearButton	是否在编辑框中显示清除按钮
EmptyText	当输入框中的内容为空时显示的文字内容
PasswordChar	密码输入的替代字符
Text	显示为编辑框中的文本内容

4.1.1. CharCase

property CharCase: TEditCharCase;

  设置字符的大小写转换类型。

名称	说明
ecNormal	普通模式，不进行大小写转换
ecLowerCase	将所有的字母转换为小写
ecUpperCase	将所有的字母转换为大写

4.1.2. ClearButton

property ClearButton: Boolean;

  设置是否在编辑框中存在内容时，在编辑框右侧显示清除按钮，其样式如下图所示。

4.1.3. EmptyText

property EmptyText: string;

  设置编辑框为空时编辑框内显示的提示内容。其样式如下图所示。当向编辑框中输入内容时该提示信息会被输入的内容覆盖。

4.1.4. PasswordChar

property PasswordChar: Char;

  当输入的信息为敏感内容（比如密码）时使用的属性，该属性将输入的字符替换为该属性设定的字符。例如当该属性指定为*时，输入框的显示如下图所示。

4.1.5. Text

property Text: TCaption;

  设置编辑框中显示的文本内容。

  UgAppEdit控件是单行文本输入控件，可以设置其标签、大小写、只读、是否可用、密码等属性，常用事件有输入内容发生变化事件，光标进入事件、光标离开事件、键盘离开事件等。

4.2. 应用

4.2.1. 布局

  在设计界面，放置8个UgAppEdit控件，布局如图所示。

• UgAppEdit01

属性	取值	说明
FieldLabel	Default	标签：Default
Text	UgAppEdit01	文本框中显示的内容

• UgAppEdit02

属性	取值	说明
FieldLabel	Password	标签：Password
PasswordChar	*	密码输入字段，代替字符为*
Text	UgAppEdit02	文本框中显示的内容

• UgAppEdit03

属性	取值	说明
FieldLabel	ReadOnly	标签：ReadOnly
ReadOnly	True	只读
Text	UgAppEdit03	文本框中显示的内容

• UgAppEdit04

属性	取值	说明
FieldLabel	Disable	标签：Disable
Enabled	False	不可用
Text	UgAppEdit04	文本框中显示的内容

• UgAppEdit05

属性	取值	说明
FieldLabel	Empty Text	标签：Empty Text
Empty Text	请输入信息	不可用
Text		不填写内容

• UgAppEdit06

属性	取值	说明
FieldLabel	LowerCase	标签：LowerCase
CharCase	ecLowerCase	自动转换为小写
Text	UgAppEdit06	文本框中显示的内容

• UgAppEdit07

属性	取值	说明
FieldLabel	UpperCase	标签：UpperCase
CharCase	ecUpperCase	自动转换为大写
Text	UgAppEdit07	文本框中显示的内容

• UgAppEdit07

属性	取值	说明
FieldLabel	OutPut	标签：OutPut
CharCase	ecNormal	大小写输入一致
ClearButton	False	末尾清除按钮
Text	UgAppEdit08	文本框中显示的内容

4.2.2. 功能

1. UgAppEdit01是一个默认输入框。
2. UgAppEdit02是一个密码输入框。
3. UgAppEdit03是一个只读输入框。
4. UgAppEdit04是一个禁用的输入框。
5. UgAppEdit05是一个输入框为空时带有输入提示信息的输入框。
6. UgAppEdit06是一个自动将输入字母转换为小写字母的输入框。
7. UgAppEdit07是一个自动将输入字母转换为大写字母的输入框。
8. UgAppEdit08是一个用来显示各个输入框的输入内容的输入框；
9. UgAppEdit01输入内容发生变化时将触发OnChange事件，在UgAppEdit08里显示输入的内容。
10. UgAppEdit02在光标进入时将触发OnEnter事件，在UgAppEdit08里显示已有的内容。
11. UgAppEdit05在按键弹起时将触发OnKeyUp事件，在UgAppEdit08里显示输入的内容。
12. UgAppEdit06在光标离开时将触发OnEdit事件，在UgAppEdit08里显示输入的内容。

4.2.3. 代码

//JScript
function UgAppEdit01OnChange(sender)
//输入内容发生变化时输出显示
{
  UgAppEdit08.Text = UgAppEdit01.Text;
}

function UgAppEdit02OnEnter(sender)
//光标进入时输出显示
{
  UgAppEdit08.Text = UgAppEdit02.Text;
}

function UgAppEdit05OnKeyUp(sender,key,shift)
//按键离开时输出显示
{
  UgAppEdit08.Text = UgAppEdit05.Text;
}

function UgAppEdit06OnExit(sender)
//光标离开时显示
{
  UgAppEdit08.Text = UgAppEdit06.Text;
}

//PasScript
procedure UgAppEdit01OnChange(sender: tobject);
//输入内容发生变化时输出显示
begin
  UgAppEdit08.Text := UgAppEdit01.Text;
end;

procedure UgAppEdit02OnEnter(sender: tobject);
//光标进入时输出显示
begin
  UgAppEdit08.Text := UgAppEdit02.Text;
end;

procedure UgAppEdit05OnKeyUp(sender: tobject;var key: word;shift: tshiftstate);
//按键离开时输出显示
begin
  UgAppEdit08.Text := UgAppEdit05.Text;
end;

procedure UgAppEdit06OnExit(sender: tobject);
//光标离开时显示
begin
  UgAppEdit08.Text := UgAppEdit06.Text;
end;

Begin
  
End.

// Make sure to add code blocks to your code group

5. TUgAppImage

  TUgAppImage主要用来加载和显示图片，设置其各个属性可以出现不同的显示效果。

5.1. 属性

属性	功能说明
AutoSize	是否根据图片自动控制控件的大小
Center	图片是否居中
Stretch	图片是否进行拉伸以适应控件大小
Picture	设置图片显示
Url	指定图片显示的地址

5.1.1. AutoSize

property AutoSize: Boolean;

  是否根据图片自动控制控件的大小。

5.1.2. Center

property Center: Boolean;

  图片是否在控件居中位置。

5.1.3. Stretch

property Stretch: Boolean;

  设置图片是否进行拉伸以适应控件大小。

5.1.4. Picture

property Picture: TPicture;

  设置显示的图片。点击属性列表中的Picture属性右侧的[√]按钮，或者双击图片控件，打开图片显示的对话框。

  点击[Load]，打开文件上传的对话框。

  点击[Browse...]，打开文件选择对话框，选择所需的图片，点击[确定]，上传文件的对话框中出现文件名，点击[Upload]将选择的文件上传至图片编辑器中。待图片编辑器中显示上传的图片文件后，点击[Save]以保存更改。

  也可以在脚本中指定服务器上的图片文件进行显示。

//JScript
UgAppImage01.Picture.LoadFromFile(UGSM.FilesFolder + "images\\map.png");

//PasScript
UgAppImage01.Picture.LoadFromFile(UGSM.FilesFolder + 'images\map.png');

// Make sure to add code blocks to your code group

5.1.5. Url

property Url: string;

  用于指定显示的图片的Url地址。

//JScript
UgAppImage01.Url := UGSM.FilesFolder + "images\map.png";

//PasScript
UgAppImage01.Url := UGSM.FilesFolder + 'images\map.png';

// Make sure to add code blocks to your code group

  UgAppImage控件主要用来加载和显示图片，设置其各个属性可以出现不同的显示效果。

5.2. 应用

5.2.1. 布局

  在服务器端文件目录中的的files文件夹下新建一个images文件夹，其中放置图片map.png。

  在设计器界面中从上至下，从左至右分别放置UgAppImage01~UgAppImage06。

  其中UgAppImage01~UgAppImage04需自行手动上传图片，点击属性列表中的Picture属性右侧的按钮，打开图片显示的对话框。

  点击[Load]，打开文件上传的对话框。

  点击[Browse...]，打开文件选择对话框，选择map.png，点击[确定]，上传文件的对话框中出现文件名，点击[Upload]将选择的文件上传至图片编辑器中。待图片编辑器中显示上传的图片文件后，点击[Save]以保存更改。

• UgAppImage02

属性	取值	说明
AutoSize	True	控件根据图片自动调整大小

• UgAppImage03

属性	取值	说明
Center	True	居中

• UgAppImage04

属性	取值	说明
Stretch	True	自动拉伸

• UgAppImage05

属性	取值	说明
Transparent	True	透明
Picture	空	窗口创建时自动加载图片

• UgAppImage06

属性	取值	说明
Picture	空	窗口创建时自动加载图片
Url		窗口创建时自动载入图片

5.2.2. 功能

1. UgAppImage01~UgAppImage04都通过Picture属性静态配置图片文件。
2. UgAppImage01其他属性采用默认属性，图片如果比控件大则只显示图片左上角的一部分图像。
3. UgAppImage02设置了AutoSize属性，图像控件则根据图像实际大小自动调整大小。
4. UgAppImage03设置了Center属性，实际上没有什么效果。
5. UgAppImage04设置了Stretch属性，图片将根据控件大小自动拉伸。
6. UgAppImage05设置了Transparent属性，并且在UgAppImage04和UgAppImage05下面摆放了UgLabel控件。
7. UgAppRunFrame的OnAfterRunScript事件设置UgAppImage05的图片加载操作。
8. UgAppImage06通过设置Url属性，在指定的目录下加载图片。

5.2.3. 代码

//JScript
function UgAppRunFrameOnAfterRunScript(sender)
{
  UgAppImage05.Picture.LoadFromFile(UGSM.FilesFolder + "images\\map.png");
  UgAppImage06.Url = UGSM.FilesFolder + "images\\map.png";
}

//PasScript
procedure UgAppRunFrameOnAfterRunScript(const sender: tobject);
begin
  UgAppImage05.Picture.LoadFromFile(UGSM.FilesFolder + 'images\map.png');
  UgAppImage06.Url := UGSM.FilesFolder + 'images\map.png';
end;

// Make sure to add code blocks to your code group

6. TUgAppLabel

  TUgAppLabel是标签组件，用于在页面上需要的地方做提示，可用于标签、字段和内容显示，设置其Caption属性就设置了其显示的内容，设置其AutoSize可以自动去掉其签后的空格。

6.1. 属性

属性	功能说明
Caption	设置标签显示的内容
AutoSzie	根据标签文字显示的内容来确定控件大小

  UgAppLabel是标签控件，用于在页面上需要的地方做提示，可用于标签、字段和内容显示，也可以用作超链接，设置其Caption属性就设置了其显示的内容，设置其AutoSize可以自动去掉其签后的空格。

6.2. 应用

6.2.1. 布局

7. TUgAppSelect

  TUgAppSelect是下拉选择组件。点击后，在屏幕底部会显示表格信息，其中会显示可选择的项目。

7.1. 属性

属性	功能说明
ItemIndex	控件当前选择项的索引号
Items	设置可选择的项目
Sorted	设置是否对选项进行排序

7.1.1. ItemIndex

property ItemIndex: Integer;

  该属性指定当前选择项的索引号，索引号从0开始，默认选项为-1，即不选任何一个选项。

7.1.2. Items

property Items: TStrings;

  设置选择项。点击属性右侧的[√]按钮或者双击该属性打开编辑窗口，输入选项的内容，每项均需要换行。

7.1.3. Sorted

property Sorted: Boolean;

  该属性用于确定是否需要对选项进行排序。

7.2. 事件

事件	何时触发
OnChange	当选项发生变化时触发该事件

  UgAppSelect是下拉选择控件，在窗口上放置三个UgAppSelect控件和三个UgAppButton控件。

7.3. 应用

7.3.1. 布局

• UgAppSelect01

属性	取值	说明
Items	0/1/2/3/4/5/6/7/8/9	添加可选项

• UgAppSelect02

属性	取值	说明
Items	上海市/浙江省/江苏省/安徽省/福建省/广东省	添加可选项
sorted	True	自动排序

7.3.2. 功能

1. UgAppSelect01静态添加了一些可选项，点击UgAppButton01后显示第三项内容。
2. UgAppSelect02静态添加了一些可选项，点击UgAppButton02后显示当前选中项的内容。
3. UgAppSelect03动态添加可选项，点击UgAppButton03后动态添加一些可选项。

7.3.3. 代码

//JScript
function UgAppButton01OnClick(sender)
//显示第三个选项
{
  UgAppSelect01.ItemIndex = 2;
}

function UgAppButton02OnClick(sender)
//显示选中项的内容
{
  ShowMessage(UgAppSelect02.Items.Strings[UgAppSelect02.ItemIndex]);
}

function UgAppButton03OnClick(sender)
{
  var tmpStr,i;
  UgAppSelect03.Clear; //清空当前值
  UgAppSelect03.Items.Clear; //清空可选项
  for (i = 0; i <= 10; i++)
  {
    tmpStr = "ABC" + IntToStr(i);
    UgAppSelect03.Items.Add(tmpStr);
  }
  UgAppSelect03.ItemIndex = 5; //指定显示哪一个
}

//PasScript
procedure UgAppButton01OnClick(sender: tobject);
//显示第三个选项
begin
  UgAppSelect01.ItemIndex := 2;
end;

procedure UgAppButton02OnClick(sender: tobject);
//显示选中项的内容
begin
  ShowMessage(UgAppSelect02.Items.Strings[UgAppSelect02.ItemIndex]);
end;

procedure UgAppButton03OnClick(sender: tobject);
Var 
  tmpStr: String;
  i: Integer;
begin
  UgAppSelect03.Clear; //清空当前值
  UgAppSelect03.Items.Clear; //清空可选项
  for i := 0 to 10 Do
  Begin
    tmpStr := 'ABC' + IntToStr(i);
    UgAppSelect03.Items.Add(tmpStr);
  End;
  UgAppSelect03.ItemIndex := 5; //指定显示哪一个
end;

Begin
  
End.

// Make sure to add code blocks to your code group

8. TUgAppBitBtn

  TUgAppBiBtn组件也是按钮，和TUgAppButton的主要区别就是TUgAppBitBtn有Glyph属性，能够设置图标文件。如果想要按钮关联类型更加丰富的图标图片，可以通过其Images属性关联UgNativeImageList控件并设置其ImageIndex实现。

8.1. 属性

属性	功能说明
BadgeText	按钮右上角的红色标记中显示的内容
Caption	按钮显示的文字内容
Glyph	设置图像显示的内容
IconAlign	设置显示按钮图标的对齐方式
IconCls	设置按钮显示的图标名称
UI	设置按钮显示的外观样式风格

8.1.1. BadgeText

property BadgeText: string;

  设置按钮右上角的红色标记中显示的内容。标记显示的样式如下图。

8.1.2. Caption

property Caption: string;

  设置按钮显示的文字的内容。显示的内容可参考上图中的HelloWorld。

8.1.3. Glyph

property Glyph: TBitmap;

  设置显示的图片。

  设置显示的图片。点击属性列表中的Glyph属性右侧的[√]按钮，或者双击图片控件，打开图片显示的对话框。

  点击[Load]，打开文件上传的对话框。

  点击[Browse...]，打开文件选择对话框，选择所需的图片，点击[确定]，上传文件的对话框中出现文件名，点击[Upload]将选择的文件上传至图片编辑器中。待图片编辑器中显示上传的图片文件后，点击[Save]以保存更改。

8.1.4. IconAlign

property IconAlign: TUniIconAlign;

  设置图标在按钮中的位置。

名称	图例
iaLeft
iaBottom
iaCenter
iaRight
iaTop

8.1.5. IconCls

property IconCls: string;

  设置图标的名称。

  其中可使用的部分图标类型如下：

8.1.6. UI

property UI: string;

  设置按钮的外观风格。

名称	说明	图示
normal	普通按钮
round	圆角矩形
action	执行按钮
decline	拒绝按钮
confirm	确认按钮
plain	扁平按钮
raised	悬浮按钮

8.2. 应用

  UgAppBiBtn控件也是按钮，和UgAppButton的主要区别就是UgAppBitBtn有Glyph属性，能够设置图标文件。如果想要按钮关联类型更加丰富的图标图片，可以通过其Images属性关联UgNativeImageList控件并设置其ImageIndex实现。

8.2.1. 布局

• UgAppBitBtn01

属性	取值	说明
Caption	UgAppBitBtn01	按钮的文字内容
BadgeText	0	右上角的提示

• UgAppBitBtn02

属性	取值	说明
Caption	UgAppBitBtn02	按钮的文字内容
Glyph	点击属性列表中的该属性以手动上传	图标文件

• UgAppBitBtn03

属性	取值	说明
Caption	UgAppBitBtn03	按钮的文字内容
IconCls	more	更多的图标

• UgAppBitBtn04

属性	取值	说明
Caption	UgAppBitBtn04	按钮的文字内容
UI	round	圆角风格按钮

9. TUgAppCheckBox

  TUgAppCheckBox是选择按钮。包含一个用于勾选的框以及文字描述信息，点击可将其勾选。

9.1. 属性

属性	功能说明
Caption	设置控件的标签说明
Checked	设置控件是否处于选中状态

9.1.1. Caption

property Caption: TCaption;

  该属性用于设置控件的标签说明。

9.1.2. Checked

property Checked: Boolean;

  该属性用于设置当前控件是否处于选中的状态。

9.2. 应用

  UgAppCheckBox是多选按钮。

9.2.1. 布局

• UgAppCheckBox01

属性	取值	说明
FieldLabel	UgAppCheckBox01	显示的标签内容
FieldLabelAlign	laLeft	标签靠左侧
Checked	True	勾选

• UgAppCheckBox02

属性	取值	说明
FieldLabel	UgAppCheckBox02	显示的标签内容
FieldLabelAlign	laRight	标签靠右侧

• UgAppCheckBox03

属性	取值	说明
FieldLabel	UgAppCheckBox03	显示的标签内容
FieldLabelAlign	laTop	标签靠上侧

9.2.2. 功能

UgAppCheckBox01~UgAppCheckBox03的OnClick事件是否被勾选，如果勾选了就显示其Caption内容。

9.2.3. 代码

//JScript
//选择01，显示01中的内容 
function UgAppCheckBox01OnClick(sender)
{
  if (UgAppCheckBox01.Checked)
    ShowMessage(UgAppCheckBox01.Caption);
}

//选择02，显示02中的内容
function UgAppCheckBox02OnClick(sender)
{
  if (UgAppCheckBox02.Checked)
    ShowMessage(UgAppCheckBox02.Caption);
}

//选择03，显示03中的内容
function UgAppCheckBox03OnClick(sender)
{
  if (UgAppCheckBox03.Checked)
    ShowMessage(UgAppCheckBox03.Caption);
}

//PasScript
选择01，显示01中的内容 
procedure UgAppCheckBox01OnClick(sender: tobject);
begin
  if UgAppCheckBox01.Checked Then
    ShowMessage(UgAppCheckBox01.Caption);
end;

//选择02，显示02中的内容
procedure UgAppCheckBox02OnClick(sender: tobject);
begin
  if UgAppCheckBox02.Checked Then
    ShowMessage(UgAppCheckBox02.Caption);
end;

//选择03，显示03中的内容
procedure UgAppCheckBox03OnClick(sender: tobject);
begin
  if UgAppCheckBox03.Checked Then
    ShowMessage(UgAppCheckBox03.Caption);
end;

Begin
  
End.

// Make sure to add code blocks to your code group

10. TUgAppDatePicker

  TUgAppDatePicker控件是日期选择控件，在移动终端上将以slot上下滑动的方式选择日期。

10.1. 属性

属性	功能说明
Date	设置日期控件当前选择的日期
DateFormat	设置日期显示的格式
MaxYear	设置可选年份的最大数值
MinYear	设置可选年份的最小数值
SlotOrder	设置日期选择界面的年月日的排序顺序

10.1.1. Date

property Date: TDateTime;

  设置日期控件当前选择的日期。该属性可以通过脚本赋值来实现显示当天日期的功能。

//JScript
UgAppDatePicker01.Date := Date; //初始化为当天日期

//PasScript
UgAppDatePicker01.Date = Date; //初始化为当天日期

// Make sure to add code blocks to your code group

10.1.2. DateFormat

property DateFormat: string

  设置日期显示的格式。比如将日期格式设置为yyyy-MM-dd，则格式化输出的日期格式为2020-04-30。或者将日期格式设置为MM/dd/yy，则格式化输出的日期为04/30/20。

10.1.3. MaxYear

property MaxYear: Integer;

  设置在日期显示中可选的最大年份数值。

10.1.4. MinYear

property MinYear: Integer;

  设置在日期显示中可选的最小年份数值。

10.1.5. SlotOrder

property SlotOrder: string;

  设置选项中的日期显示顺序。比如将其设置为y/m/d，则对应的选择器中显示的内容如下：

10.2. 应用

  UgAppDatePicker控件是日期选择控件，在移动终端上将以slot上下滑动的方式选择日期。

10.2.1. 布局

• UgAppDatePicker01

属性	取值	说明
DateFormat	yyyy-MM-dd	日期格式
MaxYear	2020	最大可选年份
MinYear	2000	最小可选年份
SlotOrder	y/m/d	滑动选择时显示的日期格式

10.2.2. 功能

1. 窗口激活时初始显示当天日期。
2. 点击UgAppBitBtn01时显示UgAppDatePicker01选中的日期。

10.2.3. 代码

//JScript
function UgAppRunFrameOnAfterRunScript(sender)
{
  UgAppDatePicker01.Date = Date; //初始化为当天日期
}

function UgAppBitBtn01OnClick(sender)
{
  ShowMessage(FormatDateTime("yyyyMMdd",UgAppDatePicker01.Date)); //显示选中的日期
}

//PasScript
procedure UgAppRunFrameOnAfterRunScript(const sender: tobject);
begin
  UgAppDatePicker01.Date := Date; //初始化为当天日期
end;

procedure UgAppBitBtn01OnClick(sender: tobject);
begin
  ShowMessage(FormatDateTime('yyyyMMdd',UgAppDatePicker01.Date)); //显示选中的日期
end;

Begin
  
End.

// Make sure to add code blocks to your code group

11. TUgAppList

  TUgAppList是选择列表组件，是移动班APP的主要控件之一，可以用来以上下滑动的方式显示和选择可用数据，也可以用来做可滑动选择菜单或功能分类。

11.1. 属性

属性	功能说明
Items	设置列表中的选项
ItemIndex	设置当前选中项的索引号
DisclosureIcon	是否在列表末尾显示选项
Grouped	是否对选项进行分组显示
Sorted	是否排序后进行显示
Striped	列是否使用交替的颜色进行显示

11.1.1. Items

property Items: TStrings;

  设置选择项。点击属性右侧的[√]按钮或者双击该属性打开编辑窗口，输入选项的内容，每项均需要换行。

  或者在脚本中对项目进行配置。

//JScript
  UgAppList01.Clear;
  UgAppList01.Items.Add("AAA111");
  UgAppList01.Items.Add("张三");
  UgAppList01.Items.Add("AAA222");
  UgAppList01.Items.Add("王小虎");
  UgAppList01.Items.Add("AAA333");
  UgAppList01.Items.Add("赵本山");
  UgAppList01.Items.Add("BBB111");
  UgAppList01.Items.Add("王大拿");
  UgAppList01.Items.Add("BBB222");
  UgAppList01.Items.Add("张家国");
  UgAppList01.Items.Add("BBB333");

//PasScript
  UgAppList01.Clear;
  UgAppList01.Items.Add('AAA111');
  UgAppList01.Items.Add('张三');
  UgAppList01.Items.Add('AAA222');
  UgAppList01.Items.Add('王小虎');
  UgAppList01.Items.Add('AAA333');
  UgAppList01.Items.Add('赵本山');
  UgAppList01.Items.Add('BBB111');
  UgAppList01.Items.Add('王大拿');
  UgAppList01.Items.Add('BBB222');
  UgAppList01.Items.Add('张家国');
  UgAppList01.Items.Add('BBB333');

// Make sure to add code blocks to your code group

11.1.2. ItemIndex

property ItemIndex: Integer;

  该属性指定当前选择项的索引号，索引号从0开始，默认选项为-1，即不选任何一个选项。

11.1.3. DisclosureIcon

property DisclosureIcon: Boolean;

  该属性用于在每项的右侧显示一个指示图标。例如，设置为True，其显示效果如下图。

11.1.4. Grouped

property Grouped: Boolean;

  该属性用于设置选项是否进行分组显示。例如，设置为True，其显示效果如下图。

11.1.5. Sorted

property Sorted: Boolean;

  是否对选项进行排序。例如，设置为True，其显示效果如下图。

11.1.6. Striped

property Striped: Boolean;

  列是否使用交替的颜色进行显示。例如，设置为True，其显示效果如下图。

11.2. 事件

事件	何时触发
OnDisClose	当Disclosure=True时，点击选项右侧的图标时触发该事件
OnSelect	当点击控件中的选项时触发该事件
OnSwipe	当控件被点击且有扫过的操作时触发该事件
OnClickHold	当控件被点击并有保持点击状态时触发该事件
OnDblClick	当控件被双击时触发该事件

11.3. 应用

  UgAppList是选择列表控件，是移动班APP的主要控件之一，可以用来以上下滑动的方式显示和选择可用数据线，也可以用来做可滑动选择菜单或功能分类。

11.3.1. 主要属性

  在主窗口中放置一个UgAppList控件，在主窗体的OnAfterRunScript事件中为UgAppList添加可选项代码，UgAppList有几个常用属性可以改变其显示样式和功能，分别是DisclosureIcon、Grouped、Sorted、Striped，可以分别设置后运行体验效果。这些属性需在设计阶段就设置好，在运行阶段通过代码设置其属性没有效果。

11.3.1.1. 布局

• UgAppList01

属性	取值	说明
Align	alClient	全屏占满
Items		增加一些可选项
DisclosureIcon	False	记录末尾箭头按钮
Grouped	False	是否分组显示
Sorted	False	是否排序后显示
Striped	False	是否奇数偶数行分色显示

11.3.1.2. 功能

1. 主窗口创建时自动通过OnAfterRunScript事件向UgAppList01中添加可选项。
2. DisclosureIcon属性为True时UgAppList01每行末尾将出现一个小箭头按钮，点击后会触发OnDisclose事件。
3. Grouped属性为True时UgAppList01将以每行首字母或汉字进行分组显示。
4. Sorted属性为True时UgAppList01将以排序方式显示各个可选项。
5. Striped属性为True时UgAppList01的奇数行和偶数行将以不同背景色间隔显示。

11.3.1.3. 代码

//JScript
function UgAppRunFrameOnAfterRunScript(sender)
{
  UgAppList01.Clear;
  UgAppList01.Items.Add("AAA111");
  UgAppList01.Items.Add("张三");
  UgAppList01.Items.Add("AAA222");
  UgAppList01.Items.Add("王小虎");
  UgAppList01.Items.Add("AAA333");
  UgAppList01.Items.Add("赵本山");
  UgAppList01.Items.Add("BBB111");
  UgAppList01.Items.Add("王大拿");
  UgAppList01.Items.Add("BBB222");
  UgAppList01.Items.Add("张家国");
  UgAppList01.Items.Add("BBB333");
}

//PasScript
procedure UgAppRunFrameOnAfterRunScript(const sender: tobject);
begin
  UgAppList01.Clear;
  UgAppList01.Items.Add('AAA111');
  UgAppList01.Items.Add('张三');
  UgAppList01.Items.Add('AAA222');
  UgAppList01.Items.Add('王小虎');
  UgAppList01.Items.Add('AAA333');
  UgAppList01.Items.Add('赵本山');
  UgAppList01.Items.Add('BBB111');
  UgAppList01.Items.Add('王大拿');
  UgAppList01.Items.Add('BBB222');
  UgAppList01.Items.Add('张家国');
  UgAppList01.Items.Add('BBB333');
end;

Begin
  
End.

// Make sure to add code blocks to your code group

11.3.2. 事件

  对UgAppList控件的每条记录进行不同动作时将触发不同事件，“点击”将触发OnClick事件，“按住”将触发OnClickHold事件，“双击”将触发OnDblClick事件，“点击记录末尾”将触发OnDisclose事件，“选择”一条记录将触发OnClose事件，“按住拖动”将触发OnSwipe事件。

11.3.2.1. 布局

• UgAppList01

属性	取值	说明
Align	alClient	全屏占满
Items	Click/ClickHold/DblClick/Disclose/Select/Swipe	增加一些可选项
DisclosureIcon	True	记录末尾箭头按钮

11.3.2.2. 功能

1. 点击第一条记录时将显示OnClick事件。

2. 按住第二条记录时将显示OnClickHold事件。

3. 双击第三条记录时将显示OnDblClick事件。

4. 点击第四条记录末尾的小箭头按钮时将显示OnDisclose事件。

5. 选择第五条记录时将显示OnSelect事件。

6. 按住第六条记录滑动一段距离再放手将触发OnSwipe事件。

11.3.2.3. 代码

//JScript
function UgAppList01OnClick(sender)
//单击触发动作
{
  if (UgAppList01.ItemIndex == 0)
    ShowMessage("You are OnClick:" + UgAppList01.Items.Strings[UgAppList01.ItemIndex]);
}

function UgAppList01OnClickHold(sender)
//长按触发动作
{
  if (UgAppList01.ItemIndex == 1)
    ShowMessage("You are OnClickHold:" + UgAppList01.Items.Strings[UgAppList01.ItemIndex]);
}

function UgAppList01OnDblClick(sender)
//双击触发动作
{
  if (UgAppList01.ItemIndex == 2)
    ShowMessage("You are OnDblClick:" + UgAppList01.Items.Strings[UgAppList01.ItemIndex]);
}

function UgAppList01OnDisclose(sender)
//点击尾部触发动作
{
  if (UgAppList01.ItemIndex == 3)
    ShowMessage("You are OnDisclose:" + UgAppList01.Items.Strings[UgAppList01.ItemIndex]);
}

function UgAppList01OnSelect(sender)
//选择触发动作
{
  if (UgAppList01.ItemIndex == 4)
    ShowMessage("You are OnSelect:" + UgAppList01.Items.Strings[UgAppList01.ItemIndex]);
}

function UgAppList01OnSwipe(sender)
//拖动触发动作
{
  if (UgAppList01.ItemIndex == 5)
    ShowMessage("You are OnSwipe:" + UgAppList01.Items.Strings[UgAppList01.ItemIndex]);
}

//PasScript
procedure UgAppList01OnClick(sender: tobject);
//单击触发动作
begin
  if UgAppList01.ItemIndex = 0 Then
    ShowMessage('You are OnClick:' + UgAppList01.Items.Strings[UgAppList01.ItemIndex]);
end;

procedure UgAppList01OnClickHold(sender: tobject);
//长按触发动作
begin
  if UgAppList01.ItemIndex = 1 Then
    ShowMessage('You are OnClickHold:' + UgAppList01.Items.Strings[UgAppList01.ItemIndex]);
end;

procedure UgAppList01OnDblClick(sender: tobject);
//双击触发动作
begin
  if UgAppList01.ItemIndex = 2 Then
    ShowMessage('You are OnDblClick:' + UgAppList01.Items.Strings[UgAppList01.ItemIndex]);
end;

procedure UgAppList01OnDisclose(sender: tobject);
//点击尾部触发动作
begin
  if UgAppList01.ItemIndex = 3 Then
    ShowMessage('You are OnDisclose:' + UgAppList01.Items.Strings[UgAppList01.ItemIndex]);
end;

procedure UgAppList01OnSelect(sender: tobject);
//选择触发动作
begin
  if UgAppList01.ItemIndex = 4 Then
    ShowMessage('You are OnSelect:' + UgAppList01.Items.Strings[UgAppList01.ItemIndex]);
end;

procedure UgAppList01OnSwipe(sender: tobject);
//拖动触发动作
begin
  if UgAppList01.ItemIndex = 5 Then
    ShowMessage('You are OnSwipe:' + UgAppList01.Items.Strings[UgAppList01.ItemIndex]);
end;

Begin
  
End.

// Make sure to add code blocks to your code group

12. TUgAppPanel

  UgAppPanel是面板控件，可用于盛放其他小控件，并且其本身具有对齐和收纳（收起、折叠）属性。

12.1. 属性

属性	功能说明
Collapsed	设置面板是否收起，当Collapsible属性为True时该属性可用
CollapseDirection	设置面板的收起方向
Collapsible	设置面板是否支持收起
Title	设置面板的标题
TitleAlign	设置面板标题的对齐方式
TitleVisible	设置标题是否可见

12.1.1. Collapsed

property Collapsed: Boolean;

  设置面板是否处于收起的状态，该属性仅在Collapsible属性设置为True时可以使用。

  当该属性设置为False时，程序运行时界面处于展开状态。

  当该属性设置为True时，程序运行时界面处于收起状态。

12.1.2. CollapseDirection

property CollapseDirection: TUniCollapseDirection;

  该属性用于设置面板的收起的方向，该属性仅在Collapsible设置为True时有效。

名称	说明
cdDefault/cdTop	默认的收起方案，向上方收起
cdBottom	向下方收起
cdLeft	向左侧收起
cdRight	向右侧收起

12.1.3. Collapsible

property Collapsible: Boolean;

  该属性用于设置面板是否支持收起。

12.1.4. Title

property Title: string;

  设置面板的标题。

12.1.5. TitleAlign

property TitleAlign: TAlignment;

  设置面板标题的对齐方式。

名称	说明	图示
taLeftJustify	标题左对齐
taRightJustify	标题右对齐
taCenter	标题居中

12.1.6. TitleVisible

property TitleVisible: Boolean;

  设置标题是否可见。为True时显示标题内容。

12.2. 应用

  UgAppPanel是面板控件，可用于盛放其他小控件，并且其本身具有对齐和收纳（收起、折叠）属性。本例在窗体上放置一个UgAppPanel01控件，在其内部放置一个UgAppPanel02控件，分别将两个UgAppPanel设置为可以收起。

12.2.1. 布局

• UgAppPanel01

属性	取值	说明
Align	alClient	客户区对齐
Color	clYellow	黄色
Collapsible	True	是否可以折叠：是
CollapseDirection	cdTop	折叠方向：顶部
Title	我是一个主UgAppPanel	标题
TitleAlign	taCenter	标题对齐方式：居中
TitleVisible	True	标题是否可见：是

• UgAppPanel02

属性	取值	说明
Align	alBottom	底部对齐
Color	clGreen	绿色
Collapsible	True	是否可以折叠：是
CollapseDirection	cdLeft	折叠方向：左侧
Title	我是一个子UgAppPanel	标题
TitleAlign	taCenter	标题对齐方式：居中
TitleVisible	True	标题是否可见：是

12.2.2. 功能

UgAppPanel02在UgAppPanel01的底部，带有可收起的三角按钮，点击按钮后将左侧收纳起来；UgAppPanel01在主窗口的顶部，带有可收纳三角按钮，点击按钮后将向顶部收纳起来。

13. TUgAppTopPanel

  UgAppTopPanel是面板控件，可用于盛放其他小控件，并且其本身具有对齐和收纳（收起、折叠）属性。该控件的属性与UgAppPanel相同。

14. TUgAppContainerPanel

  UgAppContainerPanel和UgAppPanel一样也是个面板，也可以盛放控件，但是它本身在运行时是隐藏的，主要用于做窗口区间分隔和盛放、摆放控件。

14.1. 应用

  UgAppContainerPanel和UgAppPanel一样也是个面板，也可以盛放控件，但是它本身在运行时是隐藏的，主要用于做窗口区间分隔和盛放、摆放控件。本例在窗体上摆放一个UgAppContainerPanel控件，在其中随意摆放几个控件。

15. TUgAppCarousel

  UgAppCarousel是“旋转木马”，一般用作App主页顶部图片的自动轮换。在主窗口上摆放一个UgAppCarousel，在窗体结构查看器的左上角点击[添加]按钮新建页面。

15.1. 属性

属性	功能说明
Direction	幻灯片切换页面的运动方向
PageIndex	当前显示页面的索引号

15.1.1. Direction

property Direction: TUniCarouselDirection

  设置控件切换页面时页面的运动方向。

名称	说明
cdHorizontal	水平方向运动
cdVertical	垂直方向运动

15.1.2. PageIndex

property PageIndex: Integer;

  设置控件显示当前页面的索引值。

  UgAppCarousel是“旋转木马”，一般用作App主业顶部图片的自动轮换。本例在主窗口上摆放一个UgAppCarousel，在窗体结构查看器的左上角点击[添加]按钮，新建三个页面。再点击UgAppCarousel01控件，分别选择UnimCarouselPage01-UnimCarouselPage03切换到不同页面，在页面上分别放置UgAppImage图像控件。将UgAppCarousel01和UgAppImage01-UgAppImage03的Align属性都设置为alTop。分别为UgAppImage01-UgAppImage03的Picture设置一张图片。

15.2. 应用

15.2.1. 布局

• UgCarousel01

属性	取值	说明
Align	alClient	客户端占满
Direction	cdHorizontal	横向滑动
PageIndex	0	当前显示哪个页面

• UgAppImage01~UgAppImage03

属性	取值	说明
Align	alTop	顶部占满
Height	240	图像显示的高度
Picture		点击属性列表右侧的按钮以进行图片编辑上传
Stretch	True	图片拉伸对齐

• UgAppTimer01

属性	取值	说明
Enabled	True	启用计时功能
Interval	5000	每隔5000毫秒触发OnTimer事件

15.2.2. 功能

  在项目主窗口顶部出现一个图片旋转木马，手指滑动，将轮回切换不同页面，显示不同图片，如果想要自动定时轮播图片，就需要再增加一个UgAppTimer控件，设置UgAppTimer的OnTimer事件控制UgAppCarousel01的ActivePage即可。

15.2.3. 代码

//JScript
var pageNo;
function UgAppTimer01OnTimer(sender)
{
  UgAppCarousel01.PageIndex = pageNo;
  pageNo = pageNo + 1;
  if (pageNo == 3)
    pageNo = 0;
}

function UgAppRunFrameOnAfterRunScript(sender)
{
  pageNo = 0;
}

//PasScript
Var
  pageNo: Integer;
procedure UgAppTimer01OnTimer(sender: tobject);
begin
  UgAppCarousel01.PageIndex := pageNo;
  pageNo := pageNo + 1;
  if pageNo = 3 Then
    pageNo := 0;
end;

procedure UgAppRunFrameOnAfterRunScript(const sender: tobject);
begin
  pageNo := 0;
end;

Begin
  
End.

// Make sure to add code blocks to your code group

16. TUgAppMemo

  UgAppMemo是多行文本编辑控件。可用于在其中显示冗余复杂的多行文本的信息。

16.1. 属性

属性	功能说明
ClearButton	是否显示清除按钮
EmptyText	在编辑框中内容为空时显示提示内容
Lines	编辑框中显示的内容
MaxRows	允许输入的最大行数
ReadOnly	设置是否为只读

16.1.1. ClearButton

property ClearButton: Boolean;

  设置当文本编辑框中存在内容时在编辑框右侧显示清除按钮。

16.1.2. EmptyText

property EmptyText: string;

  设置文本框内容为空时显示的提示内容。

16.1.3. Lines

property Lines: TStrings;

  设置编辑框的文本内容。点击属性右侧的[√]按钮或者双击该属性打开编辑窗口，输入内容。

  也可以在脚本中指定显示的内容。

//JScript
  var i;
  UgAppMemo01.Clear;
  UgAppMemo01.Lines.Clear;
  //显示第几行
  for (i = 1; i <= 10; i++)
  {
    UgAppMemo01.Lines.Add("The RowNo is" + IntToStr(i));
  }

//PasScript
Var
  i: Integer;
begin
  UgAppMemo01.Clear;
  UgAppMemo01.Lines.Clear;
  //显示第几行
  for i := 1 to 10 Do
  Begin
    UgAppMemo01.Lines.Add('The RowNo is' + IntToStr(i));
  End;
end;

// Make sure to add code blocks to your code group

16.1.4. MaxRows

property MaxRows: Integer;

  设置允许输入的最大行数。

16.1.5. ReadOnly

property ReadOnly: Boolean;

  设置文本编辑框是否为只读状态。

16.2. 应用

  UgAppMemo是多行文本控件。

16.2.1. 布局

• UgAppMemo01

属性	取值	说明
Align	alTop	控件位于顶部

• UgAppBitBtn01

属性	取值	说明
Caption	显示UgAppMemo中的行数	按钮显示的文字内容

16.2.2. 功能

  在窗口的OnAfterRunScript事件中动态向UgAppMemo01中添加文本内容，点击下方按钮显示已经添加的总行数。

16.2.3. 代码

//JScript
function UgAppRunFrameOnAfterRunScript(sender)
{
  var i;
  UgAppMemo01.Clear;
  UgAppMemo01.Lines.Clear;
  for (i = 1; i <= 10; i++)
  {
    UgAppMemo01.Lines.Add(" Row No is " + IntToStr(i));
  }
}

function UgAppBitBtn01OnClick(sender)
{
  ShowMessage(" Total Lines " + IntToStr(UgAppMemo01.Lines.Count));
}

//PasScript
procedure UgAppRunFrameOnAfterRunScript(const sender: tobject);
Var
  i: Integer;
begin
  UgAppMemo01.Clear;
  UgAppMemo01.Lines.Clear;
  for i := 1 to 10 Do
  Begin
    UgAppMemo01.Lines.Add(' Row No is ' + IntToStr(i));
  End;
end;

procedure UgAppBitBtn01OnClick(sender: tobject);
begin
  ShowMessage(' Total Lines ' + IntToStr(UgAppMemo01.Lines.Count));
end;

Begin
  
End.

// Make sure to add code blocks to your code group

17. TUgAppNumberEdit

  UgAppNumberEdit是输入控件，只能输入数字，可以限制输入的最大值和最小值，输入不符合要求的数字后将有错误提示。

17.1. 属性

属性	功能说明
MaxValue	允许输入的最大值
MinValue	允许输入的最小值
Value	输入的数值

17.1.1. MaxValue

property MaxValue: Real;

  设置允许输入的最大值，默认为0，表示为不限制，超过该最大值后，Vlaue=MaxValue。

17.1.2. MinValue

property MinValue: Real;

  设置允许输入的最小值，默认为0，表示不限制，低于该最小值时，Vlaue=MinValue。

17.1.3. Value

property Value: Real;

  设置输入的数值。该数值需在MaxValue与MinValue之间。

17.2. 应用

  UgAppNumberEdit是输入控件，只能输入数字，可以限制输入的最大值和最小值，输入不符合要求的数字后将有错误提示。

17.2.1. 布局

• UgAppNumberEdit01

属性	取值	说明
FieldLabel	请输入年龄	标签内容
MaxValue	80	允许输入的最大值
MinValue	20	允许输入的最小值
Width	300	控件的显示宽度

• UgAppBitBtn01

属性	取值	说明
Caption	显示输入的值	按钮显示的文字内容

17.2.2. 功能

  设定UgAppNumberEdit01的最大值为80，最小值为20，输入一个值，超过设定范围将有错误提示边框，如果输入值大于最大值，将自动以最大值替换，如果输入值太小，将以最小值替换。点击按钮，提示输入值的大小。

17.2.3. 代码

//JScript
function UgAppBitBtn01OnClick(sender)
{
  //ShowMessage(UgAppNumberEdit01.Text); //两种方法皆可
  ShowMessage(FloatTosTR(UgAppNumberEdit01.Value));
}

//PasScript
procedure UgAppBitBtn01OnClick(sender: tobject);
begin
  //ShowMessage(UgAppNumberEdit01.Text); //两种方法皆可
  ShowMessage(FloatTosTR(UgAppNumberEdit01.Value));
end;

Begin
  
End.

// Make sure to add code blocks to your code group

18. TUgAppTimer

  该组件为一个计时器组件，用于定时触发事件。通过OnTimer事件的设置，可设置其定时触发的方式。

18.1. 属性

属性	说明
ChainMode	是否开启连锁队列模式
DummyEvents	启用该模式可以定时触发心跳事件使浏览器的会话连接不会因为超时断开
Interval	计时事件的触发间隔，以ms为单位
RunOnce	是否仅进行一次事件触发

18.1.1. ChaimMode

property ChainMode: Boolean;

  该属性用于开启/关闭连锁队列模式，这是一个使计时器事件连锁化的特殊模式，计时器会按照时间间隔定时触发事件，如果服务器因为繁忙正在处理上一个OnTimer事件，那么这些事件会在客户端以队列的形式进行排队等待服务器处理。

  如果你的计时器触发时间间隔为5s，你的服务器需要使用30s的时间进行处理的话，那么你就需要使用该属性来为这些事件进行队列化。

18.1.2. DummyEvents

property DummyEvents: Boolean;

  该属性用于为会话设置心跳事件，避免会话超时。

18.1.3. Interval

property Interval: Cardinal;

  设置事件触发的时间间隔。

18.1.4. RunOnce

property RunOnce: Boolean;

  是否仅进行一次事件触发操作。

18.2. 应用

  UgAppTimer控件为计时器，计时单位为毫秒，通常用于扮演定时器触发器的角色和周期性调度器的角色。UgAppTimer是客户端计时器控件，即只能用于前端页面，不能用于后台服务器的定时任务。

18.2.1. 布局

• UgAppTimer01

属性	取值	说明
Interval	1000	间隔周期为1秒
RunOnce	False	只运行一次：否，表示周期重复性运行

• UgAppBitBtn01

属性	取值	说明
Caption	启动/停止	按钮显示的文字内容

18.2.2. 功能

UgAppBitBtn01是启动/停止按钮，按一次停止时间计时，再按一次开始时间计时，时间周期为一秒。

18.2.3. 代码

//JScript
function UgAppTimer01OnTimer(sender)
{
  UgAppLabel01.Caption = FormatDateTime("hh:nn:ss",Now);//显示当前时间
}

function UgAppBitBtn01OnClick(sender)
{
  UgAppTimer01.Enabled = !UgAppTimer01.Enabled; //计时器的启动与停止
}

//PasScript
procedure UgAppTimer01OnTimer(sender: tobject);
begin
  UgAppLabel01.Caption := FormatDateTime('hh:nn:ss',Now);//显示当前时间
end;

procedure UgAppBitBtn01OnClick(sender: tobject);
begin
  UgAppTimer01.Enabled := not UgAppTimer01.Enabled; //计时器的启动与停止
end;

Begin
  
End.

// Make sure to add code blocks to your code group

19. TUgAppFileUpload

  该组件为用于向服务器上传文件的对话框。在执行对应的脚本后可弹出此对话框。

19.1. 属性

属性	说明
Accept	设置允许接收的文件类型
Capture	获取文件（图片的来源）
MaxAllowedSize	设定上传文件的大小限制
Messages	设定上传对话框中显示的信息的内容
MultipleFiles	是否允许上传多个文件
OptimizeMemoryUsage	是否进行内存优化的管理
OverWrite	是否允许覆盖文件
Title	对话框的标题

19.1.1. Accept

property Accept: string;

  设置允许接收的文件类型，比如image。

19.1.2. Capture

property Capture: string;

  设置获取文件的来源，例如此处使用照相机进行获取，设置为camera。

19.1.3. MaxAllowedSize

property MaxAllowedSize: Cardinal;

  该属性为允许上传的文件的最大大小。单位为字节，为0时表示不限制。

19.1.4. Messages

property Messages: TUniCustomUploadMessages;

  该属性设置显示的提示信息内容。

名称	说明
BrowseText	浏览按钮显示的内容
Cancel	取消按钮显示的内容
MaxFilesError	上传文件的数量超过限制后显示的提示信息
MaxSizeError	上传文件的大小超过限制后显示的提示信息
NoFileError	未选择上传的文件时的提示信息
PleaseWait	等待时显示的提示信息
Processing	正在处理过程中显示的提示信息
Upload	上传按钮显示的内容
UploadError	文件上传错误
Uploading	文件正在上传的提示信息
UploadTimeOut	文件上传超时的提示信息

19.1.5. MultipleFiles

property MultipleFiles: Boolean;

  该属性设置控件是否允许多个文件上传。

19.1.6. OptimizeMemoryUsage

property OptimizeMemoryUsage: Boolean;

  该属性设置控件是否进行内存优化。

19.1.7. OverWrite

property Overwrite: Boolean;

  该属性设置控件是否允许对之前的文件进行覆盖操作。

19.1.8. Title

property Title: string;

  该属性设定对话框的标题名称。

19.2. 事件

名称	触发条件
OnCompleted	当控件完成上传时触发该事件
OnMultiCompleted	当控件完成多个文件上传时触发该事件

19.3. 应用

  UgAppFileUpload是文件上传控件，FastWeb平台支持调用智能手机的照片库选择照片上传，又可以调用智能手机的摄像头先拍照后上传。

19.3.1. 布局

• UgAppImage01

属性	取值	说明
Align	alTop	顶部占满
Center	True	居中显示
Picture		自行上传图片以显示

• UgAppFileUpload01

属性	取值	说明
Accept	image	文件格式筛选：图片
Capture	camera	关联设备：照相机
MaxAllowedSize	0	允许上传的文件大小（字节）：0为不限制
Messages		上传文件的提示框信息
BrowseText	浏览...	翻译
Cancel	取消	翻译
NoFileError	请先选择一个文件再上传	翻译
PleaseWait	请等待	翻译
Processing	处理中...	翻译
Upload	上传	翻译
UploadError	上传错误	翻译
Uploading	正在上传	翻译
Title	选择照片	窗口标题

• UgAppBitBtn01

属性	取值	说明
Caption	选择照片	按钮文字内容

• UgAppBitBtn02

属性	取值	说明
Caption	调用拍照	按钮文字内容

19.3.2. 功能

1. 点击UgAppBitBtn01按钮，实现在手机的照片库中选择一张照片，上传到服务器并显示在图片框中。
2. 点击UgAppBitBtn02按钮，实现调用手机照相机拍摄照片，上传到服务器并显示在图片框中。

19.3.3. 代码

//JScript
function UgAppBitBtn01OnClick(sender)
{
  UgAppFileUpload01.Accept = "image";
  UgAppFileUpload01.Capture = "";//打开图库模式
  UgAppFileUpload01.Execute;
}

function UgAppBitBtn02OnClick(sender)
{
  UgAppFileUpload01.Accept = "image";
  UgAppFileUpload01.Capture = "camera";//打开图库模式
  UgAppFileUpload01.Execute;
}

function UgAppFileUpLoad01OnCompleted(sender,astream)
//显示已上传图片
{
  UgAppImage01.LoadFromStream(astream);
}

//PasScript
procedure UgAppBitBtn01OnClick(sender: tobject);
begin
  UgAppFileUpload01.Accept := 'image';
  UgAppFileUpload01.Capture := '';//打开图库模式
  UgAppFileUpload01.Execute;
end;

procedure UgAppBitBtn02OnClick(sender: tobject);
begin
  UgAppFileUpload01.Accept := 'image';
  UgAppFileUpload01.Capture := 'camera';//打开图库模式
  UgAppFileUpload01.Execute;
end;

procedure UgAppFileUpLoad01OnCompleted(sender: tobject;astream: tfilestream);
//显示已上传图片
begin
  UgAppImage01.LoadFromStream(astream);
end;

// Make sure to add code blocks to your code group

20. TUgAppFileUploadButton

  该组件为文件上传组件，功能与UgAppFileUpload相似。

20.1. 属性

属性	说明
Accept	设置允许接收的文件类型
Capture	获取文件（图片的来源）
MaxAllowedSize	设定上传文件的大小限制
Messages	设定上传对话框中显示的信息的内容
MultipleFiles	是否允许上传多个文件
OptimizeMemoryUsage	是否进行内存优化的管理
OverWrite	是否允许覆盖文件
Title	对话框的标题

20.1.1. Accept

property Accept: string;

  设置允许接收的文件类型，比如image。

20.1.2. Capture

property Capture: string;

  设置获取文件的来源，例如此处使用照相机进行获取，设置为camera。

20.1.3. MaxAllowedSize

property MaxAllowedSize: Cardinal;

  该属性为允许上传的文件的最大大小。单位为字节，为0时表示不限制。

20.1.4. Messages

property Messages: TUniCustomUploadMessages;

  该属性设置显示的提示信息内容。

名称	说明
BrowseText	浏览按钮显示的内容
Cancel	取消按钮显示的内容
MaxFilesError	上传文件的数量超过限制后显示的提示信息
MaxSizeError	上传文件的大小超过限制后显示的提示信息
NoFileError	未选择上传的文件时的提示信息
PleaseWait	等待时显示的提示信息
Processing	正在处理过程中显示的提示信息
Upload	上传按钮显示的内容
UploadError	文件上传错误
Uploading	文件正在上传的提示信息
UploadTimeOut	文件上传超时的提示信息

20.1.5. MultipleFiles

property MultipleFiles: Boolean;

  该属性设置控件是否允许多个文件上传。

20.1.6. OptimizeMemoryUsage

property OptimizeMemoryUsage: Boolean;

  该属性设置控件是否进行内存优化。

20.1.7. OverWrite

property Overwrite: Boolean;

  该属性设置控件是否允许对之前的文件进行覆盖操作。

20.1.8. Title

property Title: string;

  该属性设定对话框的标题名称。

20.2. 事件

名称	触发条件
OnCompleted	当控件完成上传时触发该事件
OnMultiCompleted	当控件完成多个文件上传时触发该事件

21. TUgAppSlider

  UgAppSlider是可滑动刻度选条，可以拖动选择刻度值，可以设置最大值和最小值。

21.1. 属性

属性	说明
Max	滑块设定位置的最大值
Min	滑块设定位置的最小值
Position	滑块的设定位置

21.1.1. Max

property Max: Integer;

  设定滑块位置的最大值。

21.1.2. Min

property Min: Integer;

  设定滑块位置的最小值。

21.1.3. Position

property Position: Integer;

  设定滑块所在的位置。

21.2. 应用

  UgAppSlider是可滑动刻度选条，可以拖动选择刻度值，可以设置最大值和最小值。

21.2.1. 布局

• UgAppBitBtn01

属性	取值	说明
Caption	最小值	按钮文字内容

• UgAppBitBtn02

属性	取值	说明
Caption	最大值	按钮文字内容

21.2.2. 功能

1. 拖动UgAppSlider01，UgAppLabel01上显示当前刻度值。
2. 点击UgAppBitBtn01，UgAppSlider01将定位最小值。
3. 点击UgAppBitBtn02，UgAppSlider01将定位最大值。

21.2.3. 代码

//JScript
function UgAppSlider01OnChange(sender)
{
  UgAppLabel01.Caption = IntToStr(UgAppSlider01.Position); //显示刻度值
}

function UgAppBitBtn01OnClick(sender)
//定位到最小值
{
  UgAppSlider01.Position = UgAppSlider01.Min;
}

function UgAppBitBtn02OnClick(sender)
//定位到最大值
{
  UgAppSlider01.Position = UgAppSlider01.Max;
}

//PasScript
procedure UgAppSlider01OnChange(sender: tobject);
begin
  UgAppLabel01.Caption := IntToStr(UgAppSlider01.Position); //显示刻度值
end;

procedure UgAppBitBtn01OnClick(sender: tobject);
//定位到最小值
begin
  UgAppSlider01.Position := UgAppSlider01.Min;
end;

procedure UgAppBitBtn02OnClick(sender: tobject);
//定位到最大值
begin
  UgAppSlider01.Position := UgAppSlider01.Max;
end;

Begin
  
End.

// Make sure to add code blocks to your code group

22. TUgAppToggle

  UgAppToggle是状态切换开关，常见的应用场景包括工业控制开关、是与否的选项等。

22.1. 属性

属性	说明
Toggled	设定是否切换为开启状态

22.1.1. Toggled

property Toggled: Boolean;

  设定开关按钮是否处于开启的状态。

22.2. 事件

名称	触发条件
OnChange	当开关状态发生变化时触发该事件

22.3. 应用

  UgAppToggle是状态切换开关，常见的应用场景包括工业控制开关、是与否的选项等。

22.3.1. 布局

• UgAppToggle01

属性	取值	说明
FieldLabel	切换开关	标签
Toggled	False	位置状态：关

22.3.2. 功能

  点击UgAppToggle01开关，触发OnChange事件，UgAppLabel01标签实时显示开关的状态。

22.3.3. 代码

//JScript
function UgAppToggle01OnChange(sender)
{
  if (UgAppToggle01.Toggled)
  {
    UgAppLabel01.Caption = "ON"; //显示开关状态
  }
  else
  {
    UgAppLabel01.Caption = "OFF"; //显示开关状态
  }    
}

//PasScript
procedure UgAppToggle01OnChange(sender: tobject);
begin
  if UgAppToggle01.Toggled Then
  begin
    UgAppLabel01.Caption := 'ON'; //显示开关状态
  End
  Else
  Begin
    UgAppLabel01.Caption := 'OFF'; //显示开关状态
  End;    
end;

Begin
  
End.

// Make sure to add code blocks to your code group

23. TUgAppRadio

  UgAppRadio是单选按钮，一般用于属性单选，单选的选项按钮位于同一个分组中。

23.1. 属性

属性	说明
Checked	设定是否处于选中状态

23.1.1. Checked

property Checked: Boolean;

  设定单选按钮是否处于选中状态。

23.2. 事件

名称	触发条件
OnCheck	当单选按钮选中时触发该事件

23.3. 应用

  UgAppRadio是单选按钮，一般用于属性单选。

23.3.1. 布局

• UgAppRadio01

属性	取值	说明
FieldLabel	UgAppRadio01 高	标签
FieldLabelAlign	laRight	右侧显示标签
FieldLabelWidth	90	标签宽度
Checked	False	选择状态：否

• UgAppRadio02

属性	取值	说明
FieldLabel	UgAppRadio02 中	标签
FieldLabelAlign	laRight	右侧显示标签
FieldLabelWidth	90	标签宽度
Checked	False	选择状态：否

• UgAppRadio03

属性	取值	说明
FieldLabel	UgAppRadio03 低	标签
FieldLabelAlign	laRight	右侧显示标签
FieldLabelWidth	90	标签宽度
Checked	False	选择状态：否

23.3.2. 功能

  当点击选择不同的UgAppRadio按钮时，UgAppLabel01显示按钮的标签信息。

23.3.3. 代码

//JScript
function UgAppRadio01OnCheck(sender)
{
  if (UgAppRadio01.Checked)
    UgAppLabel01.Caption = UgAppRadio01.FieldLabel;
}

function UgAppRadio02OnCheck(sender)
{
  if (UgAppRadio02.Checked)
    UgAppLabel01.Caption = UgAppRadio02.FieldLabel;
}

function UgAppRadio03OnCheck(sender)
{
  if (UgAppRadio03.Checked)
    UgAppLabel01.Caption = UgAppRadio03.FieldLabel;
}

//PasScript
procedure UgAppRadio01OnCheck(sender: tobject);
begin
  if UgAppRadio01.Checked Then
    UgAppLabel01.Caption := UgAppRadio01.FieldLabel;
end;

procedure UgAppRadio02OnCheck(sender: tobject);
begin
  if UgAppRadio02.Checked Then
    UgAppLabel01.Caption := UgAppRadio02.FieldLabel;
end;

procedure UgAppRadio03OnCheck(sender: tobject);
begin
  if UgAppRadio03.Checked Then
    UgAppLabel01.Caption := UgAppRadio03.FieldLabel;
end;

Begin
  
End.

// Make sure to add code blocks to your code group

24. TUgAppSpinner

  UgAppSpinner是一个带“+ -”号的数字输入框，可以设置允许输入的最小值和最大值，还可以设置单步加减大小，即每次点击加减按钮时增加或减少的数值。

24.1. 属性

属性	功能说明
MaxValue	允许输入的最大值
MinValue	允许输入的最小值
Step	设定每按一次+ -按钮的数值增减量
Value	输入的数值

24.1.1. MaxValue

property MaxValue: Real;

  设置允许输入的最大值，默认为0，表示为不限制，超过该最大值后，Vlaue=MaxValue。

24.1.2. MinValue

property MinValue: Real;

  设置允许输入的最小值，默认为0，表示不限制，低于该最小值时，Vlaue=MinValue。

24.1.3. Step

property Step: Real

  设置每次按下+ -按钮时数值的增量或者减量。

24.1.4. Value

property Value: Real;

  设置输入的数值。该数值需在MaxValue与MinValue之间。

  UgAppSpinner是一个带“+ -”号的数字输入框，可以设置允许输入的最小值和最大值，还可以设置单步加减大小，即每次点击加减按钮时增加或减少的数值。

24.2. 应用

24.2.1. 布局

• UgAppSpinner01

属性	取值	说明
MaxValue	100	最大值
MinValue	60	最小值
Step	5	单步增量
FieldLabel	请输入分数	标签

24.2.2. 功能

  在UgAppSpinner01的OnChange事件中添加代码，内容发生变化时将输入值显示到UgAppLabel01中。

24.2.3. 代码

//JScript
function UgAppSpinner01OnChange(sender)
{
  UgAppLabel01.Caption = "Your Score：" + FloatToStr(UgAppSpinner01.Value);
}

//PasScript
procedure UgAppSpinner01OnChange(sender: tobject);
begin
  UgAppLabel01.Caption := 'Your Score：' + FloatToStr(UgAppSpinner01.Value);
end;

Begin
  
End.

// Make sure to add code blocks to your code group

25. TUgAppHTMLFrame

  UgAppHTMLFrame控件可用于打开HTML文档和显示HTML页面。

25.1. 属性

属性	功能说明
HTML	编辑框显示HTML文本内容
Scrollable	控件是否显示滚动条

25.1.1. HTML

property HTML: TStrings;

  该属性用于指定显示的HTML文本内容。

  点击属性右侧的[√]或者双击该属性以打开编辑框。其中的内容文本标记格式遵循HTML格式。

  也可以从服务器端的文件中加载HTML进行显示。

//JScript
UgAppHTMLFrame01.HTML.LoadFromFile("files\\web\\sample.html");

//PasScript
UgAppHTMLFrame01.HTML.LoadFromFile('files\web\sample.html');

// Make sure to add code blocks to your code group

25.1.2. Scrollable

property Scrollable: Boolean;

  设置控件是否显示滚动条。

25.2. 应用

  UgAppHTMLFrame控件可用于打开HTML文档和显示HTML页面。在主窗体上摆放一个UgAppHTMLFrame，再放一个UgAppContainerPanel在窗口底部占位。

25.2.1. 布局

• UgAppContainerPanel01

属性	取值	说明
Align	alBottom	底部对齐

• UgAppHTMLFrame01

属性	取值	说明
Align	alClient	占满屏幕剩余空间
Scrollable	True	控件是否带滚动条
HTML	如下代码列表所示	设置显示的内容

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><title>标题</title><style>html{font-family:sans-serif}table{border-collapse:collapse;border:2px solid rgb(200,200,200);letter-spacing:1px;font-size:0.8rem}td,th{border:1px solid rgb(190,190,190);padding:10px 20px}th{background-color:rgb(235,235,235)}td{text-align:center}tr:nth-child(even)td{background-color:rgb(250,250,250)}tr:nth-child(odd)td{background-color:rgb(245,245,245)}caption{padding:10px}#col-name{border:2px solid black}</style></head><body><h1>太阳系行星数据</h1><table><caption>太阳系中行星的一些数据。<a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">（资料及图片取自NASA行星数据（公制单位））</a></caption><colgroup><col><col><col style="border: 2px solid;"><col><col><col><col><col><col><col><col><col><col></colgroup><thead><tr><th colspan="2"></th><th scope="col">名字</th><th scope="col">质量(10<sup>24</sup>kg)</th><th scope="col">直径(km)</th><th scope="col">密度(kg/m<sup>3</sup>)</th><th scope="col">重力(m/s<sup>2</sup>)</th><th scope="col">天长(hours)</th><th scope="col">与太阳距离(10<sup>6</sup>km)</th><th scope="col">平均温度(°C)</th><th scope="col">卫星数量</th><th scope="col">备注</th></tr></thead><tbody><tr><th scope="rowgroup"colspan="2"rowspan="4">类地行星</th><th scope="row">水星</th><td>0.330</td><td>4,879</td><td>5427</td><td>3.7</td><td>4222.6</td><td>57.9</td><td>167</td><td>0</td><td>与太阳最近</td></tr><tr><th scope="row">金星</th><td>4.87</td><td>12,104</td><td>5243</td><td>8.9</td><td>2802.0</td><td>108.2</td><td>464</td><td>0</td><td></td></tr><tr><th scope="row">地球</th><td>5.97</td><td>12,756</td><td>5514</td><td>9.8</td><td>24.0</td><td>149.6</td><td>15</td><td>1</td><td>我们的世界</td></tr><tr><th scope="row">火星</th><td>0.642</td><td>6,792</td><td>3933</td><td>3.7</td><td>24.7</td><td>227.9</td><td>-65</td><td>2</td><td>红色星球</td></tr><tr><th scope="rowgroup"rowspan="4">类木行星</th><th scope="rowgroup"rowspan="2">气巨星</th><th scope="row">木星</th><td>1898</td><td>142,984</td><td>1326</td><td>23.1</td><td>9.9</td><td>778.6</td><td>-110</td><td>67</td><td>太阳系最大</td></tr><tr><th scope="row">土星</th><td>568</td><td>120,536</td><td>687</td><td>9.0</td><td>10.7</td><td>1433.5</td><td>-140</td><td>62</td><td></td></tr><tr><th scope="rowgroup"rowspan="2">冰巨星</th><th scope="row">天王星</th><td>86.8</td><td>51,118</td><td>1271</td><td>8.7</td><td>17.2</td><td>2872.5</td><td>-195</td><td>27</td><td></td></tr><tr><th scope="row">海王星</th><td>102</td><td>49,528</td><td>1638</td><td>11.0</td><td>16.1</td><td>4495.1</td><td>-200</td><td>14</td><td></td></tr><tr><th scope="rowgroup"colspan="2">矮行星</th><th scope="row">冥王星</th><td>0.0146</td><td>2,370</td><td>2095</td><td>0.7</td><td>153.3</td><td>5906.4</td><td>-225</td><td>5</td><td>2006年降格，但是<a href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">尚存争议</a>.</td></tr></tbody></table></body></html>

25.2.2. 功能

  运行浏览器访问界面，UgAppHTMLFrame01控件加载HTML页面文本文件。显示HTML页面。

26. TUgAppURLFrame

  UgAppURLFrame是一个可以根据URL地址访问一个WEB系统的页面控件。

26.1. 属性

属性	功能说明
URL	设置网页URL地址，程序启动时访问该地址
HTML	编辑框显示HTML文本内容

26.1.1. URL

property URL: string;

  设置网页的URL地址，在程序启动时可以访问该网页地址并显示。

//JScript
UgAppURLFrame01.URL = "https://www.baidu.com";

//PasScript
UgAppURLFrame01.URL := 'https://www.baidu.com';

// Make sure to add code blocks to your code group

26.1.2. HTML

property HTML: TStrings;

  该属性用于指定显示的HTML文本内容。

  点击属性右侧的[√]或者双击该属性以打开编辑框。其中的内容文本标记格式遵循HTML格式。

  也可以从服务器端的文件中加载HTML进行显示。

//JScript
UgAppURLFrame01.HTML.LoadFromFile("files\\web\\sample.html");

//PasScript
UgAppURLFrame01.HTML.LoadFromFile('files\web\sample.html');

// Make sure to add code blocks to your code group

26.2. 应用

  UgAppURLFrame是一个可以根据URL地址访问一个WEB系统的页面控件。

26.2.1. 布局

• UgAppURLFrame01

属性	取值	说明
Align	alClient	占满屏幕剩余空间

26.2.2. 功能

  在窗体初始化后，UgAppURLFrame01的URL属性中填入网址，打开对应的网页。

  将HTML文本文件sample.html放置于FastWeb目录下的files\web文件夹中。

26.2.3. 代码

//JScript
function UgAppRunFrameOnAfterRunScript(sender)
{
  UgAppURLFrame01.URL = "https://www.baidu.com";
  //也可以加载本地网页文件
  //UgAppURLFrame01.URL = "files/web/sample.html"
}

//PasScript
procedure UgAppRunFrameOnAfterRunScript(const sender: tobject);
begin
  UgAppURLFrame01.URL := 'https://www.baidu.com';
  //也可以加载本地网页文件
  //UgAppURLFrame01.URL := 'files/web/sample.html'
end;

Begin
  
End.

// Make sure to add code blocks to your code group

27. TUgAppPDFFrame

  UgAppPDFFrame是一个能够在浏览器里打开服务器端PDF文件的控件，支持打印功能，支持自动目录。

27.1. 属性

属性	功能说明
PdfURL	设置PDF文件的地址

27.1.1. PDFUrl

property PdfURL: string;

//JScript
UgAppPDFFrame01.PdfURL = UGSM.FilesFolder + "sample.pdf";

//PasScript
UgAppPDFFrame01.PdfURL := UGSM.FilesFolder + 'sample.pdf';

// Make sure to add code blocks to your code group

27.2. 事件

名称	触发条件
OnFrameLoaded	当页面加载完成后触发该事件

27.3. 应用

  UgAppPDFFrame是一个能够在浏览器里打开服务器端PDF文件的控件，支持打印功能，支持自动目录。

27.3.1. 布局

• UgAppPDFFrame01

属性	取值	说明
Align	alClient	占满屏幕剩余空间

27.3.2. 功能

  在FastWeb的files目录下放置sample.pdf文件，在UgAppPDFFrame01的PDFUrl中指定文件目录，在浏览器中打开即可浏览文件。

27.3.3. 代码

//JScript
function UgAppRunFrameOnAfterRunScript(sender)
{
  UgAppPDFFrame01.PdfURL = UGSM.FilesFolder + "sample.pdf";
}

//PasScript
procedure UgAppRunFrameOnAfterRunScript(const sender: tobject);
begin
  UgAppPDFFrame01.PdfURL := UGSM.FilesFolder + 'sample.pdf';
end;

Begin
  
End.

// Make sure to add code blocks to your code group

28. TUgAppMenu

  UgAppMenu是菜单控件。用于弹出式菜单项的选择。

28.1. 属性

属性	功能说明
Items	设定菜单项目
Scrollable	设置菜单项是否可以在菜单中进行上下滑动
Side	选择菜单显示的位置
ViewportMenu	是否隐藏菜单
Visible	菜单项是否可见

28.1.1. Items

property Items: TUniButtonItems;

  设置菜单栏中显示的项目。

  UgAppMenu下面有一个Item项目，点击该项目，然后再点击左上角的添加按钮以增加菜单项。在布局过程中可能会出现Ajax ERROR错误，该错误不会影响程序的运行，可以忽略。

28.1.2. Scrollable

property Scrollable: Boolean;

  设置是菜单项否可以滑动。即当菜单项显示区域高度大于客户端显示区域的高度时，显示滚动条。

28.1.3. Side

property Side: TUnimMenuSide;

  设定菜单窗体弹出显示的区域。

名称	说明
msTop	菜单从顶部显示
msBottom	菜单从底部显示
msLeft	菜单从左侧显示
msRight	菜单从右侧显示

28.1.4. ViewportMenu

property ViewportMenu: Boolean;

  是否隐藏菜单栏，若设定为False，则菜单栏会在程序启动时显示。

28.1.5. Visible

property Visible: Boolean;

  是否显示菜单栏。

28.2. 应用

  UgAppMenu是菜单控件，在主窗体上摆放四个UgAppBitBtn以及四个UgAppMenu，其中UgAppMenu下面有一个Item项目，点击该项目，然后再点击左上角的添加按钮以增加菜单项。在布局过程中可能会出现Ajax ERROR错误，该错误不会影响程序的运行，可以忽略。

28.2.1. 布局

  主界面显示如下：

  顶部菜单出现时窗口下移。

  底部菜单出现时窗口上移。

  菜单可以上下滚动。

  右侧菜单运行时会遮盖窗口。

• UgAppBitBtn01~UgAppBitBtn04

属性	取值	说明
Caption	上/下/左/右	按钮显示的字幕内容

• UniMenuItem-X

属性	取值	说明
Caption	MenuItemX	菜单项的名称，X为对应的数字

• UgAppMenu01

属性	取值	说明
Scrollable	False	不可滑动
Side	msTop	菜单出现位置：顶部
ViewPortMenu	True	隐藏式菜单：是

• UgAppMenu02

属性	取值	说明
Scrollable	False	不可滑动
Side	msBottom	菜单出现位置：底部
ViewPortMenu	True	隐藏式菜单：是

• UgAppMenu03

属性	取值	说明
Scrollable	True	可以滑动
Side	msLeft	菜单出现位置：左侧
ViewPortMenu	True	隐藏式菜单：是

• UgAppMenu04

属性	取值	说明
Scrollable	False	不可滑动
Side	msRight	菜单出现位置：右侧
ViewPortMenu	False	隐藏式菜单：否

28.2.2. 功能

  四个菜单分别设置了在窗口的上、下、左、右四个出现的位置，四个按钮分别控制上、下、左、右四个菜单的调用，菜单出现后点击某个菜单项，弹出菜单项名称，隐藏菜单项界面。

28.2.3. 代码

//JScript
function UgAppBitBtn01OnClick(sender)
{
  UgAppMenu01.Visible = True;
}

function UgAppBitBtn02OnClick(sender)
{
  UgAppMenu02.Visible = True;
}

function UgAppBitBtn03OnClick(sender)
{
  UgAppMenu03.Visible = True;
}

function UgAppBitBtn04OnClick(sender)
{
  UgAppMenu04.Visible = True;
}

function UgAppMenu01OnClick(sendertunimmenuitem)
{
  ShowMessage(sender.Caption);
  sender.Parent.Visible = False;
}

//PasScript
procedure UgAppBitBtn01OnClick(sender: tobject);
begin
  UgAppMenu01.Visible := True;
end;

procedure UgAppBitBtn02OnClick(sender: tobject);
begin
  UgAppMenu02.Visible := True;
end;

procedure UgAppBitBtn03OnClick(sender: tobject);
begin
  UgAppMenu03.Visible := True;
end;

procedure UgAppBitBtn04OnClick(sender: tobject);
begin
  UgAppMenu04.Visible := True;
end;

procedure UgAppMenu01OnClick(sender: tunimmenuitem);
begin
  ShowMessage(sender.Caption);
  sender.Parent.Visible := False;
end;

Begin
  
End.

// Make sure to add code blocks to your code group

  需要注意的是，UgAppMenu02~UgAppMenu04的OnClick事件均选择UgAppMenu01OnClick，因为他们要执行的代码是一致的。

29. TUgAppFieldSet

  UgAppFieldSet是一个多数据项或多字段输入集合控件，以一个边框将多个输入项控件组合起来，并且可以带一个标题头Title和说明尾Instructions。

29.1. 属性

属性	功能说明
Title	设定字段表的标题
Instructions	设定字段表的末尾标题

29.1.1. Title

property Title: string;

  设置字段表的标题名称。

29.1.2. InstructIons

property Instructions: string;

  设置字段表的末尾说明。

29.2. 应用

  UgAppFieldSet是一个多数据项或多字段输入集合控件，以一个边框将多个输入项控件组合起来，并且可以带一个标题头Title和说明尾Instructions。

29.2.1. 布局

• UgAppFieldSet01

属性	取值	说明
Align	alTop	顶部占满
Height	320	控件的高度
Title	请输入客户信息	开头标题内容
Instructions	年龄不能大于60岁	结尾说明内容

• UgAppEdit01

属性	取值	说明
FieldLabel	姓名	控件标签名称

• UgAppSelect01

属性	取值	说明
FieldLabel	性别	控件标签名称
Items	男/女	选择项目

• UgAppDatePicker01

属性	取值	说明
DateFormat	yyyy-MM-dd	日期格式
FieldLabel	生日	控件标签名称
SlotOrder	y/m/d	日期选择的格式

30. TUgAppTabPanel

  UgAppTabPanel是APP版的多页面控件，功能与WEB的UgPageControl相似。选择该页面，点击左上角的[添加]按钮新增Tab页面。

30.1. 应用

  UgAppTabPanel是移动版的多页面控件，功能和电脑版的UgPageControl差不多。在主窗体上放一个UgAppTabPanel，选择点击树形结构界面中的UgAppTabPanel01，点击左上角的[添加]按钮，添加两个TabSheet。为两个提高不同的布局。

30.1.1. 布局

• UgAppTabPanel01

属性	取值	说明
Align	alTop	顶部占满

• UgAppBitBtn01

属性	取值	说明
Caption	UgAppBitBtn01	按钮显示的文字内容

• UgAppEdit01

属性	取值	说明
Text	UgAppEdit01	文本编辑框显示的内容

31. TUgAppSegmentedButton

  这是一个分段按钮，即每个按钮均分可用宽度，可以用作主页面底部的功能分区按钮。在主窗体上增加一个UgAppSegmentedButton，点击结构查看器中的Items项目，点击左上角的添加按钮添加子按钮。

31.1. 属性

• TUniButtonItem属性

属性	功能说明
Caption	设置按钮显示的字幕信息
IconCls	设置显示的图标
Pressed	设置按钮是否按下
UI	设置按钮的外观

31.1.1. Caption

property Caption: TCaption;

  设置显示的字幕信息。

31.1.2. IconCls

property IconCls: string;

  设置图标的名称。

  其中可使用的部分图标类型如下：

31.1.3. Pressed

property Pressed: Boolean;

  按钮是否处于按下的状态。

31.1.4. UI

property UI: string;

  设置按钮的外观风格。

名称	说明	图示
normal	普通按钮
round	圆角矩形
action	执行按钮
decline	拒绝按钮
confirm	确认按钮
plain	扁平按钮
raised	悬浮按钮

31.2. 应用

  这是一个分段按钮，即每个按钮均分可用宽度，可以用作主页面底部的功能分区按钮，在主窗体上增加一个UgAppSegmentedButton，点击结构查看器中的Items项目，点击左上角的添加按钮添加三个子按钮，关联系统自带属性进行装饰。

31.2.1. 布局

• UgAppSegmentedButton01

属性	取值	说明
Align	alTop	顶部占满

• TUniButtonItem-0

属性	取值	说明
Caption	AA	按钮显示的字幕内容
Pressed	False	按钮是否显示为按下状态
IconCls	home	自带图标样式：主页

• TUniButtonItem-1

属性	取值	说明
Caption	BB	按钮显示的字幕内容
Pressed	True	按钮是否显示为按下状态
IconCls	info	自带图标样式：提示
UI	confirm	按钮的外观样式：确认

• TUniButtonItem-2

属性	取值	说明
Caption	CC	按钮显示的字幕内容
IconCls	settings	自带图标样式：设置
Pressed	False	按钮是否显示为按下状态
UI	round	按钮的外观样式：圆角

32. TUgAppNestedList

  UgAppNestedList是一个多级结构，带有层级导航功能，适合做功能菜单或分类分级。双击控件以打开结构编辑器。

32.1. 属性

属性	功能说明
Items	设置项目中的选项
Title	设置标题

32.1.1. Items

property Items: TUniTreeNodes;

  设置树形结构的项目，双击控件以打开结构编辑器。

32.1.2. Title

property Title: string;

  设置列表的标题。

32.2. 应用

  UgAppNestedList是一个多级结构，带有层级导航功能，适合做功能菜单或分类分级。在主窗体上放置一个UgAppNestedList控件，设置其Align属性为alClient全屏占满。双击该控件，打开树形结构编辑器。在该界面中进行结构的编辑。

32.2.1. 布局

• UgAppNestedList01

属性	取值	说明
Align	alTop	顶部占满
Items		双击控件打开编辑器进行添加
Title	中国	标题或根结点

32.2.2. 功能

  窗口运行后将出现一个带层级关系的清单列表，点击一条记录将进入到下一个层级，如果当前节点是叶子节点，并且内容包含“杭州市”或“南京市”，则弹出相应的提示信息，如果不是这些区域将弹出否定信息。随着层级进入，顶部将出现导航层级关系，可点击返回上一级。

32.2.3. 代码

//JScript
function UgAppNestedList01OnLeafClick(sender)
//点击叶子结点时触发该事件
{
  if （(UgAppNestedList01.Items.FindNodeByCaption("杭州市").Selected) || (UgAppNestedList01.Items.FindNodeByCaption("南京市").Selected)）{
    ShowMessage("The City you clicked are province capital");
  }
  else{
    ShowMessage("The City you clicked are not province capital");
  }
}

//PasScript
procedure UgAppNestedList01OnLeafClick(sender: tobject);
//点击叶子结点时触发该事件
begin
  if ((UgAppNestedList01.Items.FindNodeByCaption('杭州市').Selected) or (UgAppNestedList01.Items.FindNodeByCaption('南京市').Selected)) Then
    ShowMessage('The City you clicked are province capital')
  else
    ShowMessage('The City you clicked are not province capital');
end;

Begin
  
End.

// Make sure to add code blocks to your code group

33. TUgAppTreeMenu

  该组件为一个菜单栏组件，用于显示菜单信息。

33.1. 属性

属性	说明
Animation	是否在菜单收起展开时显示动画效果
ExpanderFirst	收起展开的标志是否显示在项目的左侧
ExpanderOnly	是否仅点击收起展开按钮才进行展开操作
Items	菜单栏的项目
Micro	是否仅显示图标按钮
MicroWidth	在Micro模式下的菜单栏的宽度
SingleExpand	是否每次点击仅展开一个菜单结点

33.1.1. Animation

property Animation: Boolean;

  菜单在收起与展开时会有滑动的动画效果。

33.1.2. ExpanderFirst

property ExpanderFirst: Boolean;

  菜单收起按钮是否位于菜单项的左侧。

取值	图例
True
False

33.1.3. ExpanderOnly

property ExpanderOnly: Boolean;

  该属性如果为True，则仅在点击菜单栏中的收起按钮时才会对菜单栏进行收起展开，否则点击菜单项就可以进行收起打开的操作。

33.1.4. Items

property Items: TUniTreeNodes;

  菜单项的设置，在控件设计界面，双击该控件可以打开树形菜单列表的编辑界面。在该界面下可以进行菜单创建、子菜单的创建，菜单的删除、菜单的上移下移左移右移操作。

  该属性下包含了部分方法。

• Items.Add

function Add(aParentItem: TUniTreeNode = nil; const S: string = ''): TUniTreeNode; virtual; abstract;

  添加结点。

• Items.AddChild

function AddChild(Parent: TUniTreeNode; const S: string): TUniTreeNode; virtual; abstract;

  添加子结点。

• Items.AddNode

function AddNode(Node: TUniTreeNode; Relative: TUniTreeNode; const S: string; Ptr: Pointer; Method: TUniNodeAttachMode): TUniTreeNode; virtual; abstract;

  添加结点。

• Items.Clear

procedure Clear; virtual; abstract;

  清除所有结点信息。

• Items.Delete

procedure Delete(Node: TUniTreeNode); virtual; abstract;

  删除其选择的结点以及其所属的全部子结点。

• Items.FindNodeByCaption

function FindNodeByCaption(const ACaption: string): TUniTreeNode; virtual; abstract;

  搜索该名称的结点。

33.1.5. Micro

property Micro: Boolean;

  是否仅以MicroWidth设定的宽度进行菜单栏显示。

取值	图例
False
True

33.1.6. MicroWidth

property MicroWidth: Integer;

  设定Micro下的显示宽度。

33.1.7. SingleExpand

property SingleExpand: Boolean;

  是否每次点击仅展开一个菜单结点。

34. TUgAppTimePicker

  UgAppTimePicker是时间设置控件。点击后，在底部弹出的界面中滑动选择时间，选择的时间会在Time属性中显示。

34.1. 属性

属性	功能说明
MinuteSteps	设置单步的变化量
Picker	设置事件选择器的外观样式
Time	设置当前的时间
TimeFormat	设置时间显示的格式

34.1.1. MinuteSteps

property MinuteSteps: Integer;

  设置分钟数调整的步进。

34.1.2. Picker

property Picker: TUniPickerType;

  设置事件选择器的外观样式。

名称	说明	图示
dptEdge	卡片选择式
dptFloated	拨号盘式

34.1.3. TimeFormat

property TimeFormat: string;

  设置时间格式，例如HH:mm，其时间显示格式为07:30。

34.1.4. Time

property Time: TTime;

  设置时间。

//显示时间
ShowMessage(TimeToStr(UgAppTimePicker01.Time));

34.2. 应用

  UgAppTimePicker是时间设置控件。

34.2.1. 布局

  拨号盘式时间选择控件的显示如下图所示：

  卡片选项式时间选择控件的显示如下图所示：

• UgAppTimePicker01

属性	取值	说明
FieldLabel	拨号盘式	字段标签的名称
MinuteSteps	1	单步变化量
Picker	dptFloated	时间选择的外观样式：拨号盘式
timeFormat	HH:mm	时间格式

• UgAppTimePicker02

属性	取值	说明
FieldLabel	拨号盘式	字段标签的名称
MinuteSteps	1	单步变化量
Picker	dptEdge	时间选择的外观样式：卡片选项式
timeFormat	HH:mm	时间格式

• UgAppBitBtn01

属性	取值	说明
Caption	显示时间	按钮显示的文字内容

34.2.2. 功能

  点击按钮显示控件设定时间。

34.2.3. 代码

//JScript
function UgAppBitBtn01OnClick(sender)
{
  ShowMessage(TimeToStr(UgAppTimePicker01.Time) + " " + TimeToStr(UgAppTimePicker02.Time));
}

//PasScript
procedure UgAppBitBtn01OnClick(sender: tobject);
begin
  ShowMessage(TimeToStr(UgAppTimePicker01.Time) + ' ' + TimeToStr(UgAppTimePicker02.Time));
end;

Begin
  
End.

// Make sure to add code blocks to your code group