DataFlex WebApp – A simple control

The easiest way to create custom controls for DataFlex WebApp is to use the cWebHtmlBox class

The cWebHtmlBox class is a simple control that allows the developer to send custom HTML code to the client

Lets see how this works

//

Object oMyCustomHtml is a cWebHtmlBox
    Set psHtml to "<b>Hello World</b>
End_Object

the code above would show the text “Hello World” in bold

Now lets create a class for a simple test control

//

// use DAW WebHtmlBox class
Use cWebHtmlBox.pkg

Class cMyCustomControl is a cWebHtmlBox
    Procedure Construct_Object
        Forward Send Construct_Object

        Set psHtml To "<b>Hello World</b>"
    End_Procedure
End_Class

The code above is a new class that creates our custom control that shows the bold Hello World text.

Now lets try to do something a little more functional

Lets create a class that uses the psLabel property for a text label and creates custom HTML including the use of custom CSS styling and we also add a property to change the appearance of the label in code

//

Class cMyCustomControl is a cWebHtmlBox
    Procedure Construct_Object
        Forward Send Construct_Object

        Property Boolean pbBold False        
    End_Procedure
    
    Function HtmlValue String sLabel Returns String
        String sHtml
        If (pbBold(Self)) Begin
            Move  ('<div Class="myCustomControl"><span><b>'+sLabel+'</b></span></div>') to sHtml            

            // or we could use a different css class for the bold option
            // Move  ('<div Class="myCustomControlBold"><span><b>'+sLabel+'</b></span></div>') to sHtml            
        End
        Else Begin
            Move  ('<div Class="myCustomControl"><span>'+sLabel+'</span></div>') to sHtml            
        End
        
        Function_Return sHtml
    End_Function
    
    Procedure Set psLabel String sLabel
        String sHtml
        
        Get HtmlValue sLabel to sHtml
                
        Set psHtml to sHtml
    End_Procedure
    
    Procedure DoSetLabel String sLabel
        String sHtml

        Get HtmlValue sLabel to sHtml

        Send UpdateHtml 
    End_Procedure
End_Class

in the above code we create a property with the name of pbBold.

The HtmlValue function accepts a string parameter and then builds a small piece of HTML code. It builds different html depending on the pbBold property.

In addition we define a setter for the psLabel property that in turn calls the HtmlValue function to get the HTML code and then sets the psHtml web property.

Another method the DoSetLabelmethod is declared to allow dynamic changing of the content during runtime without the use of web properties to avoid the overhead of the content of the property being syncronized

to use the new class we can use the following code

//

Object oMyCustomHtml is a cMyCustomControl
    Set pbBold to True
    Set psLabel to "Hello World"
End_Object

In order to add CSS styling we have to create a CSS style. In order to do this we can create a new CSS file in the AppHtml folder. Lets create a text file called myustomControl.css and add the following CSS

//

.myCustomControl {
    border: 2px solid red;
}

this will create a red border with 2 pixels width around our control

but in order for the web application to find our style we need to modify the web applications index.html file

open the index.html file and modify as shown below

//

    <!-- DataFlex Custom Controls (do not remove this line, used for automatic insertion) -->

    <link rel="stylesheet" type="text/css" href="myustomControl.css" />

make sure to refresh the browser to reload the index.html file and the control should now use the new styling

This is a very simple way of creating a custom control and is also rather limited. We will also show how to add more sophisticated controls using Javascript as well