The framework consists of a set of DataFlex classes that represent the different controls that can be used to build the web applications. Part of the implementation of these controls is done in JavaScript. The JavaScript part of these controls is responsible for the rendering and maintaining the current state. Events are first handled on the client and when needed forwarded to DataFlex on the server. The business rules reside on the server and are applied just like in windows applications.
This means that each control class on the server has a client-side JavaScript class that implements its user interface. The psJSClass property determines which JavaScript class belongs to the DataFlex class. The JavaScript class is specific to the DataFlex class and knows which properties, client actions and server are available.
When subclassing the server-side DataFlex class the developer can customize by changing the existing property values and overriding / augmenting the available methods. This will provide limited customization properties but doesn't provide the ability to add user interface features. To add features to the user interface it is required to subclass the client-side JavaScript class as well. When doing this the psJSClass needs to be updated with the name of the new client-side class.
Creating a JavaScript subclass does require proper JavaScript knowledge.
self.MyCheckMenuItem = class MyCheckMenuItem extends df.WebMenuItem {
constructor(oDef, oParent) {
super(oDef, oParent)
// Add a property
this.pbChecked = false;
}
// Augment the afterRender function
afterRender(){
// Do a 'forward send'
super.afterRender();
this.set_pbChecked(this.pbChecked);
}
// Add our own setter method
set_pbChecked(bVal){
if(this._eElem){
if(bVal){
df.dom.addClass(this._eElem, "MyCheckMenuItem_Checked");
}else{
df.dom.removeClass(this._eElem, "MyCheckMenuItem_Checked");
}
}
}
}
Within the framework there are some central classes that you might want to inherit from when adding custom functionality. The cWebObject is the central class where all the classes inherit from. It provides the basic functionality of the web properties, client actions and server actions but no user interface. All user interface controls inherit from cWebBaseUIObject which adds the basic API for rendering controls. It has methods for generating the initial HTML and properties like psCSSClass, pbVisible and psHtmlId. For controls that should reside within the flow / column layout system it is advisable to inherit from cWebBaseControl which adds properties like piColumnIndex and piColumnSpan.
Previous Topic: The JavaScript Engine
Next Topic: Client-Side Event Handlers