範例彙總

# FastWeb之範例彙總

# 1. 說明

採用TUgGridCard元件，實現範例的卡片形式的展示。

通過本範例學習，可以掌握 TUgGrdiCard 的使用方法，並結合數據集實現範例展示的功能。

範例中心模板包含一個主展示界面與一個新增頁面以及一個後臺管理模板頁面。以下對三個模板分別進行說明。

# 2. 範例彙總

# 2.1. 設計明細

開啟FastWeb設計器，分別加入下插圖之控制元件。或者點選左上角的[匯入]選擇模板檔案來打開對應模板。

W-EQ-DEM-2063-2-1 範例中心的界面設計如下。

1：TUgContainerPanel元件，控制元件名稱為UgContainerPanel01。

2：TUgGridCard元件，控制元件名稱為 GridCard01。

3：TUgImage元件，控制元件名稱為 UgImage01。

4：TUgLabel元件，控制元件名稱為 UgLabel01。

5：TUgLabel元件，控制元件名稱為 UgLabel02。

8：TUgClientDataSet元件，控制元件名稱為 cdsProduct。

9：TUgFSButton元件，控制元件名稱為 btAddProduct。

10：TUgEdit元件，控制元件名稱為 edSearch。

11：TUgImage元件，控制元件名稱為 UgImage02。

13：TUgFSButton元件，控制元件名稱為 UgFSButton01。

14：TUgFSButton元件，控制元件名稱為 UgFSButton02。

15：TUgFSButton元件，控制元件名稱為 UgFSButton03。

16：TUgFSButton元件，控制元件名稱為 UgFSButton04。

17：TUgFSButton元件，控制元件名稱為 UgFSButton05。

18：TUgFSButton元件，控制元件名稱為 UgFSButton06。

19：TUgFSButton元件，控制元件名稱為 UgFSButton07。

20：TUgFSButton元件，控制元件名稱為 UgFSButton08。

21：TUgFSButton元件，控制元件名稱為 UgFSButton09。

22：TUgFSButton元件，控制元件名稱為 UgFSButton10。

23：TUgFSButton元件，控制元件名稱為 UgFSButton11。

24：TUgFSButton元件，控制元件名稱為 UgFSButton12。

25：TUgFSButton元件，控制元件名稱為 UgFSButton13。

UgWebRunFrame屬性設定
- Height：設定頁面高度=768。
- Width：設定頁面寬度=1024。
1:UgContainerPanel屬性設定
- Align：設定控制元件對齊方式，設定為 alTop。
2:UgGridCard01屬性設定
- Align：設定控制元件的對齊方式，設定為 alClient。
3:UgImage01屬性設定
- Picture：設定顯示的圖片，打開影像編輯器，從本地上傳圖片。
4:UgLabel01屬性設定
- Caption：設定顯示的字幕，設定為 範例彙總。
5:UgLabel02屬性設定
- Caption：設定顯示的字幕，設定為 點選卡片列表中的專案以打開對應範例
8:cdsProduct屬性設定
- DataNodeName：設定連線的節點資料庫名稱，設定為 FastWeb。
9:btnAddProduct屬性設定
- Anchors：設定錨點的固定位置，設定為 akTop，akRight 為 True。
- Caption：設定顯示的字幕，設定為 新增範例。
- Style：設定按鈕顯示的樣式，設定為 GoogleBlue3Round。
10:edSearch屬性設定
- EmptyText：設定為空時顯示的內容，設定為 edSearch。
13:UgFSButton01屬性設定

此控制元件位於UgContainerPanel02中。
- Align：設定對齊方式，設定為 alLeft。
- Caption：設定顯示的字幕內容，設定為 通訊埠。
- StyleButton：設定按鈕的樣式，設定為 JFGreenRound。
14:UgFSButton02屬性設定

此控制元件位於UgContainerPanel02中。
- Align：設定對齊方式，設定為 alLeft。
- Caption：設定顯示的字幕內容，設定為 ModbusTCP。
- StyleButton：設定按鈕的樣式，設定為 JFGreenRound。
15:UgFSButton03屬性設定

此控制元件位於UgContainerPanel02中。
- Align：設定對齊方式，設定為 alLeft。
- Caption：設定顯示的字幕內容，設定為 MQTT。
- StyleButton：設定按鈕的樣式，設定為 JFGreenRound。
16:UgFSButton04屬性設定

此控制元件位於UgContainerPanel02中。
- Align：設定對齊方式，設定為 alLeft。
- Caption：設定顯示的字幕內容，設定為 RestAPI。
- StyleButton：設定按鈕的樣式，設定為 JFGreenRound。
17:UgFSButton05屬性設定

此控制元件位於UgContainerPanel02中。
- Align：設定對齊方式，設定為 alLeft。
- Caption：設定顯示的字幕內容，設定為 HTTP。
- StyleButton：設定按鈕的樣式，設定為 JFGreenRound。
18:UgFSButton06屬性設定

此控制元件位於UgContainerPanel02中。
- Align：設定對齊方式，設定為 alLeft。
- Caption：設定顯示的字幕內容，設定為 列印。
- StyleButton：設定按鈕的樣式，設定為 JFGreenRound。
19:UgFSButton07屬性設定

此控制元件位於UgContainerPanel02中。
- Align：設定對齊方式，設定為 alLeft。
- Caption：設定顯示的字幕內容，設定為 條碼。
- StyleButton：設定按鈕的樣式，設定為 JFGreenRound。
20:UgFSButton08屬性設定

此控制元件位於UgContainerPanel02中。
- Align：設定對齊方式，設定為 alLeft。
- Caption：設定顯示的字幕內容，設定為 圖表。
- StyleButton：設定按鈕的樣式，設定為 JFGreenRound。
21:UgFSButton09屬性設定

此控制元件位於UgContainerPanel02中。
- Align：設定對齊方式，設定為 alLeft。
- Caption：設定顯示的字幕內容，設定為 檔案媒體。
- StyleButton：設定按鈕的樣式，設定為 JFGreenRound。
22:UgFSButton10屬性設定

此控制元件位於UgContainerPanel02中。
- Align：設定對齊方式，設定為 alLeft。
- Caption：設定顯示的字幕內容，設定為 遠端監控。
- StyleButton：設定按鈕的樣式，設定為 JFGreenRound。
23:UgFSButton11屬性設定

此控制元件位於UgContainerPanel02中。
- Align：設定對齊方式，設定為 alLeft。
- Caption：設定顯示的字幕內容，設定為 地圖定位。
- StyleButton：設定按鈕的樣式，設定為 JFGreenRound。
24:UgFSButton12屬性設定

此控制元件位於UgContainerPanel02中。
- Align：設定對齊方式，設定為 alLeft。
- Caption：設定顯示的字幕內容，設定為 影像識別。
- StyleButton：設定按鈕的樣式，設定為 JFGreenRound。
25:UgFSButton13屬性設定

此控制元件位於UgContainerPanel02中。
- Align：設定對齊方式，設定為 alLeft。
- Caption：設定顯示的字幕內容，設定為 實體運用。
- StyleButton：設定按鈕的樣式，設定為 JFGreenRound。

# 2.2. 程式設計

點選程式設計界面右下角的按鈕，切換至單元選擇界面，勾選需要使用的單元。該程式的程式不需要引用單元。

# 2.2.1. 程式初始設定

設定預設的建立方式。

function CreateList(ASearch)
{
  cdsProduct.CommandText = "Select FileName as ID,Caption as Title,Remark as Description, NULL as Price, Img,Category  from Task_ProductExample where  Product+Caption+Remark+Category like \'%"+ASearch+"%\' Order by Product,Caption";
  cdsProduct.Open;
   UgGridCard01.LoadDataSet;
}

1
2
3
4
5
6

# 2.2.2. 事件設定

UgImage02-OnClick事件

點選搜索圖示，顯示卡片列表。

function UgImage02OnClick(sender)
{
    CreateList(edSearch.Text);
}

1
2
3
4

UgWebRunFrame-OnAfterRunScript事件

初始化顯示，繫結事件。

function UgWebRunFrameOnAfterRunScript(sender)
{
   UGMM.LC(Self);
  //繫結事件
   UgFSButton01.OnClick = &UgFSButton01OnClick;
   UgFSButton02.OnClick = &UgFSButton01OnClick;
   UgFSButton03.OnClick = &UgFSButton01OnClick;
   UgFSButton04.OnClick = &UgFSButton01OnClick;
   UgFSButton05.OnClick = &UgFSButton01OnClick;
   UgFSButton06.OnClick = &UgFSButton01OnClick;
   UgFSButton07.OnClick = &UgFSButton01OnClick;
   UgFSButton08.OnClick = &UgFSButton01OnClick;
   UgFSButton09.OnClick = &UgFSButton01OnClick;
   UgFSButton10.OnClick = &UgFSButton01OnClick;
   UgFSButton11.OnClick = &UgFSButton01OnClick;
   UgFSButton12.OnClick = &UgFSButton01OnClick;
   UgFSButton13.OnClick = &UgFSButton01OnClick;
   //預設打開所有數據
    CreateList(edSearch.Text);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

edSearch-OnKeyPress事件

在搜索框輸入，按下鍵盤上的按鍵時觸發事件。

function edSearchOnKeyPress(sender,key)
{
    CreateList(edSearch.Text);
}

1
2
3
4

btAddProduct-OnClick事件

點選按鈕，打開範例登記界面。

//範例登記
function btAddProductOnClick(sender)
{
Var F,D,e,b;
  //打開範例登記
  F = UGMM.GetWebSubForm("W-EQ-DEM-2063-2-2");
  TUgWebForm(F).Caption = UGMM.LT("範例登記-新建"); 
  //獲取數據集
  try{
    D = TUgClientDataSet(TUgWebForm(F).RunFrame.FindComponent("cdsProduct"));
    D.CommandText = "select * from Task_ProductExample where 1=2";
    D.Open;
    D.Append; 
    e="";
    b=True;
    While (b){
       if (e!="")
       MessageDlg(e,mtWarning,mbOK);
       if (F.ShowModal == mrOK){ 
       try{
        if (D.FieldByName("Caption").AsString == "") 
          RaiseException(UGMM.LT("範例名稱 不能為空"));
        if (D.FieldByName("Category").AsString =="")
          RaiseException(UGMM.LT("類別 不能為空"));
        if (D.FieldByName("Product").AsString == "")
          RaiseException(UGMM.LT("所屬範例 不能為空"));
        if (D.FieldByName("Ver").AsString == "")
          RaiseException(UGMM.LT("範例版本 不能為空"));
          
          if (D.State in [dsEdit,dsInsert])
         				D.Post;
         D.SubmitUpdates;
         Showmessage(UGMM.LT("儲存成功！"));
         }
      Except{
        e=ExceptionMessage;
        }
    } 
      else
        b= False;
   }
  }
  Finally{
       TUgWebForm(F).Close;
       UGMM.DelWebSubForm("W-EQ-DEM-2063-2-2");
   }
}

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
47

UgFSButton-OnClick事件

按鈕點選事件。

function UgFSButton01OnClick(sender)
{
  CreateList(TUgFSButton(sender).Caption);
}

1
2
3
4

UgGridCard01-OnClick事件

點選卡片時打開對應的實體界面。

function UgGridCard01OnCardClick(sender,aid,atitle,adescription,aprice,aimg)
{
  Var F;
  if (Pos ("APP",atitle) != 0){
    ShowMessage(UGMM.LT("點選的範例為APP範例，不能在WEB頁面中打開"));
    return;
  }
  F = UGMM.GetWebSubForm(aid);
  TUgWebForm(F).Caption =atitle;
  try{
       if (F.ShowModal == mrOK){ 
       }
  }
  Finally{
       TUgWebForm(F).Close;
       UGMM.DelWebSubForm(aid);
   }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 3. 範例登記

# 3.1. 設計明細

開啟FastWeb設計器，分別加入下插圖之控制元件。或者點選左上角的[匯入]選擇模板檔案來打開對應模板。

W-EQ-DEM-2063-2-2 範例登記的界面設計如下。

1：TUgDBEdit元件，控制元件名稱為 dbCaption。

2：TUgDBComboBox元件，控制元件名稱為 dbCategory。

3：TUgLabel元件，控制元件名稱為 UgLabel01。

4：TUgPanel元件，控制元件名稱為 UgPanel01。

5：TUgImage元件，控制元件名稱為 img。

6：TUgDBEdit元件，控制元件名稱為 dbImg。

7：TUgFileUploadButton元件，控制元件名稱為 btnPicUpload。

8：TUgButton元件，控制元件名稱為 btnDelPic。

9：TUgDBEdit元件，控制元件名稱為 dbFileName。

10：TUgDBEdit元件，控制元件名稱為 dbFileUrl。

11：TUgDBEdit元件，控制元件名稱為 dbExampleUrl。

12：TUgDBMemo元件，控制元件名稱為 dbRemark。

13：TUgDataSource元件，控制元件名稱為 dsProduct。

14：TUgClientDataSet元件，控制元件名稱為 cdsProduct。

15：TUgButton元件，控制元件名稱為 btnOpenUrlA。

16：TUgButton元件，控制元件名稱為 btnOpenUrlB。

17：TUgButton元件，控制元件名稱為 btnSave。

1：dbCaption屬性設定
- DataSource：設定數據源，設定為 dsProduct。
- DataField：設定欄位名稱，設定為 Caption。
- FieldLabel：設定標籤顯示的名稱，設定為 範例名稱。
- FieldLabelAlign：設定標籤顯示的位置，設定為 laTop。
2：dbCategory屬性設定
- DataSource：設定數據源，設定為 dsProduct。
- DataField：設定欄位名稱，設定為 Category。
- FieldLabel：設定標籤顯示的名稱，設定為 類別。
- FieldLabelAlign：設定標籤顯示的位置，設定為 laTop。
3：UgLabel01屬性設定
- Caption：設定顯示的字幕，設定為 圖例
6：dbImg屬性設定
- DataSource：設定數據源，設定為 dsProduct。
- DataField：設定欄位名稱，設定為 Img。
- FieldLabel：設定標籤顯示的名稱，設定為 Img。
- FieldLabelWidth：設定標籤顯示的寬度，設定為 35。
7：btnPicUpload屬性設定
- Caption：設定按鈕顯示的字幕，設定為 上傳圖片。
8：btnDelPic屬性設定
- Caption：設定按鈕顯示的字幕，設定為 刪除圖片。
9：dbFileName屬性設定
- DataSource：設定數據源，設定為 dsProduct。
- DataField：設定欄位名稱，設定為 FileName。
- FieldLabel：設定標籤顯示的名稱，設定為 範例編號。
- FieldLabelAlign：設定標籤顯示的位置，設定為 laTop。
10：dbFileUrl屬性設定
- DataSource：設定數據源，設定為 dsProduct。
- DataField：設定欄位名稱，設定為 FileUrl。
- FieldLabel：設定標籤顯示的名稱，設定為 範例介紹URL。
- FieldLabelAlign：設定標籤顯示的位置，設定為 laTop。
11：dbExampleUrl屬性設定
- DataSource：設定數據源，設定為 dsProduct。
- DataField：設定欄位名稱，設定為 ExampleUrl。
- FieldLabel：設定標籤顯示的名稱，設定為 範例演示URL。
- FieldLabelAlign：設定標籤顯示的位置，設定為 laTop。
12：dbRemark屬性設定
- DataSource：設定數據源，設定為 dsProduct。
- DataField：設定欄位名稱，設定為 Remark。
- FieldLabel：設定標籤顯示的名稱，設定為 備註。
- FieldLabelAlign：設定標籤顯示的位置，設定為 laTop。
13：dsProduct屬性設定
- DataSet：設定數據集，設定為 cdsProduct。
14：cdsProduct屬性設定
- DataNodeName：設定節點資料庫的名稱，設定為 FastWeb。
15：btnOpenUrlA屬性設定
- Caption：設定顯示的字幕，設定為 打開URL。
16：btnOpenUrlB屬性設定
- Caption：設定顯示的字幕，設定為 打開URL。
17：btnSave屬性設定
- Caption：設定顯示的字幕，設定為 儲存。

# 3.2. 程式設計

點選程式設計界面右下角的按鈕，切換至單元選擇界面，勾選需要使用的單元。該程式的程式不需要引用單元。

# 3.2.1. 程式初始設定

該程式無初始設定。

# 3.2.2. 事件設定

btnPicUpload-OnCompleted事件

設定上傳完成將將圖片移動至指定位置，並更新圖片地址的欄位。

function btnPicUploadOnCompleted(sender,astream)
{
  var RemoteFileName,DestFolder,DestName,imgPath;
   if (FileSizeByName(UGCM.GetFileStreamFileName(AStream)) * 0.001 > 30)
   {
     Showmessage(UGMM.LT("圖例大小不能超過 30k."));
     return;
   }
   else{
  //遠端檔名
  RemoteFileName = ExtractFileName(varToStr(TUgFileUploadButton(sender).FileName));   
  //遠端檔案路徑
  DestFolder = UGSM.StartPath+"library\\js\\grid-product-cards\\images\\";
  DestName = DestFolder+RemoteFileName; 
  //上傳檔案
  CopyFile(UGCM.GetFileStreamFileName(AStream), DestName, False);
  //ShowMessage(DestName); 
  imgPath = "library/js/grid-product-cards/images/"+RemoteFileName;
  img.Url = imgPath;
  cdsProduct.FieldByName("Img").AsString = imgPath;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

btnDel-OnClick事件

點選后刪除圖片。

function btnDelPicOnClick(sender)
{
  cdsProduct.FieldByName("Img").AsString = nil;
  img.Url = "";
}

1
2
3
4
5

cdsProduct-OnNewRecord事件

當數據集新增記錄時，更新ID等資訊。

function cdsProductOnNewRecord(dataset)
{
  cdsProduct.FieldByName("Guid").AsString = UGMM.CreateGuid;
  cdsProduct.FieldByName("CreateDate").AsDateTime = Now();
}

1
2
3
4
5

btnOpenUrlA-OnClick事件

打開鏈接地址。

function btnOpenUrlAOnClick(sender)
{
  unisession.addjs("window.open (\""+cdsProduct.FieldByName("FileUrl").AsString+"\")");
}

1
2
3
4

btnOpenUrlB-OnClick事件

打開鏈接地址。

function btnOpenUrlBOnClick(sender)
{
  unisession.addjs("window.open (\""+cdsProduct.FieldByName("ExampleUrl").AsString+"\")");
}

1
2
3
4

UgWebRunFrame-OnAfterRunScript事件

初始化設定。

function UgWebRunFrameOnAfterRunScript(sender)
{
  UGMM.LC(Self);
  btnMBUpload.Visible = false;
  dbFileName.Width = 514;
  cdsProduct.DataNodeName = "FastWeb";
  dbCategory.Items.CommaText = UGMM.LT("通訊埠,ModbusTCP,MQTT,RestAPI,HTTP,列印,條碼,圖表,檔案媒體,遠端監控,地圖定位,影像識別,實體運用");
}

1
2
3
4
5
6
7
8

dbImg-OnChange事件

修改編輯框的內容時更新圖片預覽資訊。

function dbImgOnChange(sender)
{
  img.Url = cdsProduct.FieldByName("Img").AsString;
}

1
2
3
4

# 4. 範例管理

# 4.1. 設計明細

開啟FastWeb設計器，分別加入下插圖之控制元件。或者點選左上角的[匯入]選擇模板檔案來打開對應模板。

W-EQ-DEM-2063-2-3 範例管理的界面設計如下。

1：TUgContainerPanel元件，控制元件名稱為 UgContainerPanel01。

2：TUgButton元件，控制元件名稱為 btAppend。

3：TUgButton元件，控制元件名稱為 btEdit。

4：TUgButton元件，控制元件名稱為 btDelete。

5：TUgButton元件，控制元件名稱為 btnQuery。

6：TUgDBGrid元件，控制元件名稱為 gridCustomer。

7：TUgClientDataSet元件，控制元件名稱為 cdsProduct。

8：TUgDataSource元件，控制元件名稱為 dsProduct。

1：UgContainerPanel01屬性設定
- Align：設定對齊方式，設定為 alTop。
2：btAppend屬性設定
- Caption：設定顯示的按鈕字幕內容，設定為 新增。
3：btEdit屬性設定
- Caption：設定顯示的按鈕字幕內容，設定為 修改。
4：btDelete屬性設定
- Caption：設定顯示的按鈕字幕內容，設定為 刪除。
5：btnQuery屬性設定
- Caption：設定顯示的按鈕字幕內容，設定為 重新整理。
6：gridCustomer屬性設定
- DataSource：設定繫結的數據源，設定為 dsProduct。
設定顯示的欄位內容，雙擊控制元件打開欄位編輯器，按照下述的界面進行設定。
7：cdsProduct屬性設定
- DataNodeName：設定數據節點的名稱，設定為 FastWeb。
8：dsProduct屬性設定
- DataSet：設定繫結的數據集控制元件的名稱，設定為 cdsProduct。

# 4.2. 程式設計

點選程式設計界面右下角的按鈕，切換至單元選擇界面，勾選需要使用的單元。該程式的程式不需要引用單元。

# 4.2.1. 程式初始設定

該程式無初始設定。

# 4.2.2. 事件設定

btAppend-OnClick事件

點選按鈕以新增範例說明。

function btAppendOnClick(Sender)
{
  Var F,D,e,b;
  //打開範例登記
  F = UGMM.GetWebSubForm("W-EQ-DEM-2063-2-2");
  TUgWebForm(F).Caption = UGMM.LT("範例登記-新建"); 
  //獲取數據集
  try{
    D = TUgClientDataSet(TUgWebForm(F).RunFrame.FindComponent("cdsProduct"));
    D.CommandText = "select * from Task_ProductExample where 1=2";
    D.Open;
    D.Append; 
    e="";
    b=True;
    While (b){
       if (e!="")
       MessageDlg(e,mtWarning,mbOK);
       if (F.ShowModal == mrOK){ 
       try{
        if (D.FieldByName("Caption").AsString == "") 
          RaiseException(UGMM.LT("範例名稱 不能為空"));
        if (D.FieldByName("Category").AsString =="")
          RaiseException(UGMM.LT("類別 不能為空"));
        if (D.FieldByName("Product").AsString == "")
          RaiseException(UGMM.LT("所屬範例 不能為空"));
        if (D.FieldByName("Ver").AsString == "")
          RaiseException(UGMM.LT("範例版本 不能為空"));
          
          if (D.State in [dsEdit,dsInsert])
         				D.Post;
         D.SubmitUpdates;
         Showmessage(UGMM.LT("儲存成功！"));
         }
      Except{
        e=ExceptionMessage;
        }
    } 
      else
        b= False;
   }
  }
  Finally{
       TUgWebForm(F).Close;
       UGMM.DelWebSubForm("W-EQ-DEM-2063-2-2");
   }
}

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

btEdit-OnClick事件

點選編輯按鈕，打開選擇項的編輯頁面。

function btEditOnClick(sender)
{
  Var F,D,e,b;
  //打開範例登記
  F = UGMM.GetWebSubForm("W-EQ-DEM-2063-2-2");
  TUgWebForm(F).Caption = "範例登記-編輯"; 
  //獲取數據集
  try{
    D = TUgClientDataSet(TUgWebForm(F).RunFrame.FindComponent("cdsProduct"));
    D.CommandText = "select * from Task_ProductExample where Guid ="+QuotedStr(cdsProduct.FieldByName("Guid").AsString);
    D.Open;
    TUgImage(TUgWebForm(F).RunFrame.FindComponent("img")).Url = D.FieldByName("Img").AsString;
    D.Edit;
    e="";
    b=True;
    While (b){
       if (e!="")
       MessageDlg(e,mtWarning,mbOK);
       if (F.ShowModal == mrOK){ 
       try{
        if (D.FieldByName("Caption").AsString == "") 
          RaiseException(UGMM.LT("範例名稱 不能為空"));
        if (D.FieldByName("Category").AsString =="")
          RaiseException(UGMM.LT("類別 不能為空"));
        if (D.FieldByName("Product").AsString == "")
          RaiseException(UGMM.LT("所屬範例 不能為空"));
        if (D.FieldByName("Ver").AsString == "")
          RaiseException(UGMM.LT("範例版本 不能為空"));
          
          if (D.State in [dsEdit,dsInsert])
         				D.Post;
         D.SubmitUpdates;
         Showmessage(UGMM.LT("儲存成功！"));
         }
      Except{
        e=ExceptionMessage;
        }
    } 
      else
        b= False;
   }
   }
   Finally{
     btnQueryOnClick(Nil);
     TUgWebForm(F).Close;
     UGMM.DelWebSubForm("W-EQ-DEM-2063-2-2");
   }
}

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
47
48

btnDelete-OnClick事件

點選以刪除選擇的範例說明項。

function btDeleteOnClick(Sender)
{
  if (cdsProduct.RecordCount == 0)
  RaiseException(UGMM.LT("沒有記錄無法刪除"));
  
  if (MessageDlg(UGMM.LT("注意：是否刪除該範例？"),mtWarning,mbYes + mbNo) == mrYes)
  {
     cdsProduct.Delete;
     cdsProduct.SubmitUpdates;
  }
}

1
2
3
4
5
6
7
8
9
10
11

UgRunFrame-OnAfterRunScript事件

初始運行，用於初始化表格顯示。

function UGRunFrameOnAfterRunScript(Sender)
{
//獲取範例列表
  cdsProduct.DataNodeName = "FastWeb";
  cdsProduct.CommandText = "Select * from Task_ProductExample Order by Product";
  cdsProduct.Open;
//翻譯界面  
  UGMM.LC(Self);
//驗證模組許可權
  UGMM.VerifyRunFramePerm(Self);
}

1
2
3
4
5
6
7
8
9
10
11

cdsProduct-OnNewRecord事件

當數據集新增時觸發，為唯一ID欄位賦值。

function cdsProductOnNewRecord(dataset)
{
  cdsProduct.FieldbyName("Guid").asString = UGMM.CreateGuid;
}

1
2
3
4

btnQuery-OnClick事件

當點選重新整理按鈕時重新整理界面顯示。

function btnQueryOnClick(sender)
{
  cdsProduct.Open;
}

1
2
3
4

gridCustomer-OnDbClick事件

雙擊表格，打開編輯界面。

function gridCustomerOnDblClick(sender)
{
  btEditOnClick(nil);
}

1
2
3
4

# 5. 運行結果

使用滑鼠在FastWeb功能表，點選[儲存至資料庫]按鈕，將其儲存至資料庫，點選[除錯運行]確認能夠正常打開。

範例彙總界面可檢視所有的範例，點選對應的範例說明進入至範例演示界面。點選 [新增產品] 按鈕可新增範例。

範例管理界面是範例界面的後臺，可對界面上顯示的範例說明進行新增，修改與刪除操作。

← SVG組態(WEB) 智能家居(APP)→