2017 October 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 shown beside the value. When clicking on the symbols the integer value will be decreased or increased by one.

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 “Clean” the app.ducx project and to refresh the web browser such that the new JavaScript file is loaded.