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