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.
