JavaScript and DataFlex Classes
The JavaScript Engine
Client-Side Event Handlers
The framework consists of a set of DataFlex classes that represent the different controls that can be used to build web applications. Part of the implementation of these controls is done in JavaScript. The JavaScript part of these controls is responsible for 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 actions are available.
When subclassing the server-side DataFlex class, the developer can customize it by changing the existing property values and overriding or augmenting the available methods. This provides limited customization properties but doesn't allow for adding 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 from which all classes inherit. 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.