Getting Started
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.