In this lesson we’ll look at the WebHtmlBox control in DataFlex. The WebHtmlbox is a control that allows you to insert one or more HTML elements into your application. The WebHtmlBox allows you to insert HTML strings into the clients web page at the position where your WebHtmlBox is located. HTML elements that are inserted into your application through this method will be wrapped inside of the framework’s web control HTML element structure, this causes the inserted HTML elements to follow the application theme. The WebHtmlBox provides special support for clickable links and elements through the OnClick event. This can be used by enabling the “data-ServerOnClick” attribute.

The WebHtmlBox is ideal for:

Creating your own clickable elements and processing the click events on the server
Displaying text with assorted style attributes to individual words
Inserting object elements in your view or dialog for displaying special media types
Adding HTML to your web view or dialog that is not otherwise possible with existing web controls

If you are planning to embed an entire HTML document via an IFrame, then you should use the WebIFrame class instead. Now that you know more about the WebHtmlBox, I will show a demo on how to implement it and how it looks.

DEMONSTRATION

For this lesson I'm adding a WebHtmlBox to the ZoomSalesPerson to navigate to a website through a clickable piece of text.
To start lets first add the WebHtmlBox into our application by dragging it from the class palette into our designer view.
As you can see the WebHtmlBox comes with a psHtml attribute, inside of this attribute we can set our html.
Lets add a clickable link into our psHtml that forwards us to the data access website when clicked.
Lets start by simply creating a <a> element inside of psHtml.
The <a> element in html is used to insert hyperlinks into the DOM.
Now that we have added this lets run our application and navigate to the ZoomSalesPerson.
As you can see we now have a hyperlink in our application with the text “Data access Europe”. But, if we click this nothing will happen.
To implement click behaviour we have to add two things to our WebHtmlBox.
First, we add data-ServerOnClick=’’ to our <a> element.
This tells our javascript that there is going to be some type of click behaviour when this element is clicked.
Then in our WebHtmlBox we add the following line of code.
“Set pbServerOnClick True” this tells our application that the server has to handle some behaviour whenever this element is clicked.
At last we need to implement the OnClick event. Inside of this OnClick event we add the following line of code “Send NavigateToPage ‘https://www.dataaccess.com’ btNewTab”.
This will tell our application to open a new tab that navigates to the data access website.
If we recompile the program now and click the link, you will see that a new tab opens that navigates to the Data Access website.
Something else we can do with the WebHtmlBox is add functionality for things that aren’t included in the regular DataFlex controls, such as being able to play audio.
Let's start from scratch with our WebHtmlBox.
In order to get an audio element into our application we use the <audio> element like so.
The controls bit we add is to visually display the play button and the timeline of the audio element.
The src attribute determines the audio that is going to fill the audio element.
For this example I have added a mouse-click.wav file to the images folder in my project.
To tell the audio element to use this audio we add the following to the code.
Now if we recompile the application and look at the ZoomSalesPerson, you will see there is now an audio element in our application that can be played by clicking the play button.

Getting to know the Web Controls

DataFlex courses

Information

Getting to know the Web Controls

Lesson 23 - cWebHtmlBox