Le champ HTML

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

Version :

Accueil | Connexion | Français

Aide

Editeurs

Champs (fenêtre / page / état)

Champ d'une fenêtre : Caractéristiques

Champ d'une page : Caractéristiques

Champ d'un état : Caractéristiques

Exemples associés

Voir aussi

Champ HTML lié à une rubrique

Evénements associés aux champs HTML

Le champ HTML

Manipuler un champ HTML par programmation

Propriétés associées au champ HTML

Présentation
Champ d'une fenêtre, d'un état ou d'une page statique ou dynamique
Utilisation dans une page
Créer un champ HTML
Créer un champ HTML dans une fenêtre
Créer un champ HTML dans une page
Créer un champ HTML dans un état
Champ d'une fenêtre : Caractéristiques
Options de l'onglet "Général"
Conditions d'utilisation
Gestion des images locales
Option "Autoriser le zoom"
Incompatibilité entre l'ActiveX IE (et oAuth2) et l'utilisation d'assemblage .NET
Champ d'une page : Caractéristiques
Fenêtre de description
Champ d'un état : Caractéristiques
Fenêtre de description et programmation

WINDEV

WEBDEV

WINDEV Mobile

Autres

Voir Aussi

Le champ HTML

Présentation

Champ d'une fenêtre, d'un état ou d'une page statique ou dynamique

Versions 16 et supérieures

Les champs HTML sont désormais disponibles pour les applications Android.

Nouveauté 16

Les champs HTML sont désormais disponibles pour les applications Android.

Versions 17 et supérieures

Les champs HTML sont désormais disponibles pour les applications iPhone/iPad.

Nouveauté 17

Les champs HTML sont désormais disponibles pour les applications iPhone/iPad.

Versions 18 et supérieures

Les champs HTML sont désormais disponibles pour les applications en mode Windows Store apps.

Nouveauté 18

Les champs HTML sont désormais disponibles pour les applications en mode Windows Store apps.

Le champ HTML peut être utilisé :

Dans une fenêtre.
Le champ HTML d'une fenêtre permet d'afficher une page HTML.
Dans une page.
Le champ HTML d'une page permet d'afficher ou d'utiliser du code HTML ou JavaScript. Ce code peut par exemple correspondre à des scripts HTML. Le champ HTML ne permet pas d'afficher une page HTML ou un site HTML. Ce champ permet juste d'afficher du code HTML.
Versions 18 et supérieures
Dans un état.
Le champ HTML d'un état permet d'imprimer un code HTML ou le contenu d'une page locale.
Nouveauté 18
Dans un état.
Le champ HTML d'un état permet d'imprimer un code HTML ou le contenu d'une page locale.
Dans un état.
Le champ HTML d'un état permet d'imprimer un code HTML ou le contenu d'une page locale.

Utilisation dans une page

Le champ HTML d'une page permet d'afficher ou d'utiliser du code HTML ou JavaScript. Ce code peut par exemple correspondre à des scripts HTML. Le champ HTML ne permet pas d'afficher une page HTML ou un site HTML. Ce champ permet juste d'afficher du code HTML.

Un champ HTML est programmable en code serveur uniquement si le champ est défini comme étant "Dynamique". Le champ HTML ne peut pas être associé à une rubrique d'un fichier de données.

Attention :

Lorsque le champ est défini comme étant dynamique, seule une affectation par programmation est possible.
Par défaut, l'option "Interdit l'exécution des scripts JavaScript" est cochée (onglet "Général" de la description du champ).

Si la fenêtre affichée dans le champ HTML contient des scripts, et si l'utilisateur clique sur des zones actives dans ce champ HTML (formulaires, onglet...), l'action demandée provoque l'ouverture du navigateur par défaut et affiche l'URL du champ HTML, afin de permettre à l'utilisateur d'exécuter ces scripts.
Pour autoriser la navigation de l'utilisateur au sein du champ HTML, décochez l'option "Interdit l'exécution des scripts JavaScript".

Créer un champ HTML

Créer un champ HTML dans une fenêtre

Pour créer un champ de type HTML dans une fenêtre :

Sous le volet "Création", dans le groupe "Autres champs", cliquez sur "HTML".
Cliquez dans la fenêtre à la position où le champ doit être créé. Le champ apparaît en création.

Pour afficher les caractéristiques du champ, sélectionnez l'option "Description" dans le menu contextuel du champ.

Créer un champ HTML dans une page

Pour créer un champ de type HTML dans une page :

Sous le volet "Création", dans le groupe "Intégration", cliquez sur "HTML".
Cliquez dans la page à la position où le champ doit être créé. Le champ apparaît en création.

Pour afficher les caractéristiques du champ, sélectionnez l'option "Description" dans le menu contextuel du champ.

Créer un champ HTML dans un état

Pour créer un champ de type HTML dans un état :

Sous le volet "Création", dans le groupe "Texte", cliquez sur "HTML".
Cliquez dans l'état à la position où le champ doit être créé. Le champ apparaît en création.

Pour afficher les caractéristiques du champ, sélectionnez l'option "Description" dans le menu contextuel du champ.

Remarque : A partir de la version 22, le champ HTML d'un état correspond à un champ Libellé de type HTML.

Champ d'une fenêtre : Caractéristiques

Options de l'onglet "Général"

L'onglet "Général" de la fenêtre de description du champ permet :

de saisir directement du code HTML ou l'adresse de la page HTML à afficher.
Remarque : Si du code HTML est saisi, ce code doit obligatoirement être compris entre les balises <HTML> et </HTML>.
d'interdire l'exécution des scripts. Cette option permet d'interdire (ou d'autoriser) l'exécution des scripts appelés depuis le code HTML du champ.
Cette option n'est pas prise en compte : l'exécution des scripts est toujours autorisée.
Versions 23 et supérieures
Si cette option est décochée, il est possible :
- d'exécuter du code Javascript dans le contexte de la page Web affichée par le champ HTML. Il suffit pour cela d'utiliser la fonction ExécuteJS.
- d'autoriser l'exécution de procédures WLangage depuis le code Javascript via l'option "Autoriser l'appel de WLangage depuis le code HTML (fonction JavaScript WL.Execute)".
  Si cette option est sélectionnée, dans le code du HTML du champ, il suffit d'utiliser WL.Execute pour exécuter une procédure WLangage. La syntaxe à utiliser est la suivante :
  
  WL.Execute(<Nom procédure WLangage>, <Paramètre>)
  
  où :
  - <Nom procédure WLangage> correspond au nom de la procédure à exécuter.
    ATTENTION : La procédure WLangage doit obligatoirement attendre un et un seul paramètre.
  - <Paramètre> correspond à une chaîne de caractères à passer à la procédure. Ce paramètre est obligatoire.
  Exemple :
  - Procédure WLangage
    
    PROCÉDURE ProcFromJS(t)
    ToastAffiche("Appelé depuis le JS : " + t)
  - Code du champ HTML :
    
    s est chaîne = [
    <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
Nouveauté 23
Si cette option est décochée, il est possible :
- d'exécuter du code Javascript dans le contexte de la page Web affichée par le champ HTML. Il suffit pour cela d'utiliser la fonction ExécuteJS.
- d'autoriser l'exécution de procédures WLangage depuis le code Javascript via l'option "Autoriser l'appel de WLangage depuis le code HTML (fonction JavaScript WL.Execute)".
  Si cette option est sélectionnée, dans le code du HTML du champ, il suffit d'utiliser WL.Execute pour exécuter une procédure WLangage. La syntaxe à utiliser est la suivante :
  
  WL.Execute(<Nom procédure WLangage>, <Paramètre>)
  
  où :
  - <Nom procédure WLangage> correspond au nom de la procédure à exécuter.
    ATTENTION : La procédure WLangage doit obligatoirement attendre un et un seul paramètre.
  - <Paramètre> correspond à une chaîne de caractères à passer à la procédure. Ce paramètre est obligatoire.
  Exemple :
  - Procédure WLangage
    
    PROCÉDURE ProcFromJS(t)
    ToastAffiche("Appelé depuis le JS : " + t)
  - Code du champ HTML :
    
    s est chaîne = [
    <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
Si cette option est décochée, il est possible :
- d'exécuter du code Javascript dans le contexte de la page Web affichée par le champ HTML. Il suffit pour cela d'utiliser la fonction ExécuteJS.
- d'autoriser l'exécution de procédures WLangage depuis le code Javascript via l'option "Autoriser l'appel de WLangage depuis le code HTML (fonction JavaScript WL.Execute)".
  Si cette option est sélectionnée, dans le code du HTML du champ, il suffit d'utiliser WL.Execute pour exécuter une procédure WLangage. La syntaxe à utiliser est la suivante :
  
  WL.Execute(<Nom procédure WLangage>, <Paramètre>)
  
  où :
  - <Nom procédure WLangage> correspond au nom de la procédure à exécuter.
    ATTENTION : La procédure WLangage doit obligatoirement attendre un et un seul paramètre.
  - <Paramètre> correspond à une chaîne de caractères à passer à la procédure. Ce paramètre est obligatoire.
  Exemple :
  - Procédure WLangage
    
    PROCÉDURE ProcFromJS(t)
    ToastAffiche("Appelé depuis le JS : " + t)
  - Code du champ HTML :
    
    s est chaîne = [
    <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

Conditions d'utilisation

Attention : Pour utiliser un champ HTML :

dans une application WINDEV, il est nécessaire d'installer Internet Explorer 4 ou supérieure (version 11 conseillée) sur le poste de développement et sur le poste de déploiement de l'application. Le champ HTML de WINDEV est en mode Internet Explorer 7.
Pour afficher des pages WEBDEV dans ce champ, les pages WEBDEV doivent être générées en mode HTML + Edge.
dans une application en mode simulateur, il est nécessaire d'installer Internet Explorer 4 ou supérieure (version 11 conseillée) sur le poste de développement.
Versions 21 et supérieures
dans une application iOS 9.0 (et supérieur), il est nécessaire de respecter les options de sécurité. Par défaut, le champ HTML permet d'accéder uniquement aux sites utilisant une connexion HTTPS respectant les préconisations de la société Apple. Pour accéder à d'autres sites (HTTP par exemple), il est nécessaire soit de fournir la liste des domaines correspondants, soit de désactiver la sécurité pour tous les domaines. Ces manipulations sont faites dans l'assistant de création d'une application iOS. Pour plus de détails, consultez Générer une application iOS.
Nouveauté 21
dans une application iOS 9.0 (et supérieur), il est nécessaire de respecter les options de sécurité. Par défaut, le champ HTML permet d'accéder uniquement aux sites utilisant une connexion HTTPS respectant les préconisations de la société Apple. Pour accéder à d'autres sites (HTTP par exemple), il est nécessaire soit de fournir la liste des domaines correspondants, soit de désactiver la sécurité pour tous les domaines. Ces manipulations sont faites dans l'assistant de création d'une application iOS. Pour plus de détails, consultez Générer une application iOS.
dans une application iOS 9.0 (et supérieur), il est nécessaire de respecter les options de sécurité. Par défaut, le champ HTML permet d'accéder uniquement aux sites utilisant une connexion HTTPS respectant les préconisations de la société Apple. Pour accéder à d'autres sites (HTTP par exemple), il est nécessaire soit de fournir la liste des domaines correspondants, soit de désactiver la sécurité pour tous les domaines. Ces manipulations sont faites dans l'assistant de création d'une application iOS. Pour plus de détails, consultez Générer une application iOS.

Versions 23 et supérieures

Gestion des images locales

Lors du passage à la version 23, les images locales présentes dans un champ HTML peuvent ne plus être affichées. En effet, pour des raisons de sécurité, le chargement d'images locales présentes dans le répertoire "Documents" n'est pas autorisé. Il est conseillé d'utiliser la fonction fRepTemp plutôt que la fonction fRepRessource.

Nouveauté 23

Gestion des images locales

Option "Autoriser le zoom"

L'option "Autoriser le zoom" (onglet "UI" de la fenêtre de description du champ) :

permet à l'utilisateur de modifier le zoom en écartant/resserrant les doigts.
affiche des boutons de zoom.

Pour jouer des vidéos HTML 5 dans un champ HTML :

Cochez l'option "Autoriser l'exécution des scripts" (onglet "Général" de la fenêtre de description du champ).
Activez l'accélération matériel sur la fenêtre. Pour cela, il faut éditer le manifeste de l'application.
- Dans l'assistant de génération, affichez l'étape "Configuration".
- Cliquez sur "Configuration avancée".
- Cliquer sur "Editer le manifeste".
- Déroulez le noeud "application".
- Sélectionnez le noeud "activity" correspondant à la fenêtre contenant le champ HTML.
- Ajoutez un attribut à ce noeud en lui donnant comme nom "android:hardwareAccelerated" et comme valeur "true".
- Validez les modifications
- Terminez l'assistant.

Incompatibilité entre l'ActiveX IE (et oAuth2) et l'utilisation d'assemblage .NET

Lorsque vous utilisez un champ HTML dans WINDEV, ce champ utilise l'ActiveX système "Navigateur Web Microsoft". Cet ActiveX est également utilisé par WINDEV pour toutes les authentifications OAuth2 (Facebook, Twitter, Google, etc) qui demandent une validation pour la connexion via du code HTML.

Si dans un même projet vous utilisez un champ HTML (ou une authentification OAuth2) et un assemblage ".Net", vous risquez de rencontrer une incompatibilité entre les couches .NET de Microsoft et l'ActiveX.

Il existe une API qui permet de gérer cette cohabitation. Pour cela vous devez utiliser la ligne de code suivante dans le code d'initialisation du projet ou dans le code d'initialisation de classes ou de procédure globale si l'initialisation de l'objet ".Net" est faite dans la classe ou la collection de procédure :

// Permet de gérer la cohabitation de l'ActiveX IE et de .NET
API("OLE32", "CoInitializeEx", Null, 2)

Champ d'une page : Caractéristiques

Fenêtre de description

Dans la fenêtre de description du champ, il est possible de saisir directement le code source HTML dans l'onglet "Général" du champ (bouton "Editer le code source HTML...").

Champ d'un état : Caractéristiques

Versions 18 et supérieures

Fenêtre de description et programmation

Le champ HTML est un champ Libellé de type HTML. Il est possible de saisir du texte directement dans l'onglet "Général" de la fenêtre de description du champ. Ce texte sera automatiquement converti en HTML.

Le champ HTML permet d'afficher par exemple :

le contenu d'un fichier HTML local.
le contenu HTML d'une rubrique.

Il est possible d'initialiser par programmation le champ HTML en lui affectant :

directement un code HTML. Par exemple :

HTM_Code = "<b>Hello</b>"
le chemin d'un fichier HTML local.

HTM_Code = fRepExe() + "\MonFicHTML.htm"

Remarques :

Les images au format PNG et SVG contenues dans le HTML ne sont pas gérées.
Si la feuille de styles CSS correspond à un fichier externe, elle n'est pas prise en compte.
Tous les fichiers externes à rechercher sur Internet ne sont pas pris en compte.
Les codes Javascript ne sont pas exécutés.

Nouveauté 18

Fenêtre de description et programmation

Le champ HTML permet d'afficher par exemple :

le contenu d'un fichier HTML local.
le contenu HTML d'une rubrique.

Il est possible d'initialiser par programmation le champ HTML en lui affectant :

directement un code HTML. Par exemple :

HTM_Code = "<b>Hello</b>"
le chemin d'un fichier HTML local.

HTM_Code = fRepExe() + "\MonFicHTML.htm"

Remarques :

Les images au format PNG et SVG contenues dans le HTML ne sont pas gérées.
Si la feuille de styles CSS correspond à un fichier externe, elle n'est pas prise en compte.
Tous les fichiers externes à rechercher sur Internet ne sont pas pris en compte.
Les codes Javascript ne sont pas exécutés.

Fenêtre de description et programmation

Le champ HTML permet d'afficher par exemple :

le contenu d'un fichier HTML local.
le contenu HTML d'une rubrique.

Il est possible d'initialiser par programmation le champ HTML en lui affectant :

directement un code HTML. Par exemple :

HTM_Code = "<b>Hello</b>"
le chemin d'un fichier HTML local.

HTM_Code = fRepExe() + "\MonFicHTML.htm"

Remarques :

Les images au format PNG et SVG contenues dans le HTML ne sont pas gérées.
Si la feuille de styles CSS correspond à un fichier externe, elle n'est pas prise en compte.
Tous les fichiers externes à rechercher sur Internet ne sont pas pris en compte.
Les codes Javascript ne sont pas exécutés.

Liste des exemples associés :

Exemples unitaires (WINDEV) : Le champ HTML

[ + ] Utilisation d'un champ HTML

Exemples unitaires (WEBDEV) : Propriété ClasseHTML

[ + ] La propriété ..ClasseHTML permet de lire et de modifier la valeur de l'attribut HTML "class" du champ.
La valeur de l'attribut HTML "class" permet, entre autres, de sélectionner les styles CSS appliqués sur le champ.

Exemples multiplateforme (WINDEV Mobile) : WM Dialogue HTML

[ + ] Cet exemple vous montre comment dialoguer avec un champ HTML.
Il utilise la fonction WLangage "ExecuteJS" et la fonction Javascript "WL.Execute".

Voir Aussi

Version minimum requise

Version 9

Documentation également disponible pour…

Commentaires

Champ HTML et GFi

Pour information, le champ HTML n'est pas impacté par le GFI, cad qu'il reste visible alors que la fenêtre dans laquelle il se trouve est grisée.

Laurent

14 fév. 2019

Affectation adresse par programmation sur Android

Contrairement à IOS, il est nécessaire sous Android de préfixer le chemin "file://" sinon "http://" est ajouté automatiquement devant le chemin.

Ce qui donne donc pour mon exemple : "file:///data/data/com.masociete.application/files/html/index.html" (triple "/")

Nicolas COMPAIN

01 sep. 2016

Dernière modification : 21/08/2020

Signaler une erreur ou faire une suggestion | Aide en ligne locale