FastWeb數據控制控制元件

• 適用平臺： APP(移動端)

  FastWeb提供了一套豐富的數據展示控制元件，同時也提供鏈接資料庫和訪問數據的控制元件，在本章節中將介紹通過FastWeb的數據展示控制元件，講解如何連線資料庫和查詢、展現數據。

1. 連線資料庫（APP）

1.1. 建立資料庫

  本節使用到名為Pass_Cust的數據表，其數據結構如下圖所示。在初始嚮導中FastWeb已包含此數據表，可使用該數據表直接進行測試。如果需要自行建立數據表，可直接複製下方的SQL進行表結構的產生。在其中插入幾條記錄數據。

CREATE TABLE [dbo].[Pass_Cust](
	[cust_id] [nvarchar](50) NOT NULL,
	[cust_name] [nvarchar](50) NOT NULL,
	[cust_age] [nvarchar](50) NULL,
	[cust_sex] [nvarchar](50) NULL,
	[cust_phone] [nvarchar](50) NULL,
	[cust_money] [nvarchar](50) NULL,
	[cust_date] [date] NULL,
	[cust_time] [time](7) NULL,
	[cust_memo] [nvarchar](max) NULL,
	[cust_image] [image] NULL
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

INSERT INTO [dbo].[Cust](cust_id,cust_name,cust_age,cust_sex,cust_phone)
VALUES('09','李敏','25','女','13555555555')

INSERT INTO [dbo].[Cust](cust_id,cust_name,cust_age,cust_sex,cust_phone)
VALUES('11','李華','27','女','13566666666')

INSERT INTO [dbo].[Cust](cust_id,cust_name,cust_age,cust_sex,cust_phone)
VALUES('36','楊林','26','男','13444444444')

1.2. 設定連線

1.2.1. 使用FD連線

  使用FireDAC連線時，需要在服務端部署好對應的資料庫，然後在客戶端使用TUgFDConnection進行連線。

  在設計器視窗中放置UgFDConnection，UgFDQuery、UgDataSource和UgAppDBGrid。

• UgFDConnection01

屬性	取值	說明
LoginPrompt	False	是否顯示資料庫使用者登陸提示框
Params.DriverID	MSSQL	連線資料庫的型別
Params.Pooled	Falsed	是否為連線池
Params.Database	test	連線的資料庫名稱
Params.Server	.	連線的資料庫地址
Params.OSAuthent	No	是否進行系統認證
Params.User_Name		根據認證的資料庫使用者進行填寫
Params.Password		根據認證的資料庫使用者密碼進行填寫

• UgFDQuery01

屬性	取值	說明
Connection	UgFDConnection01	設定其連線使用的控制元件
CachedUpdates	True	設定快取更新

• UgDataSource01

屬性	取值	說明
DataSet	UgFDQuery01	設定其連線的數據集

• UgAppDBGrid01

屬性	取值	說明
Align	alClient	客戶區佔滿
DataSource	UgDataSource01	設定其連線的數據源

  設定指令碼內容如下：

//JScript
  UgFDConnection01.Connected = True;
  UgFDQuery01.SQL.Text = "SELECT cust_id as 編號,cust_name as 姓名, " + 
  "cust_age as 年齡, cust_sex as 性別, " +
  "cust_phone as 手機, cust_money as 工資, cust_date as 日期, " +
  "cust_time as 時間, cust_memo as 備註, cust_image as 影象 " +
	"FROM Pass_Cust";
  UgFDQuery01.Open;
  UgAppDBGrid01.Columns.Items[0].Width = 80; //動態設定列寬度
  UgAppDBGrid01.Columns.Items[1].Width = 80;
  UgAppDBGrid01.Columns.Items[2].Width = 80;
  UgAppDBGrid01.Columns.Items[3].Width = 80;
  UgAppDBGrid01.Columns.Items[4].Width = 80;
  UgAppDBGrid01.Columns.Items[5].Width = 80;

//PasScript
Begin
  UgFDConnection01.Connected := True;
  UgFDQuery01.SQL.Text := 'SELECT cust_id as 編號,cust_name as 姓名, ' + 
  'cust_age as 年齡, cust_sex as 性別, ' +
  'cust_phone as 手機, cust_money as 工資, cust_date as 日期, ' +
  'cust_time as 時間, cust_memo as 備註, cust_image as 影象 ' +
	'FROM Pass_Cust';
  UgFDQuery01.Open;
  UgAppDBGrid01.Columns.Items[0].Width := 80; //動態設定列寬度
  UgAppDBGrid01.Columns.Items[1].Width := 80;
  UgAppDBGrid01.Columns.Items[2].Width := 80;
  UgAppDBGrid01.Columns.Items[3].Width := 80;
  UgAppDBGrid01.Columns.Items[4].Width := 80;
  UgAppDBGrid01.Columns.Items[5].Width := 80;
End.

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

1.2.2. 使用TARS連線

  在TARS中設定對該資料庫的連線設定。注意需要填寫連線名稱、資料庫名稱Database，使用者名稱User_Name，密碼Password以及資料庫的地址Server。設定完成後需重啟TARS使連線設定生效。

  在FastWeb的設計窗體中放置一個UgRFConnection、一個UgRFDataSet、一個UgDataSource與一個UgAppDBGrid。

  如圖所示，接下來介紹以下圖中顯示的控制元件的作用。

  UgRFConnection控制元件用來與TARS進行連線，TARS可以支援目前主流的資料庫。

  UgRFDataSet控制元件是用來進行資料庫的查詢、新增、刪除和修改的控制元件，它需要通過UgRFConnection控制元件關聯到資料庫上。

  UgDataSource控制元件是數據源控制元件，如果一個表格或者其他數據展示控制元件需要展示一個表的數據，那麼首先必須將它關聯到一個數據源上。

  UgAppDBGrid控制元件就是其中一種數據展示控制元件。它需要繫結UgDataSource才能顯示數據。

  接下來，需要進行控制元件屬性的設定。

• UgRFConnection01

屬性	取值	說明
ConnectionDefName	FastWeb	TARS中的連線設定的名稱
LoginOptions.UserName		根據設定的TARS使用者名稱與密碼填寫
LoginOptions.Password		根據設定的TARS使用者名稱與密碼填寫
ForceEncryption	True	若啟用了連線加密，則選擇True
SecureKey		根據設定的TARS安全碼填寫
ServerAddr		根據設定的TARS伺服器的地址填寫
ServerPort		根據設定的TARS伺服器的埠填寫

• UgRFDataSet01

屬性	取值	說明
Connection	UgRFConnection01	指定數據集連線的名稱

• UgDataSource01

屬性	取值	說明
DataSet	UgRFDataSet01	指定繫結的數據集

• UgAppDBGrid01

屬性	取值	說明
DataSource	UgDataSource01	指定數據源

  設定指令碼內容如下：

//JScript
  UgFDConnection01.Connected = True;
  UgFDQuery01.SQL.Text = "SELECT cust_id as 編號,cust_name as 姓名, " + 
  "cust_age as 年齡, cust_sex as 性別, " +
  "cust_phone as 手機, cust_money as 工資, cust_date as 日期, " +
  "cust_time as 時間, cust_memo as 備註, cust_image as 影象 " +
	"FROM Pass_Cust";
  UgFDQuery01.Open;
  UgAppDBGrid01.Columns.Items[0].Width = 80; //動態設定列寬度
  UgAppDBGrid01.Columns.Items[1].Width = 80;
  UgAppDBGrid01.Columns.Items[2].Width = 80;
  UgAppDBGrid01.Columns.Items[3].Width = 80;
  UgAppDBGrid01.Columns.Items[4].Width = 80;
  UgAppDBGrid01.Columns.Items[5].Width = 80;

//PasScript
Begin
  UgRFConnection01.Active := True;
  UgRFDataSet01.SQL.Text := 'SELECT cust_id as 編號,cust_name as 姓名, ' + 
  'cust_age as 年齡, cust_sex as 性別, ' +
  'cust_phone as 手機, cust_money as 工資, cust_date as 日期, ' +
  'cust_time as 時間, cust_memo as 備註, cust_image as 影象 ' +
	'FROM Pass_Cust';
  UgRFDataSet01.Open;  
  UgAppDBGrid01.Columns.Items[0].Width := 80; //動態設定列寬度
  UgAppDBGrid01.Columns.Items[1].Width := 80;
  UgAppDBGrid01.Columns.Items[2].Width := 80;
  UgAppDBGrid01.Columns.Items[3].Width := 80;
  UgAppDBGrid01.Columns.Items[4].Width := 80;
  UgAppDBGrid01.Columns.Items[5].Width := 80;
End.

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

  啟動該示例，可以檢視連線效果。

1.3. 運算元據庫

  運算元據庫的方式包括增、刪、改、查，接下來將介紹使用兩組控制元件實現資料庫的操作功能。

1.3.1. 使用FD運算元據庫

  在FD中，用於進行數據操作的控制元件是UgFDQuery，可以實現增刪改查的功能。常用功能如下表：

屬性或方法	說明
Close	關閉
Open	執行查詢語句,打開數據集
ExecSQL	執行SQL語句
SQL.Clear	清空SQL語句
SQL.Add('SQL語句')	新增SQL語句
FieldByName('欄位名')	取某欄位值
ParamsByName('變數名')	變數名稱
RecordCount	查詢獲取到的記錄數量
Eof	表末尾標誌
Bof	表開頭標誌
First	挪到第一條記錄
Last	挪到最後一條記錄

1.3.2. 使用TARS運算元據庫

  在TARS中，用於進行數據操作的控制元件是UgRFDataSet，可以實現增刪改查的資料庫功能。使用TARS連線，指令碼程式碼與FD類似，此處不再贅述。

2. TUgAppDBGrid

  該元件為通用數據顯示元件，用於顯示錶格形式的數據記錄。

2.1. 屬性

屬性	功能說明
Columns	設定表格列
DataSource	設定獲取數據的數據來源
Options	設定數據表格的選項
ReadOnly	表格是否只讀
WebOptions	設定網頁顯示的選項

2.1.1. Columns

property Columns: TUniDBGridColumns;

  設定表格列。雙擊控制元件以打開表格列編輯器進行欄位編輯。

2.1.2. DataSource

property DataSource: TDataSource;

  設定獲取數據的數據來源，通常使UgDataSource來作為數據源控制元件適用。

2.1.3. Options

property Options: TUniDBGridOptions;

  設定數據表格的相關選項。

名稱	說明
dgEditing	當表格被選中時允許編輯
dgTitles	如果該屬性為True，則顯示錶頭；否則不顯示
dgIndicator	該屬性對錶格功能無影響
dgColumnsResize	允許使用者對錶格寬度進行調整
dgColumnMove	允許使用者移動表格列
dgColLines	在表格列之間顯示豎線
dgRowLines	在表格行之間顯示橫線
dgRowSelect	允許選擇一整行，若未設定該選項則僅選擇一個單元格
dgCheckSelect	在表格最左側列中顯示勾選框，用於進行勾選操作
dgCheckSelectCheckOnly	使用者僅允許勾選勾選框作為表格選中
dgAlwaysShowSelection	是否始終顯示錶格的選擇資訊，即使目前表格不是啟用狀態
dgConfirmDelete	刪除表格中的記錄時是否會進行確認刪除的操作
dgMultiSelect	是否允許選擇多個行
dgTitleClick	是否允許響應表格列標題的點選操作，該操作會觸發OnTitleClick事件
dgFilterClearButton	在過濾條件處顯示清除按鈕
dgTabs	該屬性對錶格功能無影響
dgCancelOnExit	該屬性對錶格功能無影響
dgAutoRefreshRow	當表格中的內容發生變化時自動重新整理目前行
dgDontShowSelected	是否不顯示選擇的行
dgRowNumbers	是否顯示行號
dgPersistentSelection	是否進行持久化選擇
dgDontReloadAfterEdit	是否在編輯后不過載

2.1.4. ReadOnly

property ReadOnly: Boolean;

  設定表格是否為只讀狀態。

2.1.5. WebOptions

property WebOptions: TUnimDBGridWebOptions;

  設定網頁顯示的選項。

名稱	說明
FetchAll	是否載入數據集的所有記錄至記憶體中
Paged	是否顯示分頁資訊
PageSize	設定記錄在一頁中的顯示量

3. TUgAppDBListGrid

  UgAppDBListGrid是帶有UgAppDBList功能的表格，可以通過UgDataSource控制元件關聯到表的一些欄位。

3.1. 屬性

屬性	功能說明
Columns	設定表格列
DataSource	設定顯示的數據源資訊
DisclosureIcon	是否顯示行尾部的圖示

3.1.1. Cloumns

property Columns: TUniDBGridColumns;

  設定表格列欄位的資訊。

  雙擊控制元件打開表格列編輯器，編輯顯示的表格列資訊。

3.1.2. DataSource

property DataSource: TDataSource;

  設定獲取數據的數據來源，通常使用UgDataSource來作為數據源控制元件適用。

3.1.3. DisclosureIcon

property DisclosureIcon: Boolean;

  設定是否在記錄行末尾顯示圖示。

4. TUgAppDBEdit

  UgAppDBEdit的外觀用法與UgAppEdit類似，顯示為一個可以編輯的文字框，相關屬性可參考TUgAppEdit中的內容。

4.1. 屬性

屬性	功能說明
DataSource	設定控制元件的數據來源
DataField	設定控制元件對應顯示的數據欄位
CharCase	字元的大小寫轉換型別
ClearButton	是否在編輯框中顯示清除按鈕
EmptyText	當輸入框中的內容為空時顯示的文字內容
PasswordChar	密碼輸入的替代字元

4.1.1. DataSource

property DataSource: TDataSource;

  設定數據獲取的來源。

4.1.2. DataField

property DataField: WideString;

  設定控制元件對應顯示的數據欄位。

4.1.3. CharCase

property CharCase: TEditCharCase;

  設定字元的大小寫轉換型別。

名稱	說明
ecNormal	普通模式，不進行大小寫轉換
ecLowerCase	將所有的字母轉換為小寫
ecUpperCase	將所有的字母轉換為大寫

4.1.4. ClearButton

property ClearButton: Boolean;

  設定是否在編輯框中存在內容時，在編輯框右側顯示清除按鈕，其樣式如下圖所示。

4.1.5. EmptyText

property EmptyText: string;

  設定編輯框為空時編輯框內顯示的提示內容。其樣式如下圖所示。當向編輯框中輸入內容時該提示資訊會被輸入的內容覆蓋。

4.1.6. PasswordChar

property PasswordChar: Char;

  當輸入的資訊為敏感內容（比如密碼）時使用的屬性，該屬性將輸入的字元替換為該屬性設定的字元。例如當該屬性指定為*時，輸入框的顯示如下圖所示。

5. TUgAppDBImage

  UgAppDBImage是影象顯示控制元件，可以通過UgDataSource控制元件關聯到表的一個影象欄位。

5.1. 屬性

屬性	功能說明
DataSource	設定控制元件的數據來源
DataField	設定控制元件對應顯示的數據欄位
AutoSize	是否根據圖片自動控制控制元件的大小
Center	圖片是否居中
Stretch	圖片是否進行拉伸以適應控制元件大小

5.1.1. DataSource

property DataSource: TDataSource;

  設定數據獲取的來源。

5.1.2. DataField

property DataField: WideString;

  設定控制元件對應顯示的數據欄位。

5.1.3. AutoSize

property AutoSize: Boolean;

  是否根據圖片自動控制控制元件的大小。

5.1.4. Center

property Center: Boolean;

  圖片是否在控制元件居中位置。

5.1.5. Stretch

property Stretch: Boolean;

  設定圖片是否進行拉伸以適應控制元件大小。

6. TUgAppDBSelect

  UgAppDBSelect是數據文字選擇控制元件，可以通過UgDataSource關聯到表的一個文字欄位。

6.1. 屬性

屬性	功能說明
DataSource	設定控制元件的數據來源
DataField	設定控制元件對應顯示的數據欄位
ItemIndex	控制元件目前選擇項的索引號
Items	設定可選擇的專案
Sorted	設定是否對選項進行排序

6.1.1. DataSource

property DataSource: TDataSource;

  設定數據獲取的來源。

6.1.2. DataField

property DataField: WideString;

  設定控制元件對應顯示的數據欄位。

6.1.3. ItemIndex

property ItemIndex: Integer;

  該屬性指定當前選擇項的索引號，索引號從0開始，預設選項為-1，即不選任何一個選項。

6.1.4. Items

property Items: TStrings;

  設定選擇項。點選屬性右側的[√]按鈕或者雙擊該屬性打開編輯視窗，輸入選項的內容，每項均需要換行。

6.1.5. Sorted

property Sorted: Boolean;

  該屬性用於確定是否需要對選項進行排序。

6.2. 事件

事件	何時觸發
OnChange	當選項發生變化時觸發該事件

7. TUgAppDBDatePicker

  UgAppDBDatePicker是資料庫日期輸入控制元件，可以通過UgDataSource控制元件關聯到表的一個日期欄位。

7.1. 屬性

屬性	功能說明
DataSource	設定控制元件的數據來源
DataField	設定控制元件對應顯示的數據欄位
Date	設定日期控制元件目前選擇的日期
DateFormat	設定日期顯示的格式
MaxYear	設定可選年份的最大數值
MinYear	設定可選年份的最小數值
SlotOrder	設定日期選擇界面的年月日的排序順序

7.1.1. DataSource

property DataSource: TDataSource;

  設定數據獲取的來源。

7.1.2. DataField

property DataField: WideString;

  設定控制元件對應顯示的數據欄位。

7.1.3. Date

property Date: TDateTime;

  設定日期控制元件目前選擇的日期。該屬性可以通過指令碼賦值來實現顯示當天日期的功能。

UgAppDatePicker01.Date := Date; //初始化為當天日期

7.1.4. DateFormat

property DateFormat: string

  設定日期顯示的格式。比如將日期格式設定為yyyy-MM-dd，則格式化輸出的日期格式為2020-04-30。或者將日期格式設定為MM/dd/yy，則格式化輸出的日期為04/30/20。

7.1.5. MaxYear

property MaxYear: Integer;

  設定在日期顯示中可選的最大年份數值。

7.1.6. MinYear

property MinYear: Integer;

  設定在日期顯示中可選的最小年份數值。

7.1.7. SlotOrder

property SlotOrder: string;

  設定選項中的日期顯示順序。比如將其設定為y/m/d，則對應的選擇器中顯示的內容如下：

8. TUgAppDBMemo

  UgAppDBMemo是資料庫多行文字輸入控制元件，可以通過UgDataSource控制元件關聯到表的一個文字欄位。

8.1. 屬性

屬性	功能說明
DataSource	設定控制元件的數據來源
DataField	設定控制元件對應顯示的數據欄位
ClearButton	是否顯示清除按鈕
EmptyText	在編輯框中內容為空時顯示提示內容
MaxRows	允許輸入的最大行數
ReadOnly	設定是否為只讀

8.1.1. DataSource

property DataSource: TDataSource;

  設定數據獲取的來源。

8.1.2. DataField

property DataField: WideString;

  設定控制元件對應顯示的數據欄位。

8.1.3. ClearButton

property ClearButton: Boolean;

  設定當文字編輯框中存在內容時在編輯框右側顯示清除按鈕。

8.1.4. EmptyText

property EmptyText: string;

  設定文字框內容為空時顯示的提示內容。

8.1.5. MaxRows

property MaxRows: Integer;

  設定允許輸入的最大行數。

8.1.6. ReadOnly

property ReadOnly: Boolean;

  設定文字編輯框是否為只讀狀態。

9. TUgAppDBList

  UgAppDBList是資料庫下拉選單框元件，可以通過UgDataSource控制元件關聯到表的一個文字欄位。其功能與UgAppDBSelect類似，都可以用來做可選項的選擇。

9.1. 屬性

屬性	功能說明
DataSource	設定控制元件的數據來源
DataField	設定控制元件對應顯示的數據欄位
Items	設定列表中的選項
ItemIndex	設定目前選中項的索引號
DisclosureIcon	是否在列表末尾顯示選項
Grouped	是否對選項進行分組顯示
Sorted	是否排序後進行顯示
Striped	列是否使用交替的顏色進行顯示

9.1.1. DataSource

property DataSource: TDataSource;

  設定數據獲取的來源。

9.1.2. DataField

property DataField: WideString;

  設定控制元件對應顯示的數據欄位。

9.1.3. Items

property Items: TStrings;

  設定選擇項。點選屬性右側的[√]按鈕或者雙擊該屬性打開編輯視窗，輸入選項的內容，每項均需要換行。

  或者在指令碼中對專案進行配置。

//JScript
  UgAppDBList01.Clear;
  UgAppDBList01.Items.Add("AAA111");
  UgAppDBList01.Items.Add("張三");
  UgAppDBList01.Items.Add("AAA222");
  UgAppDBList01.Items.Add("王小虎");
  UgAppDBList01.Items.Add("AAA333");
  UgAppDBList01.Items.Add("趙本山");
  UgAppDBList01.Items.Add("BBB111");
  UgAppDBList01.Items.Add("王大拿");
  UgAppDBList01.Items.Add("BBB222");
  UgAppDBList01.Items.Add("張家國");
  UgAppDBList01.Items.Add("BBB333");

//PasScript
  UgAppDBList01.Clear;
  UgAppDBList01.Items.Add('AAA111');
  UgAppDBList01.Items.Add('張三');
  UgAppDBList01.Items.Add('AAA222');
  UgAppDBList01.Items.Add('王小虎');
  UgAppDBList01.Items.Add('AAA333');
  UgAppDBList01.Items.Add('趙本山');
  UgAppDBList01.Items.Add('BBB111');
  UgAppDBList01.Items.Add('王大拿');
  UgAppDBList01.Items.Add('BBB222');
  UgAppDBList01.Items.Add('張家國');
  UgAppDBList01.Items.Add('BBB333');

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

9.1.4. ItemIndex

property ItemIndex: Integer;

  該屬性指定當前選擇項的索引號，索引號從0開始，預設選項為-1，即不選任何一個選項。

9.1.5. DisclosureIcon

property DisclosureIcon: Boolean;

  該屬性用於在每項的右側顯示一個指示圖示。例如，設定為True，其顯示效果如下圖。

9.1.6. Grouped

property Grouped: Boolean;

  該屬性用於設定選項是否進行分組顯示。例如，設定為True，其顯示效果如下圖。

9.1.7. Sorted

property Sorted: Boolean;

  是否對選項進行排序。例如，設定為True，其顯示效果如下圖。

9.1.8. Striped

property Striped: Boolean;

  列是否使用交替的顏色進行顯示。例如，設定為True，其顯示效果如下圖。

9.2. 事件

事件	何時觸發
OnDisClose	當Disclosure=True時，點選選項右側的圖示時觸發該事件
OnSelect	當點選控制元件中的選項時觸發該事件
OnClickHold	當控制元件被點選並有保持點選狀態時觸發該事件
OnDblClick	當控制元件被雙擊時觸發該事件

10. TUgAppDBNumberEdit

  UgAppDBNumberEdit是資料庫數字輸入控制元件，可以通過UgDataSource控制元件關聯到表的一個數字型欄位。

10.1. 屬性

屬性	功能說明
DataSource	設定控制元件的數據來源
DataField	設定控制元件對應顯示的數據欄位
MaxValue	允許輸入的最大值
MinValue	允許輸入的最小值

10.1.1. DataSource

property DataSource: TDataSource;

  設定數據獲取的來源。

10.1.2. DataField

property DataField: WideString;

  設定控制元件對應顯示的數據欄位。

10.1.3. MaxValue

property MaxValue: Real;

  設定允許輸入的最大值，預設為0，表示為不限制。

10.1.4. MinValue

property MinValue: Real;

  設定允許輸入的最小值，預設為0，表示不限制。

11. TUgAppDBSpinner

  UgAppDBSpinner是資料庫數字輸入控制元件，可以通過UgDataSource控制元件關聯到表的一個數字型欄位。

11.1. 屬性

屬性	功能說明
DataSource	設定控制元件的數據來源
DataField	設定控制元件對應顯示的數據欄位
MaxValue	允許輸入的最大值
MinValue	允許輸入的最小值
Step	設定每按一次+ -按鈕的數值增減量

11.1.1. DataSource

property DataSource: TDataSource;

  設定數據獲取的來源。

11.1.2. DataField

property DataField: WideString;

  設定控制元件對應顯示的數據欄位。

11.1.3. MaxValue

property MaxValue: Real;

  設定允許輸入的最大值，預設為0，表示為不限制。

11.1.4. MinValue

property MinValue: Real;

  設定允許輸入的最小值，預設為0，表示不限制。

11.1.5. Step

property Step: Real

  設定每次按下+ -按鈕時數值的增量或者減量。

12. TUgAppDBCheckBox

  UgAppDBCheckBox是資料庫A/B輸入控制元件，可以通過UgDataSource控制元件關聯到表的一個文字欄位或邏輯欄位。

12.1. 屬性

屬性	功能說明
DataSource	設定控制元件的數據來源
DataField	設定控制元件對應顯示的數據欄位
Caption	設定控制元件的標籤說明

12.1.1. DataSource

property DataSource: TDataSource;

  設定數據獲取的來源。

12.1.2. DataField

property DataField: WideString;

  設定控制元件對應顯示的數據欄位。

12.1.3. Caption

property Caption: TCaption;

  該屬性用於設定控制元件的標籤說明。

13. TUgAppDBToggle

  UgAppDBToggle是資料庫欄位開關切換輸入控制元件，可以通過UgDataSource控制元件關聯到表的一個文字欄位或邏輯欄位。

13.1. 屬性

屬性	功能說明
DataSource	設定控制元件的數據來源
DataField	設定控制元件對應顯示的數據欄位

13.1.1. DataSource

property DataSource: TDataSource;

  設定數據獲取的來源。

13.1.2. DataField

property DataField: WideString;

  設定控制元件對應顯示的數據欄位。

13.2. 事件

名稱	觸發條件
OnChange	當開關狀態發生變化時觸發該事件

14. TUgAppDBTimePicker

  UgAppDBTimePicker是資料庫時間輸入控制元件，可以通過UgDataSource控制元件關聯到表的一個時間欄位。

14.1. 屬性

屬性	功能說明
DataSource	設定控制元件的數據來源
DataField	設定控制元件對應顯示的數據欄位
MinuteSteps	設定單步的變化量
Picker	設定事件選擇器的外觀樣式
Time	設定目前的時間
TimeFormat	設定時間顯示的格式

14.1.1. DataSource

property DataSource: TDataSource;

  設定數據獲取的來源。

14.1.2. DataField

property DataField: WideString;

  設定控制元件對應顯示的數據欄位。

14.1.3. MinuteSteps

property MinuteSteps: Integer;

  設定分鐘數調整的步進。

14.1.4. Picker

property Picker: TUniPickerType;

  設定事件選擇器的外觀樣式。

名稱	說明	圖示
dptEdge	卡片選擇式
dptFloated	撥號盤式

14.1.5. TimeFormat

property TimeFormat: string;

  設定時間格式，例如HH:mm，其時間顯示格式為07:30。

14.1.6. Time

property Time: TTime;

  設定時間。

//JScript
//顯示時間
ShowMessage(TimeToStr(UgAppDBTimePicker01.Time));

//PasScript
//顯示時間
ShowMessage(TimeToStr(UgAppDBTimePicker01.Time));

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