范例汇总

# 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)→