標準控制元件
# 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;
1
設定按鈕右上角的紅色標記中顯示的內容。標記顯示的樣式如下圖。
# 3.1.2. Caption
property Caption: string;
1
設定按鈕顯示的文字的內容。顯示的內容可參考上圖中的HelloWorld。
# 3.1.3. IconAlign
property IconAlign: TUniIconAlign;
1
設定圖示在按鈕中的位置。
| 名稱 | 圖例 |
|---|---|
| iaLeft |  |
| iaBottom |  |
| iaCenter |  |
| iaRight |  |
| iaTop |  |
# 3.1.4. IconCls
property IconCls: string;
1
設定圖示的名稱。
其中可使用的部分圖示型別如下：
# 3.1.5. UI
property UI: string;
1
設定按鈕的外觀風格。
| 名稱 | 說明 | 圖示 |
|---|---|---|
| normal | 普通按鈕 |  |
| round | 圓角矩形 |  |
| action | 執行按鈕 |  |
| decline | 拒絕按鈕 |  |
| confirm | 確認按鈕 |  |
| plain | 扁平按鈕 |  |
| raised | 懸浮按鈕 |  |
# 3.2. 事件
# 3.2.1. OnClick
property OnClick: TNotifyEvent;
1
點選按鈕以觸發該事件。
# 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. 功能
UgAppButton01按鈕初始顯示時右上角提示資訊為0，點選一次增加1。UgAppButton05按鈕點選后變為不可用，同時UgAppButton06按鈕可用。UgAppButton06按鈕點選后變為不可用，同時UgAppButton05按鈕可用。UgAppButton15按鈕點選后關閉視窗，返回mrYes結果。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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 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;
1
設定字元的大小寫轉換型別。
| 名稱 | 說明 |
|---|---|
| ecNormal | 普通模式，不進行大小寫轉換 |
| ecLowerCase | 將所有的字母轉換為小寫 |
| ecUpperCase | 將所有的字母轉換為大寫 |
# 4.1.2. ClearButton
property ClearButton: Boolean;
1
設定是否在編輯框中存在內容時，在編輯框右側顯示清除按鈕，其樣式如下圖所示。
# 4.1.3. EmptyText
property EmptyText: string;
1
設定編輯框為空時編輯框內顯示的提示內容。其樣式如下圖所示。當向編輯框中輸入內容時該提示資訊會被輸入的內容覆蓋。
# 4.1.4. PasswordChar
property PasswordChar: Char;
1
當輸入的資訊為敏感內容（比如密碼）時使用的屬性，該屬性將輸入的字元替換為該屬性設定的字元。例如當該屬性指定為*時，輸入框的顯示如下圖所示。
# 4.1.5. Text
property Text: TCaption;
1
設定編輯框中顯示的文字內容。
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. 功能
UgAppEdit01是一個預設輸入框。UgAppEdit02是一個密碼輸入框。UgAppEdit03是一個只讀輸入框。UgAppEdit04是一個禁用的輸入框。UgAppEdit05是一個輸入框為空時帶有輸入提示資訊的輸入框。UgAppEdit06是一個自動將輸入字母轉換為小寫字母的輸入框。UgAppEdit07是一個自動將輸入字母轉換為大寫字母的輸入框。UgAppEdit08是一個用來顯示各個輸入框的輸入內容的輸入框；UgAppEdit01輸入內容發生變化時將觸發OnChange事件，在UgAppEdit08里顯示輸入的內容。UgAppEdit02在游標進入時將觸發OnEnter事件，在UgAppEdit08里顯示已有的內容。UgAppEdit05在按鍵彈起時將觸發OnKeyUp事件，在UgAppEdit08里顯示輸入的內容。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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 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;
1
是否根據圖片自動控制控制元件的大小。
# 5.1.2. Center
property Center: Boolean;
1
圖片是否在控制元件居中位置。
# 5.1.3. Stretch
property Stretch: Boolean;
1
設定圖片是否進行拉伸以適應控制元件大小。
# 5.1.4. Picture
property Picture: TPicture;
1
設定顯示的圖片。點選屬性列表中的Picture屬性右側的[√]按鈕，或者雙擊圖片控制元件，打開圖片顯示的對話方塊。
點選[Load]，打開檔案上傳的對話方塊。
點選[Browse...]，打開檔案選擇對話方塊，選擇所需的圖片，點選[確定]，上傳檔案的對話方塊中出現檔名，點選[Upload]將選擇的檔案上傳至圖片編輯器中。待圖片編輯器中顯示上傳的圖片檔案后，點選[Save]以儲存更改。
也可以在指令碼中指定伺服器上的圖片檔案進行顯示。
//JScript
UgAppImage01.Picture.LoadFromFile(UGSM.FilesFolder + "images\\map.png");
1
2
2
//PasScript
UgAppImage01.Picture.LoadFromFile(UGSM.FilesFolder + 'images\map.png');
1
2
2
// Make sure to add code blocks to your code group
# 5.1.5. Url
property Url: string;
1
用於指定顯示的圖片的Url地址。
//JScript
UgAppImage01.Url := UGSM.FilesFolder + "images\map.png";
1
2
2
//PasScript
UgAppImage01.Url := UGSM.FilesFolder + 'images\map.png';
1
2
2
// 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. 功能
UgAppImage01~UgAppImage04都通過Picture屬性靜態配置圖片檔案。UgAppImage01其他屬性採用預設屬性，圖片如果比控制元件大則只顯示圖片左上角的一部分影象。UgAppImage02設定了AutoSize屬性，影象控制元件則根據影象實際大小自動調整大小。UgAppImage03設定了Center屬性，實際上沒有什麼效果。UgAppImage04設定了Stretch屬性，圖片將根據控制元件大小自動拉伸。UgAppImage05設定了Transparent屬性，並且在UgAppImage04和UgAppImage05下面擺放了UgLabel控制元件。UgAppRunFrame的OnAfterRunScript事件設定UgAppImage05的圖片載入操作。UgAppImage06通過設定Url屬性，在指定的目錄下載入圖片。
# 5.2.3. 程式碼
//JScript
function UgAppRunFrameOnAfterRunScript(sender)
{
UgAppImage05.Picture.LoadFromFile(UGSM.FilesFolder + "images\\map.png");
UgAppImage06.Url = UGSM.FilesFolder + "images\\map.png";
}
1
2
3
4
5
6
2
3
4
5
6
//PasScript
procedure UgAppRunFrameOnAfterRunScript(const sender: tobject);
begin
UgAppImage05.Picture.LoadFromFile(UGSM.FilesFolder + 'images\map.png');
UgAppImage06.Url := UGSM.FilesFolder + 'images\map.png';
end;
1
2
3
4
5
6
2
3
4
5
6
// 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;
1
該屬性指定當前選擇項的索引號，索引號從0開始，預設選項為-1，即不選任何一個選項。
# 7.1.2. Items
property Items: TStrings;
1
設定選擇項。點選屬性右側的[√]按鈕或者雙擊該屬性打開編輯視窗，輸入選項的內容，每項均需要換行。
# 7.1.3. Sorted
property Sorted: Boolean;
1
該屬性用於確定是否需要對選項進行排序。
# 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. 功能
UgAppSelect01靜態新增了一些可選項，點選UgAppButton01后顯示第三項內容。UgAppSelect02靜態新增了一些可選項，點選UgAppButton02后顯示目前選中項的內容。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; //指定顯示哪一個
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// 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;
1
設定按鈕右上角的紅色標記中顯示的內容。標記顯示的樣式如下圖。
# 8.1.2. Caption
property Caption: string;
1
設定按鈕顯示的文字的內容。顯示的內容可參考上圖中的HelloWorld。
# 8.1.3. Glyph
property Glyph: TBitmap;
1
設定顯示的圖片。
設定顯示的圖片。點選屬性列表中的Glyph屬性右側的[√]按鈕，或者雙擊圖片控制元件，打開圖片顯示的對話方塊。
點選[Load]，打開檔案上傳的對話方塊。
點選[Browse...]，打開檔案選擇對話方塊，選擇所需的圖片，點選[確定]，上傳檔案的對話方塊中出現檔名，點選[Upload]將選擇的檔案上傳至圖片編輯器中。待圖片編輯器中顯示上傳的圖片檔案后，點選[Save]以儲存更改。
# 8.1.4. IconAlign
property IconAlign: TUniIconAlign;
1
設定圖示在按鈕中的位置。
| 名稱 | 圖例 |
|---|---|
| iaLeft | |
| iaBottom | |
| iaCenter | |
| iaRight | |
| iaTop | |
# 8.1.5. IconCls
property IconCls: string;
1
設定圖示的名稱。
其中可使用的部分圖示型別如下：
# 8.1.6. UI
property UI: string;
1
設定按鈕的外觀風格。
| 名稱 | 說明 | 圖示 |
|---|---|---|
| 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;
1
該屬性用於設定控制元件的標籤說明。
# 9.1.2. Checked
property Checked: Boolean;
1
該屬性用於設定目前控制元件是否處於選中的狀態。
# 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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//PasScript
選擇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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 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;
1
設定日期控制元件目前選擇的日期。該屬性可以通過指令碼賦值來實現顯示當天日期的功能。
//JScript
UgAppDatePicker01.Date := Date; //初始化為當天日期
1
2
2
//PasScript
UgAppDatePicker01.Date = Date; //初始化為當天日期
1
2
2
// Make sure to add code blocks to your code group
# 10.1.2. DateFormat
property DateFormat: string
1
設定日期顯示的格式。比如將日期格式設定為yyyy-MM-dd，則格式化輸出的日期格式為2020-04-30。或者將日期格式設定為MM/dd/yy，則格式化輸出的日期為04/30/20。
# 10.1.3. MaxYear
property MaxYear: Integer;
1
設定在日期顯示中可選的最大年份數值。
# 10.1.4. MinYear
property MinYear: Integer;
1
設定在日期顯示中可選的最小年份數值。
# 10.1.5. SlotOrder
property SlotOrder: string;
1
設定選項中的日期顯示順序。比如將其設定為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. 功能
- 視窗啟用時初始顯示當天日期。
- 點選
UgAppBitBtn01時顯示UgAppDatePicker01選中的日期。
# 10.2.3. 程式碼
//JScript
function UgAppRunFrameOnAfterRunScript(sender)
{
UgAppDatePicker01.Date = Date; //初始化為當天日期
}
function UgAppBitBtn01OnClick(sender)
{
ShowMessage(FormatDateTime("yyyyMMdd",UgAppDatePicker01.Date)); //顯示選中的日期
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
//PasScript
procedure UgAppRunFrameOnAfterRunScript(const sender: tobject);
begin
UgAppDatePicker01.Date := Date; //初始化為當天日期
end;
procedure UgAppBitBtn01OnClick(sender: tobject);
begin
ShowMessage(FormatDateTime('yyyyMMdd',UgAppDatePicker01.Date)); //顯示選中的日期
end;
Begin
End.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
// 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;
1
設定選擇項。點選屬性右側的[√]按鈕或者雙擊該屬性打開編輯視窗，輸入選項的內容，每項均需要換行。
或者在指令碼中對專案進行配置。
//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");
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
//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');
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
// Make sure to add code blocks to your code group
# 11.1.2. ItemIndex
property ItemIndex: Integer;
1
該屬性指定當前選擇項的索引號，索引號從0開始，預設選項為-1，即不選任何一個選項。
# 11.1.3. DisclosureIcon
property DisclosureIcon: Boolean;
1
該屬性用於在每項的右側顯示一個指示圖示。例如，設定為True，其顯示效果如下圖。
# 11.1.4. Grouped
property Grouped: Boolean;
1
該屬性用於設定選項是否進行分組顯示。例如，設定為True，其顯示效果如下圖。
# 11.1.5. Sorted
property Sorted: Boolean;
1
是否對選項進行排序。例如，設定為True，其顯示效果如下圖。
# 11.1.6. Striped
property Striped: Boolean;
1
列是否使用交替的顏色進行顯示。例如，設定為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. 功能
- 主視窗建立時自動通過
OnAfterRunScript事件向UgAppList01中新增可選項。 DisclosureIcon屬性為True時UgAppList01每行末尾將出現一個小箭頭按鈕，點選後會觸發OnDisclose事件。Grouped屬性為True時UgAppList01將以每行首字母或漢字進行分組顯示。Sorted屬性為True時UgAppList01將以排序方式顯示各個可選項。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");
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 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. 功能
- 點選第一條記錄時將顯示
OnClick事件。
- 按住第二條記錄時將顯示
OnClickHold事件。
- 雙擊第三條記錄時將顯示
OnDblClick事件。
- 點選第四條記錄末尾的小箭頭按鈕時將顯示
OnDisclose事件。
- 選擇第五條記錄時將顯示
OnSelect事件。
- 按住第六條記錄滑動一段距離再放手將觸發
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]);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
//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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
// 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;
1
設定面板是否處於收起的狀態，該屬性僅在Collapsible屬性設定為True時可以使用。
當該屬性設定為False時，程式運行時界面處於展開狀態。
當該屬性設定為True時，程式運行時界面處於收起狀態。
# 12.1.2. CollapseDirection
property CollapseDirection: TUniCollapseDirection;
1
該屬性用於設定面板的收起的方向，該屬性僅在Collapsible設定為True時有效。
| 名稱 | 說明 |
|---|---|
| cdDefault/cdTop | 預設的收起方案，向上方收起 |
| cdBottom | 向下方收起 |
| cdLeft | 向左側收起 |
| cdRight | 向右側收起 |
# 12.1.3. Collapsible
property Collapsible: Boolean;
1
該屬性用於設定面板是否支援收起。
# 12.1.4. Title
property Title: string;
1
設定面板的標題。
# 12.1.5. TitleAlign
property TitleAlign: TAlignment;
1
設定面板標題的對齊方式。
| 名稱 | 說明 | 圖示 |
|---|---|---|
| taLeftJustify | 標題左對齊 |  |
| taRightJustify | 標題右對齊 |  |
| taCenter | 標題居中 |  |
# 12.1.6. TitleVisible
property TitleVisible: Boolean;
1
設定標題是否可見。為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
1
設定控制元件切換頁面時頁面的運動方向。
| 名稱 | 說明 |
|---|---|
| cdHorizontal | 水平方向運動 |
| cdVertical | 垂直方向運動 |
# 15.1.2. PageIndex
property PageIndex: Integer;
1
設定控制元件顯示目前頁面的索引值。
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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
//PasScript
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 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;
1
設定當文字編輯框中存在內容時在編輯框右側顯示清除按鈕。
# 16.1.2. EmptyText
property EmptyText: string;
1
設定文字框內容為空時顯示的提示內容。
# 16.1.3. Lines
property Lines: TStrings;
1
設定編輯框的文字內容。點選屬性右側的[√]按鈕或者雙擊該屬性打開編輯視窗，輸入內容。
也可以在指令碼中指定顯示的內容。
//JScript
var i;
UgAppMemo01.Clear;
UgAppMemo01.Lines.Clear;
//顯示第幾行
for (i = 1; i <= 10; i++)
{
UgAppMemo01.Lines.Add("The RowNo is" + IntToStr(i));
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
//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;
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
// Make sure to add code blocks to your code group
# 16.1.4. MaxRows
property MaxRows: Integer;
1
設定允許輸入的最大行數。
# 16.1.5. ReadOnly
property ReadOnly: Boolean;
1
設定文字編輯框是否為只讀狀態。
# 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));
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Make sure to add code blocks to your code group
# 17. TUgAppNumberEdit
UgAppNumberEdit是輸入控制元件，只能輸入數字，可以限制輸入的最大值和最小值，輸入不符合要求的數字后將有錯誤提示。
# 17.1. 屬性
| 屬性 | 功能說明 |
|---|---|
| MaxValue | 允許輸入的最大值 |
| MinValue | 允許輸入的最小值 |
| Value | 輸入的數值 |
# 17.1.1. MaxValue
property MaxValue: Real;
1
設定允許輸入的最大值，預設為0，表示為不限制，超過該最大值后，Vlaue=MaxValue。
# 17.1.2. MinValue
property MinValue: Real;
1
設定允許輸入的最小值，預設為0，表示不限制，低於該最小值時，Vlaue=MinValue。
# 17.1.3. Value
property Value: Real;
1
設定輸入的數值。該數值需在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));
}
1
2
3
4
5
6
2
3
4
5
6
//PasScript
procedure UgAppBitBtn01OnClick(sender: tobject);
begin
//ShowMessage(UgAppNumberEdit01.Text); //兩種方法皆可
ShowMessage(FloatTosTR(UgAppNumberEdit01.Value));
end;
Begin
End.
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
// 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;
1
該屬性用於開啟/關閉連鎖佇列模式，這是一個使計時器事件連鎖化的特殊模式，計時器會按照時間間隔定時觸發事件，如果伺服器因為繁忙正在處理上一個OnTimer事件，那麼這些事件會在客戶端以佇列的形式進行排隊等待伺服器處理。
如果你的計時器觸發時間間隔為5s，你的伺服器需要使用30s的時間進行處理的話，那麼你就需要使用該屬性來為這些事件進行佇列化。
# 18.1.2. DummyEvents
property DummyEvents: Boolean;
1
該屬性用於為會話設定心跳事件，避免會話超時。
# 18.1.3. Interval
property Interval: Cardinal;
1
設定事件觸發的時間間隔。
# 18.1.4. RunOnce
property RunOnce: Boolean;
1
是否僅進行一次事件觸發操作。
# 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; //計時器的啟動與停止
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
//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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
// 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;
1
設定允許接收的檔案型別，比如image。
# 19.1.2. Capture
property Capture: string;
1
設定獲取檔案的來源，例如此處使用照相機進行獲取，設定為camera。
# 19.1.3. MaxAllowedSize
property MaxAllowedSize: Cardinal;
1
該屬性為允許上傳的檔案的最大大小。單位為位元組，為0時表示不限制。
# 19.1.4. Messages
property Messages: TUniCustomUploadMessages;
1
該屬性設定顯示的提示資訊內容。
| 名稱 | 說明 |
|---|---|
| BrowseText | 瀏覽按鈕顯示的內容 |
| Cancel | 取消按鈕顯示的內容 |
| MaxFilesError | 上傳檔案的數量超過限制后顯示的提示資訊 |
| MaxSizeError | 上傳檔案的大小超過限制后顯示的提示資訊 |
| NoFileError | 未選擇上傳的檔案時的提示資訊 |
| PleaseWait | 等待時顯示的提示資訊 |
| Processing | 正在處理過程中顯示的提示資訊 |
| Upload | 上傳按鈕顯示的內容 |
| UploadError | 檔案上傳錯誤 |
| Uploading | 檔案正在上傳的提示資訊 |
| UploadTimeOut | 檔案上傳超時的提示資訊 |
# 19.1.5. MultipleFiles
property MultipleFiles: Boolean;
1
該屬性設定控制元件是否允許多個檔案上傳。
# 19.1.6. OptimizeMemoryUsage
property OptimizeMemoryUsage: Boolean;
1
該屬性設定控制元件是否進行記憶體優化。
# 19.1.7. OverWrite
property Overwrite: Boolean;
1
該屬性設定控制元件是否允許對之前的檔案進行覆蓋操作。
# 19.1.8. Title
property Title: string;
1
該屬性設定對話方塊的標題名稱。
# 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. 功能
- 點選
UgAppBitBtn01按鈕，實現在手機的照片庫中選擇一張照片，上傳到伺服器並顯示在圖片框中。 - 點選
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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 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;
1
設定允許接收的檔案型別，比如image。
# 20.1.2. Capture
property Capture: string;
1
設定獲取檔案的來源，例如此處使用照相機進行獲取，設定為camera。
# 20.1.3. MaxAllowedSize
property MaxAllowedSize: Cardinal;
1
該屬性為允許上傳的檔案的最大大小。單位為位元組，為0時表示不限制。
# 20.1.4. Messages
property Messages: TUniCustomUploadMessages;
1
該屬性設定顯示的提示資訊內容。
| 名稱 | 說明 |
|---|---|
| BrowseText | 瀏覽按鈕顯示的內容 |
| Cancel | 取消按鈕顯示的內容 |
| MaxFilesError | 上傳檔案的數量超過限制后顯示的提示資訊 |
| MaxSizeError | 上傳檔案的大小超過限制后顯示的提示資訊 |
| NoFileError | 未選擇上傳的檔案時的提示資訊 |
| PleaseWait | 等待時顯示的提示資訊 |
| Processing | 正在處理過程中顯示的提示資訊 |
| Upload | 上傳按鈕顯示的內容 |
| UploadError | 檔案上傳錯誤 |
| Uploading | 檔案正在上傳的提示資訊 |
| UploadTimeOut | 檔案上傳超時的提示資訊 |
# 20.1.5. MultipleFiles
property MultipleFiles: Boolean;
1
該屬性設定控制元件是否允許多個檔案上傳。
# 20.1.6. OptimizeMemoryUsage
property OptimizeMemoryUsage: Boolean;
1
該屬性設定控制元件是否進行記憶體優化。
# 20.1.7. OverWrite
property Overwrite: Boolean;
1
該屬性設定控制元件是否允許對之前的檔案進行覆蓋操作。
# 20.1.8. Title
property Title: string;
1
該屬性設定對話方塊的標題名稱。
# 20.2. 事件
| 名稱 | 觸發條件 |
|---|---|
| OnCompleted | 當控制元件完成上傳時觸發該事件 |
| OnMultiCompleted | 當控制元件完成多個檔案上傳時觸發該事件 |
# 21. TUgAppSlider
UgAppSlider是可滑動刻度選條，可以拖動選擇刻度值，可以設定最大值和最小值。
# 21.1. 屬性
| 屬性 | 說明 |
|---|---|
| Max | 滑塊設定位置的最大值 |
| Min | 滑塊設定位置的最小值 |
| Position | 滑塊的設定位置 |
# 21.1.1. Max
property Max: Integer;
1
設定滑塊位置的最大值。
# 21.1.2. Min
property Min: Integer;
1
設定滑塊位置的最小值。
# 21.1.3. Position
property Position: Integer;
1
設定滑塊所在的位置。
# 21.2. 應用
UgAppSlider是可滑動刻度選條，可以拖動選擇刻度值，可以設定最大值和最小值。
# 21.2.1. 佈局
- UgAppBitBtn01
| 屬性 | 取值 | 說明 |
|---|---|---|
| Caption | 最小值 | 按鈕文字內容 |
- UgAppBitBtn02
| 屬性 | 取值 | 說明 |
|---|---|---|
| Caption | 最大值 | 按鈕文字內容 |
# 21.2.2. 功能
- 拖動
UgAppSlider01，UgAppLabel01上顯示目前刻度值。 - 點選
UgAppBitBtn01，UgAppSlider01將定位最小值。 - 點選
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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Make sure to add code blocks to your code group
# 22. TUgAppToggle
UgAppToggle是狀態切換開關，常見的應用場景包括工業控制開關、是與否的選項等。
# 22.1. 屬性
| 屬性 | 說明 |
|---|---|
| Toggled | 設定是否切換為開啟狀態 |
# 22.1.1. Toggled
property Toggled: Boolean;
1
設定開關按鈕是否處於開啟的狀態。
# 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"; //顯示開關狀態
}
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
//PasScript
procedure UgAppToggle01OnChange(sender: tobject);
begin
if UgAppToggle01.Toggled Then
begin
UgAppLabel01.Caption := 'ON'; //顯示開關狀態
End
Else
Begin
UgAppLabel01.Caption := 'OFF'; //顯示開關狀態
End;
end;
Begin
End.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// Make sure to add code blocks to your code group
# 23. TUgAppRadio
UgAppRadio是單選按鈕，一般用於屬性單選，單選的選項按鈕位於同一個分組中。
# 23.1. 屬性
| 屬性 | 說明 |
|---|---|
| Checked | 設定是否處於選中狀態 |
# 23.1.1. Checked
property Checked: Boolean;
1
設定單選按鈕是否處於選中狀態。
# 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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//PasScript
procedure 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// Make sure to add code blocks to your code group
# 24. TUgAppSpinner
UgAppSpinner是一個帶「+ -」號的數字輸入框，可以設定允許輸入的最小值和最大值，還可以設定單步加減大小，即每次點選加減按鈕時增加或減少的數值。
# 24.1. 屬性
| 屬性 | 功能說明 |
|---|---|
| MaxValue | 允許輸入的最大值 |
| MinValue | 允許輸入的最小值 |
| Step | 設定每按一次+ -按鈕的數值增減量 |
| Value | 輸入的數值 |
# 24.1.1. MaxValue
property MaxValue: Real;
1
設定允許輸入的最大值，預設為0，表示為不限制，超過該最大值后，Vlaue=MaxValue。
# 24.1.2. MinValue
property MinValue: Real;
1
設定允許輸入的最小值，預設為0，表示不限制，低於該最小值時，Vlaue=MinValue。
# 24.1.3. Step
property Step: Real
1
設定每次按下+ -按鈕時數值的增量或者減量。
# 24.1.4. Value
property Value: Real;
1
設定輸入的數值。該數值需在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);
}
1
2
3
4
5
2
3
4
5
//PasScript
procedure UgAppSpinner01OnChange(sender: tobject);
begin
UgAppLabel01.Caption := 'Your Score：' + FloatToStr(UgAppSpinner01.Value);
end;
Begin
End.
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
// 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;
1
該屬性用於指定顯示的HTML文字內容。
點選屬性右側的[√]或者雙擊該屬性以打開編輯框。其中的內容文字標記格式遵循HTML格式。
也可以從伺服器端的檔案中載入HTML進行顯示。
//JScript
UgAppHTMLFrame01.HTML.LoadFromFile("files\\web\\sample.html");
1
2
2
//PasScript
UgAppHTMLFrame01.HTML.LoadFromFile('files\web\sample.html');
1
2
2
// Make sure to add code blocks to your code group
# 25.1.2. Scrollable
property Scrollable: Boolean;
1
設定控制元件是否顯示滾動條。
# 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>
1
# 25.2.2. 功能
運行瀏覽器訪問界面，UgAppHTMLFrame01控制元件載入HTML頁面文字檔案。顯示HTML頁面。
# 26. TUgAppURLFrame
UgAppURLFrame是一個可以根據URL地址訪問一個WEB系統的頁面控制元件。
# 26.1. 屬性
| 屬性 | 功能說明 |
|---|---|
| URL | 設定網頁URL地址，程式啟動時訪問該地址 |
| HTML | 編輯框顯示HTML文字內容 |
# 26.1.1. URL
property URL: string;
1
設定網頁的URL地址，在程式啟動時可以訪問該網頁地址並顯示。
//JScript
UgAppURLFrame01.URL = "https://www.baidu.com";
1
2
2
//PasScript
UgAppURLFrame01.URL := 'https://www.baidu.com';
1
2
2
// Make sure to add code blocks to your code group
# 26.1.2. HTML
property HTML: TStrings;
1
該屬性用於指定顯示的HTML文字內容。
點選屬性右側的[√]或者雙擊該屬性以打開編輯框。其中的內容文字標記格式遵循HTML格式。
也可以從伺服器端的檔案中載入HTML進行顯示。
//JScript
UgAppURLFrame01.HTML.LoadFromFile("files\\web\\sample.html");
1
2
2
//PasScript
UgAppURLFrame01.HTML.LoadFromFile('files\web\sample.html');
1
2
2
// 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"
}
1
2
3
4
5
6
7
2
3
4
5
6
7
//PasScript
procedure UgAppRunFrameOnAfterRunScript(const sender: tobject);
begin
UgAppURLFrame01.URL := 'https://www.baidu.com';
//也可以載入本地網頁檔案
//UgAppURLFrame01.URL := 'files/web/sample.html'
end;
Begin
End.
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
// 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;
1
//JScript
UgAppPDFFrame01.PdfURL = UGSM.FilesFolder + "sample.pdf";
1
2
2
//PasScript
UgAppPDFFrame01.PdfURL := UGSM.FilesFolder + 'sample.pdf';
1
2
2
// 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";
}
1
2
3
4
5
2
3
4
5
//PasScript
procedure UgAppRunFrameOnAfterRunScript(const sender: tobject);
begin
UgAppPDFFrame01.PdfURL := UGSM.FilesFolder + 'sample.pdf';
end;
Begin
End.
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
// 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;
1
設定功能表欄中顯示的專案。
UgAppMenu下面有一個Item專案，點選該專案，然後再點選左上角的新增按鈕以增加功能表項。在佈局過程中可能會出現Ajax ERROR錯誤，該錯誤不會影響程式的運行，可以忽略。
# 28.1.2. Scrollable
property Scrollable: Boolean;
1
設定是功能表項否可以滑動。即當功能表項顯示區域高度大於客戶端顯示區域的高度時，顯示滾動條。
# 28.1.3. Side
property Side: TUnimMenuSide;
1
設定功能表窗體彈出顯示的區域。
| 名稱 | 說明 |
|---|---|
| msTop | 功能表從頂部顯示 |
| msBottom | 功能表從底部顯示 |
| msLeft | 功能表從左側顯示 |
| msRight | 功能表從右側顯示 |
# 28.1.4. ViewportMenu
property ViewportMenu: Boolean;
1
是否隱藏功能表欄，若設定為False，則功能表欄會在程式啟動時顯示。
# 28.1.5. Visible
property Visible: Boolean;
1
是否顯示功能表欄。
# 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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//PasScript
procedure 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 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;
1
設定欄位表的標題名稱。
# 29.1.2. InstructIons
property Instructions: string;
1
設定欄位表的末尾說明。
# 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;
1
設定顯示的字幕資訊。
# 31.1.2. IconCls
property IconCls: string;
1
設定圖示的名稱。
其中可使用的部分圖示型別如下：
# 31.1.3. Pressed
property Pressed: Boolean;
1
按鈕是否處於按下的狀態。
# 31.1.4. UI
property UI: string;
1
設定按鈕的外觀風格。
| 名稱 | 說明 | 圖示 |
|---|---|---|
| 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;
1
設定樹形結構的專案，雙擊控制元件以打開結構編輯器。
# 32.1.2. Title
property Title: string;
1
設定列表的標題。
# 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");
}
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
//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.
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
// 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;
1
功能表在收起與展開時會有滑動的動畫效果。
# 33.1.2. ExpanderFirst
property ExpanderFirst: Boolean;
1
功能表收起按鈕是否位於功能表項的左側。
| 取值 | 圖例 |
|---|---|
| True |  |
| False |  |
# 33.1.3. ExpanderOnly
property ExpanderOnly: Boolean;
1
該屬性如果為True，則僅在點選功能表欄中的收起按鈕時才會對功能表欄進行收起展開，否則點選功能表項就可以進行收起打開的操作。
# 33.1.4. Items
property Items: TUniTreeNodes;
1
功能表項的設定，在控制元件設計界面，雙擊該控制元件可以打開樹形功能表列表的編輯界面。在該界面下可以進行功能表建立、子功能表的建立，功能表的刪除、功能表的上移下移左移右移操作。
該屬性下包含了部分方法。
- Items.Add
function Add(aParentItem: TUniTreeNode = nil; const S: string = ''): TUniTreeNode; virtual; abstract;
1
新增結點。
- Items.AddChild
function AddChild(Parent: TUniTreeNode; const S: string): TUniTreeNode; virtual; abstract;
1
新增子結點。
- Items.AddNode
function AddNode(Node: TUniTreeNode; Relative: TUniTreeNode; const S: string; Ptr: Pointer; Method: TUniNodeAttachMode): TUniTreeNode; virtual; abstract;
1
新增結點。
- Items.Clear
procedure Clear; virtual; abstract;
1
清除所有結點資訊。
- Items.Delete
procedure Delete(Node: TUniTreeNode); virtual; abstract;
1
刪除其選擇的結點以及其所屬的全部子結點。
- Items.FindNodeByCaption
function FindNodeByCaption(const ACaption: string): TUniTreeNode; virtual; abstract;
1
搜索該名稱的結點。
# 33.1.5. Micro
property Micro: Boolean;
1
是否僅以MicroWidth設定的寬度進行功能表欄顯示。
| 取值 | 圖例 |
|---|---|
| False |  |
| True |  |
# 33.1.6. MicroWidth
property MicroWidth: Integer;
1
設定Micro下的顯示寬度。
# 33.1.7. SingleExpand
property SingleExpand: Boolean;
1
是否每次點選僅展開一個功能表結點。
# 34. TUgAppTimePicker
UgAppTimePicker是時間設定控制元件。點選后，在底部彈出的界面中滑動選擇時間，選擇的時間會在Time屬性中顯示。
# 34.1. 屬性
| 屬性 | 功能說明 |
|---|---|
| MinuteSteps | 設定單步的變化量 |
| Picker | 設定事件選擇器的外觀樣式 |
| Time | 設定目前的時間 |
| TimeFormat | 設定時間顯示的格式 |
# 34.1.1. MinuteSteps
property MinuteSteps: Integer;
1
設定分鐘數調整的步進。
# 34.1.2. Picker
property Picker: TUniPickerType;
1
設定事件選擇器的外觀樣式。
| 名稱 | 說明 | 圖示 |
|---|---|---|
| dptEdge | 卡片選擇式 |  |
| dptFloated | 撥號盤式 |  |
# 34.1.3. TimeFormat
property TimeFormat: string;
1
設定時間格式，例如HH:mm，其時間顯示格式為07:30。
# 34.1.4. Time
property Time: TTime;
1
設定時間。
//顯示時間
ShowMessage(TimeToStr(UgAppTimePicker01.Time));
1
2
2
# 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));
}
1
2
3
4
5
6
2
3
4
5
6
//PasScript
procedure UgAppBitBtn01OnClick(sender: tobject);
begin
ShowMessage(TimeToStr(UgAppTimePicker01.Time) + ' ' + TimeToStr(UgAppTimePicker02.Time));
end;
Begin
End.
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
// Make sure to add code blocks to your code group