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