WORKSHOP #1

06/04/2021
 GÉRER FACILEMENT UNE SAISIE
OBLIGATOIRE NON BLOQUANTE
WINDEV intègre "depuis toujours" une gestion des saisies obligatoires.
Cette fonctionnalité peut avoir un inconvénient : lorsque l'utilisateur est en
saisie dans un champ obligatoire, il doit le remplir, sans avoir la possibilité
de saisir un autre champ avant.
En version 26, il devient possible de gérer tout aussi simplement les saisies
obligatoires, mais sans bloquer l'utilisateur dans un champ.

// Vérifie si tous les champs en “saisie obligatoire” sont bien remplis

SI SaisieInvalideDétecte() ALORS

// Récupère la liste des champs invalides
tabChampsInvalides est un tableau de Champ = SaisieInvalideListeChamp()

// Affiche un toast indiquant le nombre de champs obligatoires non renseignés
ToastAffiche("Champs obligatoires non renseignés ![%RC%][%tabChampsInvalides..Occurrence%] champs
obligatoires n’ont pas été renseignés", toastCourt, cvMilieu, chCentre)

// Force la reprise de la saisie dans le premier champ en erreur
RepriseSaisie(tabChampsInvalides[1])

FIN

G
râce au nouveau mode de saisie
obligatoire, les utilisateurs peuvent
passer librement d'un champ à un
autre et ainsi saisir dans un ordre
quelconque.
Bien entendu, pour valider la fenêtre,
tous les champs en saisie obligatoire doivent
être remplis !
Projet d'illustration
Le projet utilisé pour illustrer ce sujet est
l'exemple "WD SaisieObligatoire FicheContact
WTT26".
Principe
Le principe de fonctionnement est très simple :
• l'option de saisie obligatoire est activée sur
les champs obligatoires,
• la mise en avant des champs obligatoires est
réalisée par des nouveaux styles et options,
• la fonction SaisieInvalideDétecte permet
de savoir si des champs ne sont pas correc-
tement renseignés,
• la fonction SaisieInvalideListeChamp
permet d'obtenir la liste des champs qui ne
sont pas correctement renseignés.
Mise en œuvre
Tout d'abord, il suffit d'activer l'option "Saisie
obligatoire" dans les champs obligatoires de
la fenêtre.
Astuce : il est possible de configurer la saisie
obligatoire par programmation avec la pro-
priété WLangage SaisieObligatoire.
Lorsque la saisie obligatoire est activée pour
un champ, deux choix sont proposés :
• la nouvelle méthode de validation,
• la saisie bloquante, comme dans les versions
précédentes de WINDEV.
Il suffit alors de vérifier la saisie lors de la vali-
dation de la fenêtre par la fonction WLangage
SaisieInvalideDétecte.
La fonction SaisieInvalideDétecte renvoie Vrai
si au moins un champ à saisie obligatoire n'est
pas renseigné ou si la saisie ne respecte pas
le masque ou les bornes définies.
Le traitement le plus simple est alors d'arrêter
le traitement avec le mot-clé RETOUR.
Il est aussi possible de prévoir des traite-
ments plus complets avec la nouvelle fonction
WLangage SaisieInvalideListeChamp qui
permet d'obtenir la liste de tous les champs
invalides.


2 - WINDEV TECH TOUR 2021

1 Définir le comportement
La saisie obligatoire se configure dans l'onglet "Détail" du champ. Le mode "Bloquer la sortie du champ" correspond au mode "historique". Le
mode "Utiliser SaisieInvalideDétecte" permet de gérer le mode non bloquant. La mise en évidence des saisies invalides et des saisies obligatoires
peut être paramétrée en cliquant sur le bouton "Textes et options d'affichage".

2 Configuration spécifique du style si nécessaire

Dans l'étape précédente, il est possible d'indiquer que le style du champ sera modifié en cas de saisie obligatoire non renseignée, ou de
saisie invalide. L'onglet "Style" permet de configurer les styles correspondants ainsi que l'état indiquant que le champ est obligatoire.

Par défaut, un picto indique les champs obliga-

toires à l'utilisateur.

Lors de l'appel à la fonction SaisieInvalideDétecte,

tous les champs dont la saisie est invalide sont mis
en avant pour faciliter la correction par l'utilisateur.

WINDEV TECH TOUR 2021 - 3

OUTLOOK, GMAIL, APPLE, ... :
ACCÉDER PAR PROGRAMMATION
AUX EMAILS AVEC GESTION DES
AUTHENTIFICATIONS FORTES
ILLUSTRATION PAS À PAS AVEC
"WD MAIL" ET OUTLOOK

1 Authentification oAuth
oAuth est un protocole d'authentification. Il permet à un
service, comme ici un serveur d'email de déléguer l'authenti-
fication des utilisateurs à un autre serveur : le serveur oAuth.
Cela permet de centraliser la gestion des comptes utilisateurs pour
plusieurs services. Par exemple, chez Microsoft, le serveur des
comptes Microsoft est un serveur oAuth.
Ce compte permet de se connecter aux emails Outlook.com, aux
données OneDrive, à Word, Excel, etc.
Pour accéder aux emails Outlook par programmation, il faut donc
gérer cette authentification oAuth.

2 Le token oAuth
Les étapes d'une authentification oAuth sont les suivantes :
1. L'application contacte le serveur oAuth et demande un
jeton d'identification / token (en WLangage à l'aide de la
fonction AuthIdentifie). Un token peut être vu comme une clé qui
permet à l'application de faire des actions au nom de l'utilisateur. En
programmation, un token, c'est une chaîne de caractères.
2. Le serveur renvoie vers une page Web dans laquelle l'utilisateur doit sai-
sir son login et son mot de passe (et une double authentification si besoin).
3. Si les informations saisies sont correctes, le serveur oAuth renvoie
le token : l'application n'a jamais connaissance du login ou du mot de
passe. Le token prouve que l'utilisateur a été identifié. C'est ce token
qui sera ensuite transmis au serveur de mail lors de la connexion.

3 Client ID Outlook
La fonction AuthIdentifie, nécessite deux paramètres spé-
cifiques au protocole oAuth : le ClientID et le ClientSecret.
L'obtention de ces paramètres dépend du fournisseur
(Outlook, GMail...) et s'effectue une seule fois.
Pour Outlook, il est nécessaire d'inscrire l'application "cliente" auprès
de la plateforme Azure Active Directory :
• se connecter sur le portail Azure à l'aide d'un compte développeur,
• accéder au composant Azure Active Directory,
• choisir "Nouvelle inscription" dans "Inscription d'applications",
• indiquer le nom de l'application, par exemple "WD Mail".

4 - WINDEV TECH TOUR 2021

4 Configuration oAuth
Ensuite, il faut définir la configuration oAuth pour cette
application. Cela se configure toujours dans le portail Azure,
en sélectionnant l'option "Ajouter une plateforme" du choix
"Ajouter une URI de redirection".
Note : il faut choisir la plateforme "Application Web", même
pour une utilisation dans une application WINDEV. En effet,
l'authentification oAuth sera faite à travers le navigateur de l'utilisateur.
L'URL de redirection, c'est l'URL que le serveur oAuth va appeler
pour indiquer à l'application que l'authentification est terminée.
Pour une application Windows, cette URL est de la forme :
http://localhost:<numéro de port au choix, par exemple 9000>

5 Client Secret Outlook

Enfin, pour que le serveur oAuth reconnaisse l'application,
il faut générer ce que l'on appelle un secret partagé :
• dans l'option "Certificats et secret", sélectionner "Nouveau
secret client",
• saisir une description (par exemple "WINDEV Tech Tour 26"),
• indiquer si besoin une date d'expiration,
• valider.
Le "Client Secret" est alors affiché : il suffit de le copier pour l'utiliser
dans le code pour l'appel à la fonction AuthIdentifie.

6 Autorisation des services

Dans le cas de Outlook, il faut configurer un élément com-
plémentaire dans la partie "API autorisées" : il faut indiquer
les services auxquels l'application va/peut se connecter.
Dans le cadre de ce sujet, l'objectif est d'accéder aux emails :
• cliquer sur "Ajouter une Autorisation",
• activer le service "IMAP.AccessUser.All" pour lire les emails avec
le protocole IMAP,
• activer le service "SMTP.Send" pour envoyer des emails,
• valider.
Note : l'accès aux emails est une API de la famille Microsoft Graph.

7 Exemple et utilisation
L'application (ici "WD Mail") est prête à gérer des comptes
Outlook. Lors du premier accès, l'utilisateur :
• saisit son adresse email dans l'application,
• saisit ses informations d'identifications dans le navigateur qui
s'ouvrira automatiquement (et éventuellement fera sa double authen-
tification par SMS ou authenticator),
• indique qu'il autorise l'application "WD Mail" à accéder à ses emails.
Cette phase d'authentification et d'autorisation, l'utilisateur final
l'effectue une seule fois. Ensuite, l'application renouvelle automati-
quement le token oAuth grâce à la fonction AuthRenouvelleToken.

WINDEV TECH TOUR 2021 - 5
SOYEZ ENCORE PLUS
EFFICACE :
LES ASTUCES DE MARC

Le volet "Recherche", vous l'utilisez au quotidien...

Mais connaissez-vous toutes les fonctionnalités qu'il propose ? On fait le
point !

1 Plusieurs volets
Il arrive fréquemment de vouloir effectuer plusieurs
recherches en parallèle, en conservant l'affichage des
résultats de chacune.
En cliquant sur la punaise d'un volet de recherche (en haut à
droite), le volet de recherche se verrouille .
En utilisant le raccourci Ctrl + F pour lancer une nouvelle recherche,
un deuxième volet de recherche va s'afficher. Le libellé de recherche

Ctrl F de ce volet est suffixé par "(2)".

+ Il est possible d'afficher jusque 5 volets de recherche simultanément.

Ctrl
+
Shift
+
F
2 Raccourcis
• "Ctrl + Shift+ F" permet de forcer une recherche dans tout
le projet. Les fenêtres, les états, les requêtes, le code ... tout.
• "Ctrl + Alt + F" permet de limiter la recherche à l'élément
courant uniquement.
• "Alt + F" permet d'effectuer une recherche directement dans
l'aide de WINDEV. Un double-clic sur la ligne de résultat ouvre
la page d'aide.

Ctrl Alt F Alt F

+ + +

6 - WINDEV TECH TOUR 2021

3 Recherche affinée et
expression régulière
1. Rechercher des éléments qui contiennent 2 termes
Si vous souhaitez rechercher tous les éléments qui contiennent à la
fois "Nom" et "Prénom", il suffit de séparer les termes par un espace.
Et WINDEV cherche tous les éléments où les deux termes sont présents.

2. Rechercher une chaîne comportant un espace

Si vous souhaitez rechercher la chaîne exacte : "Nom<espace
>Prénom", il suffit d'encadrer la chaîne complète par des guillemets.

3. Exclure des termes de la recherche

Si vous souhaitez rechercher les éléments qui comportent un terme,
mais en excluant les résultats qui comportent un autre terme, il suffit
d'ajouter le caractère moins (-) devant le terme à exclure.
Par exemple, pour rechercher les éléments qui contiennent "Nom"
mais par "Prénom" : "Nom -Prénom".

4. Utiliser des expressions régulières

Les expressions régulières permettent d'effectuer des recherches
très avancées.
Par exemple, pour rechercher un mot et son féminin dans tous les
messages d'erreur : "Client[e]*" va rechercher tous les éléments qui
contiennent le terme "client" ou "cliente".

4 Recherche avancée
d'éléments
La recherche d'éléments est une recherche avancée qui
peut s'avérer particulièrement utile dans certains cas.
Il est possible d'indiquer le type d'élément recherché (fenêtres, pages,
états, champs, ...) ainsi que plusieurs critères de recherche (parmi
plus de 80) combinables.

Par exemple, il est possible de rechercher :

• les fenêtres qui possèdent un champ de saisie dont le libellé contient
"Nom",
• les boutons "Annuler" dont le type de bouton n'est pas "Abandon",
• l'ensemble des champs dont l'accessibilité par TAB n'est pas activée,
• ...

WINDEV TECH TOUR 2021 - 7

SOYEZ ENCORE PLUS EFFICACE :
LES ASTUCES DE MARC (SUITE)
L'espace de travail multi-zones de WINDEV, WEBDEV et WINDEV Mobile
vous permet de visualiser simultanément différents éléments (deux fenêtres
ou une fenêtre et sa page WEBDEV équivalente) ou le même élément (une
fenêtre et son code).

Par défaut, lorsque plusieurs éléments sont visualisés, ils sont tous visibles dans la barre de documents, situé en haut de l'éditeur.

Pour créer une nouvelle zone pour un élément (une fenêtre, son code, un test, etc.), vous pouvez :
• effectuer un "glisser-déposer" (Drag and Drop) depuis la barre de documents. Lors du survol, l'éditeur affichera, dans la zone de travail, un
cadre symbolisant la position où l'élément sera placé. Les zones peuvent être découpées de façon verticale ou horizontale.
• utiliser le menu contextuel sur la barre de documents. Les options "Créer un groupe à droite" et "Créer un groupe en dessous" permettent
de déplacer l'élément dans la zone souhaitée.

Exemple d'utilisation 1 - Afficher une fenêtre et son code

Le cas d'utilisation le plus courant est l'affichage d'une fenêtre et de son code (le code de l'un des champs).
Cela permet par exemple de faciliter le code de vérification des saisies dans le bouton de validation : il est facile de voir si un champ a été oublié.

8 - WINDEV TECH TOUR 2021

RACCOURCIS UTILES !
"Ctrl + Alt + W" : ferme tous les éléments ouverts sauf celui sur lequel vous êtes positionnés.

"Ctrl + Shift + T" : ré-ouvre le dernier élément fermé (très pratique après une fermeture non souhaitée).

Exemple d'utilisation 2 - Afficher 2 plans d'une même fenêtre

Depuis l'éditeur de fenêtres, il est possible de dupliquer l'affichage courant : depuis le ruban, sous le volet "Affichage", dans le groupe "Options",
cliquez sur le bouton "Dupliquer l'affichage".

Cette option est particulièrement utile pour visualiser simutanément :

• 2 plans d'une même fenêtre, pour faciliter la copie de champs ou le positionnement.
• le code de 2 champs d'une même fenêtre.

WINDEV TECH TOUR 2021 - 9

DOCKER : 8 CONSEILS PRATIQUES
Docker est une technologie de conteneurisation.
Le principe de Docker est d'exécuter une application, un site Web,
dans un environnement isolé, duplicable et à ressources contrôlées.
Il est possible d'avoir des conteneurs Docker pour les bases de données
HFSQL, les sites WEBDEV et les Webservices WINDEV.

U
ne infrastructure Docker permet
de réaliser des environnements :
• isolés,
• duplicables
• à ressources contrôlées.
Isolé : quoi que fasse l'application, cela n'aura
aucun impact sur les autres sites qui s'exé-
cutent sur le même serveur. L'application est
"dans" un container.
Duplicable : il est possible d'exécuter une ou
plusieurs centaines d'instances d'une applica-
tion facilement : elles seront toutes identiques.
À ressources contrôlées : l'administrateur du
serveur contrôle précisément les ressources
minimales et maximales mises à disposition
de chaque container. On entend par ressource
la puissance CPU mais également la quantité
de mémoire.
Swarm
Un cluster Swarm est une technologie qui
permet de faire fonctionner plusieurs serveurs
Docker ensemble. Dans ce cas, chaque serveur
est appelé un nœud.
Le cluster Swarm gère la communication entre
les conteneurs situés sur des nœuds différents.
Docker Swarm est une technologie de clus-
ter, mais ce n'est pas la seule, il y a aussi
Kubernetes.
Avantages
Les avantages pour les équipes de déve-
loppement d'une infrastructure Docker sont
multiples :
• Comme l'environnement d'exécution est
isolé, chaque application peut être codée
comme si elle était la seule sur le serveur. Cela
simplifie le développement et le débogage.
• Comme le déploiement est duplicable, il est
possible d'absorber les montées en charge
"facilement". Il suffit d'ajouter de nouveaux
nœuds dans le cluster et de déployer plus
d'instances.
• Comme vous contrôlez les ressources, il est
possible d'exploiter plusieurs applications sur
le même serveur sans risques de cannibalisme

10 - WINDEV TECH TOUR 2021

de la mémoire ou du processeur.
• Comme un cluster est constitué de plusieurs
nœuds physiques, il est possible de garantir
de la haute disponibilité et de l'équilibrage
de charge.
Bien entendu, l'accès à ses avantages n'est
"pas gratuit" en termes de développement
et impose des "contraintes" au niveau du
développement. Voici 8 conseils importants
à respecter pour utiliser ou pouvoir utiliser
dans l'avenir une infrastructure Docker.
1
Environnement
Linux
L'exécution de Docker s'effectue sous
un environnement Linux.
Les conteneurs Docker créés avec WEBDEV
sont basés sur la distribution Debian.
Il est donc fondamental de vérifier que l'option
"Activer les erreurs de compilation pour la
compatibilité Linux" est bien activée dans tous
les projets de sites ou Webservices destinés
à être exécutés sous Docker.
De manière générale, cette option est conseil-
lée lors d'un nouveau développement pour
prendre en compte les spécifications Linux et
ne pas se limiter à un hébergement Windows.
2 Répertoire des
données
Pour manipuler des fichiers, il faut
toujours utiliser le répertoire renvoyé par la
fonction WLangage fRepDonnées.
En effet, c'est le seul endroit accessible en
écriture pour votre conteneur dont le contenu
est conservé en cas de redémarrage ou de
nouvelle instance.
Par "fichiers", on parle ici des fichiers HFSQL
Classic mais également des fichiers de para-
mètres, des fichiers manipulés par program-
mation... tout ce qui est écrit sur le disque.
3
Génération
Lors de la génération du fichier
Dockerfile avec WEBDEV, il est impor-
tant de vérifier dans l'assistant que
tous les fichiers seront bien placés dans le
Retrouvez dans la LST 122, une procédure détaillée de déploiement d'un site
WEBDEV avec Docker ainsi qu'un utilitaire permettant d'automatiser les princi-
pales opérations (build, tag, run, push...).
répertoire virtuel <data>.
Cette localisation est automatique pour les
fichiers HFSQL mais ne peut pas être auto-
matique sur les autres types de fichiers. Par
exemple, vérifiez les fichiers .ini ou les images.
4 Structure des
données
En Docker, il n'y a pas d'installation :
il n'y a donc pas non plus de Synchronisation
des Données Déployées (Modification
Automatique des fichiers).
C'est donc aux développeurs, dans le code
d'initialisation du projet, de vérifier la structure
des fichiers. Il est alors nécessaire de faire
évoluer la structure des fichiers déployés à
l'aide de la fonction HModifieStructure et
de gérer la version actuelle des données par
un moyen de votre choix.
5
Agrégation
Dans le cas d'une architecture com-
plexe, par exemple un ou plusieurs
sites, des Webservices, une base de
données, il est souvent nécessaire de regrou-
per ces éléments pour les déployer ensemble.
Cette opération est réalisée avec la techno-
logie Docker Compose. Cela permet d'être
sûr que tous les composants de l'application
sont synchronisés.
Un fichier docker compose (docker-compose.
yml) respecte une syntaxe stricte au format
YAML (l'indentation est impérative) et spéci-
fique, de la forme :
services:
service1:
image: windev/hfsql
ports:
- "4900:4900"
6
Cluster Swarm :
système de
fichiers
Un cluster Swarm est un ensemble de
machines qui exécutent le moteur Docker
et gèrent la répartition de l'exécution des
images Docker sur plusieurs machines pour
gérer la redondance ou la montée en charge.
Si vous utilisez un cluster Swarm, vous aurez
alors probablement besoin en plus d'un sys-
tème de fichier distribué.
En effet, si votre conteneur s'arrête sur
le nœud 1 et qu'il est relancé sur le 5 par
exemple, il va falloir qu'il "retrouve" ses fichiers
de données alors qu'il s'exécute sur une autre
machine physique.
Ce conseil s'applique aussi pour le conteneur
qui exécute votre serveur HFSQL !
Dans ce cas, il existe de nombreuses solutions
techniques, selon nos retours, les solutions
CephFS ou GlusterFS semblent de bonnes
pistes si vous ne savez pas quel système de
fichiers choisir.
7
Cluster Swarm :
redondance
Dans un cluster Swarm, certains
nœuds sont chargés de gérer le fonction-
nement du cluster : ce sont les managers.
Pour que le cluster reste fonctionnel, plus de
la moitié des managers doivent être capables
de communiquer ensemble.
Donc lors de la mise en place d'un cluster
Swarm, pensez à ne pas mettre tous les mana-
gers dans le même datacenter ... l'histoire
récente nous l'a encore montré.
8
Faites des
sauvegardes !
Cela paraît évident, mais n'oubliez
pas que ce n'est pas parce que vous avez de
la redondance que vous pouvez vous passer
de backups.
En effet, avec la seule redondance, si un
bug "écrase" vos données, il les écrasera sur
plusieurs machines à la fois !

WINDEV TECH TOUR 2021 - 11
MDM : LE STORE PRIVÉ DE VOS
APPLICATIONS D'ENTREPRISE
Le MDM de WINDEV MOBILE permet de déployer, et de mettre à jour, les
applications iOS et Android sur une flotte de matériels.
Mais la solution MDM permet également de gérer les utilisateurs de ces
applications ainsi que leurs droits.

1 Activation de la
fonctionnalité
Pour qu'un projet WINDEV Mobile puisse être déployé en
mode MDM, il faut le déclarer lors du développement.
L'activation de la gestion du MDM s'effectue depuis le volet "Projet"
en cliquant sur le bouton "GPU/MDM".
Il faut en effet activer l'option "Activer les services MBaaS" (Mobile
Backend as a Service).
Ensuite, il suffit d'indiquer les services dont l'application doit bénéficier :
• Groupware Utilisateur (Gestion des utilisateurs),
• MDM (Gestion des applications).

2 Hébergement des
données
Pour pouvoir utiliser les services MBaaS, il est nécessaire de
disposer d'un serveur. Ce serveur va à la fois gérer les authentifications
et les droits des utilisateurs, mais aussi la distribution des applications.
Pour mettre en place un serveur MBaaS, et en particulier MDM,
la procédure d'installation sur un serveur dédié est indiquée dans
l'aide en ligne de WINDEV (https://doc.pcsoft.fr/fr-FR/?1410086652).
Bien entendu, PCSCloud propose une solution prête à l'emploi (en
utilisant une plateforme d'exploitation).

3 Gestion des mises à jour

Le point important du MDM est la gestion des mises à jour
des applications.
Le fonctionnement des mises à jour est géré dans l'onglet
"MDM" :
• lorsqu'une mise à jour d'une application est disponible, il est pos-
sible d'afficher au choix une fenêtre ou d'envoyer une notification,
• l'utilisation ou non du réseau mobile pour télécharger les mises à
jour des applications,
C'est dans cet onglet "MDM" que se trouve l'URL (et le QR Code) de
téléchargement de l'application qui sera à fournir aux utilisateurs.

12 - WINDEV TECH TOUR 2021

4 Portail : ajout d'une
application
La partie à réaliser dans WINDEV Mobile est terminée : le
reste de la configuration s'effectue depuis le portail MDM. L'URL du
portail (et le login initial) a été donnée dans l'étape 2 de cet article.
Dans le portail, à gauche, est affichée la liste des applications asso-
ciées à ce serveur. Pour rendre disponible une application, il faut
uploader l'application voulue (générée par WINDEV Mobile) dans
l'onglet "MDM" par l'option "Uploader une version".
Note : le fichier à uploader est un fichier ".APK" pour Android et les
fichiers ".IPA" et ".PLIST" pour une application iOS.

5 Portail : gestion des

utilisateurs
Pour les utilisateurs, il est possible de choisir les droits d'accès
par défaut à l'application : par défaut, un utilisateur est-il autorisé à
accéder aux éléments ?
En termes de sécurité, la solution la plus "sûre" est d'interdire l'accès
par défaut, et d'activer l'accès au cas par cas.
Dans le cas contraire (autorisation par défaut), il faut interdire
explicitement l'accès aux utilisateurs (par exemple des stagiaires).

6 Portail : gestion des

droits
Lorsque les utilisateurs sont configurés, il est possible de
définir les droits plus finement (il est conseillé de gérer les utilisateurs
et les droits par groupe).
En effet, en sélectionnant un groupe (ou un utilisateur) depuis l'onglet
"Gestion des droits", il est possible de définir, fenêtre par fenêtre et
champ par champs, l'état des champs pour cet utilisateur.
Il est ainsi possible d'avoir une gestion des droits comme pour une
application WINDEV ou WEBDEV (griser des champs, rendre invisible
des options, interdire l'accès à un état, etc.).

7 Installation des
applications
Lorsque l'application et le serveur sont configurés, les
utilisateurs peuvent installer l'application sur leurs périphériques.
Pour cela, un lien (et un QR Code) est disponible dans WINDEV Mobile
(étape 3). Ce lien d'installation doit être fourni aux utilisateurs par
le moyen de votre choix.
Les utilisateurs peuvent alors installer l'application correspondante.
Les mises à jour leur seront automatiquement proposées par la suite
lorsqu'une nouvelle version sera mise à disposition.


WINDEV TECH TOUR 2021 - 13

OCR #1 - SÉLECTION AU LASSO
DE LA ZONE À TRAITER PAR OCR
L'exemple "WD OCR WTT26" présente une solution simple pour afficher et
sélectionner facilement une portion d'image ou de document PDF à analyser
par OCR (reconnaissance optique de caractères).

14 - WINDEV TECH TOUR 2021


// Déclaration du lasso
ThaLasso est un CLasso( IMG_OCR..Nom, Vrai )
MonRectangle est un Rectangle
// Obtient les coordonnées du lasso par rapport au champ image
MonRectangle.X = ThaLasso.m_HautGaucheX
MonRectangle.Y = ThaLasso.m_HautGaucheY
MonRectangle.Largeur = ThaLasso.m_nLargeur
MonRectangle.Hauteur = ThaLasso.m_nHauteur
// Obtient les coordonnées réelles du lasso par rapport à l’image
MonRectangle = CoordonnéeChampImageVersImage( IMG_OCR, MonRectangle )
// Conversion DPI
MonRectangle.X = MonRectangle.X * 300 / DPI
MonRectangle.Y = MonRectangle.Y * 300 / DPI
MonRectangle.Largeur = MonRectangle.Largeur * 300 / DPI
MonRectangle.Hauteur = MonRectangle.Hauteur * 300 / DPI
// Extraction du texte
SAI_TEXTE = OCRExtraitTexte( IMG_OCR, MonRectangle )
Pour gérer la sélection au lasso, l'exemple "WD Lasso" est
fourni depuis de nombreuses versions de WINDEV.
Pour utiliser cette classe CLasso, il suffit de déclarer un objet
CLasso dans le code d'initialisation de la fenêtre.
Le constructeur de l'objet attend deux paramètres :
• le champ Image sur lequel le lasso doit être géré,
• un booléen, pour que la classe gère automatiquement les
événements Windows.
Après la miste en place du lasso, il suffit de déclencher la
reconnaissance de caractères lorsque l'utilisateur a terminé
sa sélection avec le lasso.
Dans l'exemple "WD OCR WTT26", cette action est codée dans
le bouton "OCRiser" qui est associé à un champ de saisie pour
afficher le résultat de l'OCR.
La reconnaissance de caractère est effectuée grâce à la fonction
WLangage OCRRécupèreTexte.
La fonction OCRRécupèreTexte accepte en second para-
mètre une variable de type Rectangle représentant la zone
à analyser : il suffit donc de faire définir ce rectangle avec les
coordonnées du lasso de sélection.
Résolution et PDF
Lors d'une demande de reconnaissance de caractères sur un
document au format PDF, le WLangage génère automatique-
ment en mémoire une image du PDF.
Lors de cette génération, afin d'obtenir la meilleure qua-
lité possible pour la reconnaissance des caractères,
le "dessin" est effectué avec une résolution élevée : 300 DPI.
Or, un écran d'ordinateur n'a pas une résolution de 300
DPI mais généralement de 96 DPI. Il est donc nécessaire de
convertir les coordonnées de la sélection par une simple règle
de trois. Dans le cas contraire, l'OCR ne sera pas exécuté sur
les éléments sélectionnés visuellement.
Il suffit donc de multiplier les valeurs par 300 et de les diviser
par 96.
Mode d'affichage de l'image
Dans l'exemple "WD OCR WTT26", le champ Image est confi-
guré pour afficher l'image en mode "homothétique étendu
centré". Dans ce cas, il faut utiliser la fonction WLangage
CoordonnéeChampImageVersImage pour convertir auto-
matiquement les coordonnées écran en "pixels" de l'image.
Astuce : pour le mode d'affichage "100 %" (normalement peu
utilisé dans ce cas), il peut être nécessaire de déterminer le DPI
de l'écran par programmation puisque la conversion ne sera pas
effectuée par la fonction CoordonnéeChampImageVersImage.
DPI = API( "user32", "GetDpiForWindow", ...
Handle( MaFenêtre ) )
WINDEV TECH TOUR 2021 - 15
LES DONNÉES DU NAVIGATEUR À
JOUR, EN TEMPS RÉEL !
Lorsqu'un site Web doit récupérer des données les plus à jour possibles, le
comportement habituel consiste, pour le navigateur, à demander au serveur
de lui envoyer les informations régulièrement (par un timer).
Mais si les informations n'ont pas changé depuis le dernier affichage, ces
demandes créent sur le serveur du trafic réseau et de la charge inutiles.
Avec le serveur de WebSocket de WEBDEV 26, c'est le contraire : c'est le
serveur qui décide quand envoyer des données aux navigateurs.

Projets d'illustration Lorsque la connexion est établie, un canal de Fonctionnement

Les projets utilisés pour illustrer ce sujet sont
les exemples "WW_Websocket_WTT26" et
"WW_Websocket_Page_WTT26".
Le projet "WW_Websocket_WTT26" est un
contenu didactique de serveur de Websocket.
Le projet "WW_Websocket_Page_WTT26"
est un projet WEBDEV illustrant la commu-
nication avec le serveur de WebSocket du
projet précédent.
Principe
Le site WEBDEV va ouvrir, depuis le navigateur
de l'utilisateur, une connexion directe avec le
serveur de WebSocket.
communication bidirectionnel est disponible.
À tout moment, le serveur peut envoyer des
données vers le navigateur (par exemple
lorsque des données sont mises à jour).
Un serveur de WebSocket peut servir dans
de nombreux cas d'usage :
• mettre à jour un tableau de bord,
• afficher un stock en temps réel,
• prévenir qu'une chambre d'hôtel ne va plus
être disponible,
• faire des applis de travail collaboratives,
• etc.
Les WebSockets permettent de faire du temps
réel en Web.
Pour bien détailler le fonctionnement entre
le site WEBDEV et le serveur de WebSocket
WEBDEV, le code source est séparé en deux
projets distincts. Cette méthode est celle
conseillée par défaut pour les développements
de serveur de WebSockets WEBDEV.
Le serveur de WebSockets
L'exemple "WW_Websocket_WTT26" est donc
un projet ayant une seule configuration de
type "Serveur de WebSocket".
Dans ce type de configuration, de nouveaux
traitements sont disponibles :
• le traitement "service global" est exécuté en
permanence (en boucle), comme un traite-

16 - WINDEV TECH TOUR 2021

ment de service Windows,
• le traitement "nouvelle connexion" est exé-
cuté lors de la demande de connexion d'un
nouveau poste client (navigateur) au serveur,
• traitement "réception d'un message d'un
client" est exécuté lors de l'arrivée d'un mes-
sage d'un poste client,
• traitement "déconnexion d'un client" est exé-
cuté lors de la déconnexion d'un poste client,
• traitement "arrêt du service global" est exé-
cuté lors de l'arrêt du serveur de WebSocket.
Important : Il y a une chose importante à
savoir dans le serveur de WebSocket.
Chaque "connexion cliente" dispose d'un
contexte indépendant :
• un contexte HFSQL indépendant,
• un contexte de variable indépendant.
En conséquence, les différents clients ne
partagent pas les variables globales du pro-
jet, chaque "client" à ses propres valeurs de
variables.
Pour exécuter des procédures dans un
contexte particulier, que cela soit le
contexte d'un client ou le contexte du
service global, il suffit d'utiliser les fonc-
tions WLangage WebSocketExécute ou
WebSocketExecuteServiceGlobal.
Envoi de messages à des
postes clients
Le serveur de socket peut envoyer à tout
moment des messages à des postes clients :
• en réponse à un message reçu,
• dans le traitement "service global".
L'exemple fourni est un exemple didactique de messagerie instantanée
Pour cela, le serveur de WebSocket dispose
de fonctionnalités WLangage spécifiques :
• la fonction WebSocketListeClientConnecté
permet d'obtenir l'ensemble des postes clients
connectés,
• le type de variable websocketClient per-
met d'identifier un poste client connecté en
particulier,
• la fonction WebSocketEnvoie permet d'en-
voyer des données à un poste client donné.
Le site WEBDEV et les postes
clients
Pour gérer la communication avec le serveur
de WebSocket, le site WEBDEV utilise unique-
ment du code navigateur :
• la fonction SocketConnecte permet d'établir
la connexion avec le serveur. Pour cela, la
fonction SocketConnecte accepte une URL
de la forme :
ws://serveur:port/nomserveur
Note : lors de cette étape, le navigateur peut
envoyer des informations au serveur de
WebSocket, comme le produit actuellement
consulté pour avoir un suivi de stock.
• la fonction SocketEcrit permet d'envoyer
des données explicitement au serveur,
• une callback en code navigateur (dont le
nom a été fourni lors de la connexion) est
exécutée lors de chaque réception d'un mes-
sage provenant du serveur.
Puisque ces fonctions sont navigateurs, la
connexion doit être établie dans chaque page
devant interagir avec le serveur de WebSocket.
Rappel : il est possible depuis WEBDEV de
déboguer du code navigateur.
Mise en œuvre
Les projets illustrant ce sujet présentent une
communication simple de type "messagerie
instantanée" :
• le projet "WW_Websocket_Page_WTT26" réa-
lise une connexion au serveur de WebSocket
et envoie toutes les 5 secondes un "ping"
pour indiquer sa connexion. L'utilisateur peut
envoyer un message quelconque. La frappe
en cours de l'utilisateur est indiquée.
• le projet " WW_Websocket_WTT26" envoie
aux clients connectés la liste des postes
connectés et transmets les messages.
Comment tester ?
Pour tester ces exemples, il est nécessaire
de déployer au préalable le serveur de
WebSocket. Ce déploiement peut s'effectuer
sur un serveur mais aussi en local à des fins de
debug (ce choix est proposé dans l'assistant
de déploiement).
Lorsque le déploiement es effectué, il faut
renseigner l'adresse de déploiement du ser-
veur de WebSocket (par défaut, l'exemple se
connecte à "ws://localhost/WTT_Websocket_
WTT26") dans le code de chargement
(OnLoad) de la page index.
Il est alors possible de faire "Go" du projet
"WW_Websocket_Page_WTT26". La page
index est une page statique, il est donc pos-
sible d'en ouvrir plusieurs dans différents
onglets pour simuler des utilisateurs.

WINDEV TECH TOUR 2021 - 17
SOYEZ AVERTIS DÈS QU'UNE
DONNÉE CHANGE SUR UN SITE
WEB (PRIX, DISPONIBILITÉ...)

Grâce au nouveau type WLangage htmlDocument, il devient aussi facile

de manipuler un contenu HTML qu'un contenu JSON ou XML.
C'est un gain de temps énorme par rapport à une manipulation "texte" du
contenu HTML pour les équipes de développement en phase de conception
et de maintenance !

18 - WINDEV TECH TOUR 2021

L
e scrapping Web consiste à réaliser un
programme qui va automatiquement
récupérer des données dans des sites
Internet, par exemple pour :
• faire une alerte promo ou faire un achat
au meilleur prix,
• suivre des stocks pour faire des statistiques,
• récupérer des factures automatiquement sur
des sites qui ne possèdent pas d'API,
• suivre un cours de Bourse,
• etc.
Faire du scrapping Web avec WINDEV 26 est
très largement facilité grâce au nouveau type
WLangage HTMLDocument.
Projet d'illustration
Le projet utilisé pour illustrer ce sujet est
l'exemple "WD Scrap WTT26". La détection
de champs de cet exemple utilise des iden-
tifiants (voir détail technique plus loin), seuls
certains champs disposent d'identifiants, ce
sont généralement des champs dynamiques
comme le prix d'un produit.
Fonctionnement
Le fonctionnement du scrapping est simple.
À partir d'une URL, l'application :
• affiche le contenu de la page,
• demande à un utilisateur d'indiquer la don-
née à "surveiller" (le prix par exemple),
• affiche la donnée "extraite" (pour valider
que la surveillance sera correcte et servir de
valeur de référence),
• récupère ensuite périodiquement le contenu
de cette même URL et de la valeur corres-
pondante.
Mise en œuvre
Affichage de l'URL et sélection du
contenu à surveiller
L'affichage d'une page Web à partir de son
URL est très simple en utilisant le nouveau
champ HTML :
HTM_PAGE = "<ici l’URL>"
Ensuite, ce qu'il faut savoir, c'est que chaque champ
dans une page Web a un identifiant unique.
L'idée est donc de récupérer cet identifiant
unique de l'élément à suivre.
Pour simplifier l'utilisation, l'utilisateur "cli-
que" sur l'élément. L'application doit donc
récupérer l'identifiant du champ cliqué. Pour
récupérer cet identifiant, le code suivant (en
JavaScript) va directement être exécuté depuis
le WLangage !
ExécuteJS( MonChamp, [
// Ecoute les clics sur la page
window.addEventListener( "click",
function( clickEvent ) {
// Obtient les coordonnées du clic
var x = clickEvent.clientX,
y = clickEvent.clientY,
// Demande au document de trouver
// l’élément HTML qui se trouve aux
// coordonnées obtenues
eltNoeud =
document.elementFromPoint( x, y );
// Appelle la procédure __SurClic du
// champ HTML en fournissant au mieux
// l’ID sinon la classe CSS
id_or_class = eltNoeud.id ||
eltNoeud.name ||
eltNoeud.className
|| ";
WL.Execute( "[%MonChamp..
NomComplet%].__SurClic", id_or_class );
} );
])
Le code ci-dessus réalise la récupération
d'un identifiant. Certains champs peuvent
ne pas avoir d'éléments : dans ce cas, il est
nécessaire d'identifier le champ par un autre
moyen (classe, balise, etc.).
Analyse du document
Le type WLangage HTMLDocument permet
d'analyser la structure d'un document HTML
et plus précisément le DOM.
Le DOM est l'arbre qui représente le docu-
ment HTML, comme un document XML
avec une racine, des nœuds et des attributs.
Chaque nœud peut avoir des fils, des frères,
etc.
En version 26, il est donc possible d'exploiter
ce document directement, en tant qu'objet,
sans analyser le code HTML à la main.
L'exemple permet de rechercher le contenu cliqué pour permettre son suivi
Les différentes opérations sont alors les sui-
vantes :
• récupération du code HTML de la page par
la fonction HTMLOuvre ou récupération du
document,
• affectation du code HTML dans une variable
de type HTMLDocument,
htmPageDoc est un htmlDocument = ...
MonChamp.Document
• recherche de l'élément correspondant à
l'identifiant surveillé grâce à la fonction 26
HTMLChercheElementParID,
htmEltClic est un htmlNoeud
// Cherche par l’ID
htmEltClic <-
htmPageDoc.ChercheElémentParId(...
sIDouClass )
• lecture de la valeur (chaîne) correspondante
grâce à la propriété Texte sur l'élément HTML.
Pour rechercher dans un document HTML, en
plus de la recherche par identifiant, d'autres
solutions sont proposées par le WLangage :
• la recherche selon une balise donnée par la
fonction HTMLChercheElementParBalise,
• la recherche selon une classe CSS donnée par
la fonction HTMLChercheElementParClasse,
• la recherche par le nom de l'élément HTML
via la fonction HTMLChercheElement-
ParNom.
Note : un point intéressant du nouveau type
HTMLDocument est qu'il peut être utilisé
sans champ ou fenêtre. Il est donc utilisable
aussi bien depuis un serveur Windows, un
site WEBDEV et même depuis une applica-
tion mobile !

WINDEV TECH TOUR 2021 - 19
AUGMENTER LA CAPACITÉ DE VOS
SITES SANS CHANGER DE MATÉRIEL
Comment éviter l'accumulation de sessions inutiles sur un serveur sans pour
autant pénaliser les internautes ?
Avec WEBDEV 26, c'est automatique grâce au mécanisme de Hearbeat !
Fonctionnement des
sessions
Quand un internaute se connecte à un site,
le serveur d'application WEBDEV démarre
une session pour cet internaute.
Chaque session, c'est un exécutable, qui
tourne sur le serveur pour exécuter tous les
traitements serveurs pour cet internaute.
Cet exécutable reste en mémoire au minimum
pendant la durée du timeout.
En effet, pour économiser la mémoire,
WEBDEV termine automatiquement les ses-
sions au bout d'un certain temps d'inactivité
s'il n'a pas reçu de requête du navigateur.
Ce temps, c'est ce qu'on appelle le timeout.
Ce timeout est réglable dans l'administrateur
WEBDEV (volet "Configuration").
Ce timeout est global au serveur d'application
mais il peut être personnalisé pour chaque site.
71 %
20 - WINDEV TECH TOUR 2021
Réglage de la durée
de session
Un timeout long présente de l'intérêt
(pour l'internaute).
Si l'internaute est interrompu dans son tra-
vail (appel téléphonique important, réunion
imprévue, ...), il appréciera de ne pas être
déconnecté et d'avoir conservé sa session,
ses recherches en cours, ses fiches en saisie...
Pour le serveur, cela signifie une session en
mémoire plus longtemps, parfois pour rien (si
l'internaute ferme son navigateur, la session
ne sert plus à rien).
Un timeout court, ça a aussi un intérêt
(pour le serveur).
Lorsque l'internaute ferme son navigateur,
sa session est refermée plus rapidement sur
le serveur : la mémoire est donc libérée plus
rapidement.
Mais si l'internaute cesse de cliquer dans le
32 %
temps défini pour le timeout, sa session et
donc son travail en cours sont perdus.
Heartbeat
Pour pallier ce problème et contenter tout le
monde (l'internaute et le serveur), la version
26 dispose d'un mécanisme de heartbeat.
Le heartbeat est un mécanisme automatique
du serveur d'application WEBDEV qui vérifie
que le navigateur est encore ouvert.
En version 26, lorsque l'internaute ferme
son navigateur, le heartbeat le détecte et
ferme la session, sans attendre le timeout.
Avec le heartbeat, le timeout peut être fixé
à une heure : l'internaute ne risque plus de
perdre son travail, et plus aucune session
inutile ne surcharge le serveur.
Re m a rq u e  : l a f o n c t i o n W L a n g a g e
SessionHeartbeatActive permet de para-
métrer la fréquence du heartbeat et de le
désactiver, pour les cas nécessaires.
Ci-contre, un exemple
de mesures sur un
serveur réel.
Ce serveur traite environ 10 000 sessions
par jour.
Le graphe montre la charge moyenne de la
mémoire du serveur sur 24 heures :
• en haut, c’est le serveur d’application en
ancienne version 25, donc sans le mécanisme
de heartbeat. La charge moyenne s’établit
à 71 % de la mémoire totale de la machine.
• en bas, c’est le même serveur après son
passage en version 26. Automatiquement,
grâce au heartbeat de WEBDEV 26, la charge
est tombée à 32 %.
Sans autre changement que le passage en
version 26, le serveur est moins chargé, et offre
donc des temps de réponse bien meilleurs.
Sans changer votre matériel, le serveur peut
supporter deux fois plus de charge.