Based on the previous article, we only made a simple comparison between the two design ideas, without in-depth explanation of the implementation principle.

In this chapter, we focus on the implementation principle of form engine system based on relational database design and the key code structure of CCBPM implementation.

The form engine system is composed of form designer, form parser and form template.

The form designer is the form design portal. The form elements are stored in the data table through the form design of the form designer. In the process of form display, the form template data is parsed and spliced through the form parser to generate web page content for display.

form designer

Detailed explanation of implementation principle

Gallop workflow engine - fool form implementation principle

Code details,

In designer Htm in the initialization interface, toolbar buttons are displayed directly on the form.

When creating a new component, the fieldtypelist.field interface pops up Htm page. Realize the new functions of various types of components.

When creating a new field, execute the AddF method to pop up the page.

  

    

     

    
    

     

      function AddF() {
     
    

    

     

    
    

     
 
     
    

    

     

    
    

     
    
      var url = 
      'FieldTypeList.htm?DoType=AddF&FK_MapData=' + GetQueryString(
      'FK_MapData');
     
    

    

     

    
    

     
 
     
    

    

     

    
    

     
    
      var h = 
      500;
     
    

    

     

    
    

     
 
     
    

    

     

    
    

     
    
      var w = 
      600;
     
    

    

     

    
    

     
 
     
    

    

     

    
    

     
    
      var l = (screen.width - w) / 
      2;
     
    

    

     

    
    

     
 
     
    

    

     

    
    

     
    
      var t = (screen.height - h) / 
      2;
     
    

    

     

    
    

     
 
     
    

    

     

    
    

     
    
      var s = 
      'width=' + w + 
      ', height=' + h + 
      ', top=' + t + 
      ', left=' + l;
     
    

    

     

    
    

     
 
     
    

    

     

    
    

     

          s += 
      ', toolbar=no, scrollbars=no, menubar=no, location=no, resizable=no';
     
    

    

     

    
    

     
 
     
    

    

     

    
    

     
    
      var b = 
      window.showModalDialog(url, 
      'ass', s);
     
    

    

     

    
    

     
 
     
    

    

     

    
    

     
    
      window.location.href = 
      window.location.href;
     
    

    

     

    
    

     
 
     
    

    

     

    
    

     

      }
     
    

    

     

    
    

     
 
     
    
  

FieldTypeList.htm page details

This page will pop up when creating a new field, which will display the component control during initialization loading

When you click Save trigger, record the control information in the corresponding component data table.

Control in the database / / find the selected field type

  

    

     

    
    

     

                  MapAttr attr = 
      new MapAttr();
     
    

    

     

    
    

     

                  attr.Name = newName;
     
    

    

     

    
    

     

                  attr.KeyOfEn = newNo;
     
    

    

     

    
    

     

                  attr.FK_MapData = 
      this.FK_MapData;
     
    

    

     

    
    

     

                  attr.LGType = FieldTypeS.Normal;
     
    

    

     

    
    

     

                  attr.MyPK = 
      this.FK_MapData + 
      "_" + newNo;
     
    

    

     

    
    

     

                  attr.GroupID = iGroupID;
     
    

    

     

    
    

     

                  attr.MyDataType = fType;
     
    

    

     

    
    

     
 
     
    

    

     

    
    

     
            
      int colspan = attr.ColSpan;
     
    

    

     

    
    

     

                  attr.Para_FontSize = 
      12;
     
    

    

     

    
    

     
            
      int rows = attr.UIRows;
     
    

    

     

    
    

     
 
     
    

    

     

    
    

     
            
      if (attr.MyDataType == DataType.AppString)
     
    

    

     

    
    

     

                  {
     
    

    

     

    
    

     

                      attr.UIWidth = 
      100;
     
    

    

     

    
    

     

                      attr.UIHeight = 
      23;
     
    

    

     

    
    

     

                      attr.UIVisible = 
      true;
     
    

    

     

    
    

     

                      attr.UIIsEnable = 
      true;
     
    

    

     

    
    

     

                      attr.ColSpan = 
      1;
     
    

    

     

    
    

     

                      attr.MinLen = 
      0;
     
    

    

     

    
    

     

                      attr.MaxLen = 
      50;
     
    

    

     

    
    

     

                      attr.MyDataType = DataType.AppString;
     
    

    

     

    
    

     

                      attr.UIContralType = UIContralType.TB;
     
    

    

     

    
    

     

                      attr.Insert();
     
    

    

     

    
    

     
                
      return 
      "url@../../Comm/En.htm?EnName=BP.Sys.FrmUI.MapAttrString&MyPK=" + attr.MyPK;
     
    

    

     

    
    

     

                  }
     
    
  

Common text type, date type, numeric type, enumeration type and foreign key type are in sys_ Store in mapatrr. Attachment control, in Sys_FrmAttachment is stored in the attachment table. Common tag types in sys_ Stored in the frmlab table.

For more control type storage, please refer to the code implementation.

Form parser

The working principle of the form parser is to obtain the relationship between the storage data table and the component table from the data table of the storage component, and return to the display interface in JSON data format. After introducing JSON data in the display interface, different strings are spliced and displayed through JS script parsing for the parsing of various controls, such as text control, data control, date control, enumeration control, foreign key control, attachment control, schedule control, audit component control, etc. Finally, it is displayed in the form of htm web page.

Detailed explanation of form parser code

The design type of the form designer passed in from the same entry file determines whether the type of the loaded designer is a fool form designer or a free form designer.

Designer.htm page initialization functions are as follows:

General handler method implementation:

Designer.htm page load Designer

Use data to accept the returned json data.

For the three objects in json < sys_ Mapdata,Sys_MapAttr,Sysy_ Groupfield > make a splicing table.

The form implementation of common text type, date type, numeric type, enumeration type and foreign key type will be loaded according to the control properties, permissions < read-only, editable, invisible >, defau lt value filling, etc.

  

    

     

    
    

     

       html += 
      "<td class='FDesc'>" + GenerLabel(mapAttr) + 
      "</td>";
     
    

    

     

    
    

     

       html += 
      "<td ColSpan=" + mapAttr.ColSpan + 
      "><div id='DIV_" + mapAttr.KeyOfEn + 
      "'><input class='form-control' style='width:99%;margin:3px;' maxlength=" + mapAttr.MaxLen + 
      "  name='TB_" + mapAttr.KeyOfEn + 
      "' id='TB_" + mapAttr.KeyOfEn + 
      "' type='text' " + (mapAttr.UIIsEnable == 
      1 ? 
      '' : 
      ' disabled="disabled"') + 
      "/></div></td>";
     
    

    

     

    
    

     

       html += 
      "</tr>";
     
    
  

Form implementation of attachment control

  

    

     

    
    

     

      var frameUrl = 
      "<iframe ID='F" + athEn.MyPK + 
      "' frameborder=0 style='padding:0px;border:0px;width:100%;height:" + athEn.H + 
      "px;'  leftMargin='0'  topMargin='0' src='" + src + 
      "'  scrolling='auto'  /></iframe>";
     
    

    

     

    
    

     

      return 
      "<tr><td colspan=4 id='TD" + athEn.MyPK + 
      "' style='width:" + athEn.H + 
      "px;'>" + frameUrl + 
      "</td></tr>";
     
    
  

Display of parts list and slave list control

  

    

     

    
    

     

      var src = 
      "MapDtlDe.htm?DoType=Edit&FK_MapData=" + pageParam.fk_mapdata + 
      "&FK_MapDtl=" + dtl[
      0].No;
     
    

    

     

    
    

     

      var frameUrl = 
      "<iframe ID='F" + dtl[
      0].No + 
      "' frameborder=0 style='padding:0px;border:0px;width:100%;height:" + dtl[
      0].H + 
      "px;'  leftMargin='0'  topMargin='0' src='" + src + 
      "'  scrolling='auto'  /></iframe>";
     
    

    

     

    
    

     

      return 
      "<tr><td colspan=4 id='TD" + dtl[
      0].No + 
      "'>" + frameUrl + 
      "</td></tr>";
     
    
  

Audit component control display

  

    

     

    
    

     

      var src = 
      "../../WorkOpt/WorkCheck.htm?WorkID=0&FK_Flow=" + fk_flow + 
      "&FK_Node=" + nodeID + 
      "&FK_MapData=" + pageParam.fk_mapdata;
     
    

    

     

    
    

     

      var frameUrl = 
      "<iframe ID='FWC' frameborder=0 style='padding:0px;border:0px;width:100%;height:" + h + 
      "px;' leftMargin='0' topMargin='0' src='" + src + 
      "' scrolling='auto'  /></iframe>";
     
    

    

     

    
    

     

      return 
      "<tr><td colspan=4 style='width:100%;height:" + h + 
      "px;' id='FWC' >" + frameUrl + 
      "</td></tr>";
     
    
  

For more implementation procedures, please refer to the code.