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

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

Now lets create a class for a simple test control

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

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

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

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

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