2022 April Release

Getting StartedPermanent link for this heading

All you need to create your first running control is contained in this chapter. You are going to create a control named CustomIntegerControl that customizes the presentation of an integer value. A minus and a plus symbol will be displayed next to the value. When clicking on the symbols, the integer value will be decreased or increased by 1.

Create a new Fabasoft app.ducx project and define an object model file, a user interface file and a JavaScript resource file.

Example

app.ducx Object Model Language

objmodel FSCCONTROLSAMPLE@1.3285
{
  import COOSYSTEM@1.1;
  import FSCVAPP@1.1001;
  import COOATTREDIT@1.1;

  // a simple object class containing an integer property
  class CtrlSampleInteger : BasicObject {
    common = true;
    integer ctrlsampleinteger;
  }

  // creates an instance of a control
  instance ControljQuery CustomIntegerControl {

    // the control should be applicable for integer properties
    controltypes = { INTEGER }

    // provides the JavaScript implementation of the control
    lookelements<lookbasename, COOSYSTEM@1.1:component, lookcontent> = {
      { "rendercustominteger.js", FSCCONTROLSAMPLE@1.3285,
        file("resources/rendercustominteger.js") }
    }
  }
}

app.ducx User Interface Language

userinterface FSCCONTROLSAMPLE@1.3285
{
  import COOSYSTEM@1.1;
  import COOATTREDIT@1.1;
  import COODESK@1.1;
  import COOSEARCH@1.1;
  import FSCVAPP@1.1001;

  // when reading or editing the FormCtrlSampleInteger form should be used
  extend class CtrlSampleInteger {
    forms {
      ReadObjectAttributes {
        FormCtrlSampleInteger;
      }
      EditObjectAttributes {
        FormCtrlSampleInteger;
      }
    }
  }

  // a form displaying the integer property
  form FormCtrlSampleInteger {
   inherit = false;
   formgeneric = false;  
    formpage PageCtrlSampleInteger {
      dataset {
        ctrlsampleinteger;
      }
      layout {
        row {
          // assigns the control to the integer property
          CustomIntegerControl ctrlsampleinteger {
            colspan = 4;
            labelposition = left;
          }
        }
      }
    }
  }
}

rendercustominteger.js

function jQueryFSCCONTROLSAMPLE_1_3285_CustomIntegerControl()
{

  // defines the HTML of the control
  this.OnRender = function CustomIntegerControl_OnRender(output)
  {
    // gets the current value and stores it in the arbitrary variable currvalue
    this.currvalue = parseInt(this.GetValue());
    if (isNaN(this.currvalue)) {
      this.currvalue = 0;
    }

    // if editable, provides buttons to change the value
    if (this.IsEdit()) {
      output.Push("<h2><a href=\"#\">-</a> <span id=\"" + this.GetId("IntValue") + "\">" +
        this.currvalue + "</span> <a href=\"#\">+</a></h2>");
    }
    else {
      output.Push("<h2>" + this.currvalue + "</h2>");
    }
  };

  this.OnLoad = function CustomIntegerControl_OnLoad()
  {
    this.valueelem = this.GetElement("IntValue");

    var ctrl = this;
    // uses jQuery to react on a click
    fscjq("#" + this.GetContainerId() + " A").click(function() {
      if (this.innerText == "-") {
        ctrl.currvalue--;
      }
      else {
        ctrl.currvalue++;
      }
      // displays the new value
      ctrl.valueelem.innerHTML = ctrl.currvalue;
      // sets the new value of the control; the parameter always has to be an array
      ctrl.SetValue([ctrl.currvalue]);
    });
  };
}

As a result, you get a customized integer property:

Attention: If you change the JavaScript file in app.ducx, keep in mind to perform “Clean” on the app.ducx project and to refresh the web browser so that the new JavaScript file is loaded.