The architecture for controls in DataFlex WebApp is similar to Visual DataFlex desktop applications. In Visual DataFlex a control consists of a DataFlex class and a windows class. The DataFlex class is generally a combination of DataFlex code and C/C++ runtime code and the windows classes are C/C++ code in the Visual DataFlex runtime or an external DLL.

DataFlex WebApp Controls consist of 2 main parts

Server Side DataFlex control class
Client Side control

DataFlex Server Side control

lets trake a look at the server side class for a simple control, the cWebHtmlBox. This is a simple control that allows you to add client side Html via a simple server control

for readability we removed some of the code in the class and only left the pieces important to this post

//
Use cWebBaseControl.pkg

{ DesignerJSClass=df.WebHtmlBox }
Class cWebHtmlBox is a cWebBaseControl
    
    Procedure Construct_Object
        Forward Send Construct_Object
        
        { WebProperty=Client } 
        Property String psHtml ""        
        { WebProperty=Client }
        Property Boolean pbServerOnClick False
                
        Set pbShowLabel to False
        Set psJSClass to "df.WebHtmlBox"
    End_Procedure
   
    Procedure UpdateHtml String sHtml
        String[] asParams
        
        Move sHtml to asParams[0]
        
        Send ClientAction "updateHtml" asParams
    End_Procedure
    
    { MethodType = Event }
    Procedure OnClick String sId String sParam
        
    End_Procedure
    
    Procedure End_Construct_Object
        Forward Send End_Construct_Object
        
        WebPublishProcedure OnClick
    End_Procedure
End_Class

At the top the cWebBaseControl package is used. This is of course the base class for the control

The DesignerJSClass meta data tells the DataFlex Studio what Javascript class to use when modeling this control in the Studio Designer

The class name is cWebHtmlBox and the base class is cWebBaseControl.

In the constructor a property called psHtml is declared. It is also prefixed with a metadata keyword of WebProperty. This tells DataFlex that this property is a web property.

Web Properties

Web properties are properties that are marked to specifically track data for each client connection. You cannot use regular properties or objects to track data. Server processes are being reused by different connections and the data contained in regular properties will not be the one from the previous call.

Web Properties maintain their state across calls automatically. There are different typeeee to maintain the state of web properties

There are different types of web properties

Client
Server
ServerSession

A Client web property stores its value on the client. The value of the property is sent back to the server on every call and synchronized so it is available on the server as well.

A Server web property stores its value on the server. The value is not available on the client side. Server web properties are cleared when the page is reloaded

A Server Session web property stores its value on the server and attaches the value to the session. Its value is not available on the client side and does not get cleared with a page reload. It does however expire when the session expires

Events

The second property pbServerOnClick is a special web property that controls the OnClick event. Most events are not automatically sent to the server to keep the communication overhead to a minimum.

if the pbServerOnClick property is set to true the client java script code knows that we want the OnClick event to be called on the server.

Later in the code you can see the declaration of the event prefixed by the meta data { MethodType = Event }.

in addition any event has to be published. This is done in the End_Construct_Object method using the WebPublishProcedure command.Client Side control

Client Side control

Another line you can see in the constructor is the setting of the psJSClass property.

This property connects the server side DataFlex class to a Javascript client side class in our case df.WebHtmlBox.

DataFlex WebApp client controls are made of 3 distinct parts.

A JavaScript class
CSS Classes
HTML code generated by the Javascript class

lets look at a few parts of the JavaScript class

//
df.WebHtmlBox = function WebHtmlBox(sName, oParent){
    df.WebHtmlBox.base.constructor.call(this, sName, oParent);
    
    this.prop(df.tString, "psHtml", "");
    
    //  Events
    this.event("OnClick", df.cCallModeWait);
    
    this._sControlClass = "WebHtmlBox";
};
df.defineClass("df.WebHtmlBox", "df.WebBaseControl",{

above you can see the constructor of the client side class for the cWebHtmlBox. Again we have removed code that is not needed for this exercise.

similar to the DataFlex server side control you can see the base class, declaration of web properties and events.

lets look at a few important methods in this class

//
openHtml : function(aHtml){
    df.WebHtmlBox.base.openHtml.call(this, aHtml);
    
    aHtml.push('<div class="WebHtml_Wrp">'); 
},

closeHtml : function(aHtml){
    aHtml.push('</div>');
    
    df.WebHtmlBox.base.closeHtml.call(this, aHtml);
},

afterRender : function(){
    this._eControl = df.dom.query(this._eElem, "div.WebHtml_Wrp");
    
    df.WebHtmlBox.base.afterRender.call(this);
    
    this.set_piHeight(this.piHeight);
    this.set_pbShowBorder(this.pbShowBorder);
    
    df.dom.on("click", this._eControl, this.onHtmlClick, this);
    
    this.updateHtml(this.psHtml);
},

The openHtml and closeHtml methods are called by DataFlex when the control needs to be added to the web page. They are creating the necessary Html code for the control.

The afterRender method is called when the control is fully rendered on the client side and available in the DOM.

//
updateHtml : function(sHtml){
    if(this._eControl){
        this._eControl.innerHTML = sHtml;
        
        this.sizeChanged();
    }
    
    this.psHtml = sHtml;
},

onHtmlClick : function(oEvent){
    var eElem = oEvent.getTarget();
    
    while(eElem && eElem !== this._eControl){
        if(eElem.getAttribute('data-ServerOnClick')){
            this.fire('OnClick', [ eElem.getAttribute('data-ServerOnClick'), eElem.getAttribute('data-OnClickParam') ]);
        }
        eElem = eElem.parentNode;
    }
}

The above code shows two more methods of interest. The updateHtml method which is called from the server side UpdateHtml method via ClientAction and the onHtmlClick method which is used to send the OnClick event to the server.

Communication between Server and Client

In Visual DataFlex communication between the DataFlex class and windows control is rather easy. They run in the same process and can talk directly to each other.

In a web application things get more complicated. The web server is almost always a different computer from the computer that runs the client (web browser). Often they are of course in different geographical areas as well.

One thing that complicates things even more is that a client process is not connected to the server process all the time. The client calls the server which executes code in a server process. Once the code execution finishes data is sent back to the client and the connection between client and server ends at this time.

For one thing already mentioned earlier data stored on the server in properties or global variables or objects is not available between two different calls from the same client. Even worse a call from a different client can see the data that was previously sent from another client. This is were web properties come in. They are synchronized on each call to the data for a specific client.

Communication is handled bu a number of methods

Server Actions
Events
Client Actions

Server Actions

Server Actions are essentially methods in the server side DataFlex class that are called from the client side JavaScript code using the serverAction method. You can pass parameters and there is also a return value

Events

Events are a special kind of server action. Technically they work the same as a standard server action but as mentioned earlier events have a way to be enabled/disabled by properties. Events are called from the JavaScript code using the fire method.

Client Actions

Client actions are JavaScript methods that are called from the server side DataFlex code, You can pass parameters to the call but there are no return values.

Also client actions are not called immediately but are queued until the execution of the server code finishes. Once execution returns to the client side all client actions called during the call are executed in order.

This is an overview of the DataFlex WebApp control architecture. We will go into more detail in additional posts on this subject

DataFlex WebApp – Anatomy of controls

DataFlex Server Side control

Web Properties

Events

Client Side control

Communication between Server and Client

Server Actions

Events

Client Actions

Recent Posts

Categories