ÈffiErflÈ

ffi
+Il

.=ENI/UI DESMSffi
: *t .
g hIULTI.PRESTATAIITES
Envoi de SMS par Webservice u
f: i avec choix du prestataire #

EE0L[EALISATIIN rP il§]
Application complÈte de gÉolocalisation
des intervenants pour i0S E Android

X&
 ü

1
3;. -

*i

'I9 Dessin en mobile facilité

LST 1
Le "Goodies du trimestre" est
un luxueux calendrier mural Sommaire & Actualités
qui accompagnera les équiPes Test automatique : mise en
de developpement tout au long PC 50FI à votre service place d'un contrôle visuel
de l'année 2020 |
12 exemplaires livrés)
Manipulation des tags NF( WEBDEV : exemple de code

sous Android mixte

Application complète de Envoi de SMS par différents

géolocalisation de flotte prestata i res

(gabarit "Heyoo")
Fonctions Pl( : exemples

Webservice sécurisé par d utilisations

cryptage asymétrique
Le Saviez-Vous ?

WLangage : présentation de
Iolor Picker Web
5 fonctionnalités utiles

Personnalisation du look de
Analyse de texte via lAPl
la salsie assistee WEBDEV
[ognitive (Microsoft)

Si:^ner, gestion du
Exemples d Ul du
'::.1-\,'efSO et dU baC
\llNDEV Tour 25

-,.r: o's & RePonses

l,laqnetrsm: nte l=-:
J cas rraitc.Ês:--'til l- - . rrnnpl<
UPPLTJ

!rtr i: [,)
(
PC SOI.T

. Accès oux mises à jour des produits PC SOFT :

WINDEV 25 Version Finole

WEBDEV 25 Version Finole
WINDEV Mobile 25 Version Finole
 ,qr
#*\s
e *.1*
4F\
lï
ffi æ
f
T" - &'*
§§
:li,:

§',

ffittt,

#ft

. Exemples LST
. Gobqrils
. Ambionces et Poletles
NFC (Near Field Communication) est une technologie de communication
sans fil à courte portée et haute fréquence permettant l'échange de données
(nommées "tag"). L'exemple "WM NFC" illustre comment lire et écrire dans
des tags NFC (identifications d'appareils, de marchandises, etc.).
e NFC (pour Neaf Fie d Communication,
ou CCP pour Communication Champ
Proche en français), permet d'échanger
des données entre un lecteur et un
terminal mobile compatible, voire entre les
terminaux eux-mêmes.
Cette technologie est aujourd'hui largement
répandue: paiement sans contact des cartes
bancaires ou depris un telephone, appairage
entre appareils electroniques, ...
Les fonctions NFCxxx du Wlangage per-
mettent de manipuler les puces ou autres tags
NFC en lecture comme en écriture.
L'exemple "WM NFC" est un exemple didac-
tique d'utilisation de ces fonctions.
Lire un tag NFC
La lecture d'un tag s'effectue avec la fonction
WLangage NFCLitTog.
Pour lire un tag NFC, 2 méthodes sont pos
sibles.
. la lecture à la demande (mode bloquant),
. la lecture attentive (mode non bloquant).
Mode bloquant
Dans ce mode, l'appel de la fonction
N FCLitTog déclenche automatiquement
l'ouverture d'une fenêtre système invitant
l'utilisateur à approcher son appareil d'un
autre appareil compatible NFC.
Cette fenêtre sera automatiquement fermée
après a lecture (ou si l'utilisateur appuie sur
la touche 'Back' du périphérique).
Le cas d'utilisation de ce mode est Ie paiement
sans contact.
Mode non bloquant
Dans ce mode, une procédure callback est
automatiquement appelée à chaque fois qu un
tag NFC est apposé sur l'appareil.
Cette méthode permet de lire rapidement
plusieurs tags à la suite.
Un cas d'utilisation est la réalisation d un
inventaire de matériels, chaque matériel étant
équipé d'un tag NFC.
C est cemode de lecture qui est utilisé dans
notre exemple.
NFCLitTag (
_LectureTag)
' ''.::".:..:,..:.4
-- r!:i:
,,,,:.
' t:.i!': a,1a):\:ri-
PROCEDURE _LectureTag (...
un nfcTag)
..:run "r,
La procédure callback reçoit en paramètre
une variable de type nfcTog, qui contient
les données du tag lu. Ce type de variable
contient differentes proprietes pour recuperer:
. l'identifiant unique,
. les données du tag avec leur type,
. la possibilité d'écrire dans le tag,
Dans notre exemple, la lecture complète
d'un tag est effectuée dans la procédure
AduoliseDonnées de la fenêtre 'FEN
!.
Ecrire dans un tag NFC
Si le tag en lecture seule (propriété
n est pas
..LedureSeule à Foux),il est possible d écrire
une ou plusieurs données sur le tag via la
fonction WLangage N FCEcritTog.
LA LETTRE DU SUPPORTTECHNIQUE PC SOFT
Attention: la fonction NFCEcritTog réécriI
I ensemble des données du tag. Pour conser-
ver les données actuellement stockées, il est
nécessaire de les ajouter à lavariable nfcTog
utilisée pour l'écriture.
Dans notre exemple, le processus d écriture est
géré dans la procédure EcritureMiseAJourTog
de la fenêtre "FEN_DATA'
Test de l'exemple
1. Depuis la fenêtre principale, appuyez sur
le gros bouton'Lire' pour lancer la lecture
:.,: en mode non bloquant (un halo rouge cli-
:.:r:r..1
gnotant indique que la lecture en attente est
toujours en cours).
2. Approchez votre mobile de différents tags
NFC pour les lire.
Chaque lecture de tag ajoute une ligne dans
la fenêtre indiquant l'identifiant du tag et le
nombre de données.
3. Pour visualiser les données, cliquez sim-
plement sur la ligne du tag.
Chaque donnée est affichée sur une ligne
distincte affichant différentes informations.
type du tag, taille, ...
Un appui sur une ligne permet de visualiser
la donnée.
Un appui long sur une ligne permet d'afficher
DATA". le menu contextuel qui permet de supprimer
la donnée.
4. Le bouton "+" permet d'ajouter une nou-
velle donnée dans le tag.
I
N"l 19 - 5
 Arerre ,.
*
u(t"n I
OO§'§- WINDEV
ItFe
I
I
Mti*tali E§
',, \ I

APPLICATION COMPLETE o{
IOS & ANDROID
/

GEOLOCALISATION
DES INTERVENANTS LE

b,
.qti
sJ^
30
COMPANS
TBS
o
4/h^
_.- Basilique Sarnt-Ser
i
@ cla
O,.
.,e44a de Toulor

*dtÿ
go
Ê
:,
Yii',i',ili,-ç
Fo *âkd'" "*+e3"'*'*" &..=+ 1 Caprtole

fl ,: §

Claudia
k.:

:i "cl (

LOPEZ ûarontP
§SELARDIÏ
UARTIER DE ID È
ÿâ
,ffi','Ji:I:§ I
RTOUCHERIE
LOP-OO7 î
r;
:a
a

-^ffifJ"::e Depuis 16:32

Ê

Chez le client : Mr RIPART Vincent B

ÿ.-
'â
"o

Ye2

h.fi
,,'â
r.
 BG}I'\tEFûY ot 12

rÇvs s,!t8
§

^ùt*
§
4e' s.§'
Ç'*
.e
isv
rà
t^§ JIJI.ICÀ§
À*ü*lJt
§d des itinirrre:
fi

; C HÂL§T§
fY:&*§§ü§
â,§ûi,iT ,4
-C,

MÂ ÂarAu ô
l.^
* '€-
:
l:ç § Cimetière
erre ca ç
§*UP
4k
vêz
't)
À'r d€ \ô

*ti§* it
LJ
: il;

APIT*LÊ
Vot re po s it ion
à
s§
GUILX
tien*e
ç*r s
tt
{i

? 4y,
§ "r.ror{.,.ll
{r}
§.
-:

rn de Toulouse {
â

Recentrer sur ma position fo=

lô-I

,É.BUSCA
!E ^.§'
4 ra*r?^

ǧd' WINDEV ' (tô"

'%

a Nougar^
A
Il-§ \
*
{.

'f"
M'§IM: ES

UI: APPLICATIO N CO M PLETE :

FOCUS SUR 6 FONCTIONNALITES
t:{&
a
1,
.t'"'
L'exemple "WM Heyoo" est une application complète WINDEV Mobile pour
oiteux (
effectuer une géolocalisation d'intervenants entre différents mobiles.
Cet exemple est constitué d'un seul projet WINDEV Mobile mais il comprend
une configuration Webservice pour assurer la communication entre les
périphériques.
LE

tialisation de lü HctToo
Suivi de la
E<CotlPILE 5I
Typeconfiguration<> Hebservice>
I Côltbar-\ ce gÉc1c:a1i:.aticn géoloca lisation
L céosuiviProcédure(CB-Position)
F <STNON> Pour suivre la position de chaque utilisateur, l'exemple utilise
L "C-ÉaticnSiIne..iitàrt " ' les fonctions WLangage géoSuiviActive eT géoSuiviProcédure.
<FIN>
Ces procédures permettent d'effectuer un suivi à faible précision.
FiI'l f,g erocéaure global.e CB-Position En effet, les événements sont envoyés unrquement en cas de chan-
EpnocÉotlng cB Position(pPosition Êst une géoPosition) gements significatifs de la position et à des intervalles supérieurs
Trace("Position acquise: " + pPosition.Latitude + " à plusieurs minutes.

.-- Utilisateur. i-ti1i;êteJ':rCcu-:.-Latitude = Pour notre exemple, ce type de suivi est largement suffisant.
-. rÉiri--i^,.-,:+i1l--+-,-;-a-,,-- l^--i+,,â-
Pour effectuer un suivi très précis, il est préférable d'utiliser la fonction
WLa n ga ge G PSSU itDéplocement.

Saisir les 4 chiffres de votre code

oooo
1 2
4 5
Connexion par code PIN
Pour simplifier l'authentification, le mot de passe à saisir
est un code PIN (un code à 4 chiffres).
La saisie du code, à l'inscription et à la connexion, est
effectuée via le Champ Métier "Saisie code PlN".
3
Le principe est le suivant: lorsque l'utilisateur entre en saisie dans le
champ qui permet de saisir son code PlN, le plan actif de a fenêtre
6
est modifié pour afficher le plan 2 qui contient le Champ Métier

7 I 9
La procédure CodePlNVolide du Champ Métier a été adaptée
pour reporter la saisie du code PIN dans le champ de saisie adapté.

Génération d'un
identifiant perso
Saisir un identifiant L'exemple permet d'obtenir les informations de géoloca-
lisation de ses contacts.

4r
Pour simplifier la saisie d'un nouveau contact, l'idée est d'attribuer
à chaque contact un identifiant personnalisé court.
W I N,O Dans notre exemple, le format de l'identifiant est "AAA-999".

Cet identifiant est généré par la procédure Genereldentifiont

lorsqu'un utilisateur de l'application s'inscrit.
 p6;sg [$ni§t§s

! cxÂLsrs

n Look de popup
I ;r :l;:î;î::::ï1ï::
look popup:
:r ;'J::i::!:: ;ï:::i
d'affichage de la carte, l'exemple utilise des fenêtres au

. la taille est volontairement limitée au minimum, pour bien afficher

la fenêtre popup par-dessus la fenêtre courante,
. le fond de la fenêtre est positionné sur "transparent" pour faire
ressortir davantage l'effet arrondi de l'image de fond.

.?, i&iendleiË
Webservice REST
taaaàd.fitI?:=ffik:= Pour mémoriser les utilisateurs et leur position, l'application
a.mdi.::.ie!*< = :l::,:lî;: h.ê{e.«iêt mobile communique avec un Webservice REST qui utilise
=
une base HFSQL locale.
FdèÈr€!.É!: Ie8fiFq
=
- /IglooilË
Avec WINDEV WEBDEV et WINDEV Mobile, la définition d'un
.: §€r
i*6id,Fæ§
*e*rdilk.:é{* Webservice REST est très simple: il s'agit d'une simple configuration.
M«hod.ffiP: € R.§sour(.r llest ensuite possible de définir les points d'entrée du Webservice:
= = . chemin d'accès (par exemple "/user/connect"),
. méthode HTTP (GET, POSI PUI ...),
Fd de b réponrÊ: ,s[nr{
= . procédure WLangage appelée,
: . format de la requête / de la réponse (texte, JSON, XML,
^slE€e ...).

Automatisme de la procédure Automatisme de

TYpe

Tims.&orédur. dffiÉréÊ
procéd u res
a Thred L'appel à un Webservice et la réception de sa réponse
ThrÊad hnd9àl peuvent prendre un certain temps (selon la connexion entre le
mobile et le serveur qui héberge le Webservice).
Commed i Pour éviter de bloquer l'utilisateur de l'application mobile lors des
fiorbrcd.loB: O l toB lffini
interrogations du Webservice, ces appels sont effectués dans un
E F<.m.d dr.lês appêt§: ;:
-:: :. : (HH:sM:ss:cc)
O $nr ûilieton d. HrSQt thread via un automatisme de procédure (voir par exemple la pro,
Avr( di[dion dr HFSQI:.opi. d..ontdc romplèt. konncrionr, po§{ions, r.quêtÈr, d.,,.) céd u re t/ÿS_ Ufi lisate u rC re e).
tu.( ûfidion dê HE5Qi.: {opic d. contd. téqèG (ronnuion5 uniqu.ncn0
I
 DEV EVW EV

SÉCURISER UN WEBSERVICE PAR

CRYPTAGE ASYMETRIQUE
Avec WTNDEV WEBDEV et WINDEV Mobile, la génération (et I'utilisation) de
Webservices REST est simple et rapide.
La sécurisation d'un Webservice REST peut être effectuée de différentes
manières: certificat, token, filtrage lP, ...
Cet article propose l'utilisation d'un cryptage asymétrique, dont la clé est
fournie à l'application mobile via un QR Code.

n Webservice REST est un Pro-
gramme hébergé sur un serveuI
contenant des fonctions accessibles
via des requêtes HTTP.
Chaque fonction (également appelée API ou
point d'entrée) correspond à un traitement
exécuté sur le serveur.
Ces programmes, le plus souvent hébergés
en ligne, sont accessibles par n'importe quel
internaute: selon la nature du Webservice,
il peut donc être nécessaire de le sécuriser.
Dans la LST 112, plusieurs solutions de sécu-
risation d'un Webservice ont été présentées.
Cet article présente une autre manière de
sécuriser un Webservice via un cryptaqe
asymétrique.
Les exemples "WW-APl-Crypte" et "WM API
Crypte" sont une mise en pratique de cette
solution.
fonction CrypteGénèreCléRSA :
Prérequis
Pour une meilleure compréhension de cet bufCléPrivée est un Buffer
article, il est préférabie de connaître: br-rfCléPublique est un Buffer
. le fonctionnement d'un Webservice REST ll Genéraiion de clés privées, publiques
(bufCléPrivée,bufCléPublique) = ...
("https://doc.pc soft.f r /?10000227 92").
CrypteGénèreCléRSA0
. le principe du cryptage asymétrique (LST 116,
pages 70-71).
Pour réaliser un cryptage asymétrique depuis
un couple de clés privé / publique, il faut
Principe utiliser les fonctions DécrypteAsymétrique
et C ry pte Asy mét r iq u e'.
Cryptage asymétrique
La cryptographie asymétrique est un chiffre-
/1 Cryplage d'une chaîne de caractères
ment avec une clé publique et privée. bufMessageCryPté = ...
Le terme asymétrique s'applique dans le fait CrypteAsymétrique(...
qu'il y a deux clés de chiffrement, telles que si bufACrypter,
l'on réalise un cryptage avec la première clé, sFichierCléPublique,
seule la deuxième clé permet de retrouver le sMotDePasseCléPublique,
cryptePoddingPKCSl)
message initial.
Pour générer un couple de clés privé / // ùécryptage
publique en WLangage, il faut utiliser la bufMessageDécryPté = ...
DécrypteAsymétrique(...
buf MessageCryPté,
sFichierCléPrivée,
s MotDePasseCléPrivée,

cryptePoddingPKCSl\

Pour plus de sécurité, il est même possible de

signer les données envoyées afin de s'assurer
qu'elles n'ont pas été altérées.

c,
*1"
o
aF '"--;.?-
'
1O - LA LETTRE DIJ SUPPORT TECHNIQUE PC SOFT - N'I 1.9
 1. Pour chaque utilisateur de la base autorisé à se connecter
via I'application mobile, le couple de clés "privée /
publique" est généré et mémorisé en base.
F
Fflr
r')
C
T'
Fllr
2. L'utilisateur se connecte au site avec F
son login et mot de passe.
à
ô
^-, z
(]
4. Depuis l'application mobile,
l'utilisateur scanne le QR Code. E#E trt
t-
Ëffi ô
t-
5. La clé publique est enregistrée 3. Si l'authentification est Fllr
sur !e périphérique. correcte, le site affiche
la clé sous !a forme d'un
QR Code.

ï,

T
1. Lorsde I'appel au Webservice, l'application mobile T'
crypte les envois avec Ia clé mémorisée.
.f.ô,
m
t-
1/r

2. Le Webservice décrvote les @æ C

données reçues via ta tie privee
mémorisée en base. ,D- r-J É
m
fi- CP
1

t:t. I m
t=iu@l - N
lll@l 3. Le Webservice envoie Ia réponse à l'application
lEl- mobile. ô
m

Rappel: une signature permet de s'assurer
que les données n'ont pas été modifiées via
un hash des données envoyées avant leur
cryptage.
Pour calculer un hash, il faut utiliser la fonction
HoshChoîne:
//Signe une information
sSignature = HashChaîne(...
HA_M D5_1 28, sChaineASig ner)
Protection du Webservice
La protection du Webservice passe par
lisation d'un site lié au Webservice.
Ce site permet de gérer les utilisateurs et leur L'application cliente pourra alors crypter les
clé de cryptage. données que l'utilisateur envoie au Webservice
Pour cet exemple, l'utilisateur appelle un via cette clé publique.
Webservice depuis une application mobile.
À chaque appel, le Webservice récupère la clé
Le principe est le même pour une application
privée de l'utilisateur et décrypte les données.
desktop.
Le schéma ci-dessus présente l'architecture
Pour chaque utilisateur, le site génère un
de la solution proposée.
couple "clé privée / clé publique". Le site
fournit la clé publique à I'utilisateur au moyen
La mise en place de l'exemple est présentée
d'un QR Code. dans les pages suivantes.
L'utilisateur scanne alors ce QR Code via son
l'uti-
application mobile pour récupérer sa clé.

LA LETTRE DU SUPPORTTECHNIQUE PC SON - N'I I9 -11

 WINDEV DEV WINDEV

SECURISER UN WEBSERVICE PAR

CRYPTAG E ASYM ETRIQU E (SUITE)

ii
lâl Generation
Affiche ie QR CODE
.// dans un champ Ccde-barres

Iâi'iï5
CBÀ QRCode = MonQRCode

f o.t clés
La première étape est la génération
des clés (privée et publique) d'un utilisateur.
Dans l'exemple "WW-APl-CryPte", la
page "PAGE-Connexion" permet à l'utilisateur
Récu pérer
de se connecter. la clé de
Cette étape doit être réalisée en amont: il suffit
d'utiliser la fonction CrypteGénèreCléRSA Ce site doit partager les mêmes données que cryptage
pour chaque utilisateur autorisé à utiliser le le Webservice.
Pour cela, le mieux est d'utiliser un serveur La clé publique de l'utilisateur doit ensuite
Webservice.
HFSQL et de partager les données via ce être récupérée et mémorisée par I'application
Les 2 buffers obtenus doivent être mémorisés
cliente mobile.
dans le fichier de données "Utilisateur". serveur.

// Génère les clés de i'utilisateur
bufCléPublique est un Buffer
bufCléPrivée est un Buffer
(bufCléPublique,bufCléPrivée) = ...
CrypteGénèreCléRSA0
// Ménronse les clés
Utilisateur.ClePublique = bufCléPublique
Utilisateur.ClePrive = bufCléPrivée
,// Autorise l'acces à I'utilisateur
Utilisateur.CleActive = ÿroi
H Modifie(Utilisateu0
Pour faciliter le test de l'exemple, un fichier
de données "Utilisateur" simplifié est présent,
avec un utilisateur "demo" déjà présent.
En production, vous devez:
. modifier votre fichier de données "Utilisateur"
pour ajouter les rubriques "CléPrivée" et
"CléPublique",
. utiliser le code de génération ci-dessus.
Note: pour faciliter le test de l'exemple, les
données de test ne sont pas présentes dans
un serveur HFSQL, mais elles sont dupliquées
dans les 2 configurations (site et Webservice).
Lorsque l'utilisateur se connecte au site, la
page "PAGE-Acces-APl" lui affiche sa clé
publique au moyen d'un QR Code.
//Récupère la cle de la base
sHexa est une chaîne
sHexa = BufferVersHexa(...
Utilisateur.ClePublique)
// Convertit le buffer en clrairre
sHexa est une chaîne = bufHexa
//Genère le, code'bart'r:s
MonQRCode est un CodeBarres
MonQRCode..Typecontenu = cbïypeTexte
MonQRCode..TypeCodeBarres = ...
CB_QRCODE
MonQRCode..Contenu = sHexa
Pour faciliter la lecture du QR Code, l'exemple
'WM API Crypte" utilise le champ métier
"Lecture de code-barres".
Ce champ métier se compose de:
. un bouton, qui ouvre une fenêtre dédiée
à la capture,
. une fenêtre "FEN-CameraLectureCodeBarres"
comportant un champ Caméra paramétré
pour scanner automatiquement un code-
barres de type QR Code.
Dès que le QR Code est lu par I'appareil mobile,
une procédure callback locale à la fenêtre est
exécutée (dans notre exemple, il s'agit de la
procédure Resultotlectu reCodeBarres).
Cette procédure reçoit en paramètre une
variable de type CodeBorres contenant le
code-barres lu.
PROCÉDURE ResultatLectureCodeBarres(
MonCodeBarreLu est un CodeBarres)

doit être sauvé sur le télé-

Le code-barres lu
phone pour pouvoir crypter les appels au
Webservice par la suite.

<>
§14
o .\ ,/.
o
-\.
.\\-... -/.:."
-/-
,
A 2 - LA LETTRE DU SIJPPORTTECHNIQUE PC SOFT - N'l 'i9 '
Pour cela, la fonction fSouveBufferesl uTi- ri' Genère,Lr-: hasir (lepuis rÊtie siçn,:irrr-r li Cener'e la siçnature d'apres
lisée : sSignature = BufferVersHexa(... ;'r' iss donirees recuper-ées
HashChaîne(HA- M D 5_1 28, sSignature)) sSignatureCalculée est une chaîne
'/ Salr e t6 1lg 6jgn5 ie :eper'lc,.e
sSignatureCalculée = ...
r/ de l'application sDecrypte + sUtilisateur
fSauveBuffer(... Enfin, il suffit de réaliser l'appel au Webservice
sSignatureCalculée = ...
:.EmplacementCIePu
i; bI ique, via la fonction WLangage RESTEnvoie.
BufferVersHexa(...
HexaVersBuffer(...
HashChaîne(HA_ M D 5_1 28,
MonCodeBarreLu.Contenu)) /i Définit ia requete
sSig natu reCa lcu lée))
oRequete est un restRequête
oRequete.URL = ,.:, URL,WS + ["/"] + "test" . i5 .es sigr:31u's5 sont idenriques
Sl sSignatureCalculée = sSignature ALORS
oRequete.Méth ode = httpPost
oRequete.ContentType = ÿpe M ime Bina ire /r' Les données n'ont pas été modifiées

flâ|ff.î":.
depu rs
.// Ajoute l'utilisateLrr en entète
oRequete.Entête["Utilisateur"] =
sUtilisateur
,/l
...

La sicJrratiire géneree pr.écédemrnerrt

sir.roN
r',/ Les données
// àcres crvptaqe
ont eté nrodifiees

1/ est passée en entète

l'a pplication
c liente
Lorsque Ia clé est disponible sur le téléphone,
il est possible d'appeler le Webservice en cryp-
tant et en signant les données via cette clé.
Pour crypter les données, il faut les convertir
dans un buffer puis les crypter:
//Donnée à transmettre
sDonnées est une chaîne
sDonnées = "Mes informations secrètes"
oRequete.Entête["Signature"] = sSignature
l. Lr dOit'ree ( rypteê eit pâssee
/u' en tani qLre contenLr de la requête
oRequete.Contenu = bufDonnées
//Ënvoi r1e la reqL:ele
oReponse est une restRéponse =
RESTEnvoie(oRequete)
Décrypter
le message
FiN
Utilisation de
I'exemple
Voici les étapes à suivre pour tester l'exemple:
...
1. Déployez le Webservice du projet "WW_
API_Crypte" (configuration "Webservice") sur
un serveur ou sur votre machine de déve-
loppement.
ll est nécessaire que la machine sur laquelle
le Webservice est déployé soit accessible
depuis le périphérique mobile qui sera utilisé.

//Conversion en buffer du client sur

bufDonnées est un Buffer 2. Déployez le site Web du pro.jet "WW_
bufDonnées = sDonnées le Webservice API_Crypte" (configuration "site") ou faites
// Crypte la donnée avec la cle un simple Go depuis WEBDEV puis connec-
Quand le message est reÇu sur le Webservice,
buf Données = BufferVersHexa(... tez-vous avec le compte "demo" (mot de
CrypteAsymétrique(buf Données,
il est nécessaire de convertir et décrypter passe : "demo").
EmplacementClePu blique, les données transmises via la clé privée de
,,, l'utilisateur:
3. Dans l'application mobile "WM API Crypte",
cryptePoddingPKCSl))
modifiez l'URL d'accès au Webservice.
/,i De(rypte lô [rt.rffer de ciç,nnees avec
Cette adresse est mémorisée dans la
lmportant: pour faire transiter des données I/ la cle privée cle i'utilisateur
sDecrypte est une chaîne variable globale gsURL_WS de Ia fenêtre
binaires, il est nécessaire de les convertir
sDecrypte = DécrypteAsymétrique(... FEN_Principale.
en hexadécimal via la fonction Wlangage
HexaVers Buffer(btif Do nnées),
BufferVersHexo. sEmplacementClePrivee, 4. Déployez l'application mobile "WM API
Bien entendu, l'opération inverse devra être
Crypte" sur un périphérique mobile (Android
effectuée par le Webservice via la fonction cryptePoddingPKCSl)
ou iOS).
WLan gage HexoVersBuffer.
Lorsque les données sont décryptées, le
5. Depuis l'application mobile, utilisez le bou-
ll est ensuite nécessaire de définir une signa- Webservice doit vérifier la signature trans-
ton "Scanner la clé d'accès au Webservice"
ture des données. Ceüe signature, compo- mise pour s'assurer que les données n'ont
pour récupérer la clé publique du client
sée de la donnée à transférer et du nom de pas été altérées.
"demo".
l'utilisateuL est ensuite hashée et convertie Pour cela, il est nécessaire de:
en hexadécimale. . générer la signature à partir des informa-
6. Utilisez les boutons d'appel au Webservice
Cette signature est ensuite ajoutée en entête tions transmises (les données précédemment
pour tester.
de la requête REST. décryptées et l'utilisateur fourni en entête

// Définit une signature comprenànt

de la requête),
. comparer la signature générée à la signature
I
// la donnee et l'utilisateu. transmise en entête de la requête.
sSignature est une chaîne
sSignature = sDonnées + sUtilisateur sont identiques, cela signifie
Si les signatures
que les données n'ont pas été altérées et que
la demande peut être traitée.

LA LETTRE DU SUPPORTTECHNIQUE PCSOFT - N"\19 - 13

 .--" tæ
s{LÀNcufr'GE ,e,
WIAN L.r..Ff , r!.!_ GAG E.;;,5::rO
-r ..:.- -;,!,:,,1-Tï.:,.-'. r-.. - x.,..N:. N
1 t CTTÔ
y N rTT:É S,
: .i!A,'-'"

;p.uI§snruTEsiMnIS:,M-Éco N'N l.J ES :i

iiffiffiffin',,,',,_.'i'1{
,jtI,:..;.',.'..:,.,.-.,..',I,..'-...i':if;l:.
tr
.,, .i'-.;.,,_Ë-in ;,u,rtiï.*'
.rî;::1i:;,;i,;'l*''':
.

i., L. WLangage évolue en permanence pour permettre aux ;:' i---j,

,

de'développelê:, dévelof per plus et

EiÉOripôs. 9.. ,vite, ;i;'r-;,,1
::.avec un code compact facile à maintenir et à faire évoluer..iii; ,;i'., :

)nctronnalrtes qul
fonctionnalités gagngl du
font ga9ner
qui Ïont rempl au 9u9ti!i9n;_,,-jr...i,,1
ou Jemps
i;5§l;.;.;'':,1,r.,,1.-' ', f
';..-;à.ii.rr:
';-;'
- .,,
r,l . ,:';'_.r;...,.:
*r,,..t.-,

Hïi:iiriîii;,ii;, i*$rHi+*t{rfi*iffiffi
Simpiifier I acces aux soils-élertreirts grâce au CAS 2 - AVEC <une variable
IL{
*f I "'-:=-
Le
--
rror cleAÿECperret de'anor se'une e.p'Ps AVEC Client
structure ou objet>

MonProduit est un STProduit

AVEC MonProduit
.Nom = "PRENCES" .sRéférence ="TS-L-4593"
sion lorsque le trartement doit acceder a p usieurs
.Prénom = "Elyne" .sLibelié = "TShirt Malibu, taille L"
sous-é éments d'un même élément.
.Ville = "Paris" .moPrix = 42 20
Cette syntaxe permet d'a éger et de clarif er .Pays = "FRANCE" .sFabricant = "TAMES"
.Téléphone FIN
l'affichage, notamment pour es variables qui ="+336123456XX"
possèdent beaucoup de sous élémer^ts (structure, FIN
HAjoute(Client) CAS 3 - AVEC <un champ>
classe, XML, ...)
Dans cet exemple les rubriques du fichier de
données 'CLIENT sont affectées sans avoir à
AVEC N4otCléAVEC
CAS 1 - AVEC <un fichier de .X =0
données > préciser le nom du frchier rendant a nsi le code .Y =0
d affectation plus lisible (le nom des rubriques .Largeur = 100
HRAZ(Client)
affectées ressort nettement du code). .Hauteur = 100
FIN

=- ùal'H§E+i§,LolRffir:*iÂfle p.B§&{tS1? q:i§}'lf*, ;'l'ffi

IL Fl SLrpprimer les erreurs de passaqes de paramètres En effet, grâce aux paramètres nommes, il est
possible et lisible d'affecter uniquement
utilisant des parar"netres nnrnnrés certains paramètres.
tr /en Redémarrage(...
du paramètre 1> NomProcédure.<Nom =... "lnstallation de la version 25.3", ...
<Valeur > '1
Les paramètres nommés des procédures (ou DemainMidi)
NomProcédure.< Nom du paramètre N >= ...
rnéthodes) sont très utiles lorsque es traitements
<Valeur N >
nécessitent un nombre important' de paramètres, NomProcédure0 CAS 2: Nommage de l'ensemble
qu i s soient ob igatoires ou optionnels. des paramètres
Lorsque le nombre de paramètres est vraiment
CAS 1: Nommage des
I ex sle deu. synta,e' pour les pard-P re< nom- mportant, il est conseillé d'utiliser a syntaxe
paramètres optionnels
més : mu t ligne car el e permet à la fois un code isible
. Dans e cas de l'appel d'une procédure nécessitant
une syntaxe mono igne (les paramètres sont et ajout de paramètres.
spécifiés sur la ligne d'appe à a fonction) .
des paramètres optionnels, i est possible de ne
Reciérnarrage.sRaisonRedémarrage = ...
pas indiquer la valeur de ces paramètres et de
NomProcédu re(... "lnstallation de la version 25.3"
laisser le WLangage uti iser la valeur par défaut
< < nom du paramètre1 >> Redémarrage.dhPlanlfication = ...
< < nom du paramètre2 >> choisie par e développeur de 'app ication. DemainMidi
Les paramètres nommés sont alors intéressants Redénrarrage0
. une syntaxe mu ti gne (les parametres sont pour les procédures autorisant un nombre impor-
spécifiés avant I appel effectif à la fonction) .
tant de paramètres optionnels.

:'rrËvtn LETTRE Dr.r suppoRTTECHNteuE pc soFT - N't t 9

 ll il Extraire rapidement des ensembles de chaînes
frttJ { o une cnarne comprexe
La fonction WLan gage llérifieEryræiottRégttlièrc
permet de vérifier si une chaîne de caractères cor-
respond à un format spécifique (usage "classique').
Mais la fonction WLangage VérifieEtqression-
Régulièrc permet également de récupérer les
différentes sous-chaînes constituant un format.
CAS 1 - L'expression régulière
CAS 2 - L'expression régulière
peut définir un nombre aléatoire
de sous-chaînes (ou un grand
nombre de soüs-chaînes)
ll est alors possible de récupérer ces sous-chaînes
Dans l'exemple ci-dessous, l'appel permet d'ex-
sous forme d'un tableau.
traire le domaine de l'adresse email. Dans l'exemple ci-dessous, l'appel permet de
Pour cela, la partie de I'expression qui définit le récupérer chaque composante d'une référence
domaine est incluse entre parenthèses produit de la forme 'AA-AAAA-AA-9999" (les
sDomaine est une chaîne composantes sont séparées par un tiret).
VérifieExpressionRég ul ière{... tabComposantes est un tableau de chaînes
"info@precilia.fr",... VérifieExpressionRég u ière(...
I

"[-_.a-20-9] + [@]([-.a-20-91+ [.][a -2112,4l,1",... "TS-VERr-XL-2542", ...

définit un nombre restreint et sDomaine) '(A-zl{2»-(n-a {47»-(A-zl{1,4})-(0-eil40"...
déterminé de sous-chaînes tabcomposantes)
Dans ce cas, il est possible de récupérer ces sous-
chaînes dans des variables dédiées.

JL I Réaliser des tris avancés ou spécifiques sans Exemple: trier un tableau de

chaînes par longueur de chaîne
Ia roue"
1+ $"réinventer tabMots est un tableau de chaînes = ...
[Jet", "plage', "vacances",
.soleil",
Joie.]
La fonction Wlangage TobleouTrie permet de . Si l'élément 1 doit être situé avant l'élément 2 TableauTrie(tabMots, ttFonction,...
trier rapidement tout type de tableau (tableau dans l'ordre de tri, la procédure doit renvoyer -I. TriTableauParLongueu r)
de ÿpes simples, de structures ou de classes, . Si l'élément l doit être situé après l'élément 2 PROCÉDURE TriTableauParLongueur(...
tableau associatif, ...). dans I'ordre de tri, la procédure doit renvoyer t. sElément1 est une chaîne,...
ll existe cependant une syntaxe permettant de .Si l'élément et l'élément 2 sont identiques,
1 la ' sElément2 est une chaînê)

trier un tableau selon un tri personnalisé, défini procédure doit renvoyer 0. ,4 Si la longueur de l'élément 1 est plus petite
par une fonction WLangage. // que la longueur de l'élément 2, l'élément 1
Cette fonction sera appelée pour comparer // doit ëtre situé avant
chaque élément du tableau 2 à 2 et ainsi trier le Sl Taille(sElément1) < Taille(sElément2) ALORS
Fonctionnement de la procédure tableau comme attendu. RENVOYER -1
WLangage utilisée par !e tri
// Si lalongueurde l'élément 1 est plus grande
La fonction de tri attend 2 paramètres, qui cor- L'exemple "WD Wlangage LST119" présente la // que la longueur de l'élément 2,
respondent à 2 éléments du tableau à comparer. réalisation de deux tris personnalisés: // l'élément 1 doit être situé après
Sl Taille(sElément1) > Taille(sElément2) ALORS
PRoCÉDURE TriTableauPersonnalisé(... . un tri "basique" selon la longueur de chaînes
RENVOYER 1
sElément1 est une chaîne,... sur un tableau de chaînes.
sElément2 est une chaÎne) . un tri "multi-critères" sur un tableau de struc-
// Si les 2 chaînes sont de longueurs identiques,
// iltaut les trier par ordre alphabétique
La valeur renvoyée permet d'indiquer la position tures. RENVOYER ChaîneCompare(...
de l'élément 1 par rapport à l'élément 2: sElément1, sElément2, ccSonsCosse)

Définir des fenêtres de dialogue ou de // Demande confirmation à l'utilisateur

Sl Dialogue(sQuestion,
saisie entièrement par programmation [sRéponsg "Annuler'], 1,2) = 1 419p5
(personnalisation complète) // Effectue la suppression
La fonction Dialogue permet d'afficher une CAS 1 - Questions et réponses variables FIN
boîte de message à l'utilisateur avec plusieurs
// Selon le nombre de clients à supprimer,
choix de boutons. // personnalise la question et la réponse CAS 2 - Nombre de boutons variables
La fonction §oisie permet de demander à l'uti- sQuestion est une chaîne Dans certains cas, il peut également être utile de
lisateur de saisir une valeur. sRéponse est une chaîne
personnaliser le nombre de boutons (par exemple,
SELON nNbClientsASupprimer
Lors de leur saisie dans l'éditeur de code, les cAs 1
pour proposer une option supplémentaire à un
fonctions Dialogue et §oisie ouvrent un assis- sQuestion = "Supprimer le client ?" administrateur ou en mode test).
tant dans l'éditeur de code pour permettre de sRéponse = "Supprimer le client"
Dans ce cas, il suffit de fournir la liste des boutons
définir visuellement la question et les boutons
sous la forme d'un tableau.
disponibles. AUTRE CAS
sQuestion = "Supprirner les clients ?" nRéponse est un entier =...
Si les libellés ou les boutons sont amenés à être sRéponse = "Supprimer les Dialogue("Accéder au site ?", tabRéponseq...
modifiés dynamiquemen! il est préférable d'utili- [%nNbClientsASupp%] clients" 1, tabRéponses..Occurrence)
ser la syntaxe "directe" (n'utilisant pas l'assistant). FIN
Attention: dans ce cas, la gestion des réponses
L'exemple 'WD Wlangage LST119" présente doit être effectuée avec prudence car le nombre
ptsieurs cas d'utilisation des syntaxes en saisie de réponses à traiter est variable.
tu_ I
 icrosoft propose. en re at on avec AP depu s acresse https.,i,'azur.e.n.r crosoft restReq.Contenu = [
son service Azure, une AP . clas o - ',-'r 5e . .e- .oq^ I .ô <e,. .e, {
"documents":I
sée dans es Cogn tive Services, text ana yticsr c iquez sur le bouton Essayer
{
nommée Ana yse de texte . Ana yse de texte
"tD":1,
Cette API permet d analyser des textes. Lobtent on de a cle neressite d étre connecte "Text":"Bonjour tout le monde."
. sens du texte,
. extractions de mots-c és,
avec un corrrpte Microsoft. )
l
àj
Deux c és soni fourn es. une clé princ pa e
i
. détectron de a angue,
i ce 1 ) et une cé de secours ( cle 2 ). l
-d .le p'' pAeoe.'do'orO-'neêJ .O-DO
Ces fonctionnalités peuvent ètre part cu ie sant nterne ivoir e paragraphe Util sation ). restRep est une restRéponse = ...

rement utiles pour ana yser, par exenip e es R ESTE nvoi e( rest Req)

réponses à un sondage en cas de texte ibre Principe lmportant

. quel es sont les dées (mots c es) irnpor. Le contenu transrr s correspond à un tableau
tantes du texte ? LAP Analyse ce texte est Lrne AP Web. ce
au fornrat ISON dont chaque é érnent répré
. la réponse est-el e posit ve ou negat ve ? service est dorrc fac ernent man pulab e en
sente un texte a ar-ralyser ('Text ) auquel un
WLangage a a de dr-r Iype restRequête er
ident f ant est attribue ( lD ).
de a fonct on RESTEnvoie
L exerrple 'WD Analyse texte propose un est en effet possible de transmettre plusieurs
composant interne conrplet pennettar-rt d ac Par exerrple pour oÊ:erar r.ler Ia angue d un textes en un seul appei.
ceder à 'APl. texte Le forrnat de la réponse reprend a même
Le composant nterne de I exenrp e reprerrd structure (tableau au fornrat.l5ON), avec
également les accès a
AP Face fourn s restReq est une restRequête pour chaqr-re réponse I identifrant du docu
en LST 112 restReq.URL = "https.//r,vestcentralus.api. rnent assoc e
cog n itive. microsoft.com/text/ana lytics/
v2.1 /la ng uag es'
Prérequis restReq.Métho de = http Post Utilisation
Avant de commencer a ut I ser I exemple,
est nécessaire d'obtenir une c é pour uti iser
restReq.ContentType = typeM imel SO N
Le composant
API contlent une
nterne Microsoft Cognitive
co lection de procédures
o
16 - LA LETTRE DU SUPPARTTECHT\.|QUE PC SaFT - N' î 9
 Nous avons passé 4 nuits magiques dans un bungalow
plage au mois de janvrer. La chambre était tout simplement
parfaite. Nous avons également énormément apprécié
la salle d'eau (avec des matériaux locaux) et son jacuzzi
privé qui nous attendait après les séances de plongées.
L'ensemble du personnel est très accueillant et sympathique.
Séjour parfait, nous revrendrons certainement bientôt !

est uD Ê:
APlVerif ieAttend

''i i :lare aje !aiti I'e,rl

Remarque

est une clialre -.: : .r' .:,. ChOîne

:::,tableou
(

.: a: i.i':"'- ::

-';i : .-,i r tr
ELongueCog nitiveAPl
i l: - rr:1. ir.- È,*
'.., APlTextAnolytics' TextAnolytics.AnalyseSentiment
=
D

17
 WINDEV WEBDEV
I-
INTEGREZ DANS VOS APPLICATIONS
DES UI VUES AU WINDEV TOUR
Pendant le WINDEV TouL plusieurs exemples
ont été utilisés pour présenter les nouveautés de
WINDEV 25, WEBDEV 25 et WINDEV Mobile 25.
Vous êtes toujours nombreux à nous demander
comment réaliser certains aspects graphiques
utilisés dans ces exemples.
Ce sujet présente 4 looks de fonctionnalités issus
du WINDEV Tour 25 que vous pouvez retrouver
dans l'exemple "ExemplesLookWT25".

Lobjectif de cette animation est de decaler le

Réa lisatio n champ orsqu i est survolé pour le mettre en
MoiMême..X = MoiMême..Xlnitial
avant. La perte de survol repositionne e champ
d'un menu à son emplacement d'origine. FIN

Dans notre exemple, les traitements sont modifiés

animé sobre dans la procédure CodeMenuAnimé.
Réutilisation
Pour utiliser ce type de menu dans un projet
Le menu proposé dans lexemPle PROCÉDURE INTERN E ProcEntréeSurvoI
existant, les étapes sont les suivantes:
"ExemplesLookWT25 est un menu pour appli-
1. Copier un bouton du menu existant dans
cation WINDEV d'aspect sob,re mais legèrement AnimationJoueSurPropriétéChamp(...
votre fenêtre (pour référence), dans une positton
animé. MoiMême, "X", MoiMême..Xlnitial,...
MoiMême..Xlnitial - 50, 400ms) identique à l'exemple (à droite de la fenêtre, avec
Les couleurs proposées (noir et or rose ) donnent
débordement d'au mo ns 50 Pixels),
un aspect haut de gamme renforcé par les légères FIN
2. Dupliquer ce bouton pour obtenir le nombre
an matrons et par des arrond s.
PROCÉDURE I NTERNE ProcSortieSurvOI de boutons nécessaires.
Les boutons sont vo ontairement partiellement
3. Ajouter chaque bouton dans un groupe 'GR-
sortis de la fenêtre pour simuler un aff chage
venu' rsi le gro"pe n e\tste pas encote)
'onglet" avec mise en avant de I onglet survolé.
AnimationJoueSurPropriétéChamp(... 4. Coo;er ,a procedure CodeMenuAnimé dans
Les ut lisateurs ne sont alots pas perdLts face à MoiMême, "X", MoiMême..X,... la fenêtre.
l)
I interface car ils retrouvent un concept connu. MoiMême..Xlnitial, 200ms) 5. Exécuter la procédure CodeMenuAnimé dans
I événement "Fin d'initialisation' de la fenêtre.
Aspect graphique des boutons
Pour obtenir cet aspect graphique, voici les
modifications réalisées depuis un bouton
'standard'.
. suppression de l' mage de fond du bouton,
. modification du cadre pour le mettre en
"Arrondi bords transparents'.
. modification de la couleur de fonc (or rose)
et de texte (noir),
. ajout d une image à plat (thème 'Android
Lo lipop') noire (luminosité barssée au m nr
mum, -'100%), 9 Rapponannuel2olg
. positionnement 'iibre' de I image et du texte
pour que f image soit centrée dans l'arrondi). B ÿtrkproduits

Animation des boutons ts Mâquette publamé

L'animatron des boutons est réalisée par pro-

grammation à I aide de la fonction WLangage
IB catalogue 2020
Anim atio nJ ou eSu r P rop riétéCh a m p.

1A - LA LETTRE DLl SUPPORTTECHITIQUE PC SOFT - N'I I9

 Réalisation
d'u ne
visuelle BonaprteAirprt ÀrA
jac ciolHapotéen Bonaparte, FRA
Habituellement, pour proposer une liste de choix,
les développeurs utilisent un champ Combo.
Dans l'exemple "ExempleslookwT2s", il a été
kir8sruvab]ËÉfiÉrpüt WA
B*arar*irdTitlÉ, F§.À
choisi d'utiliser un champ Zone répétée sous un
champ de saisie.
Charle dÊ C,adle lnterrntkrnl Ærport
L'utilisation du champ Zone répétée permet de
proposer un choix plus visuel qu'une simple saisie
kris, FRÀ
assistée: plusieurs libellés, images, etc.
Cewrtüb Spüidüsg kernüXndÂ*rpt
Réalisation Éreenvitk, *§Â
L'interface contient par défaut un unique champ
de saisie. Le champ Zone répétée est placé en
dehors de la fenêtre (attention aux ancrages en répétée est: // Actualise le champ
cas de fenêtre redimensionnable). . positionné sous le champ de saisie (modification ActualiseListe0

Note: ll peut y avoir d'autres champs sous le

des propriétés ..X et..Y, //At{iche le champ
. rempli à partir du texte saisie, ZR_Aéroports..Visible = Vrai
champ de saisie.
. affiché (..visible). Selon le nombre d'éléments dans la liste, la hauteur
Fonctionnement // Positionne le champ en X et en Y du champ Zone répétée est également modlfiée
ZR_Aéroports..X = 5Al_DE..X pour afficher au maximum 5 lignes.
À partir du 3ème caractère saisi, le champ Zone
ZR*Aéroports..Y = SAi,DE..Y+ SAI_DE..Hauteur

sivement en survol afin de renforcer la légèreté -Tæ x

Réalisation
d'un menu
Web latéral
Le menu latéral (WEBDEV) proposé dans Iêxemple
"ExemplesLookWT25" dispose d'une interface
volontairement allégée.
. Les couleurs proposées (rouge et blanc) sont
très épurées.
. Le menu sélectionné est mis en avant par un
changement de couleur en rouge.
. L'ascenseur est plus fin (6px) et visible exclu-
6 Tableddebord Meubl:
de l'ensemble (c'est une nouveauté de WEBDEV
25 qui est configurée dans l'onglet "Style" de la
cellule "CELL_Gauche" dans l'exemple).
. Le look des options de menus est lui aussi sim- Q rr*o Meubles Toutes les agences
'
plifié: une simple image avec un libellé, l'image
étant bien entendu en lien avec le libellé.
Les champs représentant une option de menu sont
disposés dans un champ Zone répétée (chaque
répétition est une option de menu).
Pour utiliser ce "menu" il est nécessaire d'intégrer
le modèle "PAGEMOD_Menu" dans les pages et
de surcharger I'option correspondant à la page en
cours (comme dans les pages "Page_MenuXXX").

n Rearisation
o'une ooouo de
f saisie d'email
-
La saisie d'email est une opération cou-
rante dans une application Web. L'exemple
"ExemplesLookWT25" présente une popup de sai-
sie à l'interface actuelle et facilement réutilisable:
. Utilisation du champ de saisie riche (le contenu
du champ est en HTML). Notez qu'il est possible
d'intégrer une image dans ce champ par un
simple "drag and drop" puis de manipuler l'image
(rotation, recadrage, etc.).

io . Utilisation de boutons de couleurs vives (rouge)

pour les faire ressortir dans la page.
. Renforcement des marges des champs de saisie
// Afftche la popup
Popu pAff iche(PO PU P_Email,pop u pCentre)

pour mettre en avant les champs à remplir.

LA LETTRE DU SUPPORTTECHNIQUE PC SOFT - N'I I9 - 19

 WINDEV

MAGNETISME INTELLIGENT EN 25:

3 CAS DETAILLES
En version 25,|e magnétisme entre les champs fait sa révolution: il propose
désormais des comportements intelligents permettant de gérer tous les cas
d'alignement et ainsi vous faire gagner du temps lors du design des Ul.
Cet article présente 3 cas d'utilisation pratiques du magnétisme intelligent.

Bouton "Parcourir": naturellement collé et centré

I Le magnétisme intelligent permet de coller un
champ à un autre champ, c'est-à-dire de ne laisser
aucune marge entre les 2 bords des 2 champs.
Fk*rhr à importer : e\rfinrtoire\fidthr,ext Un cas d'illustration simple est un champ de saisie
"Fichier / Répertoire" et son bouton "Parcourir"
V (représenté par le pictogramme [...]).
Le trait pointillé du magnétisme permet de centrer
le bouton avec le champ de saisie.

v
ffi
- ffi
>citrier-iimporter-l -eVqlcrbir€\fi€hier.c.*t --
- -

V
Fülrier à importer : c\réperbire\fidrhr.ext

Légende
Lors du déplacement d'un champ, le dessin du magnétisme intelligent indique le ÿpe de magnétisme qui sera appliqué:

. les hachures représentent une marge entre . le trait plein représente un alignement sur . le trait pointillé représente un alignement
champs. Cette marge unique permet d'avoir un le bord d'un champ. sur le centre d'un champ.
espacement toujours identique entre tous les
champs, pour une Ul harmonieuse.

lmpoftant: les fonctionnalités du magnétisme intelligent sont disponibles dans tous les éditeurs (fenêtres, pages, états, ...) !

20 . LA LETTRE DU SUPPORTTECHNIQUE PC SOFT - N'I I9

 Libellé "note" : parfaitement aligné sur la zone de saisie
7)
I
Cas
Le magnétisme intelligent permet d'aligner un champ par rapport à la zone de saisie d'un champ de saisie. Ce nouvel alignement
permet de positionner correctement un champ (une note, une jauge, ...) en l'alignant précisément au bord gauche de la zone de saisie.

Cas 2
F+ofir du cûrrtpte : ex : elyne.prences À{ot de Fasse: @

inutite de précis,er §<domaine>-

V

ex : e§me.prences

tctêt d€ pèsse : r Ç
V

bhr* du compte : ex : eÿne.prences

inutite de préciser ?<domainee' -

Groupe de champs: espacement automatiquement homogène

Dans un groupe de champs pour lequel un espacement personnalisé a été appliqué, l'ajout d'un nouveau champ est malntenant évident!
Le magnétisme intelligent calcule en effet les espacements remarquables du groupe pour les afficher lors du déplacement du nouveau
champ. L'exemple ci-dessous montre 2 groupes de 3 boutons. Ce groupement possède 2 espacements remarquables: l'espace entre les 2
groupes (34 pixels) et l'espace entre chaque bouton d'un groupe (12 pixels)

Avant le déplacement, le bouton "Outils" 2. Pendant le déplacement, si la position 3. L'espacement entre 2 boutons est également remar-
'1.

n'est pas aligné avec les groupes existants. courante respecte l'espace existant entre les
quable, et donc mis en avant lors du déplacement.
2 groupes, le magnétisme le met en avant. ll
ll est alors possible d'ajouter le bouton au 2ème groupe.
est alors possible de créer un 3ème groupe.

LA LETTRE DU SUPPORTTECHNIQUE PC SOFT - N'I I9 - 2A

 '1

râce au champ lmaqe de des boutons de retablir I mage en parcourant Le composant interne 'OutilDess n" contient
WINDtV l'/obi e et d-. lonct on' le tab eau de l hrstor que. également:
de oessi^ du WLa^gage lçssire' Bien entendu, pour des raisons évidentes de . une fenêtre de paramétraqe du tracé,
dans une application mobrle est consommat on menroire, il est r'écessaire de . une fenêtre de sélection de couleur,
l miter e nombre de sauvegardes / nombre . deux co lections de procédures pour gérer
une opération simPle.
ll reste alors la question de l'Ul proposee de u'oo têIot,' o ' tôrê perm ) les fonctionnal tés des modèles de champs,
. deux classes permettant de gérer les diffé-
aux utllisateurs pour qérer les différentes
fonctionnalités nécessaires à la réaltsation Dans exemp e, t h stor que est implémenté rents outils de dessin.
d'un dessin / croquis / schéma. avec une l m te par defaut de T5 états sau-
vegardes. CettÊ llm te peut être paramétrée lntégration complète
par 1a constante g obale gnMemoireMox. Pour intégrer l'ensemble des fonctionna ités
Principe dans une appl cation existante. il suffit d im
L'exemple "WM Dessin" utilise les fonctions Définir des outils porter le composant nterne 'OutilDessin'
de dessin dXXX dtt Wlangage pour tracer Les drfférents crayons sont matérral ses sous puis d intégrer e modè e de champs MDLC-
des formes sur une image. forme de classes assoc ees à un modèle de App iDessin dans a fenêtre c ble.

L exemple 'WM Dessin" est composé de: champs afin de pouvoir proposer plusieurs
. un champ lmage qui sera modifié au toucher outi s ayant des proprétés différentes, par lntégration uniquement du
exemple un n-arqueur'1aune, au trait épais "Undo / redo"
de lécran (au doigt ou à laide d'un stylet),
. plusieurs outils permettant de modifier la mais transpa[ent. Si vous voulez permettre I ut lisation de his-
torique, la collection de procédures'COL
couleur, l'opacité et la taille de I'outii de dessin,
. une gestion de l'historique qui permet de Dans l exemp e Wh/ Dessin 3 nstances outi s UndoRedo contient toutes les procédures
re atives à a manipulation d'un h stor que.
revenir en arrière en cas d'erreur,
. des fonctionnalités de suppression ou d en-
sont déf inies ar,'ec leurs propr etés respectives.
Ces propriétes peuvent errslite etre nrod f ees
'e -
1. Ajoutez un aope à AjoutHistorique arx t)
registrement.
.Ae.eerlôu'Oero.lo.' Pr'- endroits oÙ vous vou ez enregistrer un nouvel
etat à sauveçlarder (en généraL, dans es évé-
nements reâché duchamplmage, MG-Note
Mise en æuvre Réutilisation page).
dans I exemp e, et à | initialisat on de 1a

Dessiner sur un champ lmage Le composant tnterne'OLttiiDess I es: co"l-l Aiortii is ic ric ue(d SauvelmagePNG (...

Pour modifier l'image, ilfaut commencer par

posé de plusieurs modè es de chamos :or liote ,en Mé moire))
autoriser le dessin sur le champ lmage avec a respondant à ces fonctionnalites
. gestron du 'Undo / redo 2. Reprenez es boutons flèches (Undo et
fonction WLangage dDébutDessin. ,

Redo) de la fenètre exemple ou utilisez

. gestion des outils de dessin (ta le ocac'tei
des boutons personrralisés en appelant es
. gestion des cou eurs de dess n.
Dans ie code de survol et de toucher, le
traitement réalise le tracé avec la fonctlon
dLigne eT les coordonnées dL toucher. C est
lors de cet appel que sont défin es.
.
.
.
la couleur,
la taille,
l'opacité dr-r tracé.
€a

FË
"9
OæII -:à
50
Ajouter un historique
Pour implémenter un historique, il suffit de
sauvegarder l'image dans un tableau d'images IJndo/redo, taltle de crayon, opacité et régLoge de [a couLeur
après chaque modification et de permettre, via

22 - LA LETTRE DIJ SUPPORTTECHNIQUE PC SOFT N"I I9

-rl

tonctionr.r itls [.lnc]o i'1 Rr'(la al., ( (,rr I lntégration uniquement d'un EXemple
Inter nc. support de dessin
'\, I

0 ! .r 1,. .. - aits! , i .r:

l

lntégration uniquement de la 'i't'atta' r'i .i)tt\ !, . l

barre d'outils l. :.
(r',:t',: lr,rrrrl.s l,'L-rLL
6,M
M.
t 'llL ili r

LrL,rrlt i'l1,rt ,'( ) ,: .' I rarrllllo5nilt Personnalisation des outils

h s[
rl,rrr',,,.Irt' 1r t, l', LF
ia,l i1 iIi,

:,etlll,ll"
. , ..

,
I.

.:-,'.r' " .,:r

I
#,
- r$s Lr,'rltlr,a, alr l, ,r
i't rlol]l irl.r,ri t( .r l.i
(,ll(,( lr,ilr(tt,i'\
W,, {-
qÊ*.

-f
""# - ïc
tuffi Ll:
i{iffi{
fuu
''\
etr|."

hs&kTr
hü.f
"fr*t-
\Yl,{ l,{esserrger WlllDE\./ À\obile 25 l'{esserrgPr (or]ligur atr,l
Do;r ciei-rcouer cirecterrent sur r-rr-r llerillherique Android, il suffit *%:
['#1.1
cr .rt I ser le nouveau cho x cle \'VINDEV Moblle 25: 'Déboguer sur
hb..T
;pparerl rrobile' .

Le periphérique à uti iser do i aLr pr.ea able être connecté à l'ordinateur Wi;
I

r
tl Déboguer sur appareil nrobile
et permettre e debogage.

l'.lote. lors du 'Go, une apDr cation spécifique est générée sur le
ffi:Ë
,jo*&.,,

ffi
L'
péripherique afin Ce ne pas ecraser ou perturber les données de
: l.r^r,., .,..,'L:tt-r. I.:.,.,'-- :: : :t . -.-
1'application fina e' qu peut être présente sur le périphérique.
Iii:.:1 ,; .,'.':rr- ::c::-i .' :,' r ::-e :1.'
\= L application lors d.r Go a alors pour nom GO <NomApplication>'.

En cas d utilrsatron de notifications Push, il est donc nécessaire d'activer

ce 'second nom o'appl cation (cf copie d'écrarr ci dessous). ffi
ffi
'#.';
LA LETTRE DU SUPIORTTECHNIQUE PC SOFT. II'1 19 - 23
ffiË

| ,/' des procédures. ll est également possible d'enregistrer un scénario de test
qui va manipuler les fenêtres, cliquer sur les champs, etc.
dk**--_
Pour ce type de scénario, il peut être intéressant de contrÔler le rendu visuel
des fenêtres affichées, pour vérifier qu'une Ul est toujours correcte.
INDEV permet de créer des
tests automatiques de va i-
dation et de non-régression
pour les projets.
ll est possib e de créer un test
. pour une fenêtre spécifique,
. pour toute une application,
. pour une procédure,
Dans le cas d un test sur une fenêtre ou une
application complète, il peut être intéressant
de vérifier 'visue lement" le rendu des fenêtres
(par exemple si a fenêtre utilise un champ
Disposition qui affiche/masque des champs).
L exemple 'WD Test Capture [crar' montre
comment rnettre en place une vérification
visuelle dans un test existant pour vérifier
si l'affichage d une fenêtre est identique à
l'affichage attendu.
Principe
Pour tester le rendu visuel d une fenêtre lors
d'un test, le principe est d enregistrer dans un
premier temps une image témoin (ou étalon
de comparaison) en jouant le test.
L'image témoin est mémorisée physiquement
sur le disque.
Lorsque le test est rejoué par la suite, le rendu
visuel de la fenêtre est comparé à l'lmage
24 - LA LETTRE DU SUPPORT TECHNIQUE
témoin. s les 2 images sont différentes, une
erreur est générée dans le test.
Mise en æuvre
La fonction WLangage dCopielmogeFe'
nêtre permet d obtenir très facilement 'image
correspondant à une fenêtre actuellement
affic hée.
CaptureFenetre est une lmage
CaptureFenetre = dCopielmageFenêtre(...
Exemple, dSonsOmbre)
En mode "enregistrement", I image est sim-
plement sauvée dans un fichier sur e disque
pour servir de témoin.
Temoin = fRepExe0 +"\FEN-Exemple.png"
dSauvelmagePNG(...
CaptureFenetre, Temoin)
En mode "test". la capture effectuée est com
parée au fichier mémorisé lors du passage en
mode'enregistrement'.
Pour déterminer s'il existe des différences,
les images sont comparées pixel par pixel.
PC SOFT - N'I I9
SUT
POUR i = 1 -À- lmageTémoin..Largeur
POUR j = 1 -À- tmageTémoin..Hauteur
Sl lmageTémoin..Pixel[ij] < >
imagevariante..PixelIi,'J] ALORS
r,, 1,, r i,,, ,t 'i l:'
NbDifférences+ +
FIN
FIN
FIN
Si le nombre de prxels différents entre les 2
images dépasse un seuil (paramétrable), les
images sont considérées comme différentes et
le test génère une erreur (fonction WLangage
TestEcritRésultot\
TestEcritRésultal(te r E r re u r, ...
"La fenêtre ne correspond pas à son
témoin")
Attention: pour comparer les captures de
fenêtres entières, il faut prendre en considé-
ration les bordures de fenêtres. En effet, les
pixels en bordure dépendent du système et
peuvent donc varier d'un poste à | autre (si les
tests sont exécutés sur des postes différents).
I
 t. lmporter la collection de procédures "COl_VérificationCapturesFenêtres" dans le projet.
ï,
2 Enregistrer le test sur la fenêtre ou I'application (si nécessaire). Pour enregistrer un test, depuis le volet "Tests automatiques", dans le groupe
Tests', cliquez sur le bouton "Nouveau".
N
l.]Ir
3. Dans le code du scénario de test, ajouter un appel à la procédure pour chaque fenêtre à tester "visuellement". ï,
-- Scenario du test Monïest
Procédure MonScénario0
//Eflectue une capture de la fenêtre principale
VérifieCaptureFenêtre(F EN_Principale)
F
// Clic sur le bouton d'accès à la fenêtre client
PiloteSou ris(F E N_Principale. BTN_AccèsCl ient, psC licGo u che) 5
// Scénario à exécuter lors de l'ouverture de la fenêtre FEN*Clients
o
z
SUR FEN-Clients FAIRE
// Ellectue une capture de la fenêtre des clients
VérifieCaptureFenêtre(FE N-Clients)
// Ferme la fenêtre
Pi loteSou ris(FEN_Cl ients. BTN_Fermer, psClicGa u che)
FIN
// Ferme l'application
PiloteSouris(FEN_Principale.BTN_Fermer, psClicGauche)

4. Pour indiquer que le prochain test est en mode "enregistrement", il est nécessaire de positionner la variable gbEnregîstrementde la collection
"COL_VérificationCapturesFenêtres" à ÿroi. Pour faciliter les prochains enregistrements, nous vous conseillons de positionner cette affectation
dans l'événement "Déclaration des globales" du test. m
// Enregistrement des interfaces
z
COL_VérificationCapturesFenêtres.g bEnregistrement = Foux

5. Par défaut, les images témoins sont sauvées dans le répertoire d'exécution de l'application. ll est possible de personnaliser ce répertoire en
7
m
mod if ia nt si m plement la v ariable gsRépe rtoireTémoin.

//Répertoire de stockage ô
COL_VérificationCapturesFenêtres.gsRépertoireTémoin = "C:\Mes tests automatiques\MonApplication\"
I- tt
6. Lancer un "Go" du test automatique: le test va se dérouler et enregistrer une image pour chaque appel à VértfteCaptureFenêtrc.
+
Si une erreur survient pendant l'enregistrement d'une image témoin, une erreur sera générée dans le compte-rendu du test.

Remarque: si une fenêtre met un certain temps à s'afficher (temps d'initialisation plus long que les autres), il est possible que la capture de
l'image ne s'effectue pas comme il faut. En effet, lors de l'appel à VérifieCoptureFenêtrc,la procédure effectue une pause avant d'effectuer
7
m
la capture. Par défaut, cette pause est de 1 seconde. ll est possible de modifier cette temporisation pour:
. toutes les fenêtres, en modifiant la variable globale gduAüente,
m
//lemps d'attente d'affichage des fenêtres par défaut
COL_VérificationCapturesFenêtres.gduAttente = 2s
. une fenêtre particulière, en ajoutant la temporisation souhaitée en paramètre à VérifieCopturcFenêtre.
z{
=

//Eilectue une capture de la fenêtre principale, en attendant 5 secondes

VérifieCaptureFenêtre(FEN_Principale, < duAttente > :5s)

(l
7. Après enregistrement du test lorsque toutes les images témoins sont disponibles,lavariable gbEnrcgisfremeaf doit être repositionnée à fuux.
De cette façon, les prochains lancements de tests automatiques effectueront un contrôle des fenêtres par rapport aux images témoins.

8. Lancer le go du scénario de test, comme pour un test "standard".

Les appels à VérifieCopturcFenêfie vont analyser la fenêtre affichée par rapport à l'image témoin:
. si I'image de la fenêtre est correcte, une information est ajoutée dans le compte-rendu.
+
m
. si l'image de la fenêtre présente trop de différences par rapport à l'image témoin, une erreur est ajoutée dans le compte-rendu. Cette erreur VI
indique le pourcentage de différences de I'image ainsi que le chemin vers l'image de la fenêtre détectée comme "en erreur".
{
Remarque:en cas de succès, il est possible de désactiver l'ajout de l'information dans le compte-rendu.
ll suffit de renseigner la variable globale gbAffichagelnfo à fuux.
m
//Allichage des informations en cas de succès
{
COL_VérificationCapturesFenêtres.gbAffichag elnto= Vroi
ô
9. Si des différences de fenêtres ne sont pas remontées dans le compte-rendu ou si une image est au contraire détectée comme différente o
alors qu'elle est très proche voire similaire à l'image témoin, il est possible de modifier le seuil de tolérance aux différences.
ll suffit de modifier la variable globale gn§euilTolérance. Cette valeur est exprimée en "pour 10 000 pixels". Par défaut le seuil est fixé à 10
(soit 0,1% de différences tolérées). Le seuil peut être modifié globalement pour un test ou pour une fenêtre particulière (il suffit de modifier la
z{
valeur du seuil avant et après l'appel à VérifieCapturcFenêtrc).
//Augmente le seuil de tolérance
COL_VérificationCapturesFenêtres.g nSeuilTolérance = 1 00
o
v
l-
U LETTRE DU SUPPORT TECHNIQUE PC SOFT _ N"I I9 - 25
m
 WEBDEV
\
EBDEV : ÉCRIRE 2 FOIS Mô INS
: CODE GRÂCE AU CODE M IXTE
Web, le code se partage entre le navigateur et le serveur: c'est une
tion fondamentale de ce type d'application.
Avec WEBDEV il est possible de créer des procédures qui peuvent être
exécutées à la fois en navigateur et en serveur: ce sont les
procédures mixtes. Cet article présente un cas d'utilisation.
n WEBDEV un code peut être exécuté Procédure mixte
soit directement par le navigateur
(côté client), soit sur le serveur. Création
La création d'une procédure mixte ne diffère
Lorsque la saisie d'un utilisateur doit être pas d'une procédure navigateur ou serveur:
vérifiée, il est généralement préférable de il suffit d'utiliser le menu contextuel du volet
faire une vérification côté navigateur dans "Explorateur de projet" ou du volet "Code"
un premier temps (pour éviter d'effectuer un et de sélectionner l'option "Nouvelle procé-
aller-retour serveur sur des vérifications stan- dure mixte".
dards) puis une seconde vérification côté ser-
veur (au cas où les données navigateur aient Modification
été modifiées). Dans ce cas, il est nécessaire Sous l'éditeur de code de WEBDEV le bandeau
de disposer de 2 procédures: une procédure de chaque procédure permet d'identifier rapi-
dement le ÿpe de la procédure [Fig. 1] via:
navigateur et une procédure serveur.
. le sigle situé en début de bandeau (S pour
ll arrive régulièrement que les vérifications
Serveu[ N pour Navigateul M pour Mixte),
en navigateur et en serveur soient stricte- . la couleur du bandeau (
ment identiques. Dans ce cas, pour éviter une
pour Serveu;
vert foncé pour Navigateu; vert clair pour
duplication de code, il est possible d'utiliser
Mixte).
une procédure "mixte", qui peut s'exécuter
à la fois sur le serveur et sur le navigateur. Pour modifier Ie ÿpe d'une procédure exis-
tante, il suffit de cliquer sur le sigle et de
L'exemple "SaisieAvecVerifi cation" propose un
sélectionner le nouveau ÿpe dans le menu
modèle de champs pour contrôler une saisie
contextuel [Fig. 2].
(une adresse lP) à l'aide d'une procédure mine
et mettre en évidence le résultat du contrôle.
Code spécifique
Remarque:des modèles de champs WINDEV Une procédure mixte peut s'exécuter à la fois
etWINDEV Mobile équivalents sont également sur le serveur et sur le navigateur. ll est donc
disponibles dans l'exemple. impératif que le côde de cette procédure soit
compatible: il doit fonctionner à la fois sur le
serveur ET sur le navigateur.
r.vÈua et nauigatetrr
uérifier
.;:'1-,;.i::*fÉ*1 X*ÈffÈa, '' ', *k, sinon le EÊssaeÊ d,errÊur
"rt
VerifirationÂdrÈsseIPtl(fAl ;lP est lffi chaÏne) : Ehaine
DU SUPPORTTECHNIQUE PCSOFT- N"I I9
!
Si le code contient un
appel d'une fonction
WLangage disponible uniquement sur I'une
ou l'autre des cibles (par exemple, un appel
à une fonction Hroor, disponible uniquement
en serveur), une erreur de compilation sera
bien entendu affichée.
Si la procédure doit exécuter un code spé-
cifique serveur etlou un code spécifique
navigateu; il est possible d'utiliser la syntaxe
suivante:
<Sl Navigateur>
// Code à exécuter uniquement
// surle navigateur
<FIN>
<Sl Serveur>
// Code à exécuter uniquement
// surle serveur
<FIN>
Principe de l'exemple
L'exemple propose de vérifier la saisie d'une
adresse lP pendant la saisie de l'utilisateur.
La vérification comprend
:
. vérification "syntaxique" de
la la saisie (taille
de la chaîne, format, ...),
. le test (ping) de l'adresse lP.
Pour éviter de bloquer l'utilisateur lors de la
saisie, il faut effectuer une vérification asyn-
chrone, via une procédure timer.
// Supprime le précédent timer
Sl gnlDTimer <> 0 ALORS
FinTimer(gnlDTimer)
FIN
// Lance un timer
çnlDTimer = Time(FinÏoucheEnfonce50cs)
À chaque nouveau caractère saisi par l'utilisa-
teur; le timer précédent est annulé
et un nouveau timer est relancé
pour 0,5 seconde.
Si l'utilisateur ne saisit pas de
caractères pendant ce laps de
temps, la saisie est considérée comme
terminée: la vérification est donc effectuée.
La vérification se charge de contrôler la sai-
sie et d'afficher des informations visuelles à
l'utilisateur par la suite.
 +
ÿ
,---

IT
o -------!
I
a

t-r:r r,;. a DrnnÂÀr Navigateu r

r-)\ V \-- (,i r uv,.-u U I-e

La fonction de vérification est d'abord exécu- Pour être encore plus génériques, les modèles est correcte).

tée côté navigateur pour éviter un aller-retour de champs permettent la saisie de n'importe Le champ Modèle de champs est ensuite
inutile au serveur, quel texte:adresse lP email, code référence, ... autonome et gère les appels aux procédures
Cette fonction est également exécutée sur le ll suffit de préciser aux modèles de champs et l'affichage tout seul.
serveur, en tant que "garde-fou" (quelqu'un une procédure de vérification et le libellé si
Note: En WEBDEV il est nécessaire de définir
peut altérer les données au milieu de la com- nécessaire (si celui-ci doit être modifié).
deux procédures de vérification:
munication). // Fonction cle validatiorr de l'adresse lP . une vérification basique (taille du champ,
Cette fonction de vérification est donc une ClvlOD,Saisie.:, ProcValidationSaisie = ...
expression régulière, ...), effectuée en navi-
fonction mixte. ValidationAd resselP
gateur.
// Fixe le Iibellé
. une fonction de validatlon, qui valide entiè-
CllCD,Saisie.SAl Saisie..Libellé = ...
Réutilisation "Adresse lP : " rement la saisie (ping d'une adresse, ...), effec-
tuée en serveur.
Pour faciliter la réutilisation du champ
Cette procédure doit:
avec vérification de saisie, l'exemple pro-
. accepter en paramètre une chaîne, qui sera
pose 3 modèles de chamPs (1 Par Pro-
renseignée avec la saisie de l'utilisateur,
I
duit), regroupé dans un composant interne . renvoyer le message d'erreur (si la saisie
"SaisieAvecVerification".
est incorrecte) ou une chaîne vide (si la saisie

g @ T@<hc e.rfoEéc (mkcydqr) d€ sAI-S.liiG (!!vis!tul) - Déb9qè€e en co{rs

I
1. -Retcu.vèridaticnrrày, sdisie)
4 ^r^ii,Ë.,i.;;r;...;"",,i,-iii.;rt;ri.,';:;.i!.vèurcu{cdere,

1 BPRoCÉüJRE vêlidaticnse.!êu"(:sBisie êst une chêine)

2
3 iÉ-i:i: LB :ai:ie
t 4e 5I Saisie -= "" REllvoYEÊ ""
JE
f.r o{logutcod.ui*r§rrond MArSte: I
6 ...
Déboguer.n 64 bits
Grâce à la fonctionnalité de débogage en d'utiliser le bouton "Go" comme
Déboguer cn modc s*ion PrÉlamé€ -
code navigateuç il est possible de suivre un Le débogage du code navigateur
Déiregær la vcnion mobilc (Dlmmic Sering)
traitement provoqué en code navigateur au la présence de Chrome et l'util
code serveut sans interruption de débogage. framework V2.
NiÿqEtd. d€ t6t )i
i La mise au point de fonctionnalités complexes Note: cette fonctionnalité n'est pas
P.dÉt69c du mod. tét Ctrl+ Mâj+F9
mixant des codes navigateur et serveur est dans les cas suivants:
! Ch.w un dump de débog6gÊ..'
i
alors grandement simPlifiée.
Pour activer la fonctionnalité de débogage
. Traitement Javascript "Pur".
.
g 5a (ffit6 à un sil€ Gt ttébogw la conmion,.. I

en code navigateu; il suffit d'activer I'option

Pages PHP et statiques.

oi bgE ln (oÉbn qEtanle...

"Déboguer le code navigateur (Chrome)" puis
}|
TECHNIQUE PC SOFT - N"l 19 - 27
 WINDEV WEBDEV WINDEV

,'J
aè -- -*4u.".
_drr 5 '-
Rappeler un rendez-vous à un contact? Prévenir un client d'une promotion
exclusive? Les occasions d'envoyer un SMS Sont nombreuses!
Dans la majorité des cas, les prestataires mettent à disposition une API sous
forme de Webservice pour envoyer des SMS.
L'exemple "WD SMS" propose de regrouper I'envoi d'un SMS via différents
prestataires dans un appel unifié.

ri i
ujourd hui, il existe p usieurs plate- Principe :

WDSMS.WDSIVSAPI REST URL = ...

formes d'envoi de SMS utilisables
avec des applications WINDEV
WEBDEV ou WINDEV Mobile:
OVH, Allmysms, Octopush, ..
Chaque fournisseur propose son APl, avec
ses spécificités, ce qui demande de mettre
en place un code spécifique dans les projets
WINDEV WEBDEV ou WINDEV lÿobile.
L'exemple 'WD SIVS" permet de s'affranchir
Pour uniformiser les appels, l'exemple propose
une structure SMSMessoge qui permet de
mémorisertoutes les informations d un SMS
. nom de l'expéditeur,
. numéro du (ou des) destinataire(s),
. contenu,
Lors de l'appel au Webservice, celui-ci va
fournir la structure à la fonction dédiée au
"http://localhost/sms"
: Fournisseurs
La fonction SMSlisteFournisseurs permet
d obtenir la liste des fournisseurs disponibles.
Cette fonction renvoie un tableau de chaînes.
'I : rt trarlt.l"ir,ll(;
L:',t.'i,
:.r;:Fournisseurs est un tableau de chaînes
:,, irFournisseurs = SMSListeFournisseurs0

des spécificités du fournisseur en utilisant fournisseur indiqué:

un Webservice comme plateforme d'envoi. . OVH_SMSEnvoie,
Cette plateforme va s'occuper de faire tran- . Octopush_SMSEnvoie,
siter le SN,4S 'universel' vers un fournisseur , AllmySMS_SMSEnvoie
specifique au mon'ent de r'envoi.
Ces procédures disposent du code d appel
Remarque: le fonctionnement de WINDEV spécifique à chaque fournisseur
WEBDEV et WINDEV Mobile avec les ser-
vices SMS de OVH, Allmysms et Octopush Appels au Webservice
est donné à titre d exemple, il ne s'agit pas
URL du Webservice
d'une recommandation de PC SOFT pour
Dans un premier temps, il est nécessaire de
ces produits.
préciser l'URL d'accès du Webservice d'en-
voi de SMS dans la variable WDSMSAPI-
REST-URL de la collection de procédures
,COL
WDSMS',
Envoyer un SMS
Pour envoyer un SMS, il suffit de rensei-
gner les différents éléments de la structure
SMSMessage puis de réaliser l'envoi avec la
procédure SMSEnvoie.
- , :,, :-::r::. l ::,iv!: .:r a;i r:r.,r.rr[
'SMS est un SMSMessage
,.SMS.Destinataire[1] = "0612xxxx25"
. -SMS.Expéditeur
= "TAMES"
.rSMS.Message = "PROMOTIONS !
Découvrez nos offres sur www.tames.fr"
- Retour est un SMSRetour
-,-Retour = SMSEnvoie("ovh", :iSMS)

2A - LA LETTRE DIJ SUPPORTTECHNIQUE PC SOFT - N'1 I9

La variab e de type SMSRetour renvoyée Si vous réalisez des envois non pub ic Exemple
contient le détail de l'envoi en cas d échec, taires. i est possible d annuler I ajout de
ainsi que le cout d'envoi du SMS et les crédits cette mention. il suffit d affecter 1e membre Pourutiliser exemple 'WD SN4S' , vous devez.
restants pour le compte. AnnuleMentionSTOPAuto de la variable 1. Ouvrir un compte et récupérer la ou les
SMSMessoge à Vrai clés d'APl, pour chaque prestataire que vous
,i,, li, ii1. l_rfu1,: è ll:Ér., t'ir: a:1,.,.-;,1r souhaitez utiliser pour envoyer des SMS.
Sl srRetour.SMSEnvoyé ALORS
lnfo("SMS envoyé", Évolutions 2. Modifier la procédure SMSEnvoie de la

"Coût : "+siRetour.CoûtEnvoi, collection de procédures' COL API_WDSIÿS"

Lexemple'WD SMS' propose le code per- pour renseigner les informations des différents
"Crédits restants : " +:itRetour.Crédits)
mettant de gérer 3 fournisseurs de SIVS, mais fournisseurs (login, clés,
SINON ...).
Erreur("SMS non envoyé : ", il existe bien entendu d'autres fournisseurs.
3. Déployer le Webservice sur un serveur ou
"Code : "+.iRetour.Code, Pour ajouter un fournisseur au système, il est
"Message ; " + . :Retour.Message) sur votre poste local.
nécessaire de:
FIN 3. Lancer I application (configuration
. ajouter une constante SMS_;oordans le code
'Exécutable Windows 32 bits").
de déclaration de la collection de procédures
lmportant .,COL_API_WDSMS
Conformément aux directives de la CNIL et . ajouter cette constante Dans la fenêtre, il suffit alors de renseigner:
" dans le tableau
pour protéger le consommateur, la mention . I URL d'accès au Webservice,
renvoyé par SM S Liste F ou rn isseu rs,
AU <numéro>' doit être obligatoi-
STOP
. ajouter le cas correspondant à . le fournisseur à utillser
cette
rement affichée pour toute campagne SMS . les informations du SMS (expéditeur, des-
constante daas SMSEnvoie,
cuclicitaire envoyée sur un téléphone mobile . ajouter une procédure xxx_SMSEnvoie tinataires, contenu, ...).
a':rance.
pour gérer l'envoi spécifique au fournisseur.
Cette procédure doit attendre une variable
l:::e mention est automatiquement ajoutée
SMSMessoge en paramètre et renvoyer une
I
: i' : ÿÿeose'vrce lors de I envoi.
variable SMSRetour.

LA LETTRE DU SUPPORTTECHNIQUE PC SOFT - N'I I9 - 29

 WINDEV WEBLELrc

U .i ,......."'.",-."-',---.
k
j

Depuis toujours, WINDEV et WEBDEV permettent de manipuler les images,

via différents champs, types de variables et fonctions WLangage.
En version25,de nouveaux types font leur apparition'.WDPic eTpicColque.
Cet article présente 4 utilisations didactiques de ces types.

i! ..il rlr., lmage - ir ", ''. l,.tr',TableouXXX

est un p cCa que

' est un WDP c

WDPic ' picColque: rllle.rr,Ar.ri,tL'( .Calque,

)

' PicXXX t

WDPic f:.' picColque i .r,i':llilrlal .l tlrra: rll,lLlt'

l.r,' r,' I it ,i'
-arla: ,' I r1'.1 :lr-1 \,!1,'llrti.l(li'cle cle-ss t'sLll
r'r:: i-,:.r-i dXXX )-^tr,.t,r:-. tlOrrr t,tte Ltt lSetS
Principe J:l -r.,:', it a ar_ritÈ :,
AltparLr ell '.e'! al,' :l Èal :r.. rl ''.lalar !r: i-i-, - -rr, .l :; r:-r -ir '_.laif a: -l
F-t ,,... t.: lti i,r afT',a:!e : tOt;tOt...1'.il]
\J NDiV [!iE3DE\i] e: i,,,, NDE,. '.,:rlr I i_ra,f-::
.r-,r :.,": :l LtI se a fotllt orl VJLarqaqc
:-:r
-rLrr cle"'.,-io1l1-':-ll: ala: ala È'| :la:: 'r :r.l:r:r i.:.
, est rrrr \TrrP ( dRototion
ll ttere.:s c; clLres
'lr'- P alÊa rt:Èir: oitrra(
t r..lti ,.,.1 Ltn :['art1t []rt'a'.:-r: tt..:: rr: '":'i .; r,! 1,r.'o:t t r- ii ii.i: la''lr :-l rRol.l: lr'( ,. ,r ', 25)
ll efie:tLrer des nta- ttrt .rl ar'': ,1 .:: .ll:: :-l
!! r.reale! Calq ues :-:::r'a:-r a !.'f'la;e plefiree -'s: d sllo
. itloLr:et.ile:, :a :1le-r ::'..a a- ".r.rÈ J:,rt .'t -t.,-at :'. -:. :: :-. ::i:s WDPic eI picCalque.

..Rcl.rt;or(25)
:,,,, -i -::ll r::i-.
. . ir,-:ta:1.-

3()-
t.-

Ajout d'un f lig ra ne

Pour ajouter un filigrane dans une image WDPic, il faut créer un calque avec le texte
du filigrane dedans.

/i DéTinir un frligr'ane
oFiligraneDessin est une lmage
l/ Ecriture d'Lrn texte cians l'irnage
oFiligraneDessin.DessineTexte(0, 0, "MonFiligrane", RougeCloir)
// A)oule I'inrage dans ;n calque
gCalque est un picCalque = oFiligraneDessin

Note: À partir de Ia version "25 Update'1", il est possible d'utiliser un calque de type texte.
Lorsque le filigrane est défini, il suffit de le rendre visible (par défaut les calques créés sont
invisibles) puis de l'ajouter à l'image WDPic.

r',i Rend le calque '',isil-.ie

gCalque..Visible = Vroi
i/ Ajoute 1e calque au tabieau des calques de l'image
TableauAjoute(oResultat.Calque, gCalque)

Redimensionnement d'u ne
image
Pour redimensionner une image, il suffit d'utiliser a fonction PicRedimensionne
Lorsque l'image est redimensionnée, il est possible de la sauver via la fonction PicSouve.
// Génère Lrrr WDPic clepuis le champ lmage
imgMini est un WDPic = IMG Redimensionner
// lmage rniniature
PicRedimensionne(imgMini, 32, 32, d rHomothétiqueCe ntré)
PicSauve(imgMini, fRepExe0 + ffSepl +
" Redimensionner\ProduitMini.png")
La fonction WLangage PicRedimensionne permet de redimensionner une image avec plusieurs
calques sans être obligé de manipuler chaque calque 1 par 1 et sans aplatir l'image.

I
/ /
Ajouter un filtre de validation d'image
Un autre exemple de manipulation de calques: il est possible de faire valider des
images à l'utilisateur en ajoutant un filtre de couleurs avec une opacité légère. Le fait
d'utiliser un calque pour réaliser cette opération permet de garder l'image de base
intacte (seul le calque est modifié).

Définit un fond
cFond est une Couleur
cFond = RVB(67,160,71)
cFond..Opacité = 110
dRectangle(oFondCouleur, 0, 0, oFondCouleur..Largeur, oFondCouleur..Hauteur, cFond)
// Aloute l'irnage dans un calque
gCalque est un picCalque = oFondCouleur
//Rend le calque visible
gCalque..Visible = Vroi
/i AjoLrte le calque au tableau des calques de I'image
TableauAjoute(oResultat.Calque, gCalque)

II
Pour récupérer l'image sans le voile de couleurs, il suffit de supprimer le calque avec la couleur
de fond.

Masquer des calques

La propriété ..Visible du Type picColque permet de modifier la visibilité d'un calque
/lAffiche le premier caique de l'irlage
goCarrePic.Calque[1 ]..Visible = ÿroi

La fonction lmageColqueVisiâIe permet également de modifier la visibilité d'un calque dont

le nom est connu.

//Aftiche le calque nommé "Filigrane"

ImageCalqueVisibIe(goCarrePic, "FiIigrane", Vrai)

I
LA LETTRE DU SUPPORTTECHNIQUE PC SOFT - N'I I9 - 31
 DEV WEBDEV WI

HFSQL : GERER SIMPLEMENT

L'HISTORIQU E D'U N E RU BRIQU E
Quel était le solde précédentdu client? Quel était le code postal précédent
utilisé par le client pour I'adresse de livraison ?
Toutes ces informations peuvent être gérées par un historique "programffié",
mais HFSQL permet de gérer automatiquement les historiques des
rubriques grâce au concept de 'journalisation"

J ou rna lisation
La jounalisation des modifications de HFSQL se configure
directement dans l'éditeur d'analyses de WINDEV ou WEBDEV
La journalisation des modiflcations est disponible pour HFSQL

des modiËitations Êffe.tuées depuis le c9/]2./2019 à 0û:o0:o0 Classic et HFSQL Client/Serveur, certaines informations spécifiques
n'étant disponibles qu'en mode Client/Serveur.
o*tf h.* §Jrq ;1;
opér*ticn I= rpplitatiæ p'
Êl Modifi(ation 11n2f/n1911:2z:gwdtst-urct Pour activer la.journalisation d'un fichier de données, il suffit d'éditer
t vt D€otPtc ,l tâtt Pt sold. les rubriques d'un fichier de données (menu conte)ctuel "Description
Etr.ÊgistrrEent ilënt noditi(ôtion 3
des rubriques"), puis de choisir une rubrique et d'activer l'option
Enreqirtre*st après nodifitôtion 5
"Journaler la rubrique" de l'onglet "Avancé".
ll est possible de consulter à tout moment l'ensemble des journaux
È Modificatian 11n2.r201911:2È?8 wdtst-urcr
depuis le Centre de Contrôle HFSQL (onglet "lournaux").

FAA "Historique"
1t110/2019 I t17,06€ Lorsqu'une rubrique journalée est lié à un champ (que ce
soit un champ de saisie ou même un champ Table), le menu
contextuel du champ concerné propose la FAA "Historique".
Cofer '15lllll'à0I9'
Cette FAA "Historique" ouvre une fenêtre présentant les 100 dernières
Copier la l§ne
modifications sur la valeur de la rubrique pour l'enregistrement lié.
Copier la colonne
Cette fenêtre de FAA présente non seulement les valeurs successives
de la rubrique, mais également des informations complémentaires
très utiles comme: la date et l'heure de modification, le poste et
tdsàjr§er - {Ha:
l'application ayant effectué la modification ou encore une informa-
yidtst_Er r 1167 € tion personnalisable.

Modification Automatique HFSQL Changement de

Sauvegarde des journaux
structure
Lcr jgums drt ti(hitts jouRtêr Yor* êtr. ruPplimÉs' Aups.datrt, vout gowE ?ffl Lors d'un changement de structure des fichiers de données,
EwÈqErd€ dt! joume Note quc f histodque dÊs modifi(ationt ((li( d.oit rur
,unË
Êt ton.tion HDemiêrËModiliGtian) pttRd en coBptc tes sw.gô.d.§'
des rubriques peuvent apparaître ou disparaître. C'est pour cela que
lors d'une génération d'analyse, les journaux de fichiers de données
dont la structure est modifiée peuvent nécessiter un archivage
y' Efieduer une cwrgârdÊ d.§ joumq
Leur contenu "précédent" n'est cependant pas perdu et sera toujours
joüffilé dt FmgBtdÊ du jourel
a:tha€t Rép.
consultable et accessible par la FAA et par programmation.
t/ ] g\ræo*rq:rnrx*s*r*tu 'LlÈE hP
Quant aux nouvelles rubriques, si elles sontjournalées, leur date de
consultation débutera à la date d'ajout de la rubrique.

32 - LA LETTRE DU SUPPORTTECHNIQUE PC SOFT - N"l 19

 c\.
a
f
o
I
N En France, depuis le lerjanvier 2019 le code de santé publique
LU impose d'être certifié HDS (Hébergeur de Données de Santé)
pour "toute personne (physique ou morale) qui héberge des
données de santé à caractère personnel [...]" (article 11111-8

a du code de la santé publique).

LLl HFSQL permet de répondre aux contraintes du label HDS.

/l Composant lnterne
tabHistorique est un tableau de structHistorique
// On se positionne sur I enregistrement
LitRecherchePremier(Compte, lDCompte,...
O I "HistoriqueJournal" H
TAB LE-Compte.CO L_l DCompte)

Le composant interne proposé par l'exemple "Historiquelournal"

//On demande son historique
tabHistorique = ...
permet de récupérer les informations du journal des modifications sous
COL_H istoriqueJournal.
la forme d'un tableau de structures. RenvoielnformationsHistoriqueJournal(Compte, "Solde")
ll est alors possible de parcouriç trier ou rechercher simplement les //Parcours de l'historique
informations souhaitées par Ul ou par programmation à l'aide de la stHistorique est un structHistorique
fonction Renvoiel nformotionsH istoriqueJ ou rno l. POUR TOUT stHistorique DE tabHistorique
// Ttaiternent de la ligne d nistorique
FIN

i-tntmantùrri
--.
lournalisâtion
Optimisations
ÿ ,ourmlcr la rubriquc 1. Journaler une rubrique occupe de l'espace de stockage
r/r"".1""-È-iii"üi:"i et ralentit les écritures. ll est donc important de sélectionner
Le RAD doit generer pour cette rubrique : les rubriques à journaler.
ÿ unr (olonne en modc tabla 2. Ajouter des clés dans les fichiers journaux pour des manipulations
ÿ un chèmp cn modcfichc avancées sur des rubriques qui ne sont pas clés dans l'analyse. Pour
ÿ un chômp pour l.r états cela, il suffit d'activer l'option "La rubrique est une clé dans le jour-
- nal" dans l'onglet "Avancé" de la rubrique dans l'éditeur d'analyses.
GUID de la rubrique
3. Purger desjournaux "trop anciens" : c'est une solution extrême
mais toujours possible par l'outil "WDJournal".
Anatyse 5.5 (par compatibilité)
4. Récupération de l'historique de modifications de plusieurs rubriques
Rubriqu. Bigrér d'une aBbEc WinDd 5.s/Wrboë 1,5
en un seul appel au composant interne "Historiqueiournal" ou à la
fonction WLangage HHistoriqueModificotion (attention I'analyse
du résultat peut alors être complexe).

HFSQL Classic et
Client / Serveur
Si fonctionnellement la journalisation des modifications est
/ Serveuç ce n'est pas le cas des
similaire en mode Classic et Client
bases permettant de stocker les informations des journaux.

Les structures des fichiers journaux sont détaillées dans l'aide en

ligne ("https://doc.pcsoft,frlfr-FR/?3044182, "https://doc.pcsoft.frl
fr-FR/?30M197'') afin de pouvoir effectuer des opérations spécifiques
comme l'anonymisation de données par exemple.

I
LA LETTRE DU SUPPARTTECHNIQUE PC SOFT - N'I I9 - 33
Lr SnvrEZ-VüLJs î
ry
Ranger les procédures locales d'un élément {fenêtres, collection...)
Les "Perso-dossiers" permettent de simplifier I'organisation des projets en permettant de regrouper les éléments
(fenêtres, classes, collections de procédures, ...) de votre application par thèmes.
ll est également possible d'ajouter des perso-dossiers dans un élément (une fenêtre par exemple) pour organiser
les procédures de cet élément. Cette fonctionnalité est particulièrement utile si un élément contient un grand
nombre de procédures pour lesquelles le tri alphabétique ne suffit pas à regrouper les éléments "thématiques".
Pour créer un perso-dossier dans un élément, il suffit de sélectionner I'option contextuelle "Nouveau perso-dossier"
de l'élément (ou sur le sous-élément "Procédures locales" dans le cas des fenêtres).

Remarque: I'option contextuelle "Déplacer vers ... " permet de déplacer les procédures dans un perso-dossier ou de
les remettre à la racine de l'élément.
ÿù Aperçulmg6coprÊ
Bçbrateur th prrjet - x 'È ApsçulmgsErmsÊnt
pi*. t ApsçulrugsFclre
rffi FEN-GDS| r* ltn{r:
il
.î #-,..e'l'-
» ChampÊ 'è optAffiôslmgrc0ansRcpL«al
! optlmgcAnnuls[rdra<tion
tg optlmgtAperculaillefléelle
}È optlmage(mvwtir
! tt H",rret. p*.0*!"."F }1 ofilmgdopitrApacu
t1 -c*caom-suppfnll -
;È
-c*é9.ri.-9rp;-d X.-,r**"atlr- ! optlmagckportMac
-CmptàgcSouEÈr ,/ N
o1
-lma9e-Annulerortra, l* l^l

Supprimü
.l ,
Dhbvtr ?N
* Editsl..oa. l.\
Editr h codc daæ uh\àrych roet
Paramês ls autmatirc de h Ptré

§ wDt«tærnss

Afficher le code des ))t; uru--^

champs sélectionnés gàr Auteur I le 02 Mar :û1{ à 20h05

Depuis l'éditeur de fenêtres, de

pages ou d'états, le raccourci "F2
permet d'afficher le code de l'élément E
I nlD0ossie. est un entier sur 8
sélectionné. 2 nlndicr est un entier
3
4
Si plusieurs champs sont sélectionnés, 5
le raccourci "F2" affiche alors, dans la 6 E-
même fenêtre, tous les codes de tous les t8
t9
I@
champs sélectionnés ! 33 L rrr
34
l5 ./1 ôuv.e 1a renêt.e de saisie d'un nouveau flux
f6 nlDflux est un entier suc I
11 nlDflux = Ouvre(':i.-uouveauF1ux, nlDoossie.)
3A PSInlDrlux>OALOns
l9 E // l4et à jour le .Iux
4A L *rn:i"n.afi([nrDFlux], Faux)
41 Lrur
42

Ajcute. d'aut.es événeEents i BTN_Nouveèu-F1ux

B (lic sur par peog.aMe S.
I

34 - LA LETTRE DU SUPPORTTECHNIQUE PC SOFT - N'l 19

 Présentation en images de fonctionnalités souvent méconnues

Voir tous les codes de l'élément

Dans certains cas, I'affichage d'une procédure d'un é!ément (fenêtre, classe, ...) affiche uniquement cette procédure
dans t'éditeur de code: c'est le cas par exemple si vous double-cliquez sur le résultat d'une recherche ou sur une
procédure depuis le "kouglof" (volet "Code").
ll est parfois utite de ne pas limiter l'affichage à cette unique procétlure mais d'afficher I'ensemble des codes de
l'élément: depuis le volet "Code", dans le groupe "Affichage', cliquez sur le bouton "Tous les codes".

*î t§orr n§s - TUSlfV 25 - tFEll-Prhc[* - Procddrre bc* nÆ-ltrcta (G6 : tbt ocrf$l

tgrtüi$[ potaio.r:
ü.n-I- ÀÉ*È
dC

tlrtfliÇic dc rdi.ii.n:

â:r'4 ilûEar
.
RÊtour llüil
ffi
AIct r
fâér:nf

I lt RêstJ'É- r Affiche un flux RSs dans la liste

2 ll Syîta\e I
3 //FluxRss-Affiche (<nIOf1uxR55> e§t entier sur 8 octet§)
1
5 I I Par{èltes I
6 // nlDFluxRss (entier sur 8 octets) :Identifi.at du flux
7 ll Valeuc de retour :
a I I Aücuîe
9
10 PlqcÉqE! .r.lerB5§-tffiçl§(!4ç4.r-. ÎI9r:l!{E::. çf! .!. erliel i
11
t2 nlndicdlossicr crt m entiêr
13
!l WIt LecBtr RS§ - ttltlf,Y 25 - [Ftrl-Frhc$* - ga6&s e FE{-pri.rcFlc (Gllll : tlm cltrü}l
15
l6 *** Code Refactoring Affichâge outils
l7 t\-ü-Bo O-**, O
a.n-r--Ê
1a
19
20
ÉàÈ
Relour ALr-, Â16il
d.mff..tim: O â
CI
L!nc: , r+I
Ious lcr
2t Har.na ffu (odü
22
2t
21
25
1 :fq8E ,r.t91ê!!'r()
2
26
3 «I.s'TArTE
27
a
2A
5
29
n 6 // Plan selôn le type d'affichage
7 PLAII-STYLETITRE - I
3l PLAI-STYL€VIGI{ETTE - 2
8
)2
9
33
vt lo ll Tiçer de ËAl autmatique
35
11 TII{ER-I4AIAIJTO - I
L2
TT .// Options tags
1/l OPTIoiITAGS - "OPT-BiIlctTig-TÈg-'
15 OPTIOITAGSSITGG . "0rPI_BitlctTag-5ugEl-
15
17
1a
19 FIX
20
2t /l Liste des billets
22 ÉièbBillets cst u tableau d€ STBiI].et
2t // Billet en cou.s de ilanipulation
21 grlDBiltetfou.ant r:t m entier sur 8
2t ll lndice su.volé
26 gslndi(esJ.vol est m entier
27 gs(olonne§uavoL cst ffi Ehaine
28 É4lndiceslrvolliste êst H entiêr
29 galndicesurvolzR ast m etÊier
9 l,/ Fenêtre visible
31 Ébfenêtrevisible Ëst m bæléen = lt'ai,
,t // nAf, en cours
33 E=t{AlE.fours cst m bæté€n
3/t // Oerniè.e ltÂl
35 g;.14ÂlDe.niàre rst lff Datelhure
* ll FIux déo]è€é (dnd su. le chæg Table hi.é.archique)

LA LETTRE DU SUPPORT TECHNIQUE PC SOFT . N"I 1 9 - 35

 Réutilisation
L exemple 'WW SelecteurCouleur' propose un
modèle de champs' lV DLC_SelecteurCouleur'.

La fonction ChongeCouleur du modèle de

champs permet de modifier la couleur actuelle
du champ.

oCouleur est une Couleur

e champ Composant Web permet Mise en place oCouleur.Rouge = 255
d'intégrer des ressources externes oCouleur.Bleu = 50
Pour intégrer un sé ecteur de cou eur dans
simplement dans une page WEBDEV oCouleur.Vert = 50
une page Web, il suffit d'utillser une balise
L exemp e' WW_SelecteurCouleur présente
<input> de type <color>. SélecteurCouleur.ChangeCouleur(...
une uti isation du champ Composant Web Ce type permet d ndiquer au navigateur oCouleur)
pour intégrer un sélecteur de cou eur. d'ouvrir son sélecteur de couleur.
En mobi e, ce système permet d'afficher auto- Pour récupérer la couleur du sélecteur de cou
matiquement un sélecteur adapté au tactile. leur, le modèle met à disposition 3 variables
Principe globales qui contiennent la couleur sous
Code HTI',/L du champ Composant Web:
Le champ Composant Web permet d accéder différentes formes.
<input type="color" , gsCouleurHexo contient la cou eur au
à un événement navigateur va e nom du va lue= "#000000"
champ Composant Web. format hexadécimal, sans e '#' au début de
name = "textcolor"
Par exemple, si e code HTN/L d un champ id = "textcolor" a chaine (par exemple: 'fb92e6').
Cornposant Web contient le code suivant: oncha nge "CM P_SelecteurCou leur0 " > . gsCouleurRVB contient la couleur au
=

<input id="1" format Rouge,Vert,B eu" (par exemp e:

onchange= "CMP_MonChamp0" > Lors de la sélection d'une couleur par I uti 2s1,146,234 ).

lisateur, la couleur est récupérée via e code . gCouleur contient la couleur dans une
à chaque changement du champ HTML, Javascript suivant: variable de Iype Couleur.
l'événement navigateur "Action de <CMP EXTERNE document
MonChamp> ' sera appelé. Note: le modèle de champs doit obligatoi
rement être initialisé avec une cou eur dans
Depuis cet événement, il est possible d accé Hex est une chaîne
' Hex = document:getElementByld(... I événement ' nitialisation' de la page.
der au serveur en utilisant simplement la fonc-
"textcolor"):value
tion WLangage AJAXExécuteAsynchrone
(ot AJAXExécute). I

36 - LA LETTRE DU SUPPORTTECHNIQUE PC SOFT N'I I9

 WEBDEV
O PERSONNALISATION AVANCÉT DES
STYLES DE LA SAISIE ASSISTEE
franl
terme sug géré
style CSS : style CSS
.u i- menu -item -wrapper
a saisie assistée permet d'afficher à
I utilisateur des propositions perti-
nentes par rapport à sa saisie et au
contexte du champ.
Les fonctions SoisieAssistéeXXX du
WLangage permettent de proposer une sai-
sie assistée dans un projet WINDEV WEBDEV
ou WINDEV Mobile.
Sous WEBDEV par défaut, la saisie assistée
met en avant le texte saisi dans chaque pro
position affichée (mise en gras)
L exemple "WW Personnalisation_Saisie
Assistee" propose une solution pour modifier
le style des lignes de la saisie assistée.
Principe
Pour mettre en forme les suggestions,
WEBDEV applique 2 styles sur chaque pro-
position:
. un style de base ('.ui-menu-item-wrapper')
sur l'ensemble de la proposition,
. unstyle de mise en évidence ('.ui-auto-
complete-term") sur la partie du texte qu
correspond à la saisie courante.
Le code HTML correspondant est:
<a class= "ui-menu-item-wrapper" >
Polynésie
< span class= "ui-autocomplete-term"
fra n
</span > )
çaise
</a>
partie mise en évidence
:
.u i-a utocom plete-term
L'astuce consiste donc à surcharger ces 2 Réutilisation
styles dans la page HTML afin d appliquer le
rendu souhaité. Pour faciliter la personnalisation de la saisie
assistée dans vos prolets WEBDEV l'exemple
WW_Personnalisation Saisie-Assistee" pro-
Mise en æuvre pose une collection de procédures'COL_
La première étape consiste à générer le style SaisieAssistéePersonalisée' .
souhaité au format CSS. Dans l'initialisation de la page, il suffit alors de:
Par exemple, pour que la partie mise en . définir les sÿles souhaités en remplissant
évidence" affiche un texte bleu et gras: des variables STSÿle,
.ui-autocomplete-term {
.',' Jei:nti rÎ SIvrÊ
font-weight:bold important;
!
siStylePerso est un STStyle
color:#9999ff important;
I
stStylePerso.::Style = ...
) PoliceAssistantltalique +
...
PoliceAssista ntG ras
Remarque. leterrne limportant permetd'in- stStylePerso.cCouleur = Bleu Foncé
diquer au navigateur d'utiliser cette définition
de sÿle en priorité. Ce terme permet donc . appeler la procédure SoisieAssistéeChonge-
de passer outre le style par défaut généré Sÿ{e pour appliquer ces styles.
par WEBDEV ,',j Mcdrfie ie si;,ie oe rr':ise en eviierrce
Lorsque les sÿles CSS sont définis, il suffit de SaisieAssistéeChangeStyle(...
les intégrer à la page, plus précisément dans
TexteSaisie, stStylePerso)
entête de la page (balise <head>) dans une
I
balise <sÿle>.
I
Cette opération est réalisée via la propriété
..HTMLEntête sur la page.
tüocliie i'extete de la page actuelle
,'.;
MaPage..HTMLEntête + = 1
< STYLE type = "text/css" >
.ui-autocomplete-term i
> font-weight:bold!important;
color:#9999ff i m portant;
!
< /STYLE >
l
LA LETTRE DU SUPPORTTECHNIQUE PC SOFT - N'1 I9 -37
 :.WINDEV

RER LES FONCTION NALITES

GESTI

n entrepr se, i est tres frequent de Cette fonction permet d activer ou de para Pour savoir sl un scanner dispose de cette
disposer de scanners mult pages. Dans métrer es options avancées des scanners fonctlonna lté i suffit d utiliser la fonct on
vos applicatrons W NDEY i est sou récents. WLangage TwoinPropriété avec la constante
vent nécessaire d ut l ser cette capa . détection de bord, TwoinRestoVerso.
cité, par exempLe pour scanner une iste de . détection de codes-barres,
bons de corrmande. . redimens onnement autornatiqJe,
. saut de page blanche,
L utilisat on du chargeur du scanrer est beau
coup plus rap de que a numer sation à la RectoVerso..Visible = TwainPropriété(...
main page par page . Bien entendu, il est uniquement possib e Twa i.n RectoVerso)

d activer es proprietés qui sont disponibles

L exemp e WD Scanner TWA N est une
version de I exemp e ivré en standard pour
sur e scanner uti isé. Pour activer e recto/verso, il suffit d'utiliser la

laque le a gestron des scanners mu tipag."s Pour actlver la propriété Chargeur , il suffit co n sta nte Twa in RectoVersoActivé :

d ere dJUUree d appeler

Cette imp émentation est v sib e notamment

dans a procédure Numérisotion de a fenetre Twain Propriété(...
Twa in Propriété(...
pnncipale de I exemple. Two in C h o rg eu rActivé, Vro û
Two i n RectoVe rsoActivé, Vra I
Attention. dans I exemple, option per-
Numérisation Resto/verso mettant d act ver e mode recto/verso est
multipage De a même manlère, il est possible d utillser affichée uniquement si le scanner sélectionné
fonctionnalité recto/verso sur les scanners qère 1a fonct onnal té.
Pour activer la numérisation en mode mu t - ia
i suffit d utiliser fonct on WLangage qui e perrnettent.
page,
TwainPropriété
a
I

3A . L/ LETTRE DU SUPPORTTECHNIQUE PC SAFT. N"I t9

 U ESTIONS 8 RÉPONSES
Analyseur de performances, PDF sous ambiguité Consultez les FAQ sur le site du
Support Technique Gratuit
de type, traitement parallèle, ... http://faq.pcsoft.fr

Vos questions,
les réponses du Support Technique Gratuit !

Lorsque la clé est définie, il suffit ensuite d'exécuter "WDUNlNST.EXE'

(en double-cliquant ou via la fonction WLangage LanceAppli) pour
lancer la désinstallation sans interface.

Comment supprimer rapidement ,orrquo! cerrarns rexres o un

un "mot entier" (éditeur de code, [f
étât PDF ne sont pas alfichés sous
éditeur de fenêtres...) ? ios 13?
Lors de la modification d'un contenu texte (champ Libellé, code, ...),
d'un PDF généré à partir d'un état (ilmprimeEtat)
La visualisation
les raccourcis "Ctrl + RetourArrière (Backspace)" et "Ctrl + Suppr."
sur un iPhone ou un iPad passé sous iOS 13 peut ne pas contenir
permettent respectivement de supprimer le mot précédent et le mot
tous les textes.
suivant (ce qui est plus rapide que de supprimer caractère par caractère).
Cet effet d'affichage se produit sous iOS 13 si l'état utilise une police
personnalisée ("Arial" par exemple). À partir de iOS 13, la police peut
ne plus être dans le lecteur PDF utilisé pour la visualisation. De ce fait,
desinsta!ler une
B.a.lment
affilication en mode silencieux?
le texte n'est pas affiché sur l'iPhone ou l'iPad.
Afin d'obtenir le rendu du PDF avec le texte, il suffit de modifier l'état
L'outil "WDUninst", l'outil de désinstallation d'une application WINDEV afin d'utiliser dans le sÿle des libellés la police "Police système":
dispose d'un mode silencieux méconnu. trx
Champ Libelle
Ce mode silencieux peut être activé via la base de registre: il suffit
d'ajouter une valeur dans une clé de registre spécifique. O GÉnêrâl
û
E'
eul I
tr
La clé de registre, créée automatiquement lors de l'installation, est I
O oÉrail I
localisée dans: I
.'HKEY-LOCAL-MACH I
lN E\SOFTWARE\WOW6432Node\M icrosoft\ tr
Windows\CurrentVersion\Uninstall\" (32 bits), \Næ
o
. " H KEY-LOCAL-MAC H I N E\SOFTWAR E\N/ icrosoft\Wi nd ows\ Eltudr lH :rtæ/
g Aidc
CurrentVersion\Uninstall\" (64 bits). !ok.: mrrù ;-owro« Jt
c I eôdr. ,+
La clé de l'application est définie comme suit: tr
' oûr.: M , cou.übÊ IB a
<Nom du projet> <Nom de la config> <suffixe>

Le suffixe peut correspondre à:

. "CLT": installation cliente issue d'une installation réseau,
. "SRV": installation de référence,
. <vide> : installation simple.
Remarque: pour les installations les plus anciennes, la composante
<Nom du projet> peut ne pas être renseignée.
Remarque: les textes sont bien présents dans le fichier PDF lui-même.
Si le PDF est transféré vers une autre plateforme (Windows, Mac ou
sur un autre iPhone / |PAD ayant une version antérieure de iOS), les
textes sont bien visibles.

Par exemple:
Pour un projet nommé "MonProjet" dont la configuration se nomme
D
Perfoiffiânces ', ,

"Exécutable64" installée par une installation réseau, la clé de registre

sera (en 64 bits): Comment activer I'analyseur de
H KEY-LOCAL-MACH I NE\SOFTWARE\Microsoft\Wi ndows\ performances lors d'un traitement
Cu rrentversion\Uninstall\MonProjetExécutable64CLT\ anormalement long ?
Dans cette clé de registre, il est nécessaire de créer une valeur de
L'analyseur de performances (ou "Profiler") est un outil permettant
type "DWORD" nommée "SILENT' avec comme valeur 1 (en hexa).
de vérifier et d'optimiser le temps d'exécution de votre application.

40 - LA LETTRE DU SUPPORTTECHNIQUE PC SOFT - N'I I9

 Astuces de programmation et d'utilisation

Lorsqu'une application WINDEV met un temps anormalement long Exemple de code côté serveur (application
pour effectuer un traitement, il peut être utile de demander le lance- WEBDEV ÿpe Webservice REST)
ment de cet outil pour obtenir un rapport immédiat.
Pour activer I'analyseur de performances, il suffit d'utiliser le raccourci PROCÉDURE uploadO
"Windows+Shift+F10". bufUploadedFile is Buffer = WebserviceParametre(paramBuffer)
L'analyse sera stoppée avec le raccourci "Windows + Shift + Fl1" SlfSauveBuffer("uploadedFile.txt", bufUploadedFile) ALORS
ou à l'arrêt de l'application. RENVOYER bufUploadedFile
FIN

Comment expliquer une différence Le fichier sera sauvegardé dans le répertoire des données du Webservice.

de performances en mode test?

Que faire si la procédure callback de
En mode test, plusieurs outils d'analyse sont activés par défaut:
. l'analyseur de performances, la fonction WLangage MQTTAbonne
. I'audit dynamique, n'est pas exécutée?
. la couverture de code.
La fonction MQl'IAüonne permet de spécifier une procédure "callback"
Ces fonctionnalités peuvent avoir un impact non négligeable sur les Wlangage qui est automatiquement exécutée lors de la réception
performances du mode test. d'une notification MQTT.
La procédure Wlangage peut ne pas être exécutée lorsqu'elle est
déclarée en procédure interne au traitement ou en procédure locale
Couverture d'une fenêtre.
Dans ce cas, afin d'avoir l'exécution automatique de la procédure, il
Afficher les rêultats du suffit de fournir à la fonction ltlQTTAbonne une procédure globale
du projet.
Affrcher les resultats

Afficher ks resultats Comment lever une ambiguité en

cas de conflit de nom sur un ÿpede
variable ?
Affrcher !a cowerture darc le code Le WLangage contient de nombreux ÿpes de variables très évolués
(xmlDocument, zipArchive, rcstReguête...).
ll peut arriver que le nom d'un ÿpe WLangage soit identique à celui
d'un autre ÿpe inclus par un élément ajouté au projet (assemblage,
Pour vérifier les performances (en pré-production par exemple), il type structuré, Webservice, ...).
est possible de désactiver, les différentes fonctionnalités d'analyse et Dans ce cas, la déclaration ou l'instanciation d'une variable provoque
d'audit depuis les widgets correspondant dans le tableau de bord. une erreur de compilation.

mm
Par exemple le code suivant:

i/ Prc)et ayant l'assemblage

,/i "Microsoft .Exchange.WebServices" importé
oServiceExchange:Url = new Uri(...
"https://msmail.montest.com/ews/Exchange.asmx")
Comment envoyer un fichier texte en
paramètre d'un Webservice REST en Déclenche l'erreur de compilation suivante:

POST? Utilisation ambiguë du type'Uri'.

Plusieurs ÿpes du projet (types avancés du WLangage, classes
ll est possible d'utiliser fChorgeBuffer pour alimenter la propriété d'assemblages.NET importés ou types structurés de Webservice)
..Contenu d'une variable RestReguête. portent ce nom. Utiliser le nom complet du type à utiliser.

Exemple de code côté client (application Afin de lever l'ambiguité et permettre la compilation, il suffit de préfixer
WINDEV) le ÿpe par son emplacement (le nom de I'assemblage, le nom du
Webservice, le nom de la collection de procédures, ...).
cMaRequete est un restRequête
cMaRequete..Méthode = httpPost Pour notre exemple, la ligne de code devient ainsi:
cMaRequete..URL = "http://monserveur/u pload'
cMaRequete..Contenu = KhargeBuffer(... //Projet ayant l'assemblage
fRepDonnées + fSep + "fileToupload.txt") //"Microsoft.Exchange.WebServices" importé
oServiceExchange:Url = new System.Uri(...
RESTEnvoie(cMa Requete)
'https://msmail.montest.com/ews/Exchange.asmx")

U LMRE DU SUPPORT TECHNIQUE PC SOFT - N'I I9 - 4A

 U ESTIO NS 8 RÉPON SES

Remarque: si le nom de l'emplacement contient un espace, il est néces-

saire d'encadrer le nom complet du ÿpe par des apostrophes (quote).
LI
Chareps
Pour notre exemple, le code serait: MÉtler -
/iProjet a"/ani i'assembiage
" M icrosoft.Êxchanqe.WebServices"
i// impo rté
oServiceExchanse:Url = new'System.Uri'(...
"https://msmail.montest.com/ews/Exchange.asmx")
J
Trait ement para llèle
Comment simplifier l'écriture d'un
traitement parallèle non bloquant ?
Combinés avec l'utilisation de procédures internes, les attributs
d'extension permettent par exemple de regrouper dans un seul code
Pourquoi le Play Store Google un ensemble de tâches.

peut proposer une application Un exemple parlant de cette combinaison est le code utilisé dans le
Champ Métier "Bouton avec Jauge".
WINDEV Mobile pour les
Ce bouton permet d'afficher automatiquement une jauge infinie
smartphones mais pas les tablettes? par-dessus le champ Bouton, le temps d'exécution du "traitement long".
Dans l'assistant de génération de l'application Android, à l'étape Voici le code (simplifié pour I'article) de ce bouton. N'hésitez pas à

"Google Play Store", la table des fonctionnalités contient les limitations
déduites des traitements de l'application.
Par exemple, si I application utilise la fonction Wlangage telDiolerAf-
fiche (qui permet d'ouvrir l'application de téléphonie), la fonctionnalité
"android.hardware.telephony" est automatiquement a.joutée.
Cette fonctionnalité permet d'indiquer au Play Store qu'il doit proposer
cette application uniquement aux périphériques capables de téléphoner.
tester ce Champ Métier directement depuis WINDEV.
,r/ Desactivë le boutori
Éîlj_Traitement..Etat = Grisé
il CrÉe ie charnp -l6ugs par-dessus ie bouton
Malauge est un Champ <- ChampCrée("JAUGE-lnfinie",
ÿplougel nfinie, BTN_Traitement..X, 3îN-Traitement..Y,
Bîi'j,Traitement..Largeur, 3-iN-Traitement..Hauteur,
Vroù

Android tr x Malauge..Opacité = 25
Génération de l'application Ma.lauge..Altitude = 3Tl'i-Traitement..Altitude+ 1

6æ9!e Play Store

//[xécute !e traitement long (dans urr thread)
ffi. ry!(fu r@d &! f lffitMér SÀ æ 5od F! FétdÊi tu tou§ ki ædds.
tu*r.d. l. tà&BrgM M rydls diæsd &r fmdo#s tlJM.§ : TraitementLong0
ftuBhe <d.s &d rour tde b 16«. pt ËoFdtai PRocÉDURE INTERNE Traitementlong 0 <thread>
l/ Code ciu tt-aitenreni iortg
L{r&trd S* * k ûÉÊ91$È è tæd
l/ L* ,ruir*,-,,u,-,i est telniné : mise à jour de i'Ul
// Cette prccédure cjoit être exécutée cjans le thread priircrpal
FinTraitementLong0
ll est possible de retirer la fonctionnalité de la liste via le bouton FIN
"supprimer": de cette manière, le Play Store n'appliquera plus les
limites associées. PROCÉDURE INTERNE FinTraitementlong <thread principal>
Dans ce cas, il appartient à l'application de tenir compte du type de // Aciive le bouton
l'appareil en cours afin de ne pas lancer une possibilité inexistante Eîi.j*Traitement..Etat = Actif
sur le matériel.
/,/ Supprinte ia jauEe
ChampSupprime(Majauge)
FIN
Comment réinitialiser Ie manifeste
d'une application APK / ANDROID Sans procédures internes ou attributs d'extension, le même traitement
aurait nécessité de créer plusieurs procédures distinctes et de définir
dans I'assistant de génération ? des automatismes en édition (via la fenêtre dédiée).
Si, après modification du manifeste, vous souhaitez revenir à l'état
initial, voici comment procéder: Les Champs Métien c'est oussi ço: des exemples de codes, syntoxes,
. lancez l'assistant de génération de l'application Android et déroulez ... dont vous pouvez librement vous inspirer pour améliorer votre
l'assistant jusqu'à l'étape'Configuration", code !
. cliquez sur le bouton "Configuration avancée",
. cliquez sur le bouton "Éditer le manifeste',
. cliquez sur le bouton "Réinitialiser",
. validez l'édition du manifeste,
. validez la fenêtre de configuration avancée.

42 - LA LETTRE DU SUPPORT TECHNIQUE PC SOFT - N"î 19

 fLn,'
rll fâÿ.
n{ils

Afin de mieux faire découvrir les FAA aux utilisateurs finaux des applications,
WINDEV propose plusieurs mécanismes.

I
j ILe
^ +^^-+ I l-.)l )!
LUclS L La i)Crptli- -:-
I tJ

1*Xji: .\. t),r r ' .1. .r ,..,!., r .-r Llr :1,:-i t::l I
,1,.1:-' - .1 .1., rr i i'l
;4r u
'rI::' ',':.' l,r, r' .r,. .'. '"i[-', . t'
,-:,
lell-l)i ar, :P']]lri.l II i,tt-.' -. :.. : .: .. r.,:r: :,:h':...,. r,il :itLtrI
. -ti:,. .;.:. .i: ,ir)l)
Le ta.l,t D.r: i)it, .t a.,rr Ê:,; a,it :j--:--'
" '- l : r' j

FAAExécute ia.rrl'-'allil ll l'a il:l

rri;: t ii.. r lt it.t,, t,..lt1
FAAExecrte (MaFenetre
IuoDer-oii.'t'IeDe ::

. FAAParamètre .l-r pÊrrrel de p.rr.,me

Gestion des FAA en ' 'll-.,'p.-\lr,
édition -':-'Ê' e nroterr oe rerherche cle

pottr enselrb e a=. '. -

I est cependari lra;r lj r - . FAASécurité r-, irerret de secur ser I er
pc ;o6' o |' ,
Fonctions WLangage r' r: :: - --::s Par FAA te>rpOrt vers \,Vorcl oir
,'l- h,"t ,:
FAAxxx ' - ::: I -,- a''arr.tlt ntpress on . I i esi
,le :: : .] -i:'..r re e\itoTt c! de aLrtor ser
D.p r" ' r..: '':-. :r: :s : saisie d -. r rlot de passe
A.-,,.- ir.". .

FAA pour actler ares::t.: =:

FAA de chaqrre t'i pÊ C: :r-: '-i,
. FAA Lrzcu'.e
Attention I '- -- I
'r.eo.d r - - :' tous
les champs du projet