Je

an
-Lu
c
Ba
pt
is
te

14/11/2018

Full Pc-Soft
Windev, Windev Mobile, Webdev, Hfsql, Serveur de déploiement, Web
Services

Jean-Luc Baptiste
 Jean-Luc Baptiste

Full Pc-Soft
Windev, Windev Mobile, Webdev, Hfsql, Serveur de déploiement, Web Services

Présentation :__________________________________________ 3
Méthodologie __________________________________________ 3
Sur le serveur Microsoft Server 2016 _____________________________ 3
HFSQL _____________________________________________________________ 3
Serveur d’application WEBDEV ____________________________________________ 5
Sur le poste de développement._________________________________ 5
Contexte______________________________________________ 6
Développement WebDev __________________________________ 7
Création des fichiers _______________________________________ 14
Le fichier des visiteurs __________________________________________________ 14
Le fichier des clients ___________________________________________________ 18
Le fichier Animal. _____________________________________________________ 19
Le fichier des passages _________________________________________________ 20

Création du site _______________________________________ 21

Page d’accueil ____________________________________________ 22
Choix du type de la page : _______________________________________________ 23
Customisation de la page Départ ___________________________________________ 24
Test de la page____________________________________________ 30
Jeux d’essai __________________________________________ 30
Création de requêtes _______________________________________ 32
Création d’une requête de sélection des animaux ________________________________ 32
Création d’une requête de sélection des clients _________________________________ 34
Création d’une requête de sélection des visiteurs ________________________________ 35
Création d’une requête d’ajout des animaux ___________________________________ 36
À vous de finir les requêtes d’ajouts. ____________________________ 39
Création de requêtes de suppression ____________________________ 39
Création d’une requête de suppression des animaux _____________________________ 39
À vous de finir les requêtes de suppression. _______________________ 41
Conclusion sur les requêtes __________________________________ 41
Affichage des animaux ______________________________________ 42
Affichage des Visiteurs ______________________________________ 47
Affichage des Clients _______________________________________ 48
Javascript _______________________________________________ 50

1
Jean-Luc Baptiste

Création d’une popup d’ajout d’un animal ________________________ 50

Mise en forme de la Popup _______________________________________________ 50

Travail à faire ________________________________________ 67

Transfert des données sur le serveur HFSQL __________________ 68
Création de la base de données sur le serveur HFSQL ________________ 68
Conversion sous l’éditeur d’analyse. ____________________________ 70
Windev Mobile ________________________________________ 75
Création de la première fenêtre. ___________________________ 80
Code du bouton de connexion. ________________________________ 86
Requêtes de recherche ______________________________________ 87
Menu de la page d’accueil des visiteurs __________________________ 91
Liste des clients ______________________________________________________ 93
Programmation des passages ____________________________________________ 100
Accueil des clients. _______________________________________ 103
Je

Affichage de l’ensemble des informations du passage ____________________________ 105

an

Les WebServices ______________________________________ 110

Création du projet dans Windev ______________________________ 110
- Lu

Présentation des Webservices. _______________________________ 114

c

Préparation du serveur de déploiement. ________________________ 118

Ba

Génération du Webservice. _________________________________ 122

Consommation du webservice _______________________________ 126
pt
is
te

2
 Jean-Luc Baptiste

Présentation :
Cette formation va vous permettre de découvrir l’ensemble des produits de développement de la
société PC-Soft :

Avec WinDev vous pouvez créer Avec WebDev, vous pouvez Avec Windev Mobile vous
des applications pour Windows, créer des sites Intranet, pouvez créer des applications
Linux et Mac Internet, et Responsive IOS, Android, Windows 10
mobiles…

Méthodologie
Nous allons créer un cas à partir de zéro. Ce cas va nous permettre de scanner l’ensemble des produits
de la société PCSoft. Les fonctionnalités essentielles seront vues de façon plus ou moins appuyée ou
soutenues.

Voici les points essentiels que nous aborderons :

Sur le serveur Microsoft Server 2016

HFSQL
Nous allons paramétrer HFSql pour qu’il héberge notre base de données. Voici ce que permet HFSql :

HFSQL est un serveur de bases de données gratuit, ouvert et cross-plateformes. Il fonctionne sous
Windows et Linux, sur mobiles, sur les réseaux de toute taille et de tout type, et gère automatiquement
plusieurs centaines d’accès simultanés. La diffusion illimitée du moteur HFSQL est libre et gratuite
avec vos applications WINDEV.

3
Jean-Luc Baptiste

Je

Cross-Plateformes
an

HFSQL offre un format de stockage binairement compatible entre toutes les plateformes.
- Lu
c
Ba
pt
is
te

4
 Jean-Luc Baptiste

Serveur d’application WEBDEV

Webdev nous permet de développer des sites statiques, php, ou dynamique (AWP).

Statiques
Lorsque vos sites sont statiques, il suffit de les héberger sur un serveur ayant Apache ou IIs d’installé

Php
Si vos sites doivent être en Php, dans ce cas-là vous devrez l’installer sur un serveur ayant Apache (ou
IIs) et Php d’actif.

Dynamique (AWP)
AWP est la technologie développée par PC Soft qui dynamise les sites comme pourrait le faire Php.
Cette technologie propriétaire ne peut fonctionner que si vous installez le serveur d’application sur
votre serveur dédié.

Nous utiliserons donc le serveur d’application. Vous pouvez le télécharger dans sa version limitée à 10
connexions en vous rendant ici :

[Link]

Sur le poste de développement.

Sur le poste de développement, nous utiliserons les versions 23 de Windev, WebDev et Windev Mobile.

5
Jean-Luc Baptiste

Contexte
La société DogyCat propose un service de visite à domicile des animaux de compagnie. Les
propriétaires d’animaux font appel à leurs services lorsqu’ils désirent s’absenter. La société envoie
quelqu’un tous les jours à domicile pour vérifier que les animaux ne manquent de rien.

L’idée du gérant de la société est de créer une application pouvant permettre de saisir le compte rendu
de la visite et publier une photo de l’animal. Le propriétaire pouvant ainsi être sécurisé sur son bien-
être.

Il y aura donc :

Une application mobile avec 2 entrées :

- Une entrée pour le personnel soignant.

- Une entrée client.

Un BackOffice sous Webdev dont le but est de faire la gestion des clients et de leurs animaux. Les
données du Backoffice seront utilisées dans l’applicatif mobile.
Je
an

Nous utiliserons ensuite Windev pour réaliser la partie WebService.

- Lu
c
Ba
pt
is
te

6
 Jean-Luc Baptiste

Développement WebDev
Nous allons créer le projet. Lancez Webdev

Choisissez Créer un projet, nous allons nous laisser guider par l’assistant.

Cliquez sur Site.

7
Jean-Luc Baptiste

Je

Comme nom du projet, indiquez DogyCat. Par défaut l’emplacement du projet se remplira
automatiquement. Cliquez ensuite sur la flèche permettant d’aller sur l’écran suivant.
an
- Lu
c
Ba
pt
is
te

Ici vous pourriez ajouter des documents consultables par les développeurs, le chef de projet. En fait,
vous pouvez stocker tous les documents nécessaires à l’élaboration du site.

Dans notre cas, nous allons directement passer à l’écran suivant.

8
 Jean-Luc Baptiste

Webdev vous permet de créer votre projet en partant de zéro ou vous permet d’utiliser des projets se
basant sur du RAD applicatif. Ce second choix est intéressant si vous devez créer un site de e-
commerce par exemple. En effet dans ce cas Webdev va vous créer toute l’application, vous n’aurez
qu’à customiser.

Nous, nous allons démarrer de zéro, choisissez donc créer un projet vierge.

9
Jean-Luc Baptiste

Maintenant, il nous faut choisir le type de site. Notre site est un site de type Intranet, nous ne voulons
pas que les pages soient indexées par les moteurs de recherche. Nous prendrons donc le choix
Dynamique Intranet/Extranet.

Le site Dynamique Internet aurait pu faire l’affaire aussi.

Je
an
- Lu
c
Ba

Le gestionnaire de source permet de stocker sur un serveur de base de données HFSL l’ensemble des
éléments constitutif du projet : Les pages, les requêtes, les états, les images, le code…. L’avantage est
pt

de pouvoir travailler en équipe sur le même projet, de pouvoir gérer les différentes versions du code,
de pouvoir revenir en arrière…
is
te

Dans notre cas, nous n’allons pas l’activer, car notre serveur HFSql n’est pas actif. Vous pourrez
intégrer le projet dans le GDS plus tard si vous le souhaitez.

10 
 Jean-Luc Baptiste

La charte de programmation sert à préfixer vos variables ainsi d’un coup d’œil vous saurez si une
variable est un entier, un réel, un booléen.

L’ambiance de projet va vous permettre d’avoir un thème homogène sur l’ensemble de vos écrans, les
boutons, les combos, les zones de saisies seront construites avec la même harmonie de couleur, de
fontes de tailles de caractères.

Choisissez par exemple BStrap.

11 
Jean-Luc Baptiste

Je
an
- Lu

L’internationalisation du projet vous permet d’avoir la possibilité de saisir les libellés, les textes en
c

plusieurs langues, c’est pratique si votre projet doit être lu par des personnes venant de pays différents.
Le passage dans la langue de l’internaute sera automatique.
Ba

Pour nous, on reste francophone.

pt
is
te

12 
 Jean-Luc Baptiste

Nous allons utiliser une base de données, donc validez le choix Oui, créer une nouvelle base de
données

La base de données sera décrite par une analyse, Mcd (Modèle conceptuel des données) ou Mld
(Modèle logique des données). Le nom par défaut est celui du projet. On valide le choix.

Comme vous le découvrez, il existe un très grand choix de base de données que vous pouvez interroger
avec WebDev. Dans notre cas, nous allons commencer notre projet avec une base de données de type
HFSQL classic. Nous commencerons le prototypage en local et ensuite on basculera sur du HFSql
Client/serveur.
13 
Jean-Luc Baptiste

Je

Validez pour finaliser.

an

L’assistant se ferme le temps d’en ouvrir un autre. Maintenant, nous sommes dans l’éditeur d’analyse,
prêt à créer un nouveau fichier de données.
- Lu

Création des fichiers

Le fichier des visiteurs
c
Ba
pt
is
te

Cliquez sur le premier choix, nous allons créer le premier fichier.

14 
 Jean-Luc Baptiste

Notre premier fichier sera celui des visiteurs (les personnes qui iront s’occuper des animaux).

Nous sommes de nouveau obligés de confirmer que nous voulons travailler sur une base locale. Validez
et terminez l’assistant.

15 
Jean-Luc Baptiste

Voilà, nous allons pouvoir renseigner l’ensemble des champs constitutifs de notre fichier Visiteur.

Par défaut, l’identifiant du fichier Visiteur est créé. C’est un identifiant automatique.
Je

Nous allons avoir besoin de stocker d’autres informations :

an

- Le nom, (de type Texte et de taille 50).

- Le prénom, (de type Texte et de taille 50).
- Lu

- Son numéro de téléphone (de type Texte et de taille 15).

- Son login (de type Texte et de taille 25).
c

- Son mot de passe (de type Texte et de taille 25).

Ba
pt
is
te

Pour identifier le visiteur nous aurons besoin de faire une recherche sur son login et son mot de passe.

Pour cela nous allons créer une clé composée qui servira pour la recherche.

Créez une rubrique nommée CléVisi de type Clé composée qui sera la concaténation de la rubrique
Login et la rubrique Mdp

16 
 Jean-Luc Baptiste

Une fois la clé composée créée définissez la comme une clé unique.

Voilà, pour le moment le premier fichier est défini, nous pourrons y revenir si besoin.

Pour notre projet nous allons avoir besoin de stocker un grand nombre d’informations. Nous venons
de créer le fichier des visiteurs, mais ce n’est pas tout. Il va nous falloir :

Le fichier des clients,

Le fichier des animaux

Le fichier des passages

17 
Jean-Luc Baptiste

Le fichier des clients

Pour les clients nous aurons besoin de :

Leur nom,

Leur prénom,

Leur adresse ;

Leur code postal,

Leur ville,

Leur téléphone,

La latitude,

La longitude,

Le login,

Le mot de passe
Je

La clé de recherche
an
- Lu

La latitude et la longitude nous permettront de faire de la géolocalisation qui aidera les visiteurs à
trouver la maison des clients. Pour les définir utiliser le type réel de format comme ci-dessous :
c
Ba
pt
is
te

Voici le fichier client tel que vous devriez l’avoir

18 
 Jean-Luc Baptiste

Le fichier Animal.

Nous avons besoin des informations suivantes :

Un nom d’animal (de type texte sur 50 caractères).

Sa race ((de type texte sur 50 caractères).

Les informations laissées par le propriétaire (de type texte et de sous-type Mémo texte).

Une photo (de Type Son, Image, Binaire… et de sous type Image (mémo binaire).

Et la clé avec doublons identifiant le client.

Voilà le fichier tel qu’il apparaitra dans l’éditeur :

19 
Jean-Luc Baptiste

Le fichier des passages

Ce fichier est très important, il va nous permettre :

D’archiver l’ensemble des visites.

De donner un planning de travail aux visiteurs

De donner un accès au client à l’heure de visite et de voir une photo de l’animal prise par le
visiteur et lire un petit compte rendu.
Je
an
- Lu
c
Ba
pt
is
te

Dans le fichier nous avons donc :

• L’identifiant automatique IDPassage

• L’identifiant de visiteur en clé avec doublons
• L’identifiant d’animal en clé avec doublons
• La date du passage (de type Date)
• L’heure de passage (de type heure)
• La rubrique compte rendu de type texte et sous-type mémo texte.
• Et une rubrique Photo pour permettre au visiteur de prendre une photo destinée à rassurer le
client.

20 
 Jean-Luc Baptiste

Voici l’ensemble des fichiers :

Voilà, il ne nous reste plus qu’a finaliser l’analyse en cliquant sur Génération

Maintenant l’analyse est finie et le fait de l’avoir générée va nous permettre de pouvoir manipuler les
champs dans le code. La génération vous permet d’avoir l’analyse toujours synchronisée et en phase
avec le code.

Création du site
Nous allons maintenant pouvoir commencer le développement du site proprement dit. Je n’accorderai
pas trop de temps à la présentation, la mise en forme. Je ne suis pas infographiste, donc le site sera
orienté fonctionnalités métier et très peu porté sur l’esthétisme.

21 
Jean-Luc Baptiste

Page d’accueil
Nous allons créer la première page web du projet. Cliquez sur Nouveau :

Puis sur Page et ensuite de nouveau Page

Je
an
- Lu
c
Ba
pt
is
te

22 
 Jean-Luc Baptiste

Choix du type de la page :

Comme vous le voyez, il y a plusieurs possibilités, je vous laisse les découvrir.

Il y en a une qui me plait c’est Responsive Présentation dans les modèles prédéfinis (Responsive
Web Design). En bas à droite vous verrez un choix permettant de générer un modèle et une page ou
seulement une page. Prenez le second choix (Générer une page seule) nous génèrerons le
modèle plus tard.

23 
Jean-Luc Baptiste

Je
an
- Lu
c

Pour la sauvegarde : Saisissez Départ dans la zone Titre , le nom va automatiquement se transformer
Ba

en PAGE_Depart.
pt
is
te

Customisation de la page Départ

Observons la page :

En haut vous voyez plusieurs tranches

- Mobile (Smartphone,
- Tablette,
- Bureau (Petit),
- Bureau par défaut.

24 
 Jean-Luc Baptiste

À chacune des tranches correspondent une mise en forme et une présentation différente en fonction
des cibles d’exécution. Le principe est le suivant : vous travaillez sur la tranche la plus grande
(Bureau), ensuite vous vérifiez et modifiez la présentation des tranches inférieures en cliquant sur le
nom de la tranche. Toutes les modifications des tranches inférieures agissent par surcharge sur la
tranche concernée.

Regardons les zones :

PortFolio pourrait devenir une galerie d’image correspondant aux animaux

Collaborateurs c’est nos visiteurs

Clients, ben devinez !

Contact et localisation, on va supprimer, car nous n’en avons pas l’usage.

25 
Jean-Luc Baptiste

Commençons la customisation par la première zone

Sur la droite vous voyez un champ englobant les réseaux sociaux, nous allons le supprimer, clic droit et
Supprimer.

Passons au menu :

• Supprimez l’item CONTACT

• Modifiez le nom PORTFOLIO en Animaux
• Modifiez le nom Collaborateurs en Visiteurs
Je
an

La zone centrale contient un texte dans un bandeau noir et un bouton. Cette zone centrale est un
bandeau défilant contenant 3 plans distincts dans la capture écran. Positionnez-vous sur le 1er bandeau
- Lu

modifiez le texte par « Gestion des Animaux » et modifiez le texte du bouton par Animaux comme
ceci :
c
Ba
pt
is
te

Sur le plan numéro 2 :

Modifiez le texte par « Gestion des visiteurs » et modifiez le texte du bouton par Visiteurs comme
ceci :

Sur le plan numéro 3 :

26 
 Jean-Luc Baptiste

Modifiez le texte par « Gestion des clients » et modifiez le texte du bouton par Clients comme ceci :

Customisation de la deuxième zone

À la place de PortFolio écrivez Animaux

Supprimer le bouton Best Of et Tous

27 
Jean-Luc Baptiste

Customisation de la troisième zone

Modifiez le nom Collaborateurs par Visiteurs, les photos et les noms seront changés par
programmation

Je
an

Customisation de la quatrième zone

Modifiez le texte du bouton par Ajouter un client.
- Lu

Supprimer la cellule contenant les 5 images

c

Voilà à quoi devrait ressembler la 4ieme zone :

Ba
pt
is
te

Customisation de la cinquième zone.

Pour la zone contact et localisation, vous allez tout supprimer. Enjoy ! pétardez tout

Customisation de la sixième zone.

Le pied de page va être aussi supprimé ! Prêt ? feu, tirez !

28 
 Jean-Luc Baptiste

Modification de la taille en hauteur.

En supprimant 2 zones consécutives, nous avons un espace vide important, vous pouvez réduire la
hauteur de page en sélectionnant et tirant vers le haut la petite « poignée » en bas de page

Enregistrez votre travail. Normalement il va y avoir une erreur, car une des zones que nous avons
supprimées était impactée par du code :

Si le volet des erreurs de code n’est pas présent dans l’éditeur, vous pouvez le faire afficher en faisant
un clic droit le plus à gauche de la zone des volets. Dans le menu, choisissez Volets et choisissez
Erreurs de compilations. Tant que vous y êtes faite en sorte d’avoir le volet Code et
Rechercher/Remplacer.

Maintenant vous devriez voir le même message d’erreur que moi. Cliquez dessus et la zone du code
incriminée apparait :

Ce code est du code exécuté par le navigateur lorsque l’utilisateur clique sur la deuxième option de la
barre de menu. La page va scroller pour afficher la zone Visiteur (anciennement Collaborateurs).

Corrigez le code comme ci-dessous :

29 
Jean-Luc Baptiste

Test de la page

Nous allons tester la page :

Cliquez sur l’icône verte marquée GO. Un navigateur s’ouvre et exécute la page. Si vous réduisez les
dimensions du navigateur vous verrez que la page se réorganise en fonction des différentes tranches du
Responsive Web Design.

Jeux d’essai
Nous allons ajouter des données dans les fichiers pour faire quelques tests.

À l’heure actuelle, les fichiers sont juste décrits dans l’analyse, ils ne sont pas créés physiquement.
Nous allons donner l’ordre à WebDev de créer les fichiers. Pour cela, faites un clic droit dans une zone
de la page attention, pas sur un objet ni un champ. Par exemple, positionnez-vous sur la zone grise a
droite. Après le clic droit vous devriez avoir un menu contextuel et voir l’option Code. Sélectionnez là.
Je
an
- Lu

Comme dans l’exemple de code ci-dessus, saisissez HcréationSiInexistant(« * »). Cette commande
va créer physiquement les fichiers s’ils ne sont pas présents sur le disque dur.
c
Ba

Remarque : Ce même code aurait pu être positionné au niveau du projet.

Une fois fait faites un Go du projet, puis fermez le navigateur. Prenez l’explorateur Windows, vous
pt

devriez voir les fichiers dans le dossier exe, du projet DogyCat du répertoire MesSites.
is
te

30 
 Jean-Luc Baptiste

Lancez l’outil WDMap que vous trouverez sous le menu Outils

Cet outil permet de gérer les données des fichiers. Lancez-le et ouvrez le fichier Visiteur.

31 
Jean-Luc Baptiste

Saisissez 2 enregistrements.

Ouvrez maintenant le fichier Client et modifiez-le comme ci-dessous

Ouvrez le fichier Animal et modifiez-le ainsi :

Je
an

Pour ajouter une photo, double cliquez dans le champ Photo

- Lu

Voilà, maintenant que les jeux d’essai sont créés, nous allons concevoir quelques requêtes.

Création de requêtes
c

Création d’une requête de sélection des animaux

Ba

Cliquez sur le bouton Nouveau puis Requête.

pt
is
te

Cliquez sur requête de Sélection.

32 
 Jean-Luc Baptiste

L’éditeur de requête se lance :

Faites passer de gauche à droite avec la flèche les rubriques que vous souhaitez afficher. Comme vous
le voyez, nous voulons les animaux et leurs propriétaires. Faites comme ci-dessus et nommez la
requête REQ_ListeAnimal.

Pour la jointure, faites en sorte que [Link] soit égal à [Link].

Si tout se passe bien vous verrez ceci :

33 
Jean-Luc Baptiste

Lancez un go de la requête en cliquant sur ce bouton :

Voici le résultat :

Création d’une requête de sélection des clients

Cliquez sur le bouton Nouveau puis Requête.
Je
an
- Lu
c
Ba
pt
is
te

Sélectionnez l’ensemble des champs de la table Clients. Nommez cette requête REQ_ListeClient

34 
 Jean-Luc Baptiste

Création d’une requête de sélection des visiteurs

Cliquez sur le bouton Nouveau puis Requête.

Sélectionnez l’ensemble des champs de la table Visiteur. Nommez cette requête REQ_ListeVisiteur

35 
Jean-Luc Baptiste

Je
an
- Lu

Création d’une requête d’ajout des animaux

Cliquez sur le bouton Nouveau puis Requête.
c
Ba
pt
is
te

Sélectionnez Ajout.

36 
 Jean-Luc Baptiste

Choisissez le fichier Animal.

Nous allons ensuite devoir indiquer comment seront entrées les informations. Le champs
[Link] est un identifiant automatique, nous n’y touchons pas c’est le serveur de bases de
données qui va incrémenter tout seul la valeur. Le reste des valeurs des champs est envoyé par
paramètres.

37 
Jean-Luc Baptiste

Nommez la requête et cliquez sur suivant.

Je
an

Voilà le résultat
- Lu
c
Ba
pt
is
te

38 
 Jean-Luc Baptiste

À vous de finir les requêtes d’ajouts.

Je vous laisse finir les requêtes d’ajout :

• REQ_AjoutClient
• REQ_AjoutVisiteur

Création de requêtes de suppression

Création d’une requête de suppression des animaux
Cliquez sur le bouton Nouveau puis Requête.

Cliquez sur Suppression.

Pour les conditions de suppression, nous allons supprimer un animal dont [Link] est égal à
un paramètre.

39 
Jean-Luc Baptiste

Nommez la requête REQ_SupAnimal

Je
an
- Lu
c
Ba
pt
is
te

Imaginons maintenant que nous voulions supprimer l’ensemble des animaux d’un client. Dans ce cas
nous devons supprimer tous les animaux dont le champ [Link] est égal au code client que
nous passerons en paramètre.

À vous de réaliser la requête de suppression des animaux d’un client. Vous nommerez cette requête
REQ_SupAnimauxDeClient.

40 
 Jean-Luc Baptiste

À vous de finir les requêtes de suppression.

Je vous laisse finir les requêtes de suppression :

• REQ_SupprimeClient (en paramètre nous passerons l’identifiant du client, la suppression de

ses animaux sera faite grâce à une des requêtes de suppression déjà définie.)

• REQ_SupprimeVisiteur

Conclusion sur les requêtes

Si plus tard nous avons besoin d’autres requêtes, nous les concevrons. Vous pouvez noter que les
requêtes peuvent être des requêtes en SQL pur. L’éditeur visuel de requêtes est un outil d’aide à la
conception de requêtes. D’ailleurs, vous pouvez transformer une requête visuelle en requête SQL

41 
Jean-Luc Baptiste

Affichage des animaux

Positionnez-vous sur la zone Animaux, nous allons y apporter quelques modifications. Supprimer la
cellule qui contient toutes les images. Nous afficherons les animaux à notre façon, via une zone
répétée. La zone « Animaux » ressemble à ceci :

(Ne soyez pas étonnés de voir que la couleur de fond de mes boutons soit
maintenant rouge, j’ai changé la couleur pour des raisons d’affichage et
d’impression)
Je
an
- Lu

Nous allons ajouter un champ spécifique qui va nous afficher l’ensemble des animaux retournés par la
c

requête REQ_ListeAnimal.
Ba

Nous allons créer une zone répétée. Pour cela, allez dans le bandeau Création et cliquez sur Zone
répétée.
pt
is
te

Positionnez ensuite la zone répétée sous le bouton Nouveau un assistant se lance.

42 
 Jean-Luc Baptiste

Le choix par défaut « Afficher des données provenant d’un fichier ou d’une requête » nous convient.
Cliquez sur Suivant.

Choisissez la requête REQ_ListeAnimal.

43 
Jean-Luc Baptiste

Au niveau des rubriques à afficher, décochez IdAnimal. En effet ça n’apportera rien d’afficher
l’identifiant.
Je
an
- Lu
c
Ba
pt
is
te

La clé de parcours influencera l’ordre d’affichage. Nous voudrions les animaux triés par leurs noms.
Cliquez donc sur la rubrique « Nom ».

44 
 Jean-Luc Baptiste

Au niveau du mode de fonctionnement, choisissez Classique.

Pour les paramètres d’affichage, laissez le choix par défaut.

Nommez la zone répétée ZR_animal.

Attention : il y a un bug avec la version 23 que j’utilise : le nombre de répétitions que j’avais fixé à 3
n’est pas pris en compte. Pour le corriger, faite un clic droit sur la zone répétée, puis cliquez sur
Description et dans l’onglet général remodifiez, par exemple ici, j’ai mis 4

45 
Jean-Luc Baptiste

Centrez la zone répétée et la réglette dans la barre d’outils : Alignement et Centrer dans le parent
(Horz.)
Je
an

Voici ce que vous devriez avoir à l’écran :

- Lu
c
Ba
pt
is
te

Comme vous le voyez, certaines modifications d’agencements des champs devraient être faites.

Nous allons modifier Information et consigne et changer le mode d’affichage de la photo.

Pour changer le mode d’affichage de la photo : Clic droit sur la photo puis Description et dans
l’onglet général choisissez un mode d’affichage « Homothétique centré »
46 
 Jean-Luc Baptiste

Essayez de faire comme ci-dessous :

Lancez un test du projet.

Voilà le résultat.

Vous pouvez ajouter un cadre si vous le voulez, faites un clic droit sur la zone répétée, puis prenez
l’onglet style, dans l’élément cadre choisissez une couleur de cadre, par exemple rouge.

Affichage des Visiteurs

Positionnez-vous sur la zone visiteur, nous allons y apporter quelques modifications.

Supprimer la cellule qui contient toutes les images.

47 
Jean-Luc Baptiste

Nous afficherons les visiteurs à notre façon, via une zone répétée. La zone visiteur ressemble
maintenant à ceci :

Je

Suivant le même principe que pour l’affichage des animaux, vous allez faire afficher les visiteurs dans
une zone répétée que vous nommerez ZR_ListeVisiteur.
an

Ensuite vous rajouterez un bouton Ajouter un visiteur.

- Lu

Voici à quoi pourrait ressembler votre zone Visiteurs

c
Ba
pt
is
te

Affichage des Clients

Positionnez-vous sur la zone clients, nous allons y apporter quelques modifications.

Supprimer la cellule qui contient toutes les images.

48 
 Jean-Luc Baptiste

Nous afficherons les clients à notre façon, via une zone répétée. La zone clients ressemble surement à
ceci :

Suivant le même principe que pour l’affichage des animaux, vous allez faire afficher les clients dans
une zone répétée que vous nommerez ZR_ListeClient.

Voilà un exemple de mise en page :

Maintenant faites un test du projet, logiquement toutes les zones répétées devraient contenir des
informations.

Il reste surement des modifications de mise en page à réaliser. Je vous conseille de tester toutes les
tranches (mobile, Tablette, Bureau) pour corriger d’éventuels problèmes d’interface.

N’oubliez pas d’enregistrer votre travail régulièrement.

49 
Jean-Luc Baptiste

Javascript
Nous avons 3 options de menu, chacune doit faire scroller l’écran au niveau d’un point d’ancrage.

Par exemple si vous cliquez sur le bouton clients, l’écran va scroller jusqu’à la zone de titre des clients.

Avec WebDev, nous pouvons inclure du code javascript pour réaliser certaines actions. Voici par
exemple le code que vous devriez avoir dans le bouton Clients :

Tout le code placé dans la zone verte est du code exécuté dans le navigateur de l’internaute. Le code
placé dans la zone jaune est exécuté sur le serveur.

Ici, le code s’exécutera donc dans le navigateur. Comme vous le voyez, le code prépare les commandes
à réaliser en Javascript grâce à Jquery.
Je

Vérifiez maintenant que ce code existe dans tous les boutons. Il y a de fortes probabilités que vous
an

soyez obligé de rajouter du code pour le bouton Visiteurs. Je vous laisse compléter le code manquant.
- Lu

Création d’une popup d’ajout d’un animal

c

Nous allons créer une popup (une fenêtre surgissante) pour nous permettre d’ajouter un animal.
Ba

Pour cela, allez dans le menu, choisissez l’onglet Page et ensuite cliquez sur Pages Popup.
pt
is
te

Nommez cette popup POPUP_Animal

Mise en forme de la Popup

Ajout d’un Titre
Nous allons rajouter un libellé de titre. Cliquez sur l’onglet Création du menu puis sur le bouton
ABC.

50 
 Jean-Luc Baptiste

Positionnez la zone de texte riche en haut de la fenêtre Popup, modifiez la taille, le centrage. Voici le
résultat attendu :

Astuce

Pour pouvoir modifier rapidement l’ensemble des caractéristiques du la zone de texte cliquez droit sur
la zone de texte, choisissez Description, puis Style, vous devriez arriver ici :

Cliquez sur le lien Plus d’options.

51 
Jean-Luc Baptiste

Je
an
- Lu
c
Ba
pt

C’est ici que toutes les options sont paramétrables, je vous laisse vous amuser pour trouver un résultat
is

qui vous plaise.

te

Nous allons maintenant ajouter une comboBox pour identifier le propriétaire de l’animal. Dans
l’onglet création, choisissez l’option Combo.

Normalement un assistant se met en route, nous allons le suivre :

52 
 Jean-Luc Baptiste

Nous allons utiliser la requête REQ_ListeClient pour remplir la ComboBox.

Pour la rubrique à afficher, nous allons choisir le nom.

La clé de parcours sera définie en fonction du nom, ils seront ainsi triés par ordre alphabétique.

53 
Jean-Luc Baptiste

La valeur de retour sera IdClient. En effet c’est cette valeur que nous stockerons dans le fichier Animal,
c’est notre clé étrangère.
Je
an
- Lu
c
Ba
pt
is

L’écran suivant vous demande si vous voulez lier la valeur avec une rubrique d’un fichier de façon
te

automatique. Nous nous voulons lier l’identifiant au fichier animal, pas le nom affiché dans la
comboBox. Nous répondrons Non à cette question.

L’assistant vous demande maintenant un nom pour la combo et le libellé. Remplissez comme ci-
dessous :

54 
 Jean-Luc Baptiste

Voici le résultat :

Nous allons maintenant ajouter un bouton de fermeture de la Popup.

Ajoutez un bouton dans le coin inférieur droit de la Popup, nommez le Btn_Ferme et comme libellé
saisissez Ferme.

Voici le résultat :

55 
Jean-Luc Baptiste

Allez dans le code (clic droit ->Code)

Dans la zone de code du navigateur (zone verte) saisissez ceci :

Je
an
- Lu

La popup se fermera sans rien sauvegarder. Nous allons maintenant aller sur la page de départ pour
c

ajouter le code d’ouverture de la popup dans le bouton Nouveau de la zone Animaux.

Ba

Pour switcher entre la popup et la page « mère » repérez en bas a gauche l’icône correspondant à la
page :
pt
is
te

En passant la souris dessus vous devriez pouvoir revenir sur la page de départ. Sinon, vous pouvez
cliquer dessus.

Voilà le code à saisir :

Comme vous le voyez, rien de bien compliqué. On demande au navigateur d’ouvrir la popup et de la
centrer dans l’écran.

Maintenant vous pouvez tester le résultat en faisant un go du projet.

56 
 Jean-Luc Baptiste

Voilà ! pas mal ; non ? Revenons sur la Popup pour l’enrichir.

Nous allons rajouter 3 champs de saisie :

• SAI_NomA dans lequel nous saisirons le nom de l’animal

• SAI_RaceA dans lequel nous saisirons la race de l’animal
• SAI_Informations dans lequel nous saisirons les informations sur l’animal

La photo de l’animal sera prise par le visiteur grâce à son téléphone.

Il nous faut aussi un bouton Ajouter pour inscrire les informations dans le fichier Animal.

Voilà a quoi devrait ressembler votre popup :

Code d’ajout d’un nouvel animal.

Voici le code d’ajout d’un nouvel animal. Notez que Ajax est activé, on limite ainsi les allers-retours
entre le serveur et le navigateur de l’internaute.

57 
Jean-Luc Baptiste

Notre popup est finie. Testez pour voir si tout fonctionne

Suppression d’un animal

Pour supprimer un animal nous allons ajouter un bouton de suppression dans la zone répétée pour
chaque animal.

Nous allons créer un bouton nommé BTN_SupAnimal et le placer comme ceci :

Je
an
- Lu
c
Ba

Modification de la zone répétée.

pt

Au moment de la création de la zone répétée, je vous avais demandé de décocher le champ IdAnimal,
is

car il n’était pas affichable. C’est toujours vrai, mais nous avons besoin de le connaitre pour pouvoir
supprimer l’animal correspondant à l’identifiant. Nous allons donc rajouter cette clé de façon
te

manuelle.

Faites un clic droit sur la zone répétée et cliquez sur Description. Nous allons rajouter un attribut,
cliquez sur Nouveau, nommez l’attribut Att_Cle et liez le la rubrique IdAnimal de REQ_ListeAnimal.

58 
 Jean-Luc Baptiste

Comme vous le voyez il n’y a pas de champ associé à l’attribut, il ne nous sert pas à l’affichage dans un
champ, mais seulement de stockage.

Nous allons maintenant ajouter le bouton dans la zone répétée. Cliquez sur Nouveau, nommez
l’attribut ATT_Bsup, associez-lui le champ BTN_SupAnimal, et comme propriété : Visible

Validez la description de la zone répétée.

59 
Jean-Luc Baptiste

Code du bouton Supprimer

Voici le code du bouton :

À vous de tester le résultat, rajoutez un animal, observez que tout soit correct, puis supprimez ce
nouvel animal.

Modification d’un animal

Création de la Popup
Après la suppression nous devons faire la modification d’une fiche animal. Pour cela nous allons
Je

copier le contenu de la popup POPUP_Animal et le coller dans une nouvelle popup que l’on
nommera POPUP_ModifAnimal.
an

Cliquez sur l’onglet Page, puis sur Pages popup.

- Lu
c
Ba
pt

Dans la fenêtre de gestion des pages Popup, cliquez sur Nouveau et nommez cette nouvelle popup.
is
te

La nouvelle popup sera customisée comme ceci :

60 
 Jean-Luc Baptiste

Vérifiez le code du bouton Ferme, si vous l’avez copié de l’autre popup, il vous faudra le modifier pour
qu’il ferme la bonne popup.

Création de la requête de modification

Le code du bouton Modifier, si vous l’avez copié de l’autre devra être aussi modifié. De plus la requête
utilisée est une requête d’ajout, pas de modification. Il va donc falloir créer cette requête. Cliquez donc
sur le bouton Nouveau puis Requête, puis sur Modification (Update).

Pour le choix du fichier, prenez Animal.

61 
Jean-Luc Baptiste

Dans la fenêtre suivante, nous devons sélectionner la rubrique qui servira de rubrique maitre. Dans
notre cas c’est la rubrique [Link]. Cliquez donc sur cette rubrique et dans la colonne
condition. Définissez comme ci-dessous :
Je
an
- Lu
c
Ba
pt
is

Ensuite, après avoir validé cliquez dans la colonne Valeur/Paramètre pour indiquer que pour les
te

champs (Sauf photo) nous passerons les paramètres à modifier. Voici le résultat :

62 
 Jean-Luc Baptiste

Ensuite, nommez la requête comme ci-dessous :

Et voici votre requête de modification

Maintenant il ne nous reste plus qu’à l’utiliser !

Mais nous allons devoir faire un petit ajustement.

Si comme moi vous avez copié les champs de la popup ajout, vous remarquerez qu’ils ont été
renommés, car la portée des noms des popups est au niveau de la page qui les contient. Donc, il ne
peut pas y avoir 2 champs avec des noms identiques. Je vous propose de modifier le nom des champs
de la façon suivante :

Combo_ListeClient1 devient Combo_ListeClientM (M pour Modification)

SAI_NomA1 devient SAI_NomM et ainsi de suite.

63 
Jean-Luc Baptiste

Ouverture de la popup de modification

À l’intérieur de la zone répétée ZR_ListeAnimal, nous allons positionner un bouton d’ouverture de
la popup POPUP_ModifAnimal.

Nommez ce bouton BTN_ModifA

Je
an

Nous allons créer une requête de sélection qui renverra l’enregistrement correspondant à l’identifiant
- Lu

de l’animal passé en paramètre.

c

Créez une requête de sélection que vous nommerez REQ_SelectAnimal.

Ba
pt
is
te

Ensuite, en ayant [Link] de sélectionné cliquez sur Condition de sélection puis sur
Nouvelle condition.

64 
 Jean-Luc Baptiste

Indiquez ensuite que la rubrique [Link] sera égale au paramètre que l’on passera à la
requête.

Voici la requête finale :

Modification de la zone répétée.

Nous allons ajouter un attribut pour le bouton modification. Allez dans la description de la zone
répétée ZR_ListeAnimal, cliquez sur Nouveau.

Faites comme ci-dessous et validez :

65 
Jean-Luc Baptiste

Code du bouton Modification.

Nous allons maintenant coder le bouton d’appel de la popup de modification.
Je
an
- Lu
c
Ba
pt

Code du bouton Modifier de la Popup

is

Voilà le code nécessaire au bouton.

te

Comme vous le voyez, nous utilisons la valeur IdAnimal de la requête comme valeur du paramètre de
recherche.

Testez le projet pour vérifier que tout fonctionne.

66 
 Jean-Luc Baptiste

Travail à faire
Maintenant vous avez tous les éléments pour finir le projet web en :

• Permettant l’ajout d’un visiteur, sa modification et sa suppression

• Permettant l’ajout d’un client, sa modification et sa suppression

67 
Jean-Luc Baptiste

Transfert des données sur le serveur HFSQL

Notre site web utilise la base de données de façon locale, l’intérêt est que le site et l’application mobile
puissent utiliser les données en simultané, pour cela nous devons installer la base de données sur un
serveur de bases de données.

Création de la base de données sur le serveur HFSQL

Sur votre serveur Windows 2016 lancez le centre de contrôle HFSQL.
Je
an
- Lu
c
Ba
pt
is
te

Le mot de passe par défaut du compte admin est vide. Ce n’est pas problématique pour nous en phase
de test, mais il est impératif de mettre un mot de passe complexe dans le cas où le serveur est hébergé
et qu’il tourne en production.

Voici l’interface du serveur HFSQL :

68 
 Jean-Luc Baptiste

Cliquez sur le bouton Nouvelle base de données. Nommez là DogyCat.

Comme vous le voyez la base de données est maintenant créée :

L’essentiel du travail en local est réalisé. Nous aurions pu le faire à partir du poste de développement
avec le centre de contrôle HSFSQL installé par défaut.

Le travail sur le serveur est fini. Revenez sur le poste de développement tout en laissant le serveur
fonctionner.

69 
Jean-Luc Baptiste

Conversion sous l’éditeur d’analyse.

Sous WebDev, ouvrez l’éditeur d’analyse en cliquant sur le bouton Charger l’analyse du projet.

Faites un clic droit sur le fichier Animal et choisissez Description du fichier de données.

Je
an
- Lu

Dans la comboBox Type, choisissez l’option HFSQL Client/Serveur. Un assistant de création de

connexion se met à l’œuvre :
c
Ba
pt
is
te

Dans la zone de saisie du serveur indiquez l’adresse Ip du serveur 2018, puis cliquez sur suivant.

Ensuite, indiquez le nom d’utilisateur et son login.

70 
 Jean-Luc Baptiste

La base de données devrait vous être proposée :

Il vous reste à donner un nom à la connexion :

Cette popup devrait apparaitre :

Répondez Oui, les fichiers locaux seront copiés sur le serveur.

Ensuite, vérifiez que l’ensemble de nos fichiers soient cochés.

71 
Jean-Luc Baptiste

L’assistant vous propose ensuite de copier les fichiers sur le serveur, acceptez en cliquant sur le bouton
Copier maintenant.

Sélectionnez l’ensemble des fichiers de données à copier et valider pour terminer l’assistant.

Comme vous pouvez le voir ensuite, tous les fichiers ont changé de type, ils sont maintenant gérés via
une connexion de type Client/serveur.
Je
an
- Lu
c
Ba
pt

Pour que les changements effectués dans l’éditeur d’analyse soient répercutés dans le projet, il nous
faut générer l’analyse. Allez dans l’onglet de menu Analyse et ensuite cliquez sur le bouton Génération.
is
te

Après que la génération ait été effectuée, vous devrez lancer la synchronisation de la structure et des
données déployées sur le serveur. Cliquez donc sur Lancer dans la fenêtre ci-dessous.

Une autre popup apparait pour vous guider dans la modification automatique HFSQL.
72 
 Jean-Luc Baptiste

Cliquez sur suivant.

L’outil de modification a trouvé 2 lieux de stockage de données, un sur l’ordinateur et l’autre sur le
serveur.

Laissez les choix par défaut.

Comme les fichiers de données viennent tout juste d’être copiés, aucune modification de structure
n’est nécessaire. Cliquez donc sur annuler dans la fenêtre suivante.

Si vous cliquez sur l’onglet de menu Outils, vous pourrez voir l’outil HFSQL, il vous permet de gérer
votre serveur HFSQL sans avoir besoin d’y entrer via le bureau à distance.

Voici le résultat si vous cliquez dessus :

73 
Jean-Luc Baptiste

Nos 4 fichiers sont bien exportés dans la base DogyCat.

Si vous double-cliquez sur le fichier Animal vous devriez en voir le contenu :

Je
an
- Lu

Voilà l’ensemble de la base de données est maintenant sur le serveur !

Nous allons maintenant pouvoir créer notre application mobile qui va utiliser ces fichiers de données.
c
Ba

Vous pouvez fermer WebDev et ouvrir Windev Mobile.

pt
is
te

74 
 Jean-Luc Baptiste

Windev Mobile
Lancez Windev Mobile, nous allons créer le projet. Dans l’assistant qui s’est ouvert, cliquez sur Créer
un projet.

Comme vous le voyez ci-dessous Windev Mobile est capable de générer une application pour Android,
Ios, Windows 10 App, et Windows CE. Nous allons choisir une application Android.

Nommez le projet DogyCat

Cliquez sur suivant à la demande des documents joints.

Pour le choix des appareils sélectionnez le premier choix Générer une application pour téléphones et
tablettes.

75 
Jean-Luc Baptiste

Pour le gestionnaire de source, cliquez sur Non, ne pas utiliser le GDS.

Pour la charte de programmation laissez le choix par défaut.

Pour la charte graphique, choisissez un gabarit qui vous plaira. Pour ma part je vais prendre Matérial
Design Red pour rester dans la tonalité du site Web.
Je

Pour la langue du projet laissez tout par défaut.

an

Pour la base de données cliquez sur Oui, utiliser une base de données existante.
- Lu
c
Ba
pt
is
te

Cliquez sur Importer la description depuis une base de données existante.

76 
 Jean-Luc Baptiste

Dans la fenêtre ci-dessus, laissez tout par défaut.

Prenez le type HFSQL Client/Serveur.

Nommez la connexion DogyCat et cliquez sur Suivant.

Mettez l’adresse Ip de votre serveur et cliquez sur Suivant.

77 
Jean-Luc Baptiste

Inscrivez vos paramètres d’authentification et cliquez sur Suivant ;

Je
an
- Lu
c
Ba
pt
is

Le serveur est interrogé et il présente la base de données DogyCat. Normal, il n’a que celle-là à nous
te

montrer. 😉

Maintenant l’ensemble des fichiers contenus dans la base nous sont présentés. Cliquez sur la flèche
Ajouter tout pour faire importer l’ensemble des fichiers. Terminez l’assistant.
78 
 Jean-Luc Baptiste

Voilà dans l’éditeur d’analyse l’ensemble de la structure des fichiers a été importé. Il nous reste une
étape importante : nous devons configurer la connexion avec le mot de passe inscrit dans le serveur de
base de données. Cliquez sur l’onglet de menu Analyse et sur le bouton Connexion.

Dans la zone Nom d’utilisateur saisissez Admin et le mot de passe si vous en avez ajouté un. Cliquez
sur le bouton Tester pour voir si tout est correct. Si tout est correct, validez.

79 
Jean-Luc Baptiste

Je
an

Création de la première fenêtre.

- Lu

Nous allons maintenant créer notre première fenêtre de l’application mobile. Cliquez sur Fenêtre.
c
Ba
pt
is
te

Windev Mobile nous propose un vaste choix de fenêtres prédéfinies, nous allons prendre une fenêtre
de Login.

80 
 Jean-Luc Baptiste

Il vous est demandé de sauvegarder l’élément. En titre mettez Login.

La première fenêtre est créée, par contre, comme vous pouvez le voir elle est petite et ne correspond
pas à un modèle standard de téléphone mobile.

Les pointillés représentent l’espace occupé en mode paysage ou portrait. Nous allons agrandir ces
espaces.

Cliquez sur l’onglet Projet de la barre de menu, puis sur le bouton Description. Dans l’onglet projet
cliquez sur le bouton Description de la plateforme courante.

81 
Jean-Luc Baptiste

Voici la nouvelle fenêtre :

Je
an
- Lu
c
Ba
pt
is
te

Nous allons ajouter une nouvelle plateforme.

82 
 Jean-Luc Baptiste

Dans cette liste prenez le Nexus 5, il a l’avantage d’être d’un format commun.

Il est maintenant dans la liste des plateformes possible de votre projet. Pour que cette plateforme soit
la plateforme par défaut supprimez la plateforme Téléphone Android Générique. Ensuite validez

Maintenant nous allons appliquer cette plateforme à notre première fenêtre. Faites un clic droit dans
un espace libre de l’éditeur et cliquez sur Description. Dans la combo Plateforme d’édition
sélectionnez Nexus 5.

Voilà les pointillés vous montrent les nouvelles marges, à vous d’étirer la zone contenu pour qu’elle se
colle aux marges.

Vous devriez obtenir ceci :

83 
Jean-Luc Baptiste

Je
an
- Lu

Le fait d’avoir choisi la plateforme Nexus 5, n’implique pas que les champs ne pourront pas s’afficher
c

de façon convenable sur un téléphone plus grand ou plus petit. L’applicatif va mettre en place les
interfaces en fonction des caractéristiques de la plateforme d’édition.
Ba

L’essentiel pour vous est de bien gérer les ancrages. Ils vont déterminer la façon dont les objets doivent
pt

être affichés. Pour gérer les ancrages il faut faire un clic droit sur un objet et choisir Ancrage.
is

Si par exemple je le fais sur le bouton Se Connecter je verrais ceci :

te

Comme vous le voyez le bouton a été généré avec un ancrage personnalisé. Vous pouvez par exemple
choisir que ce bouton soit centré, occupe toute la largeur, soit en bas ou en haut de la fenêtre…. Bref,
c’est ici que se corrigent tous les problèmes d’affichages.
84 
 Jean-Luc Baptiste

Nous allons dès maintenant tester le projet. Cliquez sur la petite flèche à côté du bouton GO (le gros,
tout vert 😉).

Sélectionnez le simulateur Nexus 5.

Windev Mobile vous demande de choisir la première fenêtre du projet. Choisissez FEN_Login.

Voilà, le simulateur se met en route et vous présente l’application telle qu’elle sera exécutée en réel sur
un téléphone.

85 
Jean-Luc Baptiste

Je

Nous allons effectuer quelques changements.

an

Fermez le simulateur et supprimez le champ Se souvenir de moi.

-

Ensuite, corrigez le champ SAI_Email pour modifier le texte d’aide. Nous allons enlever E-mail ou
Lu

téléphone et le remplacer par Veuillez saisir votre login. Pour cela, cliquez sur Description,
puis allez sur l’onglet Aide et modifiez le texte d’indication.
c
Ba

La fenêtre devrait maintenant ressembler à ceci :

pt
is
te

Code du bouton de connexion.

Il nous faut discriminer la connexion d’un client de celle d’un visiteur. Pour cela nous allons utiliser 2
requêtes :

• Une qui recherche le visiteur en fonction de son login et mot de passe passés en paramètre
• Une qui fait la même chose pour le client.

Si la première requête renvoie une valeur alors c’est un visiteur qui s’est logué, si elle ne retourne rien
alors on lance la deuxième requête pour chercher un client. Si la deuxième requête ne renvoie rien
alors c’est qu’il y a eu une erreur de saisie.
86 
 Jean-Luc Baptiste

Ouvrez la zone de code du bouton. Vous devriez voir le code par défaut :

Nous allons le modifier de la façon suivante :

Ce code va nous permettre d’être sûrs que les 2 champs essentiels ont été renseignés. Je vous rappelle
que si vous voulez avoir l’aide sur une fonction, mettez le curseur dessus et cliquez sur la touche F1

Requêtes de recherche
Nous allons commencer par faire la requête de recherche d’un visiteur. Lancez l’éditeur de requête et
choisissez une requête de sélection que vous nommerez REQ_LogVisiteur. Prenez l’ensemble des
champs, et définissez les 2 conditions de sélection via paramètres :

• Une sur le login

• L’autre sur le mot de passe

87 
Jean-Luc Baptiste

Je
an

Faites de même pour la requête de sélection des clients, vous la nommerez REQ_LogClient
-

Maintenant, revenez sur le code du bouton de connexion.

Lu

Nous allons commencer à le modifier de la façon suivante :

c
Ba
pt
is
te

88 
 Jean-Luc Baptiste

Testez le projet en mettant un login inexistant. Normalement vous lirez le message vous informant que
vous n’êtes pas dans la base.

Maintenant nous allons créer les 2 fenêtres d’accueil, une pour le client et l’autre pour le visiteur. Pour
l’instant elles seront vides.

Nous reviendrons dans le code du bouton de connexion ensuite pour diriger sur les bonnes fenêtres.

Pour la fenêtre du client, choisissez une fenêtre mobile Vierge pour Nexus 5

Nommez là FEN_Client

89 
Jean-Luc Baptiste

Pour le visiteur faites de même et nommez la fenêtre FEN_Visiteur.

Maintenant que les 2 fenêtres sont créées, revenez dans le code du bouton de connexion de la fenêtre
Login. Nous allons le modifier de la façon suivante :
Je
an
- Lu
c
Ba
pt
is
te

Maintenant, testez avec des identifiants valides pour le client et le visiteur.

90 
 Jean-Luc Baptiste

Menu de la page d’accueil des visiteurs

Voici à quoi pourrait ressembler la page d’accueil des visiteurs :

Le bouton clients enverrait vers la liste des clients et de leurs animaux, le bouton passage permettrait
de voir tous les passages et d’inscrire les nouveaux passages.

Pour créer le bouton passage :

Cliquez sur la flèche vers le bas du bouton Bouton.

Ensuite, choisissez un bouton flottant. Positionnez-le sur la fenêtre et réglez sa taille sur 80x80 (clic
droit, Description puis IHM).

Pour insérer l’image choisissez Catalogue comme ci-dessous :

91 
Jean-Luc Baptiste

Saisissez client dans la zone de recherche et cliquez sur la loupe. L’ensemble des images
correspondantes au mot clé client vont apparaitre :
Je
an
- Lu
c
Ba
pt
is
te

Choisissez le bonhomme blanc.

92 
 Jean-Luc Baptiste

Vérifiez ici que la taille de l’image soit de 64x64 et cliquez sur Générer en multi-dpi pour que cette
image soit toujours parfaitement affichée qu’importe la résolution de l’écran du smartphone.

Pour le bouton du passage, recherchez le mot clé passage pour avoir le bonhomme qui marche.

Ensuite, rajoutez un libellé sous chaque bouton.

Liste des clients

Nous allons créer une fenêtre FEN_ListeClients nous permettant de voir tous les clients et de pouvoir
accéder à leurs informations.

À l’intérieur nous allons déposer une zone répétée qui va nous afficher via requête la liste des clients.

La requête simplifiée ne renverra que l’Identifiant, le nom, le prénom. Vous la nommerez

REQ_ListeClients.

Zone répétée
Insérez une zone répétée verticale, l’assistant se met en route, nous allons le suivre.
93 
Jean-Luc Baptiste

Cliquez sur Afficher les données provenant d’un fichier ou d’une requête. Sélectionnez
ensuite la requête REQ_ListeClients. Cochez toutes les rubriques, nous masquerons l’identifiant
plus tard. La rubrique de tri sera le nom. Le nombre de colonnes sera égal à 1 (choix par défaut). Pour
finir, nommez la zone répétée ZR_ListeClients.

Voici le résultat :
Je
an
- Lu
c
Ba
pt
is
te

Nous allons maintenant programmer le bouton d’appel de cette fenêtre. Retournez sur la fenêtre
FEN_Visiteur et dans le code du bouton BTN_Client ajoutez :

Testez que votre projet soit fonctionnel. Ensuite, revenez sur la fenêtre FEN_ListeClients, nous allons
modifier la zone répétée. Faite un clic droit dessus, ensuite allez dans Description.

Nous souhaitons que le champ IdCLients ne soit pas affiché, mais qu’il soit mémorisé. Pour cela nous
allons ajouter un attribut dans la zone répétée qui sera lié au champ Idclients de la requête.

94 
 Jean-Luc Baptiste

Faites comme ci-dessous :

Créez l’attribut, ne lui associez aucun champ, et liez-le à la rubrique IDCLients de la requête
REQ_ListeClients.

Ensuite supprimez la zone de saisie correspondante à l’identifiant de client, votre zone répétée devrait
maintenant ressembler à celle-ci :

Les champs sont en saisie, vous pouvez faire en sorte qu’ils ne soient qu’en affichage, pour cela allez
dans la description du champ et dans l’onglet IHM.

95 
Jean-Luc Baptiste

Voilà, nous avons une fenêtre qui nous affiche la liste des clients. Il serait maintenant judicieux d’avoir
une fenêtre nous permettant de tout connaitre sur un client, et même pouvoir le géolocaliser.

Créez une fenêtre nommée FEN_AfficheClient. Nous aurons aussi besoin d’une requête qui renvoie
l’ensemble des informations d’un client (sauf le login et le mot de passe) en fonction de l’identifiant
passé en paramètre. Cette requête se nommera REQ_FicheClient

Je
an
- Lu
c
Ba

Nous allons placer les champs de la requête sur la fenêtre. Dans la zone de droite allez dans le dossier
requêtes, ensuite faites glisser les rubriques via drag and drop sur la fenêtre.
pt
is
te

96 
 Jean-Luc Baptiste

Les champs étant dans la fenêtre, nous revenons dans la fenêtre FEN_ListeClient pour lancer notre
nouvelle fenêtre.

Il faudrait qu’au clic sur un bandeau de la zone répétée, nous ouvrions la fenêtre en lui passant en
paramètre l’identifiant du client sélectionné.

Positionnez-vous dans le code de la zone répétée dans la rubrique Sélection d’une ligne de
ZR_ListeClients. Voici le code

Revenez maintenant sur la fenêtre FEN_AfficheClient

Il nous faut coder l’affichage des données. Allez dans le code de la fenêtre dans la zone Déclaration
globales de FEN_AfficheClient.

Nous allons faire en sorte que l’identifiant soit passé de la fenêtre précédente à celle-ci par un
paramètre, puis nous lancerons la requête et enfin le résultat de celle-ci sera affiché.

Voici le code :

Testez le projet, vous devriez voir ceci :

97 
Jean-Luc Baptiste

Affichage de la localisation GPS.

Nous avons les coordonnées Gps, il serait intéressant d’afficher Google map. Nous allons créer une
fenêtre que nous nommerons FEN_Web qui affichera les page Html que nous passerons en paramètre.

Créez donc une nouvelle fenêtre vierge et insérez-y un champ HTML :

Ancrez-le pour qu’il puisse occuper tout l’espace si ce n’est pas le cas par défaut. Nommez ce champ
HTM_Lien.

Attention : dans la description du champ HTML, veuillez bien décocher Interdit l’exécution des
script JavaScript

Voici le code à écrire dans la zone Déclarations globales de FEN_Web :

Je
an
-

Nous passons en paramètre à la fenêtre l’url et on l’affecte au champ Html, c’est aussi simple !
Lu

Maintenant, revenons dans la fenêtre FEN_AfficheClients pour coder l’url en fonction de la latitude et
c

de la longitude.
Ba

Nous allons rajouter une icône dans l’ActionBar de la fenêtre. Faites un clic droit dans l’ActionBar puis
choisissez Description. Voici l’écran :
pt
is
te

Cliquez sur En haut dans la zone Options de barre d’outils.

98 
 Jean-Luc Baptiste

Cliquez sur le Plus vert de gauche. Ensuite dans le libellé de l’option écrivez Localisation, puis dans
Image de l’option, saisissez GPS dans la zone de recherche

Voilà le résultat que vous devriez obtenir :

Comme vous le voyez une zone de menu vient d’apparaitre cliquez sur le bout de texte troqué
(Localisation) et choisissez code. C’est ici que nous saisirons le code permettant d’ouvrir Google maps.

99 
Jean-Luc Baptiste

Attention : Il existe un champ carte qui interface de façon plus complète et native Google map. Mais
pour l’utiliser, il faut créer un compte développeur chez google. Ici je vous présente une version
« rapide » d’interfacer Maps, mais pas la façon la plus optimale. Je vous laisse faire le processus
d’inscription, récupérer votre clé d’api et utiliser les fonctions dédiées de Windev Mobile à Google
Maps.

Testez le résultat en mode simulateur téléphone, vous verrez que le champ carte s’affiche de façon peu
optimisée. Il est mieux en mode tablette.

Composer automatiquement le numéro de téléphone du client.

Nous pouvons téléphoner de façon automatique au client en utilisant les propriétés du téléphone. Pour
cela placez un bouton face au champ contenant le numéro de téléphone, comme ceci :

Voici le code du bouton :

Je
an
- Lu

Voilà, c’est tout 😉 la fonction TelDialerCompose va se charger de composer le numéro pour vous.
Bien sûr ça ne fonctionne pas en mode simulation.
c
Ba

Voilà, la fiche Fen_AfficheClient est terminée. Nous allons programmer la fenêtre des passages.

Programmation des passages

pt

Créez une fenêtre vierge nommée FEN_Passage et codez le bouton passage de la fenêtre
is

FEN_Visiteur pour qu’il l’ouvre.

te

Dans cette fenêtre le visiteur choisira le client, l’animal, inscrira une date de début de passage, de fin
de passage, saisira un compte rendu et prendra une photo de l’animal.

Voici à quoi doit ressembler cette fenêtre :

100 
 Jean-Luc Baptiste

Vous allez donc insérer les champs suivants

dans la fenêtre que vous allez devoir étirer vers
le bas.

• Une combo que vous nommerez

Combo_Client

• Une combo nommée Combo_Animal.

• Un champ de saisie nommé SAI_Date

avec un bouton calendrier

• Un champ de saisie SAI_Heure

• Un champ de saisie multiligne nommé

SAI_CompteRendu.

• Un champ image nommé IMG_Photo

qui affichera la photo prise par le
smartphone

• Un bouton déclenchant la prise de vue

nommé BTN_Photo

• Un bouton de validation et dans

l’actionbar vous placerez une option
représentant un appareil photo

Voici les parties de code à ajouter :

Nous allons remplir la combobox des clients dès que toute la fenêtre sera dessinée. Ce code est a
inscrire dans le code de la fenêtre.

101 
Jean-Luc Baptiste

Explication :

On exécute la requête

Ensuite on ajoute une première ligne à la combo avec un texte explicatif et une valeur mémorisée qui
vaut 0. Grâce à cette valeur 0 nous serons au courant si l’utilisateur a cliqué sur une valeur correcte ou
non.

Ensuite pour tous les enregistrements de la requête on les inscrit dans la combo avec l’identifiant
comme valeur mémorisée.

Et pour finir, on se positionne sur la première ligne de la comboBox.

À chaque sélection d’une ligne de la combo client, si la valeur mémorisée est différente à 0 (la première
ligne d’explication), nous lancerons une requête nous retournant les noms des animaux du client.

Créez donc une requête nommée REQ_ListeAnimaux qui prendra comme paramètre l’identifiant du
client et retournera l’id de l’animal, et son nom.

Le code suivant va se placer dans la zone Sélection d’une ligne de COMBO_Client.

Je
an
- Lu
c
Ba

Voilà pour les combos, nous allons maintenant nous placer sur le code du bouton BTN_Photo
pt
is

Voici le code commenté à placer dans la zone clic sur le bouton :

te

102 
 Jean-Luc Baptiste

La fonction VidéoLanceAppli s’occupe d’activer la caméra de votre smartphone et dès que vous avez
fait l’image elle se copie dans le champ image avec une taille de 384x288.

Nous allons maintenant nous occuper du dernier bouton la validation.

Il faut créer une requête d’ajout REQ_AjoutPassage à laquelle nous passerons tous les champs
nécessaires pour remplir le fichier Passage.

Il est bien évident qu’en mode simulation, vous ne pourrez pas enregistrer d’images valides.

Voici quelques éléments d’informations :

Voici le code :

Voilà ! c’est fini pour le visiteur, nous allons maintenant nous occuper de la partie pour le client.
Ouvrez la fenêtre FEN_Client

Accueil des clients.

Le client va voir la liste des passages dans une zone répétée ( ZR_ListePassage ) et ensuite en
sélectionnant une ligne dans la zone répétée entrera dans une nouvelle fenêtre donnant les détails.

103 
Jean-Luc Baptiste

Les clients après s’être connectés vont arriver sur une fenêtre présentant la liste des passages
effectués ; les enregistrements proviendront d’une requête de sélection (REQ_Listepassage)
prenant comme condition l’identifiant du client et renvoyant la date du passage, l’heure du passage et
mémorisant l’identifiant du passage.

Je
an

Voici a quoi pourrait ressembler la fenêtre FEN_Client :

- Lu
c
Ba
pt
is
te

Nous devons préciser le paramètre IDClient à la requête, pour cela allez dans le code de
ZR_ListePassage et modifier le code présent comme ceci :

104 
 Jean-Luc Baptiste

Affichage de l’ensemble des informations du passage

Créez une fenêtre nommée FEN_InfoPassage qui prendra comme paramètre l’identifiant du
passage.

Dans la zone de code de sélection d’une ligne de la zone répétée ZR_ListePassage saisissez :

Positionnez-vous maintenant sur la fenêtre FEN_InfoPassage

Il va falloir une requête de sélection du passage qui prendra comme paramètre l’id du passage. Elle
affichera aussi le nom du visiteur ainsi que le nom de l’animal.

Vous nommerez cette requête REQ_Passage

Vous choisirez les champs suivant des 3 tables :

Par défaut la jointure entre les 3 tables doit être modifiée, car vous risquez d’avoir une jointure de type
cartésienne comme ceci :

105 
Jean-Luc Baptiste

Faites un clic droit sur le symbole Cartésien et éditez la jointure.

Je

Cliquez sur ajouter une jointure.

an
- Lu
c
Ba
pt
is
te

Validez ce premier choix.

Ensuite modifier la description de la condition comme ceci :

106 
 Jean-Luc Baptiste

Il nous faut aussi lier Visiteur et passage. Cliquez de nouveau sur ajouter une jointure.

Modifiez comme ceci :

Au niveau de la description :

Voilà le résultat des ajouts :

107 
Jean-Luc Baptiste

Et le résultat final :
Je
an
- Lu
c
Ba
pt

Retournez sur la fenêtre FEN_InfoPassage.

is

Faites du Data-Binding en déposant les champs de la requête REQ_Passage dans la fenêtre.

te

La fenêtre pourrait ressembler à ceci :

108 
 Jean-Luc Baptiste

Ajoutons le code d’exécution et d’affichage du résultat de la requête.

Allez dans la zone de code de déclaration globale de la fenêtre et saisissez le code suivant :

Vous pouvez tester l’ensemble, notre mini application mobile est réalisée !

109 
Jean-Luc Baptiste

Les WebServices
Les webservices peuvent nous permettre de décrocher l’analyse (la base de données) de l’applicatif et
rendent les données accessibles de façon universelle, quel que soit le vecteur (mobile, web, client
lourds). De plus l’avantage des Webservices est de permettre une montée en charge très importante. Ils
sont réalisés soit avec Webdev ou avec Windev et sont hébergés sur un serveur Web.

Dans notre progression, il nous manque à voir un produit de chez Pcsoft : Windev ; nous réaliserons
donc les webservices avec Windev.

Création du projet dans Windev

Nous allons créer un nouveau projet dans Windev, il récupèrera la base de données via le serveur
Windows, comme vu précédemment avec Windev Mobile.

Cliquez donc sur Créer un projet pour lancer l’assistant.

Je
an
- Lu
c
Ba
pt
is
te

Choisissez l’option WebService SOAP ou REST.

Le projet va se nommer DogyCat.

110 
 Jean-Luc Baptiste

Nous allons créer des Webservice de type SOAP. Nous n’utiliserons pas le GDS. Pour la charte de
programmation, laissez le choix par défaut. Idem pour l’internationalisation.

Pour la base de données, nous l’importerons de HFSQL.

L’analyse se nommera DogyCat, le choix par défaut.

111 
Jean-Luc Baptiste

Le type de base de données sera du HFSQL Cient/Serveur.

Je

Le nom de la connexion sera DogyCat.

an
- Lu
c
Ba
pt
is
te

Indiquez l’adresse Ip de votre serveur.

112 
 Jean-Luc Baptiste

Saisissez vos identifiants de connexion.

Choisissez la base de données.

Importez l’ensemble des tables et validez.

Attention : Pensez à bien mettre les identifiants du compte utilisateur de la base de données. Vérifiez
dans l’option Analyse et cliquez sur le bouton Connexions.

113 
Jean-Luc Baptiste

Voilà, le projet est décrit.

Présentation des Webservices.

Les webservices sont un ensemble de procédures globales, notre projet ne peut posséder rien d’autre
que des procédures, des requêtes. Il n’y aura donc pas de fenêtres.

Dans l’explorateur de projets, à droite faites un clic droit sur Procédures et ensuite sur Nouveau.

Nommez la collection DogyCat.

Je
an
- Lu
c

Voilà, la collection de procédures est créée.

Ba
pt
is
te

Le principe est le suivant :

Imaginez l’application mobile que nous avons créée, lorsque l’utilisateur se logue une requête
recherche si c’est un visiteur ou si c’est un client. Nous allons recréer la même chose du coté
Webservice.

Créez donc une nouvelle procédure globale dans la collection COL_DogyCat.

Clic droit sur COL_DogyCat, puis Nouvelle procédure globale.

114 
 Jean-Luc Baptiste

Nommez la Login.

Voilà, la procédure globale login est créée il ne reste plus qu’à insérer le code.

Avec Windev il est très aisé de récupérer les requetés créés avec Windev Mobile.

Dans notre cas, nous devons importer REQ_LogVisiteur et REQ_LogClient.

Cliquez sur l’onglet de menu Projet, puis sur Importer.

Comme ci-dessus, choisissez d’importer des éléments de Windev Mobile.

115 
Jean-Luc Baptiste

Sélectionnez la définition du projet Windev Mobile DogyCat dans le dossier correspondant.

Importez l’ensemble des requêtes, vous les utiliserez toutes.

Je
an
- Lu
c
Ba
pt
is
te

Nous ne voulons pas partager les éléments, mais les copier intégralement. Il faut donc décocher le
choix par défaut.

116 
 Jean-Luc Baptiste

Voilà les requêtes sont bien importées.

Placez-vous dans la zone de code de la procédure globale login.

Il vous faut maintenant imaginer le fonctionnement de cette procédure :

Elle va recevoir 2 paramètres : l’identifiant et le mot de passe, ensuite elle va chercher si c’est un
visiteur, un client ou une erreur dans le cas ou elle ne trouve rien. Le résultat de la recherche sera
stocké dans une structure, renvoyé sérialisée dans un buffer à la procédure appelante, c’est-à-dire au
périphérique mobile. Cette structure doit exister à l’identique sur l’applicatif mobile et sur le
webservice. On y va ?

Voici le code commenté, je pense que c’est assez clair.

117 
Jean-Luc Baptiste

Je ne vais pas écrire toutes les procédures, vous venez de comprendre le fonctionnement de base. Vous
pouvez renvoyer une structure, un tableau de structure, des objets, des tableaux d’objets….

Préparation du serveur de déploiement.

Nous allons maintenant passer sur le serveur 2016 pour créer un compte de déploiement nous
permettant d’héberger les Webservices.

Lancez le centre de contrôle et d’hébergement WEBDEV. Cliquez sur Nouvel utilisateur

Remplissez les identifiants comme ci-dessous :

Je
an
- Lu
c
Ba

La création des comptes systèmes va avoir lieu :

pt
is
te

L’écran suivant nous présente les informations sur l’utilisateur, validez pour passer à l’écran d’après.

118 
 Jean-Luc Baptiste

Ici vous sont présentés les répertoires associés au compte.

Les paramètres d’hébergements vous permettent de fixer le nombre de connexions simultanées au

service.

Pour les paramètres concernant la base de données nous n’avons pas besoin d’en définir c’est déjà fait,
laissez par défaut, et passez à l’écran suivant.

Pour cet écran, laissez les configurations du serveur virtuel comme indiqué et cliquez sur suivant.

119 
Jean-Luc Baptiste

Pour le serveur Ftp, s’il n’existe pas, créez-le dans Iis en le faisant pointer dans inetpub-> Ftproot
Je
an
- Lu
c
Ba

Voilà c’est terminé, le centre de contrôle a suffisamment d’informations pour tout générer. Vous
devriez voir le compte dans le centre de contrôle.
pt
is
te

En cas de problème pour la configuration du serveur IIs ou Ftp voyez ici :

[Link]

Pour le paramétrage de l’ensemble :

[Link]

120 
 Jean-Luc Baptiste

Voici une capture d’écran d’Iis après le paramétrage

121 
Jean-Luc Baptiste

Nous allons maintenant générer le Webservice, revenez dans Windev.

Génération du Webservice.
Dans l’onglet de menu Projet, cliquez sur l’option Générer un Webservice Soap.

L’assistant de création de Webservice se lance :

Je
an
- Lu
c

L’écran de démarrage est correct par défaut.

Ba
pt
is
te

Tous les éléments seront intégrés.

122 
 Jean-Luc Baptiste

La collection de procédures doit être accessible, cochez là.

Selon le paramétrage de votre serveur 2018, certaines options peuvent ne pas fonctionner
correctement.

Nous allons prendre la première option telle que définie ci-dessus.

Maintenant vous devrez saisir les paramètres du serveur d’application :

123 
Jean-Luc Baptiste

N’hésitez pas à appuyer sur le bouton Tester les paramètres pour être sûr que tout est fonctionnel.

Voici maintenant les paramètres de déploiement du Webservice :

Je
an
- Lu
c
Ba
pt
is
te

Les fichiers sont prêts à l’envoi sur le serveur.

124 
 Jean-Luc Baptiste

Dans notre cas, nous n’allons pas inclure la modification automatique de la structure des fichiers, car
nous l’avons fait avant le déploiement. Donc décochez la case

L’écran suivant nous demande quelques renseignements supplémentaires, laissez tout par défaut.

Au niveau de l’écran sur la sécurité du Webservice laissez tout par défaut.

125 
Jean-Luc Baptiste

Pour les statistiques, laissez par défaut et ensuite c’est terminé pour l’assistant. La copie sur le serveur
va commencer.
Je
an
- Lu
c
Ba

Voilà, c’est terminé ! notez bien l’url d’accès au wsdl. Nous allons en avoir besoin pour importer le
pt

Webservice dans l’application mobile.

is

Consommation du webservice
te

Revenez dans Windev Mobile. Allez dans l’onglet de menu Projet, puis Importer et enfin Un
Webservice.

Un assistant d’importation se lance. Dans la fenêtre ci-dessous, entrez le lien url vers le Webservice.

126 
 Jean-Luc Baptiste

Voilà, le webservice est importé :

Dans l’explorateur de projet nous voyons effectivement notre procédure Login:

Nous allons donc maintenant la mettre en œuvre.

Tout d’abord nous allons déclarer la structure dans le code du projet pour l’avoir de disponible pour
toutes les fenêtres de l’application. Allez dans l’option de menu Projet et cliquez sur le bouton Code du
projet.
127 
Jean-Luc Baptiste

Saisissez le code suivant :

Allez maintenant dans le code du bouton Se connecter de la fenêtre FEN_Login.

Je

Voici les modifications a apporter :

an
- Lu
c
Ba
pt
is
te

128 
 Jean-Luc Baptiste

Maintenant, votre objectif est de transformer tout le code pour n’avoir que des accès via Webservices.
Et si tout est fonctionnel, vous enlevez l’analyse au projet.

Voilà c’est terminé ! Merci d’être arrivé jusqu’ici.

129 