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.
