ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / HTML Display control
  • Overview of the HTML Display control
  • Creating an HTML Display control
  • Characteristics of HTML Display controls
  • Options of the "General" tab
  • Options of the "Details" tab, "HTML/JavaScript"
  • Options of the "Details" tab, "IE/Edge ActiveX (compatibility)"
  • "Enable zoom" ("UI" tab in the control description window)
WINDEV
WindowsLinuxJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac Catalyst
Others
Stored procedures
Overview of the HTML Display control
The HTML Display control displays a web page in an application. Thus, in one line of code, without using an external browser, your WINDEV and WINDEV Mobile applications can display a page from a website. This control is based on Chromium Embedded Framework (CEF).
Creating an HTML Display control
To create an HTML Display control:
  1. On the "Creation" tab, in the "Other controls" group, expand "HTML" and select "HTML Display".
  2. Click at the desired location to create the control. The control appears in the editor.
To view the characteristics of the control, select "Description" in the context menu.
Characteristics of HTML Display controls

Options of the "General" tab

The "General" tab of the control description window allows you to directly enter HTML code or the address of the HTML page to be displayed.
Remark: Any HTML code entered must be between the <HTML> and </HTML> tags.

Options of the "Details" tab, "HTML/JavaScript"

The "Details" tab of the control description window includes the following options in "HTML/JavaScript":
  • Don't allow the execution of JavaScript scripts:
    This option allows or prevents the execution of scripts called from the HTML code of the control.
    iPhone/iPad This option is ignored: the execution of scripts is always allowed.
    If this option is unchecked, you can:
    • execute JavaScript code in the context of the web page displayed by the HTML Display control. To do so, use the ExecuteJS function.
    • allow the execution of WLanguage procedures from the JavaScript code via the option "Allow calling WLanguage code from HTML code (JavaScript WL.Execute function)".
      If this option is selected, simply use WL.Execute in the HTML code of the control to execute a WLanguage procedure. The following syntax must be used:
      WL.Execute(<WLanguage procedure name>, <Parameter 1>) [, ... [, <Parameter N>]]] )
      where:
      • <WLanguage procedure name> corresponds to the name of the procedure to be executed.
      • <Parameter N> corresponds to the different parameters to be passed to the procedure:
        • Number of parameters:
          • WindowsiPhone/iPad between 0 and N.
          • Android between 0 and 10.
        • Type of parameters:
          • WindowsiPhone/iPad The parameters of the WLanguage procedure will be passed according to their type: boolean, string, number, null.
          • Android The parameters of the WLanguage procedure will always be passed as strings.
      Caution:
      • The procedure cannot return any values.
      • The call to the WLanguage procedure is non-blocking.
      Example:
      • WLanguage procedure
        PROCEDURE ProcFromJS(t)
        ToastDisplay("Appelé depuis le JS: " + t)
      • Code of the HTML control:
        s is string = [
        	<html>
        	<head>
        	<title> Un exemple simple 
        	</title>
        	<script>
        	function myFunction() 
        	{
        		WL.Execute("ProcFromJS","titaa");
        	}
        	</script>
        	</head>
        	<body>
        	<h1> Voici une page HTML </h1>
        	<p id="demo">Un paragraphe</p>
        	<button type="button" onclick="myFunction()">Essayer</button>
        	</body>
        	</html>
        ]
        HTM_SansNom1 = s
  • WINDEV Allow popups:
    With this option, you can enable JavaScript popups (for example, allow opening JavaScript menus as popups).

Options of the "Details" tab, "IE/Edge ActiveX (compatibility)"

The "Details" tab of the control description window includes the Use IE/Edge ActiveX to display content (compatibility) option in IE/Edge ActiveX (compatibility). This option allows you to use the HTML Display control via the Internet Explorer ActiveX plug-in (and no longer Chromium CEF). You can then select the desired rendering engine.
Caution: To use an HTML Display control in "IE/Edge ActiveX (compatibility)" mode:
  • WINDEV in a WINDEV application, Internet Explorer 4 or later (version 11 recommended) must be installed on the development computer and on the deployment computer. WINDEV's HTML Display control is in Internet Explorer 7 mode.
    To display WEBDEV pages in this control, they must be generated in HTML + Edge mode.
  • AndroidiPhone/iPad in an application in simulator mode, Internet Explorer 4 or later (version 11 recommended) must be installed on the development computer.
  • iPhone/iPad in an iOS 9.0 application (and later), you must respect the security options. By default, the HTML Display control can only access sites that use an HTTPS connection in compliance with Apple's guidelines. To access other sites (HTTP for example), you must either provide the list of corresponding domains, or disable the security options for all domains. These operations are performed in the iOS application creation wizard. For more details, see Generating an iOS application.
AndroidiPhone/iPad

"Enable zoom" ("UI" tab in the control description window)

The "Enable zoom" option:
  • allows the user to pinch zoom.
  • Android displays the zoom buttons.
Android To play HTML 5 videos in an HTML Display control:
  1. Check "Allow execution of scripts" ("General" tab in the control description window).
  2. Enable the device acceleration on the window. To do so, you must edit the manifest of the application.
    • In the generation wizard, go to the "Configuration" step.
    • Click "Advanced configuration".
    • Click "Edit manifest".
    • Expand the "application" node.
    • Select the "activity" node corresponding to the window containing the HTML control.
    • Add an attribute to this node while specifying "android:hardwareAccelerated" as name and "true" as value.
    • Confirm changes
    • Finish the wizard.
Related Examples:
WD Simple Internet Browser Complete examples (WINDEV): WD Simple Internet Browser
[ + ] This example presents the features of WINDEV's HTML control and includes a simplified web browser with browsing history, favorites, etc.
WD Mail Complete examples (WINDEV): WD Mail
[ + ] This application is an email client developed in WINDEV. It is based on the Email objects.
This email client is used to retrieve and send emails by using the POP, IMAP and SMTP protocols.
You have the ability to apply filters to the incoming emails.

The application can also be used to manage several email accounts. The writing of an email is based on the HTML edit control.
HTML types (HTMLDocument, HTMLNode, HTMLAttribute) Unit examples (WINDEV): HTML types (HTMLDocument, HTMLNode, HTMLAttribute)
[ + ] This example shows how to use the HTMLXxx WLanguage types (HTMLDocument, HTMLNode, HTMLAttribute)
The HTML control Unit examples (WINDEV): The HTML control
[ + ] Using an HTML control
Minimum version required
  • Version 26
This page is also available for…
Comments
Click [Add] to post a comment

Last update: 09/15/2024

Send a report | Local help