Support Dec Ours

TDF Tech 2014
Support de cours
Le document que vous avez entre les mains n’a pas la finalité
de remplacer les documentations techniques ou commerciales
livrées avec WINDEV, WEBDEV ou WINDEV Mobile.
Ce document n’est pas un cours d’auto-formation, mais uni-

quement un support “papier” de la présentation technique
que vous avez suivie.
Ce document a été réalisé par l’équipe de la LST.
TDF Tech 2014 - www.pcsoft.fr - 3

TDF TECH 2014
SOMMAIRE
Retrouvez dans ce support de cours les sujets abordés lors du TDF Tech
2014.
Le code source des différentes applications et projets indiqués dans ce
support de cours est présent sur le DVD du TDF Tech 2014.
4 Sommaire 28 Les états : personnalisation d’un cadre, étape par étape

À partir des versions 19, l’éditeur d’états permet de personnaliser un cadre avec beaucoup de détails : couleur, type de
8 PC SOFT à votre service

trait, épaisseur, type d’arrondi, ...
En quelques clics, vous définissez un cadre sophistiqué et vous enrichissez vos impressions.
Démonstration en images !
10 WINDEV
Présentation rapide de WINDEV et de ses fonctionnalités
30 PCSCloud : votre solution Cloud
PCSCloud proposait déjà des plateformes d’exploitation pour déployer vos installations, sites WEBDEV, Webservices et
12 WEBDEV
bases de données HFSQL.
PCSCloud propose maintenant des plateformes de développement pour stocker et partager vos projets (Gestionnaire
Présentation rapide de WEBDEV et de ses fonctionnalités de Sources), les données de vos Centres de Contrôle et la configuration de votre environnement de développement.
14 WINDEV Mobile
Présentation rapide de WINDEV Mobile et de ses fonctionnalités
32 WLangage : des fonctionnalités utiles au quotidien
Les versions 19 proposent des centaines de nouvelles fonctions et syntaxes pour vous aider dans vos développements.
Voici une sélection de nouveautés apparues en version 19 et qui vont vous servir au quotidien.
Lisez attentivement, vous allez sûrement en découvrir !
18 Le GDS : prenez soin de vos sources !
36 Optimisez vos applications
Le GDS est un gestionnaire de sources élaboré qui permet de sauvegarder les sources, les historiques, les versions, ...
Cet outil dispose de nombreuses fonctionnalités avancées et très utiles mais parfois méconnues.
Voici 8 points importants à propos du GDS. Des applications rapides, c’est le rêve de tout utilisateur !
L’analyseur de performances (profiler) de WINDEV permet d’optimiser des applications en indiquant où sont les
traitements qui prennent du temps.
22 HFSQL : les nouveaux modes d’isolation de transactions
Le moteur HFSQL permet de gérer un mode d’isolation pour les transactions.
Cet article présente l’analyseur de performances de WINDEV ainsi que 3 astuces d’optimisation pour vos applications !
38 Le champ Tableau de bord : votre avantage stratégique

Le mode d’isolation définit la façon dont les utilisateurs vont lire un enregistrement qui est en transaction.
Cet article détaille les différents modes d’isolation et propose un exemple didactique pour mieux appréhender ce
mécanisme. Les tableaux de bord logiciels sont très demandés : ils permettent d’avoir un état des lieux précis du contenu de
l’application (statistiques, stocks, commandes, etc.).
Le champ Tableau de bord de WINDEV vous permet d’intégrer rapidement un tableau de bord logiciel dans vos
24 Débogage : les techniques avancées de Marc
Parmi toutes les fonctionnalités de WINDEV, WEBDEV et WINDEV Mobile, celle qui est la plus utilisée est sans doute le
applications.
Suivez le guide !
débogueur.
40 Champ Diagramme de Gantt : création, personnalisation

Gagner du temps lors des phases de débogage est essentiel pour se concentrer sur la partie métier de l’application.
Cet article vous présente plusieurs astuces sur le débogueur.
Un diagramme de Gantt permet de représenter graphiquement un enchaînement d’actions reliées entre elles.
C’est un outil incontournable pour avoir une vision globale de l’avancement d’un projet, d’un processus industriel, etc.
26 Les états : 8 fonctionnalités pratiques
Les éditions sont un élément important d’une application : elles permettent de donner vie aux données enfouies dans
Petit tour d’horizon des fonctionnalités de ce champ puissant.
42 Création dynamique de champs : des IHM adaptatives !

les bases de données.
En version 19, l’éditeur d’états bénéficie de nombreuses évolutions très pratiques.
En voici 8 qui vont vous permettre de créer des états encore plus efficaces et encore plus beaux. La création dynamique de champs est une fonctionnalité particulièrement puissante.
Il est possible de personnaliser des interfaces par programmation, pour s’adapter à des cas particuliers.
Cet article détaille la création dynamique de champs et la sauvegarde des données sur ces champs.
4 - TDF Tech 2014 - www.pcsoft.fr TDF Tech 2014 - www.pcsoft.fr - 5

TDF TECH 2014
SOMMAIRE (SUITE)
44 Graphes : Waterfall, animation, image de fond, ...

WINDEV permet de créer facilement et en standard des graphes élaborés sur vos données : courbe, aire, secteur,
62 iOS / Android : 7 étapes pour ajouter un sliding menu
Les sliding menus sont des menus verticaux qu’un glissement de doigt permet de faire apparaître depuis la gauche ou
beignet, histogramme, etc. la droite de l’écran.
Petit rappel sur ce champ indispensable et présentation des nouveautés de la version 19. Grâce aux sliding menus il est possible de structurer une application par thème sans pénaliser l’espace utilisateur à
l’écran.
L’exemple “WM Sliding Menu TDF19” contient un sliding menu que cet article détaille en 7 points !
46 Tableau Croisé Dynamique : une aide à la décision
64 iOS / Android : gérer les polices natives
Le champ Tableau Croisé Dynamique est un champ décisionnel puissant qui affiche dynamiquement les données
calculées issues de différents fichiers d’une base de données.
L’exemple “WD TCD TDF19” est un exemple de Tableau Croisé Dynamique. Lors de la réalisation d’une application spécifique pour iOS ou Android, il est important de respecter les polices
standard disponibles sur ces plates-formes.
En effet, si une police n’est pas disponible, le système (iOS ou Android) va choisir la police qu’il estime la plus
48 WEBDEV : sécuriser un site et gérer ses utilisateurs
Gérer les utilisateurs d’un site Web Intranet (sessions) ou Internet (AWP) avec WEBDEV s’effectue en quelques clics à
ressemblante, ce qui peut provoquer des problèmes d’affichage.
65 Action Bar pour Android, Nav Bar pour iOS, WINDEV Mobile 19 pour tous !
l’aide du Groupware Utilisateur.
Sur un Intranet, les secrétaires n’auront ainsi pas accès aux fiches de paie.
Sur un site Internet, les visiteurs non identifiés n’auront pas accès à leurs informations de compte. La gestion du champ “Action Bar” et “Nav Bar” a fondamentalement évolué dans la version 19 afin de permettre aux
équipes de développements de réaliser simplement des interfaces compatibles iOS et Android.
50 Optimiser le référencement d’un site WEBDEV

WEBDEV intègre toutes les fonctionnalités pour optimiser le référencement d’un site Web : gestion des URL (noms de 66 iOS / Android : les achats intégrés (In-App)
dossiers, noms de pages physiques, URL rewriting), sémantique des champs, définition des mots-clés et des priorités Le concept d’achat intégré permet de vendre des services dans une application, mais aussi de distribuer une application
pour les moteurs de recherche, etc. gratuitement et de la passer en application complète pour débloquer des fonctionnalités.
Le paiement est alors géré par Google (Android) ou Apple (iOS).
54 Réalisation pas à pas d’un bouton CSS

WEBDEV 19 permet une édition rapide et puissante des styles CSS ce qui permet notamment de réaliser des boutons à 68 iOS / Android : répliquer des données distantes
l’aspect soigné sans connaissance d’outil de retouches d’images. La disponibilité des données est une problématique récurrente dans le domaine de la mobilité.
Est-ce que les données sur les terminaux sont à jour, comment les mettre à jour, comment envoyer des données saisies
sur le mobile vers le serveur de l’entreprise, etc.
56 eCommerce : accepter des paiements en bitcoin
L’exemple “eCommerce” peut être personnalisé rapidement pour prendre en compte des nouveaux moyens de
La réponse ? La réplication.
70 Les agencements = 1 fenêtre dans plusieurs plates-formes

paiements.
La version “eCommerce TDF19” est un exemple de personnalisation pour gérer les paiements par Bitcoin en utilisant la
plate-forme “Block Chain”. WINDEV Mobile 19 offre un nouveau mécanisme avancé pour simplifier la gestion des plates-formes et des orientations
Ce même principe peut être appliqué aux autres moyens de paiements. de fenêtres mobiles : les agencements.
À partir d’une même fenêtre (code et interface), les agencements permettent de créer des “variantes” pour répondre
aux contraintes des plates-formes destinations.
58 iOS / Android : les notifications Push
Les notifications Push permettent aux utilisateurs des applications de recevoir des alertes ou des informations en temps
réel sans que l’application ne soit en cours d’exécution.
Ce sont en effet les serveurs (de Apple ou Google) qui envoient les notifications directement au système (iOS ou
Android).

PC SOFT à votre service
N’hésitez pas à nous
contacter : une journée de
consulting est toujours rentable
pour vos développements.
Consulting
Profitez de l’expérience d’un ingénieur de PC SOFT sur
votre site
Un consulting PC SOFT peut être délégué chez vous, pour une durée de
1 à 5 jours, un ingénieur PC SOFT connaissant à la fois votre domaine
et les outils que vous utilisez.
L’ingénieur PC SOFT répond directement à vos questions, travaille
sur votre projet réel et votre configuration réelle. Vous obtenez les
réponses précises qui vous font gagner un temps précieux, et vous
assurent des bonnes orientations technologiques et méthodologiques.
Notre conseil ? Commandez 1 jour de consulting pour 100 jours de
développement.
Et, chaque année, prenez l’habitude de faire venir ( juste 2 jours) chez
vous un ingénieur PC SOFT, pour profiter d’une expertise de toutes
les nouveautés.
Sur votre projet, dans vos locaux, en votre présence, l’ingénieur PC SOFT
valide l’analyse, vous montre des nouveautés utiles dans votre cas
de figure, vous propose des optimisations de votre code, valide vos
modes d’utilisation, ...
Vous serez ravi de l’efficacité de son intervention ! Budgétez d’ores et
Support Technique déjà la prochaine intervention !
Gratuit Un assistanat vous fait gagner des journées de

développement!
Quelques exemples de sujets traités :
Le site du support technique gratuit (www.pcsoft.fr/st) met gratuitement
à votre disposition un ensemble d’informations destinées à vous aider • Simplification du code et mise en place de nouvelles techniques :
à mieux développer : HFSQL Client/Serveur, Sockets, Webservices, Composants, Patchs,
• les FAQ Configurations, …
• les téléchargements • Transformation de modules développés avec WINDEV en Webservices.
• les forums développeurs professionnels (News Group) • Optimisation de traitements avant la recette de l’application, validation
Vous avez une question ? Contactez le Support Technique Gratuit d’analyse avant de débuter une application.
PC SOFT !
• Avec l’utilitaire RequêteAuST (média conseillé). Votre requête sera
généralement traitée sous 48 heures.
• Par téléphone au 04.67.03.17.17 (préparez votre numéro de série et
votre question svp) ou par courrier.
Envoi par email : merci de ne pas attacher de fichiers de taille supérieure
Formation
à 10 Mo sans l’accord préalable de votre destinataire. Sinon votre fichier Séminaires de formation pour WINDEV,
sera refusé par le système. WEBDEV et WINDEV MOBILE
PC SOFT organise à Paris, chaque semaine, des séminaires de formation
Assistance Directe à WINDEV, WEBDEV et WINDEV Mobile, de différents niveaux : Prise

en main, Perfectionnement, Expert, Client/Serveur, ...
Ces séminaires, animés par des ingénieurs PC SOFT expérimentés
Présentation
Un complément efficace du (compétence assurée !), permettent de découvrir et de maîtriser
Support Technique Gratuit WINDEV, WEBDEV et WINDEV Mobile selon un plan efficace.
Tout projet important ou stratégique doit bénéficier d’une “Assistance Consultez le calendrier des séminaires joint (le détail des stages et les
Directe” ! contenus pédagogiques sont disponibles sur notre site Web : www.
pcsoft.fr), vous trouverez LA formation adaptée à votre expérience
L’Assistance Directe permet d’une part de bénéficier d’un contact
et à votre besoin.
téléphonique immédiat avec un ingénieur spécialisé, et d’autre part
de choisir les sujets à traiter, et ce pour une durée que vous définissez Suivre une formation organisée par PC SOFT est toujours rentable :
vous-même. Cela vous permet de résoudre immédiatement les sujets c’est se donner les moyens de maîtriser WINDEV et WEBDEV dans les
qui vous posent problème. meilleurs délais, ou d’en découvrir la face cachée, encore plus puissante !
Inscrivez-vous vite! Ces séminaires peuvent également être organisés
Le contact téléphonique est garanti sous 8 heures ouvrables, ce qui
dans vos locaux, en France et à l’étranger.
vous permet une meilleure efficacité.
Le montant de ces formations est déductible du “1,5 % Formation”.
Ce service est disponible sur abonnement.
Contactez le service commercial pour plus d’informations (Fabrice
CHAMBON au 04.67.032.032).

WINDEV
Présentation rapide de WINDEV
et de ses fonctionnalités
W
INDEV permet de dévelop- DB, ...). Une aide en ligne vous guide tout au long du
per simplement tout type · Un éditeur UML permettant une modéli- développement de votre application. Cette
d’applications Windows et sation objet de vos données et traitements. aide inclut également une aide à la correction
Linux dans les domaines de · Un éditeur d’IHM avec correcteur d’interface d’erreurs.
la gestion, de l’industrie, du médical, etc. en temps réel. Une version Internet et actualisée de l’aide
· Un éditeur de code évolué (avec assis- en ligne est disponible à l’adresse “http://
Présentation tants, vérification du code saisi, coloration doc.pcsoft.fr”.
syntaxique, aide contextuelle, …) incluant un
Les applications développées peuvent inclure Les différents éditeurs seront utilisés, depuis la
puissant débogueur.
l’accès à des bases de données. définition d’une analyse jusqu’à l’installation,
· Un éditeur de requêtes pour les sélections
WINDEV propose un puissant moteur de base en passant par toutes les phases du dévelop-
d’enregistrements dans les fichiers.
de données : HFSQL. pement (création des fenêtres, des états, des
· Un éditeur d’états.
traitements...), sans oublier les sauvegardes.
Il est conseillé d’utiliser HFSQL pour vos appli- · Un éditeur d’aide.
cations afin d’obtenir les meilleures perfor- · Un éditeur d’installation.
Les bases de données
mances dans vos traitements de fichiers. · Un éditeur de dossier technique.
Une version HFSQL Client/Serveur est aussi * accès natif optionnel, ** accès natif inclus. Le moteur HFSQL sera utilisé pour les fichiers
disponible. de données des applications. La base de don-
L’environnement de développement intégré de Les outils nées HFSQL est disponible en mode Classic
ou Client/Serveur et est librement diffusable
WINDEV se compose de différents éditeurs : Des outils facilitant le développement sont avec les applications WINDEV.
· Un éditeur de projet permettant de visualiser également fournis (WDMAP, WDSQL, ...) ainsi
le tableau de bord du projet. que de nombreux exemples et assistants L’utilisation d’autres moteurs de bases de
· Un éditeur d’analyses permettant l’accès à réutilisables. données est également possible sur le même
tout type de bases de données (HFSQL, HFSQL principe.
Des Centres de Contrôle permettent la gestion
Client/Serveur, xBase, MySQL**, AS/400*,
du cycle de vie de vos applications ainsi que
Oracle*, SQL Server*, Access**, ODBC, OLE 
leur administration.

le routage vers les serveurs POP (réception • Un site dynamique est constitué de pages Principe de programmation
des messages) concernés. enrichies de données provenant d’une base WEBDEV
• Le gestionnaire Web / HTTP permet l’héber- de données. Il est nécessaire d’exécuter des Le débit entre le serveur Internet et le poste
gement des pages et répond aux demandes traitements d’accès aux données sur le serveur client est plus lent qu’avec un réseau local
de consultation de la part des postes client. permettant de constituer la page. classique. Les échanges de données entre le
poste client et le serveur doivent donc être
Le Web en détail WEBDEV permet de développer des sites réduits pour que le site puisse s’exécuter sans
Les pages Web sont visualisées sur un poste dynamiques composés de pages, de traite- ralentissement. WEBDEV permet de différen-
par l’intermédiaire d’un navigateur Web ments serveur (accès aux bases de données, cier les traitements exécutés sur le serveur et
(Internet Explorer, FireFox, Chrome, Safari, calculs, etc.) et de traitements exécutés par les traitements exécutés sur le poste client.
Opera, etc.). le navigateur (contrôles, traitements répé-
Le navigateur interprète le contenu des fichiers titifs, etc.). 1. Les traitements sur le
au format HTML décrivant les pages. On parle WEBDEV permet aussi de développer des serveur
de pages HTML. sites statiques et semi-dynamiques. Les traitements exécutés sur le serveur sont
WEBDEV génère automati- les traitements principaux de l’application. Ils
quement le code HTML et concernent la gestion de la
Javascript. base de données (HFSQL et
Il est possible d’afficher HFSQL Client/Serveur, xBase,
directement une page dans AS/400, Oracle, SQL Server,
un navigateur en tapant son Access, OLE DB, ...) et les trai-
URL dans la zone adresse du tements de calcul.
navigateur. Ces traitements sont écrits en
WLangage.
L’URL (Uniform Resource
Locator) correspond au che- 2. Les traitements sur le
WEBDEV
min d’accès de la page sur poste client
le serveur qui l’héberge, par Les traitements exécutés sur
exemple : le poste client sont les traite-
http://www.monserveur.com/ ments de contrôle de saisie,
Présentation rapide de WEBDEV page3.htm de vérification qui ne néces-
Si l’URL ne correspond pas à sitent pas d’accéder au ser-
et de ses fonctionnalités une adresse valide, une erreur veur. Ces traitements utilisent
de connexion est retournée uniquement les informations
dans l’écran du navigateur. contenues dans la page. Ces
traitements peuvent être écrits
Si l’URL est valide, la page
W
en Javascript ou WLangage.
demandée s’affiche dans le
Dans ce dernier cas, WEBDEV
EBDEV est un AGL (Atelier de • Un éditeur de requêtes pour les sélections Les Concepts Internet navigateur. L’utilisateur peut
se charge de convertir automatiquement le
Génie Logiciel) orienté déve- d’enregistrements dans les fichiers. alors déclencher une action en cliquant sur un Fonctionnement d’un code WLangage en Javascript pour qu’il puisse
loppement de sites Intranet • Un éditeur d’états. lien ou un bouton. La requête correspondante
Les différents services de l’Internet site WEBDEV être exécuté par le navigateur.
et Internet. • Un éditeur de dossier technique reprenant est alors envoyée au serveur qui l’analyse.
WEBDEV permet de développer tout type de intégralement toutes les informations tech- Le terme Internet regroupe plusieurs services Un site WEBDEV dynamique, hébergé sur
d’utilisation différente : Le lien permet de lancer le chargement d’une 3. Administrateur WEBDEV
sites dynamiques incluant l’accès à des bases niques de votre projet. un serveur, peut être exécuté en appelant
• FTP (File Transfer Protocol) est un service autre page ou bien de lancer une application L’administrateur WEBDEV est un exécutable
de données. Il permet aussi de développer des • Un éditeur d’installation. une URL particulière depuis un navigateur,
permettant de transférer des fichiers d’un Web. installé sur le serveur.
sites semi-dynamiques et statiques ou PHP. * accès natif optionnel, ** accès natif inclus par exemple :
ordinateur vers un autre à travers Internet. • pour un site WEBDEV dynamique «Intranet» : L’administrateur permet de configurer le
Présentation de L’éditeur d’installation assure la mise en place • SMTP (Simple Mail Transfer Protocol) permet nombre de connexions autorisées en même
des sites créés, ainsi que leur maintenance. Site statique, “http://www.monserveur.com/monappli”.
temps pour le serveur, par site, par utilisateur.
WEBDEV d’envoyer des messages ou mails à un utilisa- • pour un site WEBDEV dynamique
Cet outil permet de réaliser une installation teur défini. Chaque utilisateur doit disposer semi-dynamique ou Il permet aussi de fixer le temps maximum
«Internet» AWP : “http://www.monserveur.
WEBDEV est composé de différents éditeurs : sur le serveur via FTP ou par média physique d’une adresse email qui lui sert de boîte dynamique ? com/mapage.awp”. d’exécution d’une requête et le temps limite
• Un éditeur de projet permet de visualiser (CD, Zip, etc.). aux lettres. pour la déconnexion des utilisateurs inactifs.
• Le site statique est composé de pages • pour un site WEBDEV dynamique
le tableau de bord du projet. Des outils facilitant le développement sont • HTTP (HyperText Transfer Protocol) est un L’administrateur peut à tout moment afficher
conçues à l’avance de manière définitive. «Internet» PHP : “http://www.monserveur.
• Un éditeur de pages. également fournis (WDMAP, WDOUTIL, protocole de niveau application qui est utilisé la liste des utilisateurs connectés au site.
Dans ce cas, le contenu des pages n’évoluera com/mapage.php”.
• Un éditeur d’analyses permettant l’accès à WDSQL, etc.) ainsi que de nombreux exemples pour le transfert de pages sur Internet.
pas dynamiquement en fonction d’un choix
tout type de bases de données (HFSQL, HFSQL et assistants réutilisables.
Chacun de ces services nécessite un ges- de l’utilisateur.
Pour gérer la partie dynamique des sites, 
Client/Serveur, MySQL**, xBase, AS/400*, WEBDEV utilise un serveur d’application. Le
Les principaux éditeurs sont utilisés, depuis la tionnaire de services installé sur un serveur : • Un site semi-dynamique est un site statique
Oracle*, SQL Server*, Access**, OLE DB, ....). serveur d’application WEBDEV est un service
définition d’une analyse jusqu’à l’installation, • Le gestionnaire de services FTP gère l’héber- composé de pages conçues à l’avance mais
• Un éditeur de code évolué (avec assis- (ou daemon sous Linux) qui construit dyna-
en passant par toutes les phases du dévelop- gement des fichiers, les droits d’utilisation enrichies par une base de données. Dans
tants, vérification du code saisi, coloration miquement les pages du site et les envoie au
pement (création de pages, traitements, états, des fichiers et la réponse aux demandes en ce cas, le contenu des pages n’évoluera pas
syntaxique, aide contextuelle, …) incluant un navigateur par l’intermédiaire du serveur Web.
etc.), sans oublier les sauvegardes. provenance des autres postes. dynamiquement en fonction d’un choix de
puissant débogueur.
• Le gestionnaire de services SMTP prend en l’utilisateur. L’un des meilleurs exemples est
• Un éditeur de styles incluant police, couleur,
charge les demandes d’envoi de messages et un catalogue de pièces détachées.
position, etc.

WINDEV MOBILE Présentation rapide de WINDEV Mobile
et de ses fonctionnalités
W
INDEV Mobile permet de Environnement Des outils facilitant le développement sont
développer simplement tout également fournis ainsi que de nombreux
type d’applications desti- L’environnement de développement intégré exemples et assistants réutilisables.
nées à être utilisées sur un de WINDEV Mobile se compose de différents
éditeurs : Des Centres de Contrôle permettent la gestion
Smartphone, un téléphone ou une tablette du cycle de vie de vos applications ainsi que
Android, un téléphone Windows Phone, un • Un éditeur de projet permet de visualiser
le tableau de bord du projet. leur administration.
iPhone ou un iPad et la plupart des terminaux
mobiles (Pocket PC, Symbol, Psion, ...). • Un éditeur d’analyses permettant l’accès
à tout type de bases de données (HFSQL, Une aide en ligne vous guide tout au long du
HFSQL Client/Serveur, ...). développement de votre application. Cette
• Un éditeur UML permettant une modéli- aide inclut également une aide à la correction
Présentation d’erreurs. Une version Internet et actualisée
sation objet de vos données et traitements.
Les applications développées peuvent accéder • Un éditeur d’IHM avec correcteur d’interface de l’aide en ligne est disponible à l’adresse
à des bases de données. en temps réel. “http://doc.pcsoft.fr”.
WINDEV Mobile inclut un puissant moteur de • Un éditeur de code évolué (avec assis-
base de données : HFSQL Mobile. tants, vérification du code saisi, coloration Le moteur HFSQL Mobile sera utilisé pour les
syntaxique, aide contextuelle) incluant un fichiers de données de l’application.
Il est conseillé d’utiliser HFSQL pour vos appli-
cations afin d’obtenir les meilleures perfor- puissant débogueur
• Un éditeur de requêtes pour les sélections L’utilisation d’autres moteurs de bases de
mances dans vos traitements de fichiers.
d’enregistrements dans les fichiers. données est également possible sur le même
Une version HFSQL Client/Serveur est aussi
• Un éditeur d’états. principe.
disponible.
• Un éditeur d’installation.
WINDEV Mobile permet également d’accé-
• Un éditeur de dossier technique reprenant 
der aux bases de données SQLite pour les
intégralement toutes les informations tech-
applications Android.
niques de votre projet.

Support de cours

LE GDS :
PRENEZ SOIN DE VOS SOURCES ! 3 La gestion des droits utilisateurs : protégez l’accès à vos sources
Le GDS est un gestionnaire de sources élaboré qui permet de sauvegarder et modifiez ses droits. Il existe différents types
les sources, les historiques, les versions, ... de droits.
Cet outil dispose de nombreuses fonctionnalités avancées et très utiles mais Types de droits
1. Contrôle total : l’utilisateur peut réaliser
parfois méconnues. toutes les opérations.
2. Lecture : l’utilisateur peut lire l’élément
Voici 8 points importants à propos du GDS. (récupérer une version et extraire pour test).
Si un utilisateur n’a pas le droit de lecture
sur un répertoire, les fichiers du répertoire
sont invisibles.
1 Le GDS : rappels La gestion des droits d’accès aux éléments Définir un droit
3. Écriture : l’utilisateur peut ajouter, modifier
ou supprimer l’élément :
• Extraire et réintégrer.
du GDS permet de limiter les accès (et donc • Ajouter : permet d’ajouter des fichiers, des
Le GDS permet de sauvegarder dans une base Le GDS permet également La définition des droits d’un élément s’effec-
les modifications) pour chaque développeur répertoires, un partage, des étiquettes et de
de sources tous les éléments de vos projets : un fonctionnement décon- tue dans la fenêtre des propriétés de l’élé-
et pour chaque élément du GDS. créer des branches.
procédures, classes, fenêtres, pages, états, necté (train, avion, ...). ment : sélectionnez l’élément et cliquez sur
Un droit est associé : • Renommer : permet de renommer un élé-
composants, analyses, ... “Propriétés” dans le menu contextuel. Le volet
• à un compte de connexion (un développeur), ment.
Cette base peut être installée : Principe d’utilisation “Droits” affiche les droits définis de l’élément. • Supprimer : permet de supprimer des
• à un groupe (uniquement si la base du GDS
• sur un serveur (en mode HFSQL Classic ou Installation Par défaut, “tout le monde a tous les droits”. fichiers, des répertoires ou des partages. Il
est en mode Client/Serveur).
HFSQL Client/Serveur), permet également de remplacer un partage
Tous les éléments du projet sont enregistrés Pour ajouter un droit (ou une restriction), il
• sur un poste du réseau dans un répertoire Il est possible de définir de droits : par un autre partage.
dans la base de sources (sur le serveur). suffit de cliquer sur le bouton “Ajouter” et
partagé, • sur un répertoire, • Supprimer définitivement : permet de
Cette opération est effectuée à la création de sélectionner la portée du droit : tout le
• dans le cloud des applications PC SOFT • sur un fichier. supprimer définitivement un fichier ou un
du projet ou lors de l’importation d’un projet monde, un groupe, un utilisateur.
(PCSCloud). Pour plus d’informations, consul- La gestion des droits est réalisée depuis l’admi- répertoire.
existant dans le gestionnaire de sources.
tez le site “www.pcscloud.net”. nistrateur du GDS. Une ligne est alors ajoutée à la table des 4. Modifier les droits : l’utilisateur peut modi-
Chaque développeur utilisant le gestionnaire droits : sélectionnez l’utilisateur (ou le groupe)
Le GDS permet un fonctionnement connecté l’élément de la base de sources, le fier les permissions des autres utilisateurs.
de sources récupère une copie du projet
en local et à distance (via Internet). modifier, puis le réintégrer.
en local.
Il est ainsi possible de travailler sur un pro- Pour profiter des modifications effectuées,
4 La politique de réintégration : garantissez un code fonctionnel

jet depuis une agence ou depuis un site les autres développeurs doivent synchroniser
Utilisation
client sans crainte de perte des modifications leur projet local avec le projet de référence
Pour travailler sur un élément du projet
effectuées. (présent dans la base de sources).
(fenêtre, page, ...), le développeur doit extraire
Une politique de réintégration définit des

règles qui doivent être respectées pour que
2 L’Administrateur du GDS : l’outil indispensable

le développeur soit autorisé à réintégrer des
éléments d’un projet.
L’administrateur du GDS permet de manipuler Définir une politique

les projets (et leurs sources) directement.
Pour définir une politique de réintégration :
• depuis l’éditeur, sous le volet “GDS”, dans
Cet outil permet de :
le groupe “Base GDS”, déroulez “Gérer” et
• gérer les branches d’un projet.
sélectionnez “Politique de réintégration”.
• gérer les fichiers et les répertoires présents
dans un projet de la base de sources (ajouter,
• depuis l’administrateur du GDS, ouvrez le Fonctionnement les développeurs possèdent des fenêtres de
menu contextuel d’un répertoire de projet test dans leurs projets ...).
supprimer, renommer des fichiers et des À la réintégration d’un élément, si un cri-
et sélectionnez l’option “Politique de réin- Dans ce cas, l’utilisateur peut réintégrer son
répertoires). tère n’est pas respecté, une fenêtre alerte
tégration”. élément (en saisissant un commentaire facul-
• gérer les différents fichiers de la base de l’utilisateur du non-respect de la politique
sources (extraction, réintégration, partage, ...). Les règles sont découpées en 3 thèmes : de réintégration et la réintégration n’est pas tatif sur cette réintégration “forcée”).
• lancer des outils de maintenances ou d’admi- • Général : aucune erreur/warning/informa- effectuée.
nistration. tion, commentaire obligatoire, ... Notre astuce
Il est possible d’ignorer les règles de la poli- Si vous permettez d’ignorer la politique de
• ... • Tests automatiques : présence de tests auto-
tique à la réintégration (option “Ces règles réintégration, nous vous conseillons de
matiques, pas de tests en erreur.
peuvent être ignorées”). forcer la saisie d’un commentaire. Cela
L’administrateur du GDS permet notamment • Métrique de code : Taux de commentaires.
de gérer les droits des utilisateurs sur les Cela permet de passer outre les restrictions, permet de conserver un suivi et d’éviter
éléments du GDS (voir point 3 de cet article). notamment pour des éléments de test (tous d’éventuels abus.

LE GDS :
PRENEZ SOIN DE VOS SOURCES ! 7 Les branches : gérez vos versions et reportez vos modifications
(SUITE) Par exemple, une version de l’application
est diffusée en clientèle : elle est dans une
trateur du GDS, ouvrez le menu contextuel
sur le répertoire du projet et sélectionnez
branche. Le tronc commun contient la future “Historique”. Vous pouvez alors créer une
version de l’application. branche à partir d’une ligne d’historique via
le bouton “Créer une branche”.
5
Vous pouvez continuer de travailler sur la
Historique et étiquette : gardez trace de tout version en clientèle et même reporter des
corrections de bugs sur cette version à partir Reporter une
du tronc commun. modification
La principale caractéristique
Pour récupérer une modification depuis une
d’un gestionnaire de sources est Créer une branche branche, sous le volet “GDS”, dans le groupe
l’accès à l’historique de l’élément.
1. Pour créer une branche, sous le volet “GDS”, “Projet”, déroulez “Branches” et sélectionnez
Chaque réintégration crée une
dans le groupe “Projet”, déroulez “Branches” et “Récupérer des modifications depuis une
ligne d’historique.
sélectionnez “Créer une branche”. La branche branche”.
Remarque est alors créée à partir de la version en cours
Pour ne pas faire grossir trop des éléments. L’assistant de report de modifications s’affiche.
rapidement la base de sources, Pour chaque élément différent (ajouté, modifié
2. Une branche peut être créée automatique-
l’historique est sauvegardé de ou supprimé), il est possible de choisir l’action
ment lorsque vous ouvrez un projet dans une
manière différentielle. Un his- à effectuer :
version supérieure de WINDEV (par exemple, si
torique mémorise donc unique- • ne rien faire,
Les branches GDS permettent de gérer en vous ouvrez un projet 18 avec une version 19).
ment les différences par rapport • ajouter dans le projet,
à l’historique précédent. parallèle plusieurs versions d’une application. 3. Une branche peut être créée a posteriori, • ...
depuis l’historique du projet. Dans l’adminis-
La fenêtre d’historique affiche
pour chaque ligne :
• le développeur qui a effectué
• enregistrer l’historique, En un coup d’œil, vous voyez quelle version
8 Partage d’éléments : des éléments toujours à jour

la modification,
• comparer / fusionner avec la version cou- de l’élément a été intégrée dans la version
• la date de modification,
rante de l’élément. déployée.
• la version interne (VI) utilisée,
Depuis l’historique du projet, vous pouvez
• le commentaire de réintégration. Étiquette ajouter vous-même une étiquette sur une
L’un des avantages majeurs du GDS est de
Pour une ligne d’historique, il est possible de : Le picto représente une étiquette. ligne d’historique.
pouvoir partager un élément entre plusieurs
• revenir à cette version, Les étiquettes permettent également de créer
Une étiquette symbolise la création d’une projets :
• récupérer l’historique à fin de test, une branche a posteriori.
version client ou la création d’une branche. • une fenêtre,
• une collection de procédures,
• un modèle de fenêtres ou de champs,
• un composant interne,
6 Comparaison et fusion : identifiez et récupérez une modification

• ou même une analyse !
Cette fonctionnalité présente plusieurs avan-

tages :
Le bouton “Comparer” permet de comparer
• les modifications sont reportées automati-
l’élément courant avec la ligne d’historique
quement dans tous les projets qui partagent
en “lecture seule”. Cela permet uniquement
l’élément,
de voir les modifications, mais pas d’agir.
• cet élément est modifiable directement
dans chacun des projets.
Le bouton “Fusionner avec” permet d’effec-
tuer une fusion, c’est-à-dire de reporter les
modifications de l’historique dans la version Partager un élément
courante (et, bien entendu, pas l’inverse !).
Pour partager un élément, depuis l’éditeur,
Ce bouton propose donc automatiquement sous le volet “GDS”, dans le groupe “Projet”,
l’extraction de l’élément. cliquez sur “Importer depuis le GDS”.
Pour partager l’élément, il vous suffit de cliquer Remarque
Le saviez-vous ? sur le bouton “Partager” en bas. Il est également possible de partager un
La fenêtre qui s’ouvre permet de :
Il est possible de comparer 2 historiques de élément depuis l’administrateur du GDS : il
• recherche un élément par son nom,
versions : il suffit de sélectionner les deux Le bouton “Importer une copie” permet de suffit d’utiliser le bouton ou d’effectuer un
• parcourir l’arborescence du GDS.
lignes d’historique et de cliquer sur le bouton récupérer une copie locale de l’élément dans Drag and Drop de l’élément (fenêtre, état,etc.)
“Comparer”. le projet : l’élément n’est alors pas partagé. depuis la table sur le projet (dans l’arbre).
Lorsque vous sélectionnez un élément, la liste
des partages est affichée.

HFSQL : LES NOUVEAUX MODES
D’ISOLATION DE TRANSACTIONS
Le moteur HFSQL permet de gérer un mode d’isolation pour les transactions.
Le mode d’isolation définit la façon dont les utilisateurs vont lire un
enregistrement qui est en transaction.
Cet article détaille les différents modes d’isolation et propose un exemple
didactique pour mieux appréhender ce mécanisme.
Projet d’illustration Rappel Modes d’isolation Important nées ne pourra pas être utilisé par des rence puis :
Le mode d’isolation a de l’importance même applications en version 18 (et inférieures). • lisez l’enregistrement,
Le projet utilisé pour illustrer ce sujet est Une transaction permet de définir un À partir de la version 19, HFSQL permet de si votre application n’utilise pas la fonction • débutez une transaction,
l’exemple “WD DemoTransaction TDF19” (pré- ensemble d’opérations indissociables sur la gérer des modes d’isolation. HTransactionDébut. • modifiez le prénom en “Manu”, sans valider
sent sur le DVD). base de données. Le mode d’isolation définit la façon dont En effet, sans transaction explicite, HFSQL se Exemple par la pratique la transaction.
Si une des opérations échoue, toutes les les utilisateurs vont lire un enregistrement comporte comme si chaque fonction HFSQL Pour visualiser facilement le comporte-
Attention : un serveur HFSQL 19 est néces- 2. Lancez l’application Mode isolation, choi-
opérations déjà effectuées sont annulées. qui est en transaction. était réalisée dans une transaction : c’est ce ment des modes d’isolation, l’exemple “WD
saire pour utiliser cet exemple. sissez le mode “READ COMMITTED” puis lisez
que d’autres bases de données appellent le DemoTransaction TDF19” propose 2 confi-
L’exemple le plus parlant est un virement 3 modes d’isolation sont disponibles : l’enregistrement : la valeur lue correspond à
mode “AUTOCOMMIT”. gurations :
bancaire d’un compte A à un compte B : il • Read uncommited, la valeur avant modification.
faut être sûr que la modification des deux • Read commited, 1. “Transaction référence” est la configura-
3. Validez la transaction dans l’application
comptes est bien effective. • Repeatable read. Read uncommitted tion de référence.
Transaction référence et relisez la valeur
Le mode “Read uncommited” (ou “lecture des Cette configuration permet de :
dans l’application Mode isolation : la valeur
données non validées”) permet de lire les • lire un enregistrement,
lue correspond maintenant à la valeur modi-
modifications des transactions en cours • débuter une transaction,
fiée.
(non validées). • faire une modification de l’enregistrement,
• valider/annuler la transaction.
Ce mode est le mode par défaut des versions Repeatable read
18 et inférieures. 2. “Mode isolation” est la configuration de
test des différents modes d’isolation. 1. Lancez l’application Transaction réfé-
Cette configuration permet de : rence puis :
Read commited • définir le mode d’isolation, • lisez l’enregistrement,
Dans le mode “Read commited” (ou “lecture • débuter une transaction (nécessaire uni- • débutez une transaction,
des données validées”), les modifications quement pour le mode “Repeatable read”), • modifiez le prénom en “Loreleï”, sans valider
des transactions en cours (non validées) ne • lire un enregistrement. la transaction.
sont pas visibles par les autres utilisateurs. 2. Lancez l’application Mode isolation, puis :
Pour chaque mode d’isolation, nous allons • choisissez le mode “REPEATABLE READ”,
vous présenter le mode opératoire à suivre. • débutez la transaction,
Repeatable read
• lisez l’enregistrement : la valeur lue corres-
Dans le mode “Repeatable read” (“transactions
pond à la valeur avant modification.
photographiées”), les modifications des Read uncommitted
autres utilisateurs ne sont pas visibles 1. Lancez l’application Transaction réfé- 3. Validez la transaction dans l’application
(même si elles ont été validées) pendant rence puis : Transaction référence puis relisez l’enregis-
tout le temps de la transaction. • lisez l’enregistrement, trement dans l’application Mode isolation :
• débutez une transaction, la valeur lue est toujours la même (valeur
Si le poste qui a fait les transactions lit à
• modifiez le prénom en “Marc”, sans valider avant modification).
nouveau les enregistrements, il lira les valeurs
telles qu’elles étaient au début de sa tran- la transaction.
4. Annulez la transaction de l’application
saction. 2. Lancez l’application Mode isolation, choi-
Mode isolation puis relisez l’enregistrement :
sissez le mode “READ UNCOMMITTED” puis
la valeur est maintenant celle modifiée dans
Important lisez l’enregistrement : la valeur lue correspond
l’application Transaction référence.
Pour exploiter les transactions “Repeatable à la valeur modifiée dans l’autre application,
Read”, vous devez activer une option dans même si la transaction n’a pas été validée.
l’éditeur d’analyses : dans les propriétés du
fichier de données, il suffit de cocher la case

Read commited
“Autoriser les transactions REPEATABLE READ”.
Attention : dans ce cas le fichier de don- 1. Lancez l’application Transaction réfé-

DÉBOGAGE : LES TECHNIQUES
AVANCÉES DE MARC À partir de la version 19, il est possible d’affi-
cher directement les sources de données dans
le débogueur.
manuelle est automatiquement ajoutée.
C’est très utile pour définir un point d’arrêt
gurer le firewall en conséquence.
WDDebug affiche les applications et les ser-
Parmi toutes les fonctionnalités de WINDEV, WEBDEV et WINDEV Mobile, Il suffit d’ajouter le fichier de données dans le
conditionnel. vices WINDEV en cours d’exécution sur le
poste et permet à WINDEV de se connecter
celle qui est la plus utilisée est sans doute le débogueur. débogueur soit en saisissant son nom, soit via
un Drag and Drop depuis le volet “Analyse”. Débogage distant
pour les déboguer.
Il est également possible d’autoriser WINDEV
Gagner du temps lors des phases de débogage est essentiel pour se En double-cliquant sur la ligne, le détail de Le débogueur de WINDEV permet bien à relancer l’application à distance. Cette fonc-
l’enregistrement en cours est visible. entendu de déboguer le projet en cours direc- tionnalité est particulièrement utile pour
concentrer sur la partie métier de l’application. tement depuis l’éditeur (Mode Go). déboguer le traitement d’initialisation
Il est également possible de déboguer une du projet.
Cet article vous présente plusieurs astuces sur le débogueur. application déjà lancée sur le poste en cours
Important
(ou un autre poste) ou encore de lancer
Deux versions de WDDebug sont disponibles :
et de déboguer l’application sur n’importe
une version 32 bits et une version 64 bits.
quel poste.
Si l’exécutable à déboguer est lancé sur un
poste en Windows 64 bits, vous devez
utiliser WDDebug64, même si votre appli-
Point d’arrêt Par exemple, si vous souhaitez vous arrêter point d’arrêt sur une condition complexe. cation est en 32 bits.
quand la variable sTexte change de valeur,
Un point d’arrêt permet, comme son nom Par exemple, si vous voulez vous arrêter au
il suffit de :
quarante-troisième passage dans une boucle
l’indique, d’arrêter l’exécution de l’appli- • ajouter cette variable dans le débogueur, Fonctions de débogage
cation sur la ligne marquée. et uniquement si l’utilisateur a coché un inter-
• cliquer sur le point vert (à gauche). Le point Ce panorama des outils de débogage de
rupteur, il vous suffit d’ajouter le code suivant
Pour définir un point d’arrêt, vous pouvez : devient rouge indiquant que le point d’arrêt Cette fonctionnalité est disponible pour tout WINDEV ne serait pas complet sans mention-
dans la boucle :
• cliquer dans la colonne jaune à gauche est activé. type de source : les fichiers de données, les ner les fonctions de débogage du langage.
POUR n = 1 A 100
du code, requêtes, le nouveau type Enregistrement...
SI n = 43 ET Grâce à la famille de fonctions dbgXXX, il
• utiliser le raccourci clavier Ctrl + B. INT_Afficher= Vrai ALORS
est possible de :
STOP Définir l’instruction suivante • placer des assertions dans vos applications
Le débogueur va alors s’arrêter systéma- FIN En cours de débogage, il est possible de
Menu contextuel FIN pour détecter les paramètres incorrects dans
tiquement dès que la valeur de la variable “Définir l’instruction suivante” : cela permet Pour déboguer un exécutable à distance, les appels de fonctions par exemple (dbgAs-
Les points d’arrêt proposent un menu contex- sTexte va changer et une boîte d’informa- Il est également possible de spécifier la condi- de sauter une ou plusieurs instructions ou de vous avez besoin d’un utilitaire livré en stan- sertion, dbgVérifieXXX, ...),
tuel très pratique. tion s’affiche. tion d’arrêt directement sur le STOP avec la revenir en arrière. dard avec WINDEV : WDDebug. • générer des dumps mémoire ou des dumps
syntaxe STOP SI <condition>. Par exemple : Le rôle de cet utilitaire est de faire le lien entre
Pour modifier la prochaine instruction à exé- de débogage que vous exploiterez ensuite
STOP SI (n = 43 ET ... cuter, vous pouvez : WINDEV et l’application. dans l’environnement de développement
INT_Afficher = Vrai) • vous positionner sur la ligne puis sélection- (dbgSauveDumpXXX),
WDDebug peut être déployé avec l’applica-
ner l’option “Définir l’instruction suivante” tion : il suffit de cocher la case correspondante • manipuler l’audit dynamique pour remonter
Thread depuis le menu contextuel (clic droit). des informations directement dans le tableau
dans les “Outils optionnels” lors de la création
Le point d’arrêt conditionnel permet égale- • faire glisser la flèche jaune directement dans de bord du projet,
Le débogueur de WINDEV gère le débogage de l’installation.
ment de s’arrêter lorsqu’une variable prend la colonne jaune. • etc.
multi thread : il suffit de choisir le thread à WDDebug communique avec WINDEV sur les
une valeur donnée.
Ce menu contextuel permet de : déboguer directement dans la combo. ports 27270 et 27280. Pensez à bien confi- 
• désactiver / réactiver un point d’arrêt. Par exemple, s’il faut s’arrêter lorsque la
Désactiver un point d’arrêt permet de conser-
Expressions
variable nIndice vaut 27, il suffit d’ajouter
ver un point d’arrêt stratégiquement placé la valeur “nIndice = 27” et de cliquer sur le automatiques
sans pour autant qu’il soit pris en compte en point vert. (Autowatch)
permanence. Il suffit de le réactiver au besoin.
Cette combo affiche : L’option “Voir les expressions automatiques”
• afficher une fenêtre récapitulative de tous
• le thread principal (IHM), du débogueur permet d’afficher de façon
les points d’arrêt placés dans le projet.
• les threads automatiques (définis par auto- dynamique les expressions utilisées pour
Depuis cette fenêtre, il est possible d’accéder
matisme de procédure), chaque ligne exécutée.
directement au code marqué par le point
d’arrêt.
Ctrl + Pause • les threads manuels (définis par la fonction Pour activer cette option, il suffit de cliquer
ThreadExécute). sur le bouton .
Le raccourci Ctrl + Pause permet de posi-
tionner l’éditeur en mode “débogage” dès Les expressions automatiques se différencient
Point d’arrêt la prochaine ligne de code appelée. Source de données des autres expressions par l’absence du bou-
conditionnel ton dans la colonne STOP.
C’est très utile pour déboguer le code de clic
Le volet du débogueur permet d’afficher la
Le point d’arrêt conditionnel est un point d’un bouton par exemple : il suffit de faire
fenêtre d’affichage des sources de données.
d’arrêt qui se déclenche automatiquement Ctrl + Pause puis de cliquer sur le bouton ! Notre astuce
Il suffit de cliquer sur ce bouton .
lorsqu’une expression change de valeur, où Laissez toujours cette option activée : cela
que ce soit dans le code ! Cette fenêtre permet de voir sur quel enre- permet de voir instantanément les modi-
Instruction STOP gistrement est positionné chaque source de fications engendrées par la ligne en cours.
La définition d’un point d’arrêt conditionnel
données.
s’effectue dans le volet du débogueur. L’instruction STOP déclenche automatique- De plus, en double-cliquant sur une ligne
ment le débogueur. Cela permet de définir un d’expression automatique, une expression WDDebug affiche toutes les applications WINDEV en cours d’exécution sur le poste.

LES ÉTATS :
8 FONCTIONNALITÉS PRATIQUES
Les éditions sont un élément important d’une application : elles permettent
7 Gestion de
nement de l’état (ou de la fenêtre). l’éditeur d’états affiche des flèches rouges
Cela permet d’adapter intelligemment pour indiquer le type d’ancrage.
de donner vie aux données enfouies dans les bases de données. le document quand l’utilisateur passe de la transparence
portrait à paysage ou encore quand il change Remarque
La gestion de la transparence dans les états
En version 19, l’éditeur d’états bénéficie de nombreuses évolutions très de format de papier (A4, A3, etc). Les champs auto-extensibles sont indiqués
est disponible :
par un picto spécifique : un trait avec une
pratiques. En voici 8 qui vont vous permettre de créer des états encore plus Par exemple, une impression en A4 qui est un flèche vers le bas.
• sur les champs Image (au format .PNG par
exemple),
petit peu serrée (donc moyennement lisible)
efficaces et encore plus beaux. sera parfaitement lisible en A3.
• sur les champs Graphe.
L’image de fond de l’état n’est donc plus alté-

Appliquer un ancrage À l’exécution, un champ auto-extensible rée et vos impressions sont plus esthétiques.
Pour appliquer un ancrage à un champ (dans s’agrandira automatiquement en hauteur
8 Des
un état, dans une fenêtre, ...), il faut sélection-
ner l’option “Ancrage” dans le menu contextuel
si sa taille est trop petite pour afficher le
cadres
4 Langue
contenu en entier.
Projet d’illustration (clic droit).
évolués
Le projet utilisé pour illustrer ce sujet est
l’exemple “WD Etats TDF19” (présent sur le
d’impression Choix des formats dans l’aperçu L’éditeur d’états de WINDEV dispose d’un
avant impression outil d’édition de cadres très évolué.
DVD). Les états, tout comme les fenêtres, peuvent
Lorsque des ancrages sont définis dans un Des cadres peuvent être définis sur n’importe
contenir différentes langues.
état, l’aperçu avant impression propose auto-
1 Etat
quel champ de l’éditeur d’états.
“Diagramme Avec la version 19, il est possible d’imprimer
matiquement une combo pour choisir le
format d’affichage (A4 portrait, A4 paysage, Pour définir un cadre sur un champ, c’est
de Gantt” L’état est automatiquement rempli selon la un état dans une langue différente de la
langue de l’application.
A3 portrait, etc.). très simple :
hiérarchie définie.
L’impression d’un diagramme de Gantt (voir • sélectionnez le champ,
l’article “Champ Diagramme de Gantt” de ce Il suffit d’utiliser la fonction iNationImpres- • appuyez sur la touche Alt,
Bien entendu, il est possible d’ajouter des
support de cours) est réalisée dans un état sion en précisant la langue dans laquelle l’état • cliquez sur le bouton qui s’affiche en
colonnes pour afficher des informations sup- La fenêtre d’ancrage permet de :
spécifique : un état “Diagramme de Gantt”. doit être imprimé. haut à droite du champ. Ce bouton permet
plémentaires. • utiliser un ancrage prédéfini (sans ancrage, de passer en mode “édition du cadre”.
Ces colonnes peuvent alors être remplies par // L’état doit être imprimé en anglais étiré vers la droite, ancré à droite, ancré au
Un état “Diagramme de Gantt” est toujours iNationImpression(nationAnglais)
programmation, dans le traitement “Avant centre),
basé sur un champ Table ou Table hié- // Lance l’impression de la facture Vous pouvez alors entièrement paramétrer
impression” du bloc “Corps”. • définir un ancrage personnalisé (par
rarchique (contenant une colonne de type iImprimeEtat(ETAT_Facture, 18) le cadre :
exemple, “25% à droite”). • la couleur,
Diagramme de Gantt)
Les paramètres de style des tâches du dia-

gramme de Gantt de l’état sont automatique-
3 Impression
multipages
Important
La langue d’affichage de l’aperçu avant impres-
sion n’est pas modifiée. L’aperçu avant impres-
Important
Dans les états, les ancrages ne sont pas auto-
• le type de trait,
• les arrondis.
matiquement activés. En effet, un état peut La page suivante présente la personnalisation

ment récupérés depuis le champ (couleur de Un état peut parfois être très large, d’une sion utilise la même langue que l’application. Les choix proposés correspondent :
s’imprimer selon 3 modes d’impression : d’un cadre, étape par étape.
fond, couleur d’avancement, etc.). largeur supérieure à une feuille de papier : • au format de papier par défaut de l’état pro-
• “Imprimer l’état tel quel” : le contenu qui
c’est le cas essentiellement des états tableau, Notre astuce posé en mode portrait et en mode paysage,
déborde de l’état ne sera pas imprimé. Remarque
Il est bien entendu possible de personnaliser planning ou diagramme de Gantt. L’utilisation de la fonction iNationImpression • aux formats de papier gérés par l’imprimante
• “Étirer ou réduire automatiquement au Le cadre peut également être défini et modifié
différents éléments de style, pour les adapter permet de modifier la langue des libellés par défaut du poste.
format supporté” : l’état s’étire ou se réduit depuis la description du champ, onglet “Style”,
au mieux à une impression (épaissir les traits L’impression multipages permet d’imprimer ainsi que le format d’affichage des dates,
automatiquement pour s’adapter au papier. élément “Cadre”.
de liaison par exemple). un état sur plusieurs pages (2 ou plus). monétaires, etc. Le Saviez-Vous ?
• “Étirer ou réduire en appliquant les
Une fois imprimées, les pages peuvent être Mais bien entendu, le contenu (les rubriques) Grâce aux fonctions WLangage iGroupeXXX,
2
ancrages” : l’état s’adapte en utilisant les
Etat “Tableau assemblées (mises bord à bord). n’est pas modifié.
Si vous souhaitez adapter le contenu à la
ancrages définis.
vous pouvez personnaliser la combo de
l’aperçu avant impression en proposant plu-
Notre astuce
Quand vous définissez des cadres, pensez à
hiérarchique”
Le mode d’impression est personnalisable définir le retrait (ou marge intérieure).
Cette fonctionnalité permet de rendre lisibles langue d’affichage (afficher le nom des pro- sieurs états (un même état de statistiques sur
dans l’onglet “Options” de la description de
de grands tableaux ou des plannings. duits dans la langue adéquate par exemple), différentes années par exemple). Le retrait peut être défini :
L’état “Tableau hiérarchique” permet d’impri- l’état.
pensez à passer la langue en paramètre et à • globalement pour tous les champs de l’état
mer un contenu hiérarchisé. Ce contenu
6 Image
Dans notre exemple, l’impression multipages charger les libellés en fonction de ce para- (onglet “Format” de la description de l’état),
peut provenir de : Si vous tentez de définir un ancrage dans
est utilisée pour imprimer un planning de mètre. C’est ce qui est réalisé dans l’exemple • pour un champ donné (onglet “IHM” de la
• un champ Table hiérarchique (et donc d’un un état dont le mode d’impression n’est pas
diagramme de Gantt hiérarchique),
location de véhicules.
Sans la possibilité d’imprimer sur plusieurs
“ETAT_Facture”.
adapté, WINDEV vous avertit et vous permet au format SVG description du champ).
5
• fichiers de données. de changer le mode d’impression. Le format SVG est un format d’image vecto-
pages, il aurait fallu réduire considérablement
la place accordée au planning et donc réduire
Ancrages et riel. Ce format permet de redimensionner “à
Dans l’état “ETAT_TableHiérarchique“ de notre
exemple, la hiérarchie est réalisée grâce à 3
d’autant sa lisibilité. format de papier l’infini” l’image sans perte de qualité.
fichiers de données.
Avec l’impression multipages, plus de pro-
Les ancrages permettent de définir le com-

blèmes : l’état peut être imprimé et affiché À partir des versions 19, l’éditeur d’états sup-
portement d’un champ lors du redimension- Lorsqu’un ancrage est défini sur un champ, porte ce format d’image.
en grand !

LES ÉTATS : PERSONNALISATION
D’UN CADRE, ÉTAPE PAR ÉTAPE 4 Choisir le trait à modifier
À partir des versions 19, l’éditeur d’états permet de personnaliser un cadre Les traits fonctionnent sur le même principe que les coins. Vous
avec beaucoup de détails : couleur, type de trait, épaisseur, type d’arrondi, ... pouvez donc :
• cliquer directement sur un trait (sélection d’un seul trait),
En quelques clics, vous définissez un cadre sophistiqué et vous enrichissez • cliquer sur le bouton situé près du titre “Épaisseur”. La fenêtre
popup qui s’ouvre permet de sélectionner les traits (il suffit de cliquer
vos impressions. sur les bords souhaités).
Démonstration en images !
Les bords coloriés en orange / marqués par des flèches orange sont
les bords sélectionnés
Remarque : le bouton situé près du titre s’adapte également .
1 Passer en mode d’édition

5 Définir un arrondi rapidement à la souris
Pour définir un cadre directement depuis l’éditeur d’états, sélection- Le panneau “Arrondis” permet de définir la hauteur et la largeur de
nez un champ et appuyez sur la touche Alt : un bouton spécifique référence d’un arrondi. C’est pratique si vous devez définir un arrondi
( ) apparaît alors. simple (hauteur et largeur identique).
Si vous devez définir un arrondi particulier, inutile de tâtonner en
Ce bouton permet de passer en mode édition de cadre.
saisissant des valeurs : avec le curseur de la souris, saisissez un coin
(représenté par un cercle en mode édition) et déplacez-le librement.
Vous pouvez également modifier le cadre depuis la fenêtre de
description du champ, onglet “Style”, élément “Cadre”. Les options Lorsque vous avez trouvé votre arrondi parfait, si vous souhaitez
de paramétrage sont strictement identiques. l’appliquer à un autre coin, il suffit d’effectuer un report !
2 Les panneaux d’édition
6
En mode édition, 2 panneaux d’outils sont affichés.
1. Le panneau des arrondis permet de définir, pour chaque coin du Reporter des modifications
cadre la largeur et la hauteur de référence de l’arrondi.
Voir le point 3 pour plus de détails. Les panneaux d’édition dispose d’un bouton “Reporter” (en bas).
2. Le panneau des traits permet de définir, pour chaque trait : Ce bouton permet d’appliquer le paramétrage courant de l’arrondi
• l’épaisseur, ou du trait sur :
• la couleur, • tous les coins ou tout le cadre,
• le type de trait (plein, pointillé, ...). • les coins ou les bords qui n’utilisent pas ce paramétrage.
Voir le point 4 pour plus de détails.
3 Choisir le coin à modifier

7 Des cadres sophistiqués
Pour sélectionner le ou les coins à modifier, vous pouvez : Avec l’édition avancée des cadres de l’éditeur d’états, vous êtes prêts
• cliquer directement sur un rond (sélection d’un seul coin), à créer tous les cadres que vous souhaitez !
• cliquer sur le bouton situé près du titre “Arrondi”. La fenêtre
popup qui s’ouvre permet de sélectionner les coins (il suffit de cliquer Vous pouvez bien entendu définir une couleur de fond au champ,
sur les coins souhaités). qui respectera le cadre quels que soient les arrondis définis.
Les coins coloriés en orange sont les coins sélectionnés.
Remarque : le bouton situé près du titre “Arrondi” s’adapte en fonction
des coins sélectionnés. Par exemple, en sélectionnant les coins “haut
gauche” et “bas droite”, le bouton devient .

PCSCLOUD :
VOTRE SOLUTION CLOUD Le Cloud, c’est une plateforme préconfigurée mise à votre
PCSCloud proposait déjà des plateformes d’exploitation pour déployer vos disposition : vous n’avez pas à vous préoccuper du matériel, de
installations, sites WEBDEV, Webservices et bases de données HFSQL. la maintenance, des licences, de la sécurité du serveur.
Et vous accédez à vos données de n’importe où dans le monde !
PCSCloud propose maintenant des plateformes de développement pour
stocker et partager vos projets (Gestionnaire de Sources), les données de
Toutes les informations sur le Cloud sont disponibles à cette adresse :
vos Centres de Contrôle et la configuration de votre environnement de
“www.pcscloud.net”.
développement.
1 Plateforme d’exploitation : vos applications et vos sites accessibles 2 Plateforme de développement : vos projets virtualisés
• Sur une plateforme d’exploitation, vous pouvez héberger : • Avec une plateforme de développement, vous pouvez stocker et partager :
vos sites WEBDEV vos Webservices vos bases HFSQL vos installations vos réplications vos projets vos données votre
d’applications universelles de WINDEV, WEBDEV des Centres de environnement
WINDEV données et WINDEV Mobile Contrôle de travail
• Depuis le tableau de bord du Cloud, vous définissez les rôles de votre plateforme : • Depuis le tableau de bord du Cloud, vous définissez vos utilisateurs et leurs droits :
• Depuis le produit, si un déploiement est disponible pour le Cloud, le choix est proposé : • Depuis le produit, la localisation du GDS (ou des fichiers des Centres de Contrôle) peut être
renseignée avec vos paramètres de connexion Cloud :

WLANGAGE : DES FONCTIONNALITÉS
UTILES AU QUOTIDIEN
Les versions 19 proposent des centaines de nouvelles fonctions et syntaxes
pour vous aider dans vos développements.
Voici une sélection de nouveautés apparues en version 19 et qui vont vous
servir au quotidien.
Lisez attentivement, vous allez sûrement en découvrir !
[=]
Projet d’illustration // (renverra Vrai) X
SI sTexte1 =] sTexte2 ALORS ... Y
Le projet utilisé pour illustrer ce sujet est Z tableau [clé]=valeur
l’exemple “WD WLangage TDF19” (présent Remarque
sur le DVD). Opérateurs de Mot-clé AVEC Affectation et retour Tri d’un tableau
Les opérateurs de comparaison de chaînes
comparaison de chaînes sont très utiles : retrouvez plus de détails dans Le mot-clé AVEC permet de factoriser l’expres- multiple associatif
l’article “Optimisation”. sion d’un élément sur lequel on accède à L’affectation multiple permet d’affecter plu- La fonction TableauTrie permet de trier tout
Le WLangage dispose de nombreux opéra-
plusieurs sous-éléments ou propriétés. sieurs variables WLangage en une seule ligne type de tableaux.
teurs de comparaison de chaînes :
• égalité stricte (“=”), de code.
Avec AVEC, vous manipulez les membres En version 19, cette fonction permet mainte-
• commence par (“[=”),
POUR TOUT [RC,TAB,’’;’’] d’une variable sans ressaisir son nom à chaque Cette syntaxe est très utile si vous manipulez nant de trier un tableau associatif :
Ajout d’en-tête à un • ...
fois. des coordonnées de points (x, y, z) ou des • soit sur la valeur (fonctionnement par
email (EmailEntête) POUR TOUTE CHAÎNE couples latitude / longitude par exemple. défaut),
Pour chaque opérateur, il est possible de
Une nouveauté intéressante sur le type Email rendre la comparaison plus souple : plusieurs séparateurs Cette syntaxe permet d’alléger et de clarifier • soit sur la clé. Il suffit d’utiliser la constante
est l’ajout d’en-têtes supplémentaires à l’email. l’affichage, notamment pour les variables La syntaxe est très simple : il suffit d’entourer ttClé.
• pour ne pas tenir compte de la casse, vous La syntaxe POUR TOUTE CHAÎNE permet qui possèdent beaucoup de sous-éléments avec des parenthèses le groupe de variables
remplacez simplement l’opérateur “égal” par de parcourir les termes d’une chaîne séparés
Cela permet, par exemple, d’ajouter l’en-tête (structure, classe, XML, ...) à affecter et le groupe de valeurs. taAge[“Michel”] = 35
un “tilde” (“~”). par une chaîne (RC, TAB, etc.).
“list-unsubscribe” pour indiquer l’adresse de taAge[“Solange”] = 28
• pour ne tenir compte ni de la casse, ni des
stMonObjet est un STObjet // Affectations multiples taAge[“Marcel”] = 42
désinscription d’une mailing list. accents, ni de la ponctuation, c’est un double En version 19, cette syntaxe accepte mainte- (nX, nY, nZ) = (22, 19, 37) taAge[“Sylvie”] = 55
tilde (“~~”). nant plusieurs séparateurs ! // Sans AVEC // Tri du tableau associatif sur la clé
Il suffit d’utiliser une variable de type stMonObjet.sLibellé = “Mon objet” // Le tableau sera trié comme suit :
EmailEntête et la propriété ..Entête de la sTexte1 = “WINDEV, c’est bien !” En version 19, une fonction peut renvoyer
sListePrénoms est une chaîne = [ stMonObjet.stUneZone.nX = 15 // Marcel, Michel, Solange, Sylvie
variable Email. sTexte2 = “WinDev, c’est BIEN !” stMonObjet.stUneZone.nY = 5 plusieurs valeurs directement.
PIERRE TableauTrie(taAge,
// Teste l’égalité stricte stMonObjet.stUneZone.nHauteur = Cela évite de devoir gérer des paramètres de ttCroissant + ttClé)
JEAN JACQUES
UnEmail est un Email // (renverra Faux) EMILIE;AGNES;FABRICE 50 sortie (paramètres remplis par la fonction et
UneEntête est un EmailEntête SI sTexte1 = sTexte2 ALORS ... SOLANGE stMonObjet.stUneZone.nLargeur = récupérés par le code appelant).
// Teste l’égalité souple NOEMIE 120
// Ajoute l’entête “List-unsubscribe” // (renverra Vrai) ] La syntaxe est la même que pour l’affectation
UneEntête..Nom = “List-Unsubscribe” // Avec AVEC
Fichier1.jpg Fichier2.jpg
SI sTexte1 ~= sTexte2 ALORS ... // Extraction de chacun des prénoms multiple : il suffit d’entourer les valeurs de
UneEntête..Valeur = ... AVEC stMonObjet
// de la liste retour avec des parenthèses.
“http://mondomaine.com/ .sLibellé = “Mon objet”
En version 19, de nouveaux opérateurs utiles // Les tabulations (TAB), retour à
AVEC .stUneZone
unsubscribe?email@xxx.com”
font leur apparition : // la ligne (RC) et point virgule (;)
.nX = 15 PROCEDURE RecupereCoordonnées() Incrémentation de chaînes
// sont considérés comme La nouvelle fonction ChaîneIncrémente
// Ajoute l’entête à la variable Email • contient (“[=]”), .nY = 5
// des séparateurs // Valeurs de retour multiples permet d’incrémenter un nombre situé à la
TableauAjoute(UnEmail..Entête, .nHauteur = 50
POUR TOUTE CHAÎNE sPrénom RENVOYER (19, 27, 32) fin ou au début d’une chaîne.
UneEntête) sTexte1 = “WINDEV, c’est bien !” .nLargeur = 120
DE sListePrénoms
// Remplit les informations de l’email sTexte2 = “bien” FIN
SEPAREE PAR [“;”, TAB, RC]
// (sujet, expéditeur, etc.) // Teste l’opérateur “contient” FIN Et pour récupérer les valeurs, bien entendu, C’est très utile pour construire une suite de
// Traitement sur le prénom
... // (renverra Vrai) il faut utiliser l’affectation multiple. fichiers par exemple (001.jpg, 002.jpg, ...).
...
SI sTexte1 [=] sTexte2 ALORS ... Cette syntaxe fonctionne sur :
FIN // Nom des fichiers extraits
// Envoie le message • les champs, // Retour multiple sNomFichier est une chaîne = ...
EmailEnvoieMessage(Session, • les fichiers de données, (nX, nY, nZ) = RecupereCoordonnées()
• termine par (“=]”). “001.jpg”
UnEmail, C’est très utile pour simplifier un traitement • les structures, // Parcourt les images
emailOptionEncodeEntête) d’extraction sur une chaîne non uniformisée
sTexte1 = “WINDEV, c’est bien” • les classes, POUR TOUT Images
sTexte2 = “bien” (par exemple une liste fournie par différentes • les types avancés du WLangage, // Extrait le fichier
// Teste l’opérateur “termine par” applications, donc avec différents formats). • ... HExtraitMémo(Images, Binaire,

WLANGAGE :
DES FONCTIONNALITÉS UTILES
(SUITE)
fRepExe()+[“\”]+sNomFichier) Les fonctions fournies par ces familles per- // Récupère le nom de la valeur dDébutDessin(ImageIcone) fExtension)~=”.dll” ALORS
// Nom suivant mettent de : // de l’énumération dans une chaîne dPolice(“Verdana”, 14) RENVOYER fcIgnore
sNomFichier = ... • renvoyer la valeur d’une énumération ou // (ou dans une rubrique d’un fichier dStylo(Blanc) FIN
ChaîneIncrémente(sNomFichier) d’une combinaison à partir de son nom. // de données) dTexte(110, 44, “19.0.1.59”) // Par défaut, poursuit la copie
// Va générer des fichiers sValeur = eCookyLeChien..Nom // Définit l’icône RENVOYER fcCopie
... et beaucoup d’autres
// 001.jpg, 002.jpg, 003.jpg, ... MonIcone est une Icône Bien entendu, cet article présente unique-
eCookyLeChien est une EtatChien
FIN • pour recharger la valeur, d’utiliser les MonIcone..Image[1]..Image = ment certaines nouvelles fonctionnalités des
// Renvoie la valeur de l’énumération Notre astuce
// à partir de son nom fonctions EnumérationDepuisNom ou ImageIcone versions 19.
La fonction fRepCopie, qui permet de copier
eCookyLeChien = ... EnumérationDepuisValeur. MonIcone..Format[1] = ...
le contenu d’un répertoire, dispose également
EnumérationDepuisNom(... icoFormatPNG En version 19, vous disposez également :
de ce nouveau paramètre !
Enumérations EtatChien, “Couché”) // Initialise la variable Enumération // Enregistre l’icône • du type Enregistrement pour manipuler
&
Combinaisons
// eCookyLeChien vaut Couché // à partir de la chaîne
// (ou de la rubrique du fichier
dSauveImageICO(MonIcone,
fRepExe()+[“\”]+“MonIcone.ico”)
des enregistrements des fichiers de données,
• de la sérialisation en JSON,
// de données)
Enumération et • renvoyer la valeur d’une énumération ou
eCookyLeChien = ...
• de la sauvegarde d’images au format TIFF,
combinaison d’une combinaison à partir de sa valeur. • des labels automatiques “CONTINUER” et
EnumérationDepuisNom(...
EtatChien, sValeur) “SORTIR”,
Les types Enumération et Combinaison eCookyLeChien est une EtatChien Découpage et regroupement • de nouveautés sur la POO (classe et méthode
sont deux types du WLangage apparus en // Renvoie la valeur de l’énumération fCopieFichier ( ) de fichiers abstraites, attribut Sérialise, ...),
version 18. // à partir de sa valeur Les fonctions fDécoupe et fRegroupe per- • ...
Ces types permettent de gérer des listes de eCookyLeChien = ... fCopieFichier : nouveau mettent respectivement de découper un
EnumérationDepuisValeur(...
valeurs possibles pour une variable.
EtatChien, 3)
paramètre Procédure fichier en plusieurs fichiers et de regrouper Le WLangage, ce sont des centaines de fonc-
une série de fichiers en un fichier. tionnalités disponibles !
// eCookyLeChien vaut Debout
ico
La fonction WLangage fCopieFichier permet
Les énumérations permettent par exemple de
Type Icône et fonction de copier un ou plusieurs fichiers.
remplacer les constantes simples : les énu- Ces fonctions sont très utiles pour découper
mérations garantissent l’utilisation exclusive
• vérifier si une valeur d’énumération ou de dSauveImageICO de grosses sauvegardes qui ne rentrent pas
combinaison est correcte. En version 19, un nouveau paramètre permet
de valeurs autorisées. En version 19, le WLangage permet de gérer de préciser une procédure “callback” qui sera
sur un DVD par exemple. 
Par exemple, des états pour un chien robot : facilement la création d’icônes grâce au type
// Indique si le nom d’une valeur exécutée pour chaque fichier à copier.
assis, debout, couché. Il ne peut pas avoir // d’énumération est correcte de variable Icône et à la fonction dSauveI- // Découpe le fichier image
deux états en même temps. SI EnumérationVérifieNom(... // en fichiers de 1 Mo
mageICO. Depuis cette procédure, il est possible de :
EtatChien, “Assis”) ALORS fDécoupe(IMG_AvantDécoupage,
• poursuivre la copie (fcCopie), 1000*1024, “ImageDécoupée”)
// Déclarer une énumération Info(“““Assis”” est bien le nom d’une Vous pouvez ainsi créer dynamiquement des
EtatChien est une Enumération valeur de l’énumération EtatChien.”) • ignorer la copie du fichier en cours (fcI-
icônes pour : gnore), // Regroupe le fichier image
Assis = 1 FIN
Couché = 2 • modifier en direct l’icône de la fenêtre et • arrêter définitivement la copie (fcAnnule). fRegroupe(“ImageDécoupée”,
// Indique si la valeur d’énumération fRepExe() + “.jpg”)
Debout = 3 donc l’icône de barre de tâches. Couplé à la Il suffit de renvoyer la constante adéquate.
// est correcte
FIN SI EnumérationVérifieValeur(... fonction WLangage SysIconeAjouteImage, il
EtatChien, 3) ALORS devient alors possible de donner visuellement Cette fonctionnalité est particulièrement utile
Les combinaisons fonctionnent sur le même Info(“““3”” est bien une valeur de des informations simplement par l’icône de pour filtrer les fichiers copiés (par exemple
principe mais il est possible de combiner l’énumération EtatChien.”) la barre des tâches. si vous devez copier tous les fichiers d’un
les valeurs. FIN • personnaliser différentes versions d’un répertoire, sauf les “.tmp”.).
Par exemple, pour un fichier vous pouvez même exécutable (ajouter une marque qui
l’ouvrir en lecture et/ou en écriture. Notre astuce indique une version “Lite” par exemple). Si
Le Saviez-Vous ?
// Copie les fichiers du répertoire
Les fonctions EnumérationDepuisXXX et vous utilisez l’intégration continue pour com- // Exe dans un sous-répertoire Toutes plates-formes confondues (Windows, Linux, Android, OS, Java,
Notre astuce CombinaisonDepuisXXX sont très utiles si piler vos projets, vous pouvez très simplement fCopieFichier(fRepExe()+[“\”]+“*.*”, etc.), le WLangage comporte plus de :
En utilisant les types Enumération et vous devez mémoriser des énumérations ou créer dynamiquement une icône et affecter fRepExe()+[“\”]+“TempCopie\”, • 3000 fonctions,
des combinaisons dans une base de données cette icône à l’exécutable. Pratique pour ajou- callbackCopie)
Combinaison, vous bénéficiez de la saisie • 640 propriétés,
assistée : les valeurs de l’énumération sont par exemple. ter un numéro de version ! • 250 types de variable et mots.
PROCEDURE callbackCopie(...
proposées lors d’une affectation par exemple. • ... sFichierSource est une chaîne,
Pour une énumération par exemple, il vous Pensez toujours à rechercher dans l’aide en ligne : la fonction que vous
sFichierDestination est une chaîne) cherchez existe déjà certainement !
En version 19, deux nouvelles familles de suffit : // Charge l’image de base
// Si le fichier à copier a pour
fonctions WLangage font leur apparition : • pour sauvegarder la valeur, d’utiliser les pro- ImageIcone est une Image L’aide en ligne, c’est par là : “http://doc.pcsoft.fr”.
// extension .tmp,
EnumérationXXX et CombinaisonXXX. priétés ..Nom ou ..Valeur sur l’énumération. // Ajoute le numéro de version // il faut l’ignorer (ne pas le copier)
// à l’aide des fonctions de dessin SI fExtraitChemin(sFichierSource,

OPTIMISEZ VOS APPLICATIONS
Des applications rapides, c’est le rêve de tout utilisateur !
L’analyseur de performances (profiler) de WINDEV permet d’optimiser des
applications en indiquant où sont les traitements qui prennent du temps.
Cet article présente l’analyseur de performances de WINDEV ainsi que 3
astuces d’optimisation pour vos applications !
Projet d’illustration tissement est constaté sur un poste donné 3 fonctionnalités sUnDisque]..AjouteFilsDifféré = ...
par exemple. RemplissageDifféré
Le projet utilisé pour illustrer ce sujet est qui “optimisent” un
traitement Remarque : la propriété ..AjouteFilsDifféré
l’exemple “WD Optimisation TDF19” (présent
Rapport d’analyse ajoute automatiquement le picto “+” dans
sur le DVD).
L’optimisation passe parfois par l’utilisation l’arbre à côté du libellé.
L’analyseur de performances génère un rap-
d’autres fonctionnalités du WLangage.
port sous la forme d’un fichier “.wpf”.
Analyseur de Voici 3 exemples qui vont sûrement vous servir. Notre astuce
À la fin de l’analyse (mode Go), ce rapport Il est tout à fait possible d’affecter une pro-
performances est automatiquement ouvert dans WINDEV :
1
cédure différente par nœud.
• l’onglet “Synthèse” présente les 10 traite- Remplissage “paresseux” de
Rappel ments qui ont pris le plus de temps. l’arbre Remarque Par exemple, vous pouvez remplacer : // Liste tous les fichiers du
L’analyseur de performances (ou profiler) • l’onglet “Détail” présente tous les traitements
Quand vous avez des éléments hiérarchiques Il est bien entendu possible de réaliser un fonc- • la fonction Gauche par l’opérateur [=, // répertoire, sans tenir compte
permet de comprendre où passe le temps lancés lors du test de l’application (classés du
à afficher, plusieurs cas sont problématiques : tionnement identique avec les versions 18 et • la fonction ChaîneFinitPar par l’opérateur // des fichiers cachés.
d’exécution. plus long au plus rapide). Une représentation inférieures de WINDEV. Ce code est disponible ~] (“termine par sans casse”). // Chaque fichier est listé avec
• il y a énormément de données à afficher,
C’est un outil indispensable pour optimiser visuelle de ces traitements est disponible dans dans la fenêtre “FEN_RemplissageDifféré_18” // sa taille, sa date de modification
• les données sont longues à récupérer (par La liste de tous les opérateurs de comparaison // et ses attributs
une application ou plus précisément un trai- l’onglet “Cartographie”. de l’exemple.
exemple, lister des fichiers sur un serveur est bien entendu disponible et à jour dans sListeFichiers = fListeFichier(...
tement donné. • l’onglet “Appels” contient, pour une fonction Un exemple plus complet est disponible dans
via Internet), l’aide en ligne : “C:\Mon répertoire” + [“\”] + “*.*”,
donnée, la liste des fonctions appelées avec la LST 93.
• il y a énormément de données ET les don- “http://doc.pcsoft.fr/fr-FR/?1512006”. frInformationComplète +
pour chacune le nombre d’appels et le temps
Comment le lancer nées sont longues à récupérer. frSansFichierCaché +
2
total. Cet onglet est le plus important, frNonRécursif)
3
L’analyseur de performances peut être lancé puisqu’il contient toutes les informations Pour ces 3 cas, il est nécessaire d’optimiser Privilégier les opérateurs aux
de différentes façons : Utiliser les syntaxes adaptées
nécessaires à la recherche d’une optimisation. le chargement des informations. fonctions
1. Si vous souhaitez faire une analyse glo- Jusqu’où optimiser ?
Dans notre exemple, le but est de remplir Cette astuce très utile s’applique à tout traite-
bale du projet, utilisez le bouton “Analyser Bien souvent, les fonctions WLangage dis- Au bout d’un moment, il n’est plus possible
Analyser le rapport l’arborescence des disques locaux dans un ment. Gardez-la en tête lorsque vous codez !
les performances” du ruban (volet “Projet”, posent de plusieurs syntaxes méconnues : d’optimiser : il faut bien que le traitement se
Pour optimiser efficacement un traitement, champ Arbre. Bien entendu, lister TOUS les
groupe ”Audit et performances”). À chaque fois que vous appelez une fonction c’est souvent le cas des syntaxes apparues fasse et avec les contrôles nécessaires.
nous vous conseillons de suivre la méthodo- répertoires de TOUS les disques avant de don-
Ce bouton va lancer l’application en mode WLangage, il y a tout un mécanisme qui se dans une nouvelle version.
logie suivante : ner la main à l’utilisateur n’est pas une solution Si un traitement semble toujours “long” alors
Go et démarrer immédiatement l’analyse. lance dans la machine virtuelle WINDEV pour
1. Regardez les traitements (“Code du déve- (l’utilisateur risque d’attendre longtemps). C’est le cas par exemple de la fonction fListe- qu’aucune optimisation n’est possible, il faut
L’analyse se termine à la fin du mode Go. savoir dans quelle DLL se trouve cette fonc-
loppeur”) qui prennent beaucoup de temps Fichier qui propose 2 syntaxes : recourir aux “effets miroirs” : une jauge qui
L’optimisation consiste à charger chaque sous- tion, puis :
2. Si vous souhaitez analyser un traitement • une syntaxe qui appelle une procédure tourne, une fenêtre d’attente, ... tout ce qui
pour une exécution, relativement au temps niveau uniquement à la demande. • vérification du chargement de la DLL,
particulier, utilisez les fonctions WLangage WLangage sur chaque fichier listé. peut montrer à l’utilisateur que le traitement
total d’exécution. Dans notre exemple, les sous-répertoires • recherche de la fonction,
AnalyseurDébut et AnalyseurFin. • une syntaxe qui renvoie la liste complète est en cours.
2. Concentrez-vous sur le nombre d’exé- sont chargés lorsque l’utilisateur clique pour • empilement des paramètres,
L’analyse débutera à l’appel de Analyseur- des fichiers sous forme de chaîne.
cutions afin de réduire celui-ci. En effet, dérouler un niveau. • appel de la fonction, En général, ces traitements ajoutent du temps
Début et se terminera :
une optimisation de 1 ms sur un traitement • dépilement de la valeur de retour, Cette deuxième syntaxe est très intéressante de traitement mais donnent l’impression qu’un
• soit à l’appel de AnalyseurFin, Pour réaliser un tel traitement, rien de
qui est exécuté 10 000 fois correspond à une • remontée jusqu’au WLangage. puisqu’elle dispose d’options très utiles : traitement est plus court : un utilisateur aura
• soit à la fin d’exécution (si l’application se plus simple : il suffit d’utiliser la propriété
accélération de 10 secondes au total ! Bien entendu, il y a des optimisations, des • frInformationComplète permet de récu- un ressenti de vitesse sur un traitement de 10
ferme avant l’appel à AnalyseurFin). ..AjouteFilsDifféré prévue à cet effet.
systèmes de caches, mais cela ne fait pas tout ! pérer, pour chaque fichier, les informations secondes qui affiche une jauge par rapport
3. Si vous souhaitez lancer l’analyseur sur Cette propriété permet d’indiquer une pro- de base du fichier : la taille, la date de modi- à un traitement qui prend 7 secondes sans
une application en production (exécutable), cédure WLangage qui sera exécutée pour A contrario, quand vous appelez un opéra-
fication, les attributs du fichier. Cela évite affichage.
utilisez le raccourci “Windows + Shift + F10”. effectuer le remplissage à la demande de teur, celui-ci est directement dans la machine
d’effectuer des appels à fTaille, fDate et Finalement, un “effet miroir” est aussi une
Ce raccourci permet de démarrer une analyse. l’utilisateur (lorsqu’il cliquera sur le picto “+”). virtuelle.
fAttribut. forme d’optimisation : l’essentiel est que
Le raccourci “Windows + Shift + F11” permet Le temps de traitement est donc réduit :
// Définit la procédure à appeler • frSansFichierCaché et frSansRépertoire- l’application ne frustre pas l’utilisateur !
d’arrêter l’analyse. l’opération est exécutée et le résultat renvoyé !
// lors du déroulé Caché permettant de ne pas lister les fichiers
Cette fonctionnalité est très utile si un ralen- ARBRE_RemplissageDifféré[ Donc, si un opérateur existe, utilisez-le ! et répertoires cachés. 

LE CHAMP TABLEAU DE BORD :
VOTRE AVANTAGE STRATÉGIQUE • son libellé. Ce libellé sera utilisé dans le
menu contextuel de l’utilisateur final, pour
identifier les widgets à afficher.
Les tableaux de bord logiciels sont très demandés : ils permettent d’avoir Si le widget ou plus précisément la fenêtre
un état des lieux précis du contenu de l’application (statistiques, stocks, interne attend un paramètre obliga-
toire, il est nécessaire d’utiliser la fonction
commandes, etc.). TDBConfigurationInitiale pour l’ajouter
au lancement du tableau de bord.
Le champ Tableau de bord de WINDEV vous permet d’intégrer rapidement
TDBConfigurationInitiale
un tableau de bord logiciel dans vos applications. Suivez le guide ! La fonction TDBConfigurationInitiale per-
met d’ajouter des widgets à la configuration
initiale. Cette fonction est utile :
• pour ajouter un widget qui attend des DnDEvénement(onDndDebut, met de recharger une configuration à partir
paramètres, MoiMême, dndDébutGlisser) d’une chaîne.
• pour ajouter un widget sur une condition -- Procédure onDndDebut
// Récupère la configuration
donnée (par exemple pour ajouter un widget // Définit le widget qui sera ajouté
// contenue dans le fichier
Projet d’illustration il le souhaite. Plusieurs modes de présentation sont dis- uniquement si l’utilisateur est commercial).
// à la fin du Drag and Drop
sConfiguration = ...
Il suffit à l’utilisateur final de passer en mode ponibles : DnDDonneElémentTDB(...
fChargeTexte(sFichier)
Le projet utilisé pour illustrer ce sujet est édition (accessible via le menu contextuel • largeur des widgets variable (le nombre de La fonction TDBConfigurationInitiale “FI_Widget_Calendrier”,
// Charge la configuration
l’exemple “WD Tableau de Bord” (livré en doit obligatoirement être utilisée dans le “Horloge”)
du champ). widget est fixe), TDBChargeConfiguration(...
standard). • nombre des widgets variable (la largeur des traitement d’initialisation du champ. Cette Remarque TDB_TableauDeBord,
L’exemple “WD Tableau de Bord TDF19” (pré- La disposition des widgets est appelée fonction s’utilise toujours avec la fonction
widgets est fixe), Pensez à déclarer les sources et les cibles sConfiguration)
senté au TDF) est livré sur le DVD. “Configuration” : TDBAjouteWidget.
• largeur et nombre de widgets fixes. du Drag and Drop avec les propriétés
• le positionnement au premier affichage du
// Ajoute le widget ..DndSource et ..DndCible. Actualiser l’affichage
champ est la “Configuration initiale”, Dans l’onglet “Détail” de la description du
Le champ Tableau de • l’utilisateur peut sauver et recharger des champ, vous retrouverez également deux
nIndice = TDBAjouteWidget(.. des widgets
MoiMême, FI_Widget_ChiffreClé,
bord configurations (voir le paragraphe “Gestion options particulièrement intéressantes : dDate) Gestion des Certains widgets peuvent afficher des don-
des configurations”). • “Mémoriser la configuration des widgets” // Configure le widget nées qui évoluent et qui doivent donc être
TDBConfigurationInitiale(...
configurations
Présentation permet de mémoriser pour l’utilisateur courant réactualisées.
Paramétrage la configuration du champ à la fermeture de MoiMême, nIndice, 1, 1) La configuration initiale d’un champ Tableau
Un champ Tableau de bord permet de créer Pour gérer l’actualisation d’un widget, il suffit
Le champ Tableau de bord se découpe en l’application. Cette configuration sera alors de bord est à la charge du développeur.
facilement des tableaux de bord logiciels. de remplir le traitement “Rafraîchissement du
cellules (ou zones). automatiquement rechargée à la pro- Ajouter Mais bien souvent, chaque utilisateur final va
Ces tableaux de bord sont généralement widget” de la fenêtre interne. C’est ce code
Chaque cellule définit la taille minimale allouée chaine ouverture. dynamiquement des modifier cette configuration (déplacement, qui sera exécuté lors de l’appel à la fonction
utilisés pour afficher les informations clés de • “Mode édition permanent” permet à l’utili-
l’application, utiles aux décisionnaires.
à un widget. Bien entendu, les tailles des widgets affichage, etc.) à sa guise pour avoir SON TDBActualise.
cellules et des marges entre chaque cellule sateur de déplacer, redimensionner, cacher, ... tableau de bord.
Les informations sont affichées dans des blocs les widgets sans demander explicitement La fonction WLangage TDBAjoute permet La fonction WLangage TDBActualise permet
sont paramétrables (onglet “Détail” de la
à passer en mode édition. également d’ajouter un widget au champ en Si sa configuration peut être mémorisée de lancer le traitement d’actualisation sur :
appelés widget. description du champ).
cours d’exécution. et rechargée à chaque exécution, il peut • la totalité des widgets du champ,
La position et les dimensions de chaque
Ce quadrillage permet d’assurer au tableau de Les widgets être encore plus intéressant de lui proposer
widget sont personnalisables par l’utilisateur // Ajoute un widget // Rafraîchit tous les widgets
bord un rendu ergonomique plus agréable. Techniquement, un widget est en fait une nIndice = TDBAjouteWidget(... d’enregistrer différentes configurations qu’il TDBAffiche(TDB_TableauDeBord)
final, qui arrange son tableau de bord comme
fenêtre interne. Il est donc très simple d’en TDB_TableauDeBord, pourra recharger.
FI_Widget_Horloge, Par exemple, l’utilisateur pourra définir : • tous les widgets basés sur une même fenêtre
créer ou même de transformer une fenêtre
“Horloge Paris”, “Paris”) • une configuration “Stocks” avec des widgets interne,
interne existante en widget (il n’y a rien à
faire !). Notre astuce définissant les stocks réels et théoriques, les // Rafraîchit tous les widgets basés
livraisons prévues, ... // sur FI_Widget_Rappels
Un widget ajouté par programmation est non
Notre astuce TDBAffiche(TDB_TableauDeBord,
visible par défaut. Il peut bien entendu être • une configuration “Mailing client” avec des
Pour optimiser l’affichage du tableau de bord, FI_Widget_Rappels)
rendu visible par l’utilisateur final via le menu widgets sur les mailings prévus, l’état du
pensez à créer des widgets avec des dimen- • un widget identifié par son indice.
contextuel en mode édition. Mais il est tout serveur SMTP, les retours de sondages, etc.
sions multiples de la cellule de référence.
à fait possible d’afficher immédiatement le La fonction TDBSauveConfiguration permet // Rafraîchit le widget des rappels
widget : il suffit d’utiliser la propriété ..Visible. de récupérer la configuration courante sous TDBAffiche(TDB_TableauDeBord, 1)
Initialiser un tableau de // Affiche le widget ajouté forme de chaîne. Cette chaîne peut ensuite
Remarque
bord TDB_TableauDeBord[nIndice] être mémorisée dans un fichier ou en base
..Visible = Vrai par exemple. Le traitement d’actualisation est optionnel.
Widgets par défaut

Ajout par “Drag and Drop” // Récupère la configuration courante Notre astuce
Dans l’onglet “Contenu” de la description du
Pour proposer une interface intuitive et ori- sConfiguration = ... Pensez à brancher une actualisation complète
champ, il est possible de définir les widgets
ginale, le WLangage propose une fonction TDBSauveConfiguration(... du champ Tableau de bord sur un bouton
présents par défaut. Pour chaque widget, TDB_TableauDeBord)
pour ajouter un widget par Drag and Drop : dont le raccourci est F5 (raccourci officiel
vous pouvez définir : // Sauve la configuration
DnDDonneElémentTDB. d’actualisation). C’est très pratique !
• sa visibilité initiale (visible par défaut), fSauveTexte(sFichier, sConfiguration)
La définition du mode de présentation, des dimensions et des marges est très importantes : // Procédure au début du
• ses dimensions (en nombre de cellules),
c’est elle qui va définir le rendu final (beaucoup de widgets, widget de grande taille, etc.).
• sa position (en cellules),
// Drag and Drop La fonction TDBChargeConfiguration per- 

Jour de congé Heures non ouvrées Jour férié
GanttAjouteCongé GanttHeureOuvrable JourFériéAjoute
CHAMP DIAGRAMME DE GANTT :

CRÉATION, PERSONNALISATION
Un diagramme de Gantt permet de représenter graphiquement un
enchaînement d’actions reliées entre elles. C’est un outil incontournable
pour avoir une vision globale de l’avancement d’un projet, d’un processus
industriel, etc.
Petit tour d’horizon des fonctionnalités de ce champ puissant.
Tâche personnalisée Lien “Début-Début”
(fond hachuré,
picto à 100%, ...)
Projet d’illustration • la tâche sélectionnée, possèdent un marqueur “flèche” en début Lier deux tâches position différents traitements spécifiques : génère alors automatiquement un état Gantt.
• les liaisons, et en fin de tâche. Pour lier deux tâches d’un diagramme de • Avant création de la tâche,
Le projet utilisé pour illustrer ce sujet est • etc. • Sélection d’une tâche, Notre astuce
Gantt, il suffit d’utiliser la fonction WLangage
l’exemple “WD Gantt TDF19” (présent sur • Déplacement d’une tâche, Pour afficher un état Gantt personnalisé, il
GanttAjouteLien.
le DVD). Tâches Remplissage du champ Cette fonction accepte en paramètres les • Suppression d’une tâche, suffit de créer un état de type Gantt sur le
L’exemple “WD Gantt” (livré en standard) est Chaque tâche du diagramme de Gantt est par programmation identifiants des deux tâches à lier et le type • ... champ Diagramme de Gantt. À l’utilisation
un exemple complet de manipulation du affichée via une fenêtre interne. Pour person- de la FAA “Imprimer”, c’est cet état qui sera
Pour manipuler le champ Diagramme de de lien ou une variable de type LienGantt. Chaque traitement reçoit en paramètre la
champ Gantt. naliser l’affichage des tâches, il suffit d’inclure alors utilisé.
Gantt, le WLangage met à disposition : // Ajout un lien entre la tâche 1 variable TâcheGantt (ou LienGantt) impactée
dans le projet la fenêtre interne utilisée par // et la tâche 2
• les types de variable TâcheGantt et par le traitement.
Création d’un champ Gantt défaut et de la modifier. GanttAjouteLien(COL_Gantt, 1, 2)
LienGantt, qui représentent respectivement PROCEDURE Suppression(... Spécificités
Pour créer un diagramme de Gantt, sous le
Dans la description de la colonne Diagramme une tâche et une liaison entre deux tâches, À partir de la version 190044 de WINDEV, il tgSupprimée est une TâcheGantt)
volet “Création”, dans le groupe “Champs 1. Par défaut, les samedis et dimanches sont
de Gantt, onglet “Détail”, choisissez “Fenêtre • la famille de fonctions GanttXXX. est possible de préciser le type du lien entre // tgSupprimée est la tâche qui va
graphiques”, déroulez “Temps” et sélectionnez // être supprimée des jours non ouvrés.
prédéfinie” pour l’option “Fenêtre interne deux tâches :
“Diagramme de Gantt” ou “Diagramme de La fonction GanttJourSemaineOuvré permet
pour les tâches” : la fenêtre interne “FI_ Ajouter une tâche • lien “fin-début” (cas par défaut) : la tâche B Rappel : les traitements d’un champ sont
Gantt hiérarchique”. de définir les jours ouvrés dans le diagramme
WinDevVueTacheGantt” est ajoutée au projet. Pour ajouter une tâche à un diagramme de débute quand la tâche A se termine. accessibles via la touche F2 lorsque le champ
Pour intégrer un diagramme de Gantt dans Gantt, il suffit de : • lien “fin-fin” : la tâche B ne peut pas se ter- est sélectionné. de Gantt. C’est très utile pour un diagramme
Dans cette fenêtre interne, vous pouvez ajou-
une table ou table hiérarchique existante, c’est • définir et remplir une variable TâcheGantt. miner tant que la tâche A n’est pas terminée. de Gantt qui affiche des processus machine,
ter des champs, des traitements, etc. Dans notre exemple, une confirmation de
très simple : il suffit d’ajouter une nouvelle • lien “début-début” : la tâche B ne peut qui tournent non stop.
NouvelleTâche est un TâcheGantt suppression est affichée à l’utilisateur.
colonne de type “Diagramme de Gantt”. Dans notre exemple, une image de validation
NouvelleTâche.Avancement = 50 pas commencer tant que la tâche A n’a pas // Samedi et dimanche ouvrés
est ajoutée sur les tâches terminées, c’est-à- NouvelleTâche.DateDébut = ... GanttJourSemaineOuvré(...
commencé.
dire dont l’avancement est à 100 %. DateDuJour()+“080000” Notre astuce COL_Gantt, 6, Vrai)
• lien “début-fin” : la tâche B ne peut pas se ter-
Paramétrage du champ // Affiche l’image de validation NouvelleTâche.DuréeEnJour = 1
miner tant que la tâche A n’a pas commencé.
Pour annuler un traitement, il suffit de renvoyer GanttJourSemaineOuvré(...
// si l’avancement vaut 100% NouvelleTâche.ID = DonneGUID() la valeur Faux dans le traitement. Dans notre COL_Gantt, 7, Vrai)
Dans la fenêtre de description de la colonne NouvelleTâche.Titre = “Ma tâche”
IMG_TâcheTerminée..Visible = ... exemple, la suppression peut être annulée.
“Diagramme de Gantt”, onglet “Général”, Organiser les tâches 2. Les fonctions GanttAjouteCongé et
(TacheADessiner..Avancement = • ajouter cette tâche dans le champ via -- Traitement “Suppression”
le bouton “Options et styles de la colonne Par défaut, le champ Diagramme de Gantt GanttHeureOuvrable permettent de modi-
100) // Confirmation de suppression
Diagramme de Gantt” permet d’ouvrir la GanttAjouteTâche. est paramétré pour réorganiser automatique- fier respectivement les jours et heures ouvrés
SI OuiNon(Non, ...
fenêtre de personnalisation de la colonne. // Ajoute la ligne “tâche” ment les tâches en fonction de leurs liens : si pour une ligne donnée.
Notre conseil “Supprimer la tâche ?”) = Non ALORS
GanttAjouteTâche(COL_Gantt, ... l’utilisateur déplace une tâche dans le temps, RENVOYER Faux // Applique des congés
Assurez-vous de ne pas surcharger la
Options NouvelleTâche) toutes les tâches qui en dépendent seront FIN // (jours non ouvrés) sur la ligne 1
fenêtre interne : si votre diagramme de
Le champ Diagramme de Gantt dispose de automatiquement déplacées. GanttAjouteCongé(...
Gantt comporte de nombreuses tâches, le
nombreuses options pour personnaliser son Notre astuce COL_Gantt, 1,
rendu pourrait devenir illisible (trop d’élé- Ce paramètre peut bien évidemment être
comportement : ments graphiques) ou l’affichage très lent
Si vos tâches sont mémorisées dans un fichier Les FAA : indispensables “20140101” , “20140228”)
désactivé pour organiser librement les tâches : // Modifie les heures ouvrées
• nombre de jours à afficher, de données, nommez les rubriques avec les
(trop de traitements). dans la description du champ, onglet “Détail”, Bien entendu, l’utilisateur bénéficie des // pour la ligne 1
• plages horaires, mêmes noms que les membres de la variable
il suffit de décocher “Réorganiser les autres FAA (Fonctionnalités Automatiques des GanttHeureOuvrable(...
• granularité des tâches, TâcheGantt.
Types de tâches tâches après modification par l’utilisateur”. Applications) pour le champ Diagramme de COL_Gantt, 1,
• autorisation de saisie, de suppression, Vous pourrez alors utiliser la fonction
Il existe 3 types de tâches : Gantt. L’utilisateur peut : “0930”, “1300”, “1400”, “1930”)
• ... WLangage FichierVersMémoire pour rem- La fonction WLangage GanttOrganise–
• les tâches standard, • modifier la durée d’une tâche, 3. Le diagramme de Gantt tient compte
plir la variable en une seule ligne de code. Tâche permet alors de forcer une réorgani-
• les jalons. Les jalons sont des “repères” qui • supprimer des tâches, des jours fériés définis par la fonction
Styles // Remplit la variable à partir sation ponctuelle des tâches.
symbolisent un événement important ou une • ajouter des tâches, JourFériéAjoute.
Dans l’onglet “Style” de la description de la // des rubriques du fichier
échéance. Ces jalons sont représentés par un • lier des tâches,
colonne, vous pouvez entièrement person- FichierVersMémoire(NouvelleTache,
losange et n’ont pas de durée. TâchePourGantt) Traitements associés au • ... 
naliser le look du champ. Plusieurs éléments • les tâches cumulatives. Ce sont des tâches
peuvent être personnalisés : champ L’impression du diagramme de Gantt est
qui symbolisent l’avancement global de
• les jours non ouvrés, également disponible via les FAA : WINDEV
plusieurs tâches subordonnées. Ces tâches La colonne Diagramme de Gantt met à dis-

CRÉATION DYNAMIQUE DE
CHAMPS : DES IHM ADAPTATIVES ! de fenêtres.
Cela permet d’ajouter dynamiquement un
traitement de vérification par exemple.
• EcritValeurChampDynamique.
// Mémorise la valeur du champ
EcritValeurChampDynamique(...
mique ainsi que les coordonnées et dimen-
sions à appliquer au champ. Le champ crée est
renvoyé (pour être mémorisé, manipulé, etc.)
La création dynamique de champs est une fonctionnalité particulièrement // Ajoute du code AVANT l’exécution “Tortue_PoidsCarapace”, // Crée le champ
Animal.IDAnimal,
puissante. Il est possible de personnaliser des interfaces par programmation, // du code du bouton
BTN_Valider..Traitement[trtClic] UnChamp)
NouveauChamp <-
CréeChampDynamique(...
pour s’adapter à des cas particuliers. ..Avant = BoutonAvant Le composant interne met également à dis- sUnChamp,
50, 50, 200, 35, Vrai)
position des procédures pour :
Cet article détaille la création dynamique de champs et la sauvegarde des Stocker les valeurs • créer un champ dynamique mémorisé
(CréeChampDynamique). Cette procédure

données sur ces champs. Une question importante avec l’utilisa- attend en paramètre le nom du champ dyna-
tion de champs créés dynamiquement,
c’est “Comment stocker les valeurs des
Proposer une interface qui s’adapte aux particularités,
champs créés ?”.
voilà une bonne illustration de la création dynamique de champs.
L’exemple “WD CréationChamps TDF19” pro- Dans une application de clinique vétérinaire par exemple,
pose une solution générique à travers un chaque animal a des caractéristiques spécifiques ...
composant interne.
Projet d’illustration MonBouton est un Champ UnChamp..CouleurFond =...
// Création d’un bouton RougePastel Remarque
Le projet utilisé pour illustrer ce sujet est MonBouton <- ChampCrée(... // Remplit le champ La solution proposée est une base de dévelop-
l’exemple “WD CréationChamps TDF19” (pré- “BTN_”+DonneIdentifiant(), UnChamp = “Valeur ajoutée” pement pour gérer rapidement des champs
sent sur le DVD). typBouton, 50, 50, 80, 24, Vrai) de saisie uniquement. Si vous souhaitez
Important Important l’utiliser avec d’autres types de champs, des
L’opérateur <- permet de récupérer une Si vous utilisez une fonction ou une propriété adaptations sont nécessaires.
Création des champs référence de l’objet et non une simple copie. qui n’est pas disponible pour le type de champ,
Pour réaliser certaines interfaces spécifiques, il Cet opérateur doit OBLIGATOIREMENT une erreur fatale sera affichée. Notre exemple permet de gérer les fiches
peut être nécessaire de créer dynamiquement être utilisé avec ChampCrée pour affecter d’animaux pour un vétérinaire.
(par programmation) des champs : ajouter un la variable de type Champ. Définition des traitements La fiche d’un animal affiche des informations
champ de saisie ou une colonne à une table. La propriété ..Traitement permet de modifier générales, communes à tous les animaux
Pour répondre à cette problématique, Manipulation d’un champ créé les traitements à exécuter pour le champ créé : (nom, race, propriétaire, etc.).
le WLangage propose deux fonctions : La variable de type Champ peut ensuite être clic, survol, modification, ... La création dynamique de champs est uti-
ChampClone et ChampCrée. manipulée comme n’importe quel champ : la Tous les traitements du champ sont dispo- lisée pour gérer les champs spécifiques à
variable peut être utilisée dans des fonctions nibles : il suffit d’utiliser la constante trtXXX chaque race.
ChampClone ou ChampCrée ? et les propriétés sont accessibles directement. adaptée. Par exemple, la fiche doit afficher des infor-
La fonction ChampClone permet de créer // Applique un masque de saisie mations sur la carapace des tortues ou le
Important
un champ par clonage d’un champ existant. MaSaisie..MasqueSaisie = “9999” plumage des oiseaux.
Si vous utilisez un traitement qui n’est pas
// Définit la valeur Alors que, pour une tortue, l’application demande des informations sur la carapace ou la
Cette fonction est conseillée si le champ à disponible pour le type de champ, une erreur
MaSaisie..Valeur = 82
fatale sera affichée. Définition des fichiers de données taille du cou ...
créer doit posséder les mêmes caracté- // Définit le libellé
ristiques qu’un autre champ. MaSaisie..Libellé = “Mesure :” // Définit le code de clic du champ Le composant interne contient deux fichiers
Cela permet de créer rapidement le champ et // Applique un style du gabarit MonBouton..Traitement[trtClic] = ... de données :
de ne modifier que certaines caractéristiques. ChangeStyle(... ProcédureClic • “ChampDynamique” contient les informa-
MaSaisie, Mesure.NomStyle)
Pour utiliser plusieurs procédures dans un tions qui définissent un champ dynamique
La fonction ChampCrée permet de créer un Remarque même traitement, il est nécessaire d’utiliser (libellé, type, masque, bornes, etc.),
champ de zéro. La variable de type Champ peut bien entendu les propriétés ..Avant et ..Après. • “ValeurChampDynamique” contient la valeur
être utilisée avec des champs définis en édi- d’un champ dynamique pour une clé externe
Cette fonction est conseillée si vous devez // Définit le code de clic du champ
tion. MonBouton..Traitement[trtClic]=... donnée. Cette clé externe permet de faire le
créer différents champs ayant des carac-
Ce type de variable permet de remplacer ProcédureClic lien avec n’importe quel fichier de l’analyse
téristiques différentes.
avantageusement l’utilisation des indirections // Définit le code à exécuter de l’application. Dans notre exemple, cette clé
Cela évite de préparer des champs de réfé-
en clarifiant le code. // avant le code de clic correspond à l’identifiant du fichier Animal.
rence dans la fenêtre. MonBouton..
-- Manipulation par indirection
Traitement[trtClic]..Avant = ...
sNomChamp est une chaîne
ProcédureContrôleAvantClic Chargement / Sauvegarde
Création d’un champ // Met le champ en évidence // Définit le code à exécuter Pour charger et mémoriser une valeur d’un
La fonction ChampCrée permet de créer {sNomChamp, indChamp} // après le code de clic champ dynamique, le composant interne met
un champ en précisant, en une seule ligne ..CouleurFond = RougePastel MonBouton..
// Remplit le champ à disposition les fonctions :
de code : Traitement[trtClic]..Après = ...
{sNomChamp, indChamp} = ... ProcédureFinClic • LitValeurChampDynamique
• son nom,
“Valeur” // Affecte la valeur
• son type (champ de saisie, bouton, etc.),
• sa position (X et Y), Notre Astuce NouveauChamp = ...
-- Manipulation par variable LitValeurChampDynamique( ...
• ses dimensions (Largeur et Hauteur), UnChamp est un Champ La propriété ..Traitement est également dis- ... pour un oiseau, les informations demandées sont bien différentes.
“Tortue_PoidsCarapace”,
• sa visibilité. ponible pour les champs créés dans l’éditeur UNE fenêtre, plusieurs interfaces DIFFÉRENTES !
// Met le champ en évidence Animal.IDAnimal)

GRAPHES : WATERFALL,
ANIMATION, IMAGE DE FOND, ... La première valeur est forcément un total.
Pour remplir ce graphe waterfall, les fonctions

Remarque
Un graphe waterfall ne possède qu’une seule
série (comme un graphe secteur).
// Ajoute un sous-total
// (Bénéfices 2012)
// 1 - Nouvelle donnée sans valeur
WINDEV permet de créer facilement et en standard des graphes élaborés grXXX du WLangage ont été utilisées : 3. De la même manière, les autres valeurs
grAjouteDonnée(GRF_Waterfall,
1, 6, 0)
1. Dans un premier temps, il est utile de définir
sur vos données : courbe, aire, secteur, beignet, histogramme, etc. les couleurs des différentes composantes via
(composantes positives et négatives) peuvent
être ajoutées avec grAjouteDonnées.
// 2 - Il s’agit d’un sous-total
grWaterfallTypeCatégorie(...
la fonction WLangage grWaterfallCouleur :
Petit rappel sur ce champ indispensable et présentation des nouveautés de
GRF_Waterfall, 6, grSousTotal)
// Ajout des ventes
// Totaux : bleu // 3 - Etiquette
la version 19. grWaterfallCouleur(GRF_Waterfall,
grTotal, RVB(10,88,193))
1, 2, 420000)
grEtiquetteCatégorie(GRF_Waterfall,
6, “Bénéfices 2012”)
// Sous-totaux : violet 2, “Ventes produits”) // Ajoute un total
grWaterfallCouleur(GRF_Waterfall, grAjouteDonnée(GRF_Waterfall, // (Bénéfices Cumulé)
grSousTotal, RVB(97,61,88)) 1, 3, 210000) // 1 - Nouvelle donnée sans valeur
// Composantes positives : vert grEtiquetteCatégorie(GRF_Waterfall, grAjouteDonnée(GRF_Waterfall,
grWaterfallCouleur(GRF_Waterfall, 3, “Ventes services”) 1, 7, 0)
grPositif, RVB(0,161,0)) // 2 - Il s’agit d’un sous-total
// Coûts
// Composantes négatives : rouge grWaterfallTypeCatégorie(...
grWaterfallCouleur(GRF_Waterfall, GRF_Waterfall, 7, grTotal)
1, 4, -170000)
Projet d’illustration possible d’ajouter une image qui sera affichée • le numéro de la catégorie à modifier, grNegatif, RVB(149,0,0)) // 3 - Etiquette
en fond. • la nouvelle couleur à appliquer. grEtiquetteCatégorie(GRF_Waterfall,
2. La première valeur à fixer correspond à 4, “Coûts fixes”)
Le projet utilisé pour illustrer ce sujet est 7, “Bénéfices cumulés”)
Pour s’adapter aux différentes dimensions du // Applique une couleur la valeur de référence. C’est à partir de cette grAjouteDonnée(GRF_Waterfall,
l’exemple “WD Graphe” (livré en standard). 1, 5, -140000) Il est ensuite possible d’ajouter de nouveaux
graphe (un graphe est bien souvent ancré en // à la catégorie 2 valeur que les composantes permettront de
grCouleurCatégorie(GRF_Graphe, grEtiquetteCatégorie(GRF_Waterfall, des composantes et des totaux, en répétant
largeur et en hauteur), il est possible d’utiliser définir les totaux suivants. L’ajout de cette
2, RVB(149,0,0)) 5, “Coûts variables”) les étapes 3 et 4.
Le champ Graphe le mode “9 images”. première valeur se fait avec grAjouteDonnée.
Important 4. L’affichage des totaux et sous-totaux est
// Bénéfices 2011
Types de graphes
Rappel
Si le graphe Histogramme comporte plusieurs grAjouteDonnée(GRF_Waterfall, effectué simplement : il suffit d’ajouter une 
Le mode 9 images permet de conserver une donnée et d’utiliser la fonction grWater-
Le champ Graphe permet de créer différents séries, la catégorie sera coloriée pour toutes 1, 1, 298000)
image harmonieuse au redimensionnement fallTypeCatégorie pour préciser le type
les séries. grEtiquetteCatégorie(GRF_Waterfall,
types de graphes : (pour éviter l’effet “étiré”). 1, “Bénéfices 2011”) de données.
• courbe, Le principe du mode 9 images est simple :
• aire, La fonction grEtiquetteCatégorie permet de WINDEV calcule automatiquement la
l’image utilisée est découpée en 9 zones. Il est Suppression des axes
• secteur (camembert), spécifier le libellé associé à la valeur. valeur du total ou du sous-total.
ensuite possible de définir le comportement Dans certains graphes (Histogramme, Courbe
• beignet (donut), de chaque zone lors du redimensionnement. ou Waterfall), les axes sont parfois inutiles :
• hémicycle, c’est la tendance (ou l’évolution) affichée
• histogramme,
• nuage de points,
Des images de fond sont proposées par
défaut : qui importe. GRAPHE WATERFALL : BIEN IDENTIFIER LES VALEURS
• à la fin de l’assistant de création d’un champ La fonction WLangage grAxeVisible permet
• graphe boursier,
Graphe, de définir la visibilité des axes sur un graphe.
• graphe à bulles,
• surface,
• dans le catalogue d’images (dans la rubrique
“Bandeaux et décors”).
// Cache les axes
grAxeVisible(GRF_Graphe,
Valeur
• entonnoir,
• radar
grAbscisse, Faux)
grAxeVisible(GRF_Graphe,
négative
• waterfall (apparu en version 19). Animation grOrdonnée, Faux)
Pour donner du pep’s à vos IHM, la majorité
des types de graphes peut avoir un affichage
Comment remplir un graphe
Le champ Graphe peut être rempli de diffé-
animé. Graphe Waterfall Valeur
rentes façons :
• par programmation, avec les fonctions
Cette fonctionnalité, activée par défaut, peut
bien entendu être désactivée (par exemple,
Le graphe “Waterfall” est un graphe en barres
permettant de représenter les additions (posi-
positive
grXXX du WLangage, pour des applications utilisées en mode TSE). tives ou négatives) de plusieurs séries.
• à partir d’un fichier de la base de données Il suffit de décocher l’option “Activer les ani- Principalement utilisé en finances, ce graphe
(ou d’une requête), mations” de l’onglet “Détails” de la description permet par exemple de visualiser l’évolution
• à partir des valeurs d’une colonne de table, du graphe. d’une valeur dans le temps ou de voir l’impact
• à partir d’un champ liste,
• à partir d’une variable tableau WLangage.
de différentes composantes sur cette valeur.
Dans notre exemple :
Sous
Couleur d’une barre d’histogramme
La source de données du graphe peut être
Dans un graphe Histogramme, il peut être • les barres vertes représentent les com- total
définie dans l’onglet “Séries” de la description posantes positives du CA : les ventes de
intéressant de colorier une valeur différem-
du champ. produits et de services.
ment des autres : pour mettre en avant une
baisse ou une hausse importante par exemple. • les barres rouges représentent les compo- Valeur
santes négatives : les dépenses. Total
Nouveautés 19 La fonction WLangage grCouleurCatégorie
permet de répondre à ce besoin. Cette fonc-
• la barre violette représente la somme des initiale
composantes positives et négatives : c’est
Fond de graphe tion attend en paramètre : un sous-total.
Pour enrichir visuellement un graphe, il est • le nom du graphe, • les barres bleues représentent les totaux.

Filtrer l’affichage
TABLEAU CROISÉ DYNAMIQUE :

Grâce au menu contextuel, l’utilisateur final peut modifier rapidement
l’affichage des lignes et des colonnes :
• plier ou déplier une colonne, une ligne, tout le tableau,
UNE AIDE À LA DÉCISION

• cacher ou réafficher une colonne ou une ligne.
Par programmation, il est également possible de modifier les axes affichés
Le champ Tableau Croisé Dynamique est un champ décisionnel puissant qui

et même d’inverser les lignes et colonnes : il suffit d’utiliser la fonction
WLangage TCDAxeXY.
affiche dynamiquement les données calculées issues de différents fichiers // Modifie les lignes et colonnes affichées
d’une base de données. TCDAxeXY(TCD_Stats,
“COL_Année”+RC +“COL_Trimestre”,
L’exemple “WD TCD TDF19” est un exemple de Tableau Croisé Dynamique. “COL_TypeVéhicule”+RC +“COL_Modèle”)
Des lignes, des colonnes et

des valeurs
Le champ Tableau Croisé Dynamique est
composé de :
• en-têtes de ligne (regroupements situés
à gauche).
• en-têtes de colonne (regroupements
situés en haut). Généralement, les en-têtes Totaux automatiques
de colonnes contiennent des regrou-
Le champ Tableau Croisé Dynamique
pements temporels (années, trimestres,
affiche automatiquement les totaux des
mois, etc.).
lignes et des colonnes.
• valeurs, qui correspondent à un calcul
demandé (somme, comptage, etc.).
Il suffit de définir les totaux voulus dans la
fenêtre de description du champ.
La définition des lignes, colonnes et
valeurs est à la charge du développeur
... mais pas de panique !
Le champ Tableau Croisé Dynamique se

crée à l’aide d’un assistant très simple.
Afficher des graphes
Par programmation, il est possible d’accé-
der à toutes les valeurs du champ.
C’est très utile pour récupérer les données

Colorier des valeurs (calculées automatiquement) et proposer
un graphe par exemple !
Depuis le menu contextuel (option
“Couleur de fond”), l’utilisateur final peut
Il suffit d’utiliser une variable de type
colorier facilement une valeur pour la
tcdPosition.
mettre en évidence.
oCellule est un tcdPosition de
TCD_Stats
Par programmation, il est bien entendu
// Ligne : Europe
possible d’accéder aux valeurs pour modi- oCellule.COL_Continent = ...
fier leur style (couleur de texte, couleur “Europe”
de fond, hachure, etc). // Colonne : 2013
oCellule.COL_Année = ...
Il suffit pour cela dans le traitement “2013”
// Accès à la valeur TOTAL
“Affichage d’une cellule” du champ par
nCumul = ...
exemple, de modifier les propriétés des TCD_Stats.VAL_TOTAL[
valeurs. oCellule]
// Si le CA est inférieur à 500
// affiche la valeur en rouge Retrouvez un exemple complet d’affichage
SI VAL_CA <= 500 ALORS d’un graphe à partir d’un tableau croisé
VAL_CA..CouleurFond = ...
dynamique dans la LST 92.
RougePastel
FIN

WEBDEV : SÉCURISER UN SITE ET
GÉRER SES UTILISATEURS 4 Mode “Intégré” (optionnel) : activation
Gérer les utilisateurs d’un site Web Intranet (sessions) ou Internet (AWP) À partir de la version 19, il est possible d’intégrer la page de
connexion du groupware utilisateur dans le site.
avec WEBDEV s’effectue en quelques clics à l’aide du Groupware Utilisateur. Cette nouvelle fonctionnalité permet de conserver le groupware
Sur un Intranet, les secrétaires n’auront ainsi pas accès aux fiches de paie. utilisateur automatique (et ses mises à jour) tout en permettant une
personnalisation de la page de connexion.
Sur un site Internet, les visiteurs non identifiés n’auront pas accès à leurs
Il suffit pour cela d’activer l’option “Activer le mode groupware
informations de compte. utilisateur intégré” de l’onglet “Intégration” dans la fenêtre de
configuration du groupware de WEBDEV (volet “Projet”, option
“Groupware Utilisateur”).
1 Activation du Groupware
L’activation du groupware utilisateur s’effectue directement
5 Mode “Intégré” (optionnel) : intégration
Le composant interne “WDGPU_WB_CNX” contient un modèle
depuis WEBDEV par l’option “Groupware Utilisateur” du volet “Projet”. de champs “MDLC_GPU_Connexion” qui gère la connexion. Il suffit
Deux modes d’intégration sont possibles : d’intégrer ce modèle de champs dans les pages (ou les modèles)
• le mode “automatique”, souhaitées par un drag & drop.
• le mode “personnalisé”.
Après intégration, il est possible de personnaliser ce modèle de
Une fois le groupware utilisateur activé, il suffit de faire un premier champs :
“Go” du site pour configurer l’utilisateur “SUPERVISEUR” qui est • en surchargeant les champs et/ou les traitements pour des modi-
l’administrateur des droits du site. fications légères.
• en modifiant directement le modèle de champs pour des modifi-
cations plus importantes.
2 Gestion des utilisateurs et des groupes

La gestion des utilisateurs et des groupes s’effectue, comme
6 Changer la base d’identification
Il est bien entendu possible de modifier ou personnaliser le
tous les paramétrages du Groupware Utilisateur : type ou la localisation de la base de données d’identification des
• en exécutant le site en étant identifié en tant que “SUPERVISEUR” utilisateurs (par exemple pour la partager entre plusieurs sites).
(sur le poste de développement ou sur le serveur de production). Cette configuration s’effectue directement depuis WEBDEV (onglet
• en cliquant sur le choix “Configurer le groupware”. “Fichier” de l’option “Groupware Utilisateur” du volet “Projet”). Il
En sélectionnant l’option “Utilisateurs et groupes”, il est alors possible est alors possible de choisir d’utiliser une base de données HFSQL
de créer des utilisateurs, des groupes et d’affecter des utilisateurs Classic ou Client/Serveur. Le groupware utilisateur de WEBDEV est
dans les groupes. entièrement compatible avec celui de WINDEV.
Note : en version 19, il est possible d’inclure un utilisateur dans Notre astuce : dans l’onglet “Identification”, il est possible d’utiliser
plusieurs groupes ou d’inclure un groupe dans un groupe ce qui une base LDAP ou d’utiliser la fonction GPWOuvreSessionLDAP.
permet d’affiner les configurations possibles.
3 Configuration des droits

Pour associer des droits spécifiques à des utilisateurs :
7 Gérer le compte invité standard
Sur un site Internet public (généralement en mode AWP), il est
1. Sélectionner le volet “Gestion des droits”. souvent intéressant de restreindre les droits pour les utilisateurs non
2. Sélectionner l’utilisateur ou le groupe à configurer. identifiés (par exemple ne pas afficher le lien permettant de voir le
3. Sélectionner la page à configurer. détail du compte). WEBDEV 19 dispose pour cela et en standard d’un
4. Sélectionner les champs (ou les groupes de champs) dont l’état compte utilisateur spécial : “Visiteur (non connecté)”. Les droits de
doit dépendre du groupware utilisateur : inactif, grisé ou invisible ce compte sont appliqués tant que l’internaute ne s’est pas identifié
(les internautes peuvent créer eux-mêmes leurs comptes d’utilisateur
Notre astuce : commencez la configuration par les groupes de plus
grâce au lien “S’inscrire”).
haut niveau puis descendez ensuite dans les sous-groupes pour
terminer au niveau des utilisateurs car les sous-groupes héritent
Notre astuce : un mécanisme de récupération de mot de passe
des droits des groupes parents.
pour les utilisateurs est intégré. Pensez à paramétrer l’adresse email
d’expédition et le serveur SMTP.

OPTIMISER LE RÉFÉRENCEMENT
D’UN SITE WEBDEV
WEBDEV intègre toutes les fonctionnalités pour optimiser le référencement
d’un site Web : gestion des URL (noms de dossiers, noms de pages physiques,
URL rewriting), sémantique des champs, définition des mots-clés et des
priorités pour les moteurs de recherche, etc.
Préalable cet assistant sont classées par ordre d’impor- Ces informations permettront aux moteurs
tance décroissant, par exemple : de recherche d’adapter leur fréquence de
Pour qu’un site WEBDEV soit référençable, • les pages qui n’ont pas de mots-clés, vérification d’une page.
URL d’un site avec utilisation du mécanisme d’URL Rewriting il doit impérativement être en mode AWP. • les pages qui n’ont pas de titres,
Rappel : Le mode AWP est un mode sans • les pages qui n’ont pas de description,
Les pages importantes
contexte automatique où chaque page a • les images qui n’ont pas de textes alternatifs,
Il est également possible d’indiquer aux
une URL fixe donc référençable de la forme : • etc.
moteurs de recherche l’importance des
http://domaine/dossier/page.awp L’assistant permet également d’indiquer si pages de votre site grâce à l’option “Priorité
URL d’un site avec utilisation du mécanisme d’URL Rewriting et utilisation de dossiers
Par exemple, la page “article” de l’exemple certaines pages ne doivent pas être référen- interne” de l’onglet “Détail” de la fenêtre de
“WW_Blog_AWP” permettant d’afficher un cées (ce n’est pas une protection, juste une description de page.
article de blog est en mode “AWP”. Le mode demande pour les moteurs de recherche).
“AWP” s’active depuis la fenêtre de description
de la page. Le plan du site (sitemap)
Aidez les moteurs de recherche en générant le
fichier sitemap du site. Le fichier sitemap, est
un fichier XML qui décrit la structure de votre
site. Ce fichier est généré automatiquement
par WEBDEV à partir du plan de navigation
de votre site. Notre astuce : pour ces deux options, choi-
Notre astuce : le mode “AWP” est “sans sissez des valeurs qui correspondent à la
contexte automatique”. Il est possible de réalité. Dans le cas d’une surestimation, votre
gérer un contexte manuellement grâce à la site risque d’être pénalisé par les moteurs
fonction WLangage DéclareContexteAWP. de recherche.
Bien entendu, un même site peut “mixer” les

deux modes (mode classique et le mode AWP). Les champs “non importants”
Dans l’exemple “WW_Blog_AWP”, la page En version 19, il est possible de demander à ne
“tableau de bord” de la partie “Administration“ plus référencer certains boutons de vos sites
Le plan de navigation peut être édité à tout
du site est en mode classique car on veut “pro- WEBDEV. Cela permet d’exclure du référen-
moment grâce à l’option “Plan de navigation”
téger” cette partie et ne pas la référencer. Les cement des boutons qui n’ont aucun intérêt
du volet “Projet”.
pages “publiques” sont, elles, en mode AWP. à l’être (un bouton “Imprimer” par exemple)
Note : pensez après le déploiement à fournir et ainsi de mieux faire ressortir les boutons
le fichier sitemap.xml aux outils des moteurs importants (“souscrire à l’offre superoffre”
Informations de recherche tels que “Google WebMaster”. par exemple).
spécifiques pour les
moteurs de recherche Fréquence de mise à jour Cette opération s’effectue depuis la fenêtre de
description du champ “Bouton”, dans l’onglet
Il est possible d’indiquer aux moteurs de
Mots-clés, titres et textes alternatifs “Général” en sélectionnant dans la combo
recherche la fréquence de mise à jour du
WEBDEV est livré en standard avec un assistant “Type de génération” si le champ doit être :
contenu des pages grâce à la combo “Mise à
d’aide au référencement qui peut être lancé à • un bouton natif (une balise “button”),
jour” de la fenêtre de description de la page
n’importe quel moment du développement. • un lien dont la cible est référençable (une
(onglet “Détail”).
L’assistant se lance depuis le volet “Projet”, balise <a>),
groupe “Web”, option “Référencement .. • un lien dont la cible n’est pas référençable
Utilisation de balises alternatives aux images Optimiser le référencement”. (nofollow).
Notre astuce : ces deux dernières possibilités

de personnalisation de la génération sont
également disponibles sur le champ “Lien”.
Génération des balises “meta” ou génération sémantique des champs dans le contenu HTML
Les propositions d’optimisation détectées par

OPTIMISER LE RÉFÉRENCEMENT Mise en place du mécanisme d’URL Rewriting
D’UN SITE WEBDEV (SUITE) La configuration de l’URL Rewriting s’effectue depuis le ruban dans le volet “Projet”, groupe
“Référencement”, option “Paramétrer l’URL Rewriting”.
Sans URL Rewriting, l’URL initiale est de la forme :
http://localhost/WW_BLOG_AWP_WEB/FR/article.awp?P2=Cupcakes_moelleux_ultra_
legers_a_la_ganache_montee&P1=12
On y retrouve, le nom de la page “article.awp” et les deux paramètres de cette page : “P1”
pour l’identifiant de l’article et “P2” pour le titre de l’article.
L’objectif avec l’URL Rewriting est d’obtenir une URL de la forme :
http://localhost/WW_BLOG_AWP_WEB/FR/12/Cupcakes_moelleux_ultra_legers_a_la_
ganache_montee.awp
Mise en forme de l’URL L’encart à droite de cet article illustre la Supposons par exemple une page qui s’ap- ce qu’il n’aurait pas su avec un simple style.
mise en place de l’URL rewriting sur la pelle “PAGE_Revend_Belg”. Pour les équipes Étape 1 : Activation de l’URL Rewriting de la page “article” en cochant la case “URL Rewriting”
d’une page
page “article” de l’exemple “WW_Blog_ de développements, ce nom est clair : Le moteur de recherche saura que ce mot est
AWP”. • “PAGE” : c’est le préfixe du nom logique très important pour cette page et lui donnera
URL Rewriting : mise en forme des
d’une page dans la charte de programmation généralement plus de poids.
paramètres
par défaut.
Il est important de rendre les URL des sites Gestion de dossiers et
• “Revend”, c’est l’abréviation des Revendeurs. Il est possible d’indiquer pour chaque champ
lisibles par les utilisateurs mais surtout par d’arborescences
• Et “Belg”, pour Belgique. Libellé, sa mise en forme logique depuis
les moteurs de recherche.
l’onglet “Détail”.
WEBDEV permet depuis longtemps de regrou-
C’est donc tout simplement la page des reven-
L’URL rewriting permet de rendre les URL des per des pages par “perso-dossier”. Depuis
deurs en Belgique.
pages et leurs adresses, plus faciles à lire, et la version 19, il est possible de regrouper les
donc à indexer et référencer. pages du site dans des dossiers physiques.
Cependant, pour le référencement, ce nom
n’est pas intéressant (il y a très peu de chance Étape 2 : Par défaut, WEBDEV propose une forme d’URL Rewriting pour cette page. L’URL
Pour illustrer le fonctionnement de l’URL Cette possibilité est un plus pour le référen-
qu’un utilisateur recherche “page revend belg” obtenue est alors : http://www.monsite/article/gnIDArticle/gsTitreArticle.awp
Rewriting, voici la page “article” de l’exemple cement, le nom des sous-dossiers se retrouve
dans Google...). Il serait plus intéressant d’avoir
WW_Blog_AWP. ainsi dans l’URL de la page : le nom du dossier Sur notre exemple, cela donne :
un nom comme “revendeurs-belgique”.
est aussi référencé (par exemple un dossier http://localhost/WW_BLOG_AWP_WEB/FR/article/12/Cupcakes_moelleux_ultra_legers_a_
Comme vous le voyez ci-dessous, cette page “soldes” contenant les pages relatives aux la_ganache_montee.awp
Grâce à WEBDEV 19, il est possible de conser-
nécessite deux paramètres : articles en soldes).
ver les avantages de ces deux noms en indi- C’est une URL plus claire, mais ce n’est pas exactement l’URL souhaitée : le nom de la page
• l’identifiant de l’article à afficher,
quant un nom physique différent du nom (“article”) est encore présent. Pour paramétrer plus finement l’URL rewriting sur la page, il faut
• le titre de l’article à afficher. Voici une URL sans nom de dossier :
logique. Ce paramétrage s’effectue dans la cliquer sur le bouton “…”.
PROCEDURE article(... http://monsite/FR/mapage.awp fenêtre de description de la page (dans le
gnIDArticle est un entier,...
et une URL avec nom de dossier : champ “Fichier généré”).
gsTitreArticle est une chaîne)
http://monsite/FR/Promotions/
Sans utilisation du mécanisme d’URL rewriting, /informatique/SSD/mapage.awp Gestion multilingue
l’URL de la page est alors de la forme suivante Cette gestion des dossiers s’effectue depuis Enfin, pour les sites internationaux et multi-
une fois déployée : l’explorateur de projet, dans la fenêtre de lingues, les noms physiques des dossiers et
http://www.lapatisseriefun.fr/article. description des “perso-dossiers”. Il vous per- des pages peuvent être multilingues. Le champ ZTR
awp?P1=437&P2=couscous%20au met d’organiser les différentes pages dans (zone de texte riche)
%20sucre des arborescences “logiques” et maintenant Dans la version anglaise du site, la page
Utiliser le champ ZTR, la Zone de Texte
Cette URL, il faut bien le reconnaître, n’est de l’exploiter pour le référencement à l’aide exemple “revendeurs-belgique” pourra ainsi
Riche permet d’optimiser le référencement
pas très lisible ni très explicite, que ce soit d’un nom physique. s’appeler “belgium-resellers”.
du contenu des sites Web.
pour un client ou un moteur de recherche.
Note : WEBDEV dispose également d’un volet Pour indiquer des noms différents par langues
Rappel : Le champ ZTR permet d’éditer du
Grâce à l’URL rewriting, il est possible de “Explorateur de site”. Ce volet affiche une pour les dossiers ou les pages, il suffit de Étape 3 : Pour obtenir l’URL souhaitée, il suffit de supprimer la 1ère ligne qui correspond à la
texte riche très facilement.
transformer cette URL en : vue physique des fichiers qui composent cliquer sur le bouton “avec les drapeaux” à composante fixe dans l’adresse, ici “article” (qui est le nom de notre page).
votre site. Ces deux volets sont synchronisés droite des champs de saisie.
http://www.lapatisseriefun.fr/437/ Son avantage pour le référencement, c’est que
couscous-au-sucre.awp automatiquement lors d’un nommage phy- le HTML généré par le champ ZTR utilise des
sique d’un dossier ou d’une page (voir suite balises sémantiques.
Avec une URL de cette forme : de cet article). Donner un sens aux
• les moteurs de recherche pourront associer champs Libellé Par exemple, en passant un mot en gras, le
les mots “couscous” et “sucre” avec un poids
élevé à votre page, Gestion de noms physiques La mise en forme logique, c’est le fait de géné- champ ZTR génère non pas une balise “B”
• l’utilisateur pourra voir cette URL lors d’une spécifiques au référencement rer un code HTML donnant des informations mais une balise “STRONG”.
recherche, Le nom physique d’une page peut également sémantiques au moteur de recherche plutôt
• chaque paramétrage de page est vu comme être différent du nom logique : que simplement physiques. 
une page différente, ce qui multiplie les pages • le nom logique d’une page, c’est son nom
du site et les rend plus indépendantes du en programmation, Par exemple, lors de l’utilisation d’une balise
• le nom physique d’une page, c’est le nom HTML comme <h1>, le moteur de recherche C’est terminé, il ne reste plus qu’à recompiler le projet avant de le tester !
point de vue référencement.
du fichier sur le disque. sait que ce mot est un titre de premier niveau,

RÉALISATION PAS À PAS D’UN 3 Ajout d’un picto à gauche du bouton
BOUTON CSS
Pour cela, il suffit d’entrer en saisie dans le contenu CSS du
bouton (comme celui d’un champ “Zone de Texte Riche”) et de
sélectionner le bouton “Image” pour sélectionner et paramétrer
(marges, mode d’affichage, etc.) un picto du catalogue d’images.
WEBDEV 19 permet une édition rapide et puissante des styles CSS ce
qui permet notamment de réaliser des boutons à l’aspect soigné sans Le positionnement du picto dépend de l’option “habillage du texte”.
connaissance d’outil de retouches d’images.
1 Création du bouton
Le bouton initial est un bouton issu d’une ambiance : il est
simplement redimensionné en 250 x 70 px.
2 Création d’un effet de relief

Pour ne plus avoir cet effet “plat” du bouton, le fond du 4 Mise en place d’une animation
On trouve de nombreuses animations et transitions, en voici
bouton est personnalisé pour ses différents états.
une simple effectuant une translation et un effet de survol (à placer
dans l’onglet “Avancé” d’une page en tant que code HTML).
La personnalisation s’effectue sur : <style>
• la police qui doit être plus grosse pour correspondre à l’aspect du @-webkit-keyframes fadeOutText {
bouton et ne pas faire “petite” (onglet “Texte”), 50% { color: transparent; }
• la couleur de fond du bouton (onglet “Fond”), 75% { color: transparent; }
• la bordure en bas du bouton pour lui donner son relief (onglet 100% { color: #fff; }
“Cadre”). }
@-webkit-keyframes moveToRight {
80% { -webkit-transform: translateX(350px); }
Note : pour réaliser un effet de relief, il faut sélectionner une couleur 81% { opacity: 1; -webkit-transform: translateX(350px); }
légèrement plus sombre pour le cadre que pour le fond du bouton. 82% { opacity: 0; -webkit-transform: translateX(350px); }
83% { opacity: 0; -webkit-transform: translateX(-50px); }
84% { opacity: 1; -webkit-transform: translateX(-50px); }
100% { -webkit-transform: translateX(0%); }
}
.btn-menu:hover {
-webkit-animation: fadeOutText 0.8s;
-moz-animation: fadeOutText 0.8s;
animation: fadeOutText 0.8s;
overflow:hidden;
}
.btn-menu:hover img {
-webkit-animation: moveToRight 0.5s;
-moz-animation: moveToRight 0.5s;
animation: moveToRight 0.5s;
}
</style>
5 Association d’une classe (si besoin)

Pour des manipulations avancées par des scripts externes, il
est possible d’associer une classe “css” au champ lors de sa géné-
ration. Cette opération se déclare dans l’onglet “Avancé” du champ.

ECOMMERCE: ACCEPTER DES
PAIEMENTS EN BITCOIN
L’exemple “eCommerce” peut être personnalisé rapidement pour prendre PAYPAL” pour la version d’origine,
• “PAGE_ADMINISTRATION_PAIEMENT_
tant simplement une option dans le modèle
de champs “MDLC_ADMIN_SOUSMENU_
La procédure d’enregistrement de la com-
mande (CommandeEnregistre) doit égale-
en compte des nouveaux moyens de paiements. La version “eCommerce BITCOIN” pour la version copiée. GESTION_SITE”. Là encore, il est possible de ment gérer ce nouveau type de commande.
copier un bouton existant (le bouton Paypal)
TDF19” est un exemple de personnalisation pour gérer les paiements par Il suffit alors de : et de changer simplement la page affichée CAS PAIEMENT_BITCOIN
Commande.TypeReglement=...
Bitcoin en utilisant la plate-forme “Block Chain”. Ce même principe peut être • modifier les libellés,
• supprimer les champs inutiles de la page
dans le choix “Action” du bouton.
REGL_BITCOIN
Commande.MethodeReglement=...
appliqué aux autres moyens de paiements. (ce qui provoque des erreurs de compilation),
• ajouter les nouveaux champs de saisie qui
PAIEMENT_BITCOIN
permettent de gérer les paramètres.

Gestion de l’appel au composant
interne
Gestion des paramètres
La méthode de paiement est maintenant pro-
Pour réaliser un paiement par bitcoin, il suffit
posée, il faut maintenant le gérer dans le code
d’une “Adresse” (une clé informatique) qui Note : une fois le modèle mis à jour dans
de clic du lien “LIEN_VALIDATION_PAIEMENT”
correspond à votre “portefeuille”. Seul ce toutes les pages, pensez à annuler la sur-
de la zone répétée de la page paiement dans
champ (avec l’état d’activation) doit être stocké charge du bouton “Paypal” présente dans la
le “SELON” effectuant la redirection vers le
dans la configuration. page “PAGE_ADMINISTRATION_PAIEMENT_
moyen de paiement. Dans cet exemple, il suffit
BITCOIN” puis à surcharger le style du nou-
d’ajouter l’appel au composant “BitCoin” en
Première étape : créer la structure capable veau bouton “Bitcoin” en lui associant le style
indiquant que la commande passe dans l’état
de mémoriser ces informations car aucune “BTN_ATTENTION_ROUGE”
d’attente du règlement bitcoin.
des structures disponibles ne correspond.
// Redirection en fonction du
Une nouvelle structure spécifique ST_
// mode de paiement
CONFIGURATION_BITCOIN est donc créée SELON ATT_TYPE_PAIEMENT
dans la collection COL_CONFIGURATION_ ...
SITE. CAS PAIEMENT_BITCOIN
ST_CONFIGURATION_BITCOIN // Règlement par bitcoin
est une Structure C’est alors “terminé” pour l’espace d’admi- ...
bEstActivé est un booléen nistration, en dehors de la partie de gestion PopupAffiche(...
sAdresseBitcoin est une chaîne des commandes. POPUP_PAIEMENT_BITCOIN,...
FIN popupEpinglée + popupCentre)
Il faut ensuite créer les procédures de char- Ajout du moyen de paiement

gement de sauvegarde et de chargement de Affichage de l’état de la commande
Une fois le moyen de paiement activable et
la configuration : Après le paiement, (lorsque le client l’indique
configurable, il reste à le proposer comme
• LireConfigurationBitCoin, car le paiement bitcoin n’est pas une opération
Principe Le composant interne Le composant moyen de paiement dans la page “paiement”
synchrone), la liste des commandes du client
• ModifierConfigurationBitcoin. (partie AWP) du site.
Bitcoin Pour illustrer la mise en place d’un nouveau
Pour ajouter un nouveau moyen de paiement Là encore, une solution rapide est de copier est affichée. Il est nécessaire d’afficher des
moyen de paiement, nous avons utilisé un Il suffit pour cela de renseigner par program-
dans le site eCommerce, plusieurs opérations les procédures équivalentes pour la solution libellés en “clair” pour les nouvelles constantes
Le bitcoin composant interne développé spécifiquement mation ce nouveau moyen de paiement dans la
sont nécessaires : Paypal. de suivi du paiement bitcoin en cours dans
Le bitcoin est une “monnaie” virtuelle entiè- pour gérer le paiement par bitcoin. Ce com- procédure RemplirListeSolutionsPaiement.
• ajout des variables et des fonctions pour la procédure CommandeEtatVersChaine en
posant interne “BitCoin (Blockchain)” utilise La procédure de chargement de la confi-
stocker et lire la configuration du moyen de rement numérique et utilisable sur Internet. // Est-ce que l’on a un gérant les deux nouveaux états :
les APIS du portail blockchain et permet de : guration se limitent à ces quelques lignes :
paiement. Le bitcoin n’est pas centralisé et son échange // paiement par Bitcoin ?
• obtenir la conversion en bitcoin d’un mon- CAS CDE_BITCOIN_ATTENTE_VERIF
avec des monnaies telles que l’Euro ou le PROCEDURE stConfigurationBitCoin =...
• ajout d’une page de configuration du nou- sEtat = “Confirmation paiement
Dollar s’effectue par des plates-formes privées. tant en euros, AfficherConfiguration() LireConfigurationBitCoin()
veau moyen de paiement. Bitcoin en attente”
• créer le lien de paiement bitcoin corres- // Lecture de la configuration SI stConfigurationBitCoin.
• ajout dans les menus du nouveau moyen CAS CDE_BITCOIN_VERIFIEE
pondant. ConfigBitCoin est un bEstActivé = Vrai ALORS sEtat = “Commande Bitcoin
de paiement. Avertissement ST_CONFIGURATION_BITCOIN =... ZoneRépétéeAjouteLigne(...
validée”
• ajout dans la liste des moyens de paiements Le bitcoin n’est pas (à l’heure actuelle) une Personnalisation de LireConfigurationBitCoin() ZR_LISTE_SOLUTIONS_PAIEMENT,
de la solution ajoutée (si elle est active). sCheminImages+“bitcoin.png”,
méthode officielle de paiement et est soumis l’exemple “eCommerce” // On affiche les champs
“Paiement immédiat par bitcoin
• gestion du paiement. à de fortes variations. De plus, les acteurs de INT_SOLUTION_BITCOIN_ Et ensuite ?
• ajouts éventuels de nouveaux états du paie- ACTIVE[1]=... (solution BlockChain)”,
ces marchés ne sont pas contrôlés. Ajout de la page d’administration Chaque processus de paiement (et de valida-
ConfigBitCoin.bEstActivé PAIEMENT_BITCOIN)
ment et de la commande. tion de paiement) est ensuite spécifique, et
Chaque méthode de paiement dispose d’une SAI_ADRESSE_BITCOIN= ... FIN
L’utilisation du bitcoin et l’utilisation de page d’administration pour saisir ou modifier c’est encore plus vrai pour le bitcoin.
ConfigBitCoin.sAdresseBitcoin Au passage, il est conseillé d’utiliser un
la plate-forme BlockChain ne sont pas les paramètres de configuration de la méthode À ce stade, la validation du paiement est réali-
Projet d’illustration nouveau type de paiement (ici PAIEMENT_ sée par le backOffice et n’est pas automatisée.
des préconisations de la part de PC SOFT. de paiement. Pour gagner du temps et voir BITCOIN) pour pouvoir gérer les spécificités
Le projet utilisé pour illustrer ce sujet est Le composant interne “BitCoin (Blockchain)” rapidement les traitements nécessaires, la Ajout dans l’interface d’adminins-
tration de ce type de paiement par la suite.
l’exemple “eCommerce TDF19” (présenté au de l’exemple “WW_Bitcoin_TDF19 “ et l’exemple page d’administration de la solution “Block
TDF) basé sur l’exemple “eCommerce” livré en “eCommerce TDF19” sont simplement des Chain” est une copie de la page d’adminis- Une fois la page d’administration créée et 
standard ainsi que l’exemple “WW_Bitcoin_ exemples d’illustration. tration de la solution “Paybox” : développée, il reste à l’intégrer dans l’inter-
TDF19”. • “PAGE_ADMINISTRATION_PAIEMENT_CB_ face d’administration... ce qui se fait en ajou-

IOS / ANDROID
LES NOTIFICATIONS PUSH
Les notifications Push permettent aux utilisateurs des applications de recevoir
des alertes ou des informations en temps réel sans que l’application ne soit
en cours d’exécution.
Ce sont en effet les serveurs (de Apple ou Google) qui envoient les
notifications directement au système (iOS ou Android). minal concerné (iOS ou Android). Notre astuce : pour envoyer des informa- les notifications aux terminaux concernés. Il
WM_News_Serveur. tions à l’application mobile sans qu’elles reste à gérer la notification dans l’application
AjouteIdentifiantIOS(... soient affichées dans la notification, il suffit mobile.
bufIdentifiant, Faux, ... d’utiliser la propriété Contenu de la variable Cela se passe par l’utilisation d’une pro-
SysVersioniOS()) Notification. Par exemple, ci-dessous, on cédure “callback” déclarée dans le projet
À partir de cet instant, l’application mobile fournit l’identifiant de l’article. mobile à l’aide de la fonction WLangage
est prête à recevoir des notifications Push. PROCEDURE RéceptionNotifPush(... NotifPushProcédure.
maNotif est un Notification) // Callback pour l’appel
sIdentifiantArticle est une chaîne=... // des notifications
BackOffice : maNotif..Contenu NotifPushProcédure(...
envoi des notifications RéceptionNotifPush)
Envoie la notification Cette procédure “callback” prend en paramètre

Le BackOffice (application WINDEV, site
une variable de type Notification reprenant
WEBDEV, Webservice, etc.) devant émettre L’envoi de la notification s’effectue avec la
L
les informations envoyées par le BackOffice.
des notifications doit contacter le serveur (de fonction WLangage NotifPushEnvoie.
Il suffit alors généralement d’ouvrir la fenêtre
es notifications Push utilisent des méca- Application mobile : • Uniquement les alertes, Google ou d’Apple) en fournissant : Cette fonction nécessite quatre paramètres : souhaitée.
nismes standards proposés par Google • Uniquement les pastilles, • la notification à envoyer,
autoriser la réception • la liste des identifiants des applications
• la variable Notification,
PROCEDURE RéceptionNotifPush(
(pour Android) et d’Apple (pour iOS). • Uniquement les sons. • la liste des identifiants auxquels la notifica-
de push destinataires. maNotif est un Notification)
tion doit être envoyée,
Ce sont des serveurs de Google ou d’Apple // Active les notifications push
Inscription de l’application • les informations du compte développeur : sIdentifiantArticle est
qui envoient les notifications Push lors d’une NotifPushActive(...
Récupération de la liste des desti- • Sous iOS, cela correspond au certificat une chaîne = maNotif..Contenu
L’application mobile s’enregistre auprès des ActivationNotifPush,...
demande d’une application Tierce. Pour gérer de l’application.
serveurs de Google ou d’Apple pour leur notifPushTypeAlerte) nataires
des notifications Push, il est donc nécessaire • Sous Android, cela correspond à la clé // On affiche l’article de la
indiquer qu’elle accepte de recevoir des noti- La récupération de la liste des identifiants // notification
de réaliser trois actions : Ce mode de fonctionnement en asynchrone d’autorisation Google.
fications Push. auxquels une notification peut être envoyée OuvreFenêtreMobile(...
1. Indiquer que l’application mobile souhaite est imposé par Apple et Google parce que • Enfin, le dernier paramètre est différent pour
s’effectue grâce à un Webservice géré par le FEN_Lecture,...
pouvoir recevoir des notifications Push (l’utile délai de réponse des serveurs peut varier. iOS ou Android :
L’enregistrement auprès des serveurs de développeur de l’application. Ce Webservice sIdentifiantArticle, Vrai)
lisateur peut le refuser). • iOS : ce paramètre est une constante pour
Google et d’Apple s’effectue grâce à la fonc- doit gérer la liste des identifiants d’applications Notre astuce : sous iOS, lors d’une noti-
2. Dialoguer avec les serveurs de Apple ou La procédure CallBack appelée nécessite indiquer si on veut utiliser les serveurs de
tion WLangage NotifPushActive. à notifier et n’est pas géré par Google ou fication, la nouvelle fonction WLangage
Google pour envoyer des notifications Push deux paramètres : notification de production ou ceux de test.
Apple. Un Webservice “type” est fourni en SysIconeBadge permet d’afficher un petit
depuis un BackOffice. • un buffer (qui va contenir l’identifiant de • Android : ce paramètre est un tableau de
standard avec WINDEV Mobile. badge sur l’icône de l’application.
3. Traiter la réception de la notification dans Notre astuce iOS : il est nécessaire d’avoir l’application), buffers qui va recevoir la liste des identifiants
l’application mobile. inclus dans l’application un certificat pour les • une chaîne remplie en cas d’erreur. invalides.
notifications Push. La procédure de gestion Dans l’exemple “WM News TDF19”, ce sont
PROCEDURE ActivationNotifPush( les procédures ListeIdentifiantsiOS et NotifPushEnvoie(...
des certificats est décrite et mise à jour dans
bufIdentifiant est un Buffer, maNotif, ...
Projet d’illustration l’aide en ligne. sErreur est une chaîne)
ListeIdentifiantsAndroid qui réalisent cette
tabIdentifiantsAEnvoyer, ...
opération.
Le projet utilisé pour illustrer ce sujet est tabMoncertif[1], ...
l’exemple “WM News TDF19” (présenté au TDF) Notre astuce Android : le mobile com- typeServiceIOSTest)
munique avec les serveurs de Google en Envoi de l’identifiant
est livré sur le DVD constitué de 3 projets : Construction d’une variable de type
utilisant les ports 5228, 5229 et 5230. Pensez En retour, le serveur envoie un identifiant Note : Les identifiants invalides, c’est par
“WM News TDF19”, “WM News Backoffice” et Notification avec le message
à configurer votre firewall si besoin ! à l’application. C’est cet identifiant qui sera exemple les identifiants des terminaux qui
“WM News Serveur”. La construction d’une notification s’effectue
utilisé pour lui envoyer une notification Push. ont désinstallé l’application ! Cela permet
à l’aide d’un type de variable spécifique du
L’exemple “Push Mobile” (livré en standard) La fonction WLangage NotifPushActive L’application mobile doit ensuite fournir son de connaître les identifiants qu’il est inutile // Met à jour le badge
WLangage, le type Notification. Il suffit
constitué de 4 projets : “iOS Push”, “Android prend en paramètre une procédure. Cette identifiant à l’application qui génère les noti- de notifier. SysIconeBadge(19)
alors de remplir les différentes propriétés
Push”, “WD Envoi Serveur”, “WD Serveur Push” procédure sera appelée automatiquement fications. Un Webservice est livré dans ce but de la variable pour construire la notification.
aborde également ce sujet. lorsque le serveur a fini l’inscription. avec WINDEV Mobile (c’est lui qui a servi de Cette fonction SysIconeBadge peut aussi ser-
// Active les notifications push base pour cet exemple).
maNotif est une Notification Application mobile : vir “hors notification”pour afficher le nombre
NotifPushActive(...
maNotif.Contenu = sContenu
traiter la réception d’articles en attente de lecture par exemple.
I l s u f f i t d ’a p p e l e r l a p r o c é d u r e
ActivationNotifPush)
AjouteIdentifiantiOS ou AjouteIdenti- maNotif.Titre = SAI_Titre d’une notification
Sous iOS, il est possible de spécifier le type fiantAndroid du Webservice en indiquant
de notification que l’application accepte : l’identifiant de l’application et le type de ter- Attention : sous iOS, le contenu total de la
Une fois la demande de notification envoyée, 
les serveurs de Google et d’Apple vont envoyer
• Toutes, notification est limité à 256 caractères.

IOS / ANDROID
LES NOTIFICATIONS PUSH Légende
1. Inscription de l’application auprès des serveurs Google ou Apple pour recevoir des notifications
SCHÉMA EXPLICATIF
sur cet appareil.
2. Récupération d’un identifiant permettant de recevoir des notifications.
3. Stockage dans un Webservice de l’identifiant de l’application pour cet appareil.
4. Récupération des identifiants valides avant l’envoi d’une notification Push.
5. Envoi d’une notification Push par le “Back Office” auprès des serveurs Google ou Apple.
6. Envoi de la notification aux appareils inscrits.

IOS / ANDROID : 7 ÉTAPES POUR
AJOUTER UN SLIDING MENU 4 Largeur et effets d’ouverture
Les sliding menus sont des menus verticaux qu’un glissement de doigt Une fois la fenêtre interne associée, il reste à définir son
comportement :
permet de faire apparaître depuis la gauche ou la droite de l’écran. Grâce • la coche “balayage” permet d’indiquer si le sliding menu pourra être
affiché automatiquement par l’utilisateur par un balayage depuis le
aux sliding menus, il est possible de structurer une application par thème bord de l’écran. Si cette coche n’est pas activée, l’affichage du sliding
sans pénaliser l’espace utilisateur à l’écran. menu devra être réalisé par programmation.
• la largeur de la fenêtre interne peut être soit celle de la fenêtre
L’exemple “WM Sliding Menu TDF19” contient un sliding menu que cet article interne, soit une largeur spécifique fixée en pixels.
• l’effet d’ouverture permet de choisir le comportement lors de
détaille en 7 points ! l’apparition du sliding menu : doit-il pousser ou recouvrir la fenêtre,
et doit-il apparaître dessus ou dessous ?
1 Création du sliding menu

Le mécanisme de sliding menu repose sur l’utilisation de
5 Accès au sliding menu depuis les
fenêtres l’incluant
fenêtres internes. Il est donc nécessaire de commencer par créer Les fenêtres incluant un sliding menu ont accès aux champs et aux trai-
la fenêtre interne (Volet “Création” du ruban, bouton “Nouveau” et tements du sliding menu par deux mots-clés WLangage spécifiques :
choix “Fenêtre .. Fenêtre interne”). La fenêtre interne doit contenir MaFenêtreCoulissanteGauche et MaFenêtreCoulissanteDroite.
ce que l’on souhaite afficher dans le menu. // Change la couleur d’un libellé dans
// la fenêtre coulissante à gauche
La taille de la fenêtre interne ne doit pas excéder la largeur de la MaFenêtreCoulissanteGauche.LIB_NomCatégorie..
plate-forme mais peut avoir une hauteur quelconque (l’utilisateur Couleur = RougeClair
devra alors scroller). Il est indispensable de mettre en place des
// Appel d’une procédure
ancrages sur le contenu des fenêtres internes utilisées dans un
MaFenêtreCoulissanteGauche.MaProcédure(Vrai)
sliding menu.
2 Accès aux champs depuis le sliding

menu 6 Affichage par programmation
Si le mode balayage est désactivé (voir point 4) ou pour
afficher à la demande le sliding menu, il est possible d’utiliser la
Depuis le sliding menu, il est bien sûr possible d’accéder par pro-
fonction WLangage FenCoulissanteVisible qui permet à la fois de :
grammation aux champs et aux procédures des fenêtres “supports”
• connaître l’état de visibilité du sliding menu,
du sliding menu.
• modifier l’état de visibilité du sliding menu.
Il suffit pour celà, il suffit de préfixer le nom des traitements ou des
// Test de la visibilité
champs par le nom de la fenêtre (attention, cette fenêtre doit être SI FenCoulissanteVisible(fcGauche) ALORS
ouverte au préalable) : // Rend invisible
gnCatégorieEnCours = ATT_IDCatégorie FenCoulissanteVisible(fcGauche, Faux)
FIN
FEN_Accueil.AfficheCatégorie()
3 Association du sliding menu à une

fenêtre 7 Un second sliding menu dans la même
fenêtre !
Dans une fenêtre (ou un modèle de fenêtres), pour définir le sliding Il est possible d’utiliser non pas un sliding menu par fenêtre, mais
menu, il suffit d’ouvrir la fenêtre de description de la fenêtre (ou du deux : un par la gauche et un par la droite.
modèle de fenêtres).
Ensuite, dans l’onglet “Détail”, sélectionnez la fenêtre interne à utiliser Cette fonctionnalité permet généralement de proposer deux infor-
à l’aide de la combo “fenêtre” (choix “Fenêtre coulissante gauche”) mations de natures différentes.
listant les fenêtres internes du projet.
Le sliding menu “droite” est beaucoup moins courant : il est conseillé
de l’afficher par programmation par un bouton explicite.

IOS / ANDROID ACTION BAR POUR ANDROID,
GÉRER LES POLICES NATIVES NAV BAR POUR IOS,
Lors de la réalisation d’une application spécifique pour iOS ou Android, il
est important de respecter les polices standard disponibles sur ces plates-
WINDEV MOBILE 19 POUR TOUS !
formes. En effet, si une police n’est pas disponible, le système (iOS ou
Android) va choisir la police qu’il estime la plus ressemblante, ce qui peut
L
provoquer des problèmes d’affichage. es applications iOS et Android cédent (ce que fait Android par un bouton Ensuite, la fenêtre de description du champ
exploitent de façons assez radicale- “physique”). “Action Bar” est disponible. Cette fenêtre a
ment différentes la zone “haute” de la fondamentalement évolué dans la version 19
Il suffit tout d’abord d’activer la fonctionnalité
Directement accessible depuis l’onglet “Style” fenêtre. Or cette zone est fondamen- afin de permettre aux équipes de développe-
“Action Bar” dans la fenêtre de description
des champs, la liste des polices peut être tale dans une application mobile. ment de réaliser une seule fenêtre capable de
de la fenêtre (onglet “Style”).
filtrée en fonction de la ou les plates-formes gérer les deux modes de fonctionnement (cf.
Sur Android, cette zone utilise générale-
destination. le sujet sur les agencements dans ce support
ment une “Action Bar” qui peut proposer
de cours).
des actions, sur la gauche et la droite, et
éventuellement un menu déroulant à droite.
De plus, les options ont été organisées visuel-
Sur iOS, cette zone est plus épurée et ne lement afin de comprendre rapidement les
contient au maximum que deux boutons. Le effets des différentes options d’édition.
bouton gauche est généralement le bouton
“Retour” permettant de revenir à l’écran pré-
L’onglet “Général” permet d’avoir une vision d’ensemble des fonctionnalités Chaque zone (1 à 4) est ensuite directement personnalisable
du champ “Action Bar” sur Android et iOS. par une interface spécifique disponible lors du clic.
En exécution sur Android
En exécution sur iOS avec la même fenêtre, le même champ “Action Bar”

IOS / ANDROID
LES ACHATS INTÉGRÉS (IN-APP)
Le concept d’achat intégré permet de vendre des services dans une d’achats “In-App” est de les créer/déclarer
dans les consoles d’administration. Les pro-
Cette procédure callback CallBackAchat,
prend en paramètre :
L’utilisation de ce composant interne permet
de gérer de manière centralisée des achats
application, mais aussi de distribuer une application gratuitement et de la cédures de déclarations de ces produits sont • un booléen, pour confirmer si le produit “In-App” qu’ils soient sur Android ou iOS, mais
sensiblement identiques pour Google (cf a été acheté, ce n’est pas du tout une obligation.
passer en application complète pour débloquer des fonctionnalités. copie d’écran) et Apple aux différences • le produit qui a été acheté,
Le paiement est alors géré par Google (Android) ou Apple (iOS). d’interface prêts. • le reçu,
• la quantité achetée.
Il est possible de gérer les achats “In-App”
directement avec les fonctions inAppXXX
du WLangage.
Les fonctions WLangage PROCEDURE CallbackAchat(...
Le WLangage offre des fonctions pour gérer bSuccès est un booléen, ...
les achats “In-App” en tenant compte des tProduit est un inAppProduit, ...
spécificités des plates-formes iOS & Android. bufReçu est un Buffer, ...

nQuantité est un entier)
Sous iOS, les fonctions disponibles sont :
• inAppAchèteProduit : envoie une demande SI bSuccès ALORS
d’achat d’un produit “In-App” associé à l’appli- // On affiche le contenu
cation. // complet
• inAppListeInfoProduit : récupère à partir AfficheContenu()
du store les informations sur les produits SINON
Erreur(“Impossible de
“In-App” associés à l’application.
valider votre achat.”)
• inAppRestaureAchats : restaure les achats FIN
précédemment effectués par l’utilisateur dans
une application iOS. Et ce code fonctionne de la même façon pour
iOS et Android.
Sous Android, les fonctions disponibles sont :
• inAppAchèteProduit : envoie une demande
d’achat d’un produit “In-App” associé à l’appli-
cation.
C
• inAppConsommeProduit : permet de
omme pour les notifications Push, Projet d’illustration • console développeur Google Play pour les consommer dans une application un pro-
les achats “In-App” utilisent les applications Android. duit précédemment acheté par l’utilisateur.
mécanismes standard de Google Le projet utilisé pour illustrer ce sujet est • inAppListeAchat : renvoie la liste des pro-
et d’Apple. l’exemple “WM News TDF19” (présenté au duits de l’application achetés par l’utilisateur
TDF et livré sur le DVD). Des différences entre et non consommés.
Dans la console d’administration de votre iOS et Android • inAppListeInfoProduit : récupère à partir
compte développeur (Google ou Apple), vous du store les informations sur les produits
Plusieurs types de Si le principe est le même pour Android et iOS,
définissez des “produits” qui sont vendus en “In-App” associés à l’application.
achats “In-App” dans les applications !
“produits” pour les des différences notables sont à prendre en
compte dans la conception des applications
achats In-App
suivant la plate-forme. Un composant interne
Deux types de produits sont disponibles en
Principe pour gérer iOS et
achat “In-App” : Par exemple, sur iOS, les produits consom-
Le fonctionnement des achats “In-App” dans • les produits consommables, mables ne peuvent pas être renvoyés par les Android de la même
une application mobile peut se décomposer • les produits non consommables. serveurs Apple en cas de désinstallation de la manière
ainsi : consommation. Le produit, du point de vue
• les développeurs créent des “produits” dans Le composant interne “CI_Inapp” utilisé dans
Les produits consommables sont des pro- Apple, est considéré comme consommé dès
les consoles d’administration de la plateforme l’exemple “WM News TDF19” est réutilisable :
duits qui une fois utilisés (consommés), sont son achat : il revient à l’application de le gérer.
cible. il suffit de l’importer dans un projet depuis
“perdus” : l’utilisateur n’y a plus accès. Par En revanche, sous Android, l’application peut
• lorsqu’un utilisateur achète un produit l’explorateur de projets de WINDEV Mobile.
exemple dans un jeu, on achète un booster, redemander la liste des produits consom-
“In-App”, l’application transmet la demande une vie supplémentaire, on le consomme, et mables achetés auparavant : il faut donc le
d’achat au “store” de la plate-forme (Google Par exemple, pour acheter un produit, il suffit
ensuite on n’y a plus accès. gérer différemment dans l’application.
play store ou Apple AppStore). d’utiliser la procédure inAppAchèteProduit
• le “store” l’enregistre puis envoie un compte- du composant interne en indiquant :
Les produits non consommables sont des Vous retrouvez toutes les différences entre ces
rendu à l’application qui peut valider l’achat • l’identifiant du produit à acheter,
produits achetés sans limite de temps : un plates-formes concernant les achats “In-App”
et activer la fonctionnalité achetée. • la quantité à acheter,
ebook par exemple ou une version Premium. dans l’aide en ligne.
• une procédure callback pour gérer le retour
Important : pour que les achats “In-App” de l’achat.
fonctionnent, il est nécessaire que l’application La configuration des produits “In-App” s’effec-
installée sur le terminal ait été installée à partir tue depuis les outils Google ou Apple : Mise en œuvre inAppAchèteProduit(...
gProduit, 1, ...
d’un “store” officiel. • iTunesConnect (Manage In-App Purchases)
Déclaration des produits “FEN_Lecture.CallbackAchat”) Exemple de création d’un produit pour un achat “In-App”, ici dans la console Google.
pour les applications iOS,
La première étape pour la mise en place

IOS, ANDROID : RÉPLIQUER DES
DONNÉES DISTANTES 4 Déployer la réplication
La disponibilité des données est une problématique récurrente dans le Une fois la réplication configurée et filtrée, l’outil ReplicEdit
est capable de générer un fichier de description de la réplication :
domaine de la mobilité. Est-ce que les données sur les terminaux sont à un fichier à l’extension “.wer”.
Ce fichier est déployé directement sur le serveur de réplication depuis
jour, comment les mettre à jour, comment envoyer des données saisies sur l’outil ReplicEdit par le bouton “Déployer”.
le mobile vers le serveur de l’entreprise, etc. La réponse ? La réplication. En cas de modification, la mise à jour des nouvelles règles de répli-
cations sera déployée de la même manière.
Notre astuce : Un serveur de réplications peut contenir plusieurs

réplications correspondant à différentes applications ou différentes
bases de données.
1 Installation d’un serveur de réplication

Pour réaliser une réplication avec des terminaux mobiles, il est
5 Déclenchement de la réplication
Le déclenchement de la réplication s’effectue à la fois du
nécessaire d’utiliser un serveur de réplication dont le rôle sera double : côté de l’application mais aussi du côté du serveur de réplication :
• préparer les réplicas pour optimiser les temps de traitements et • le serveur de réplication va, périodiquement, préparer les réplicas
les volumes de données échangées avec le terminal, à transmettre au terminal mobile. La fréquence de “préparation” des
• rendre une base accessible par toutes les plates-formes. réplicas se configure lors du déploiement sur le serveur de réplication.
• le code de réplication qui déclenche la synchronisation des don-
Le serveur de réplication est disponible dans le Serveur d’Application nées par le terminal mobile est fourni lui aussi lors du déploiement.
de WEBDEV (une version spéciale est livrée avec WINDEV).
Il est également possible d’utiliser une plate-forme PCSCloud déjà Notre astuce : il est possible d’automatiser la synchronisation du
prête à l’usage. mobile en créant un automatisme de procédure (en exécution infinie,
en thread, toutes les 30 minutes par exemple).
2 Configuration de la réplication
La configuration de la réplication (sens de réplication, fichiers
6 Gestion du mode “déconnecté”
Que l’on soit en connexion WiFi ou 3G/4G, la connexion peut
concernés, localisation des données, analyse, gestion des conflits, être perdue. Il est alors important de laisser l’utilisateur travailler sur
etc.) s’effectue par l’outil ReplicEdit livré en standard avec WINDEV la version locale, sans essayer de provoquer la synchronisation des
et WINDEV Mobile. données (car l’application mobile utilise toujours les données en
local, elle peut continuer sans le serveur).
ReplicEdit se présente sous la forme d’un tableau récapitulatif.
Cet outil dispose d’assistants et de questions pour configurer les Cette opération est possible très simplement grâce à la fonction
données à répliquer. WLangage InternetConnecté qui accepte une procédure CallBack
permettant d’être notifié du changement d’état de la connectivité.
Pour lancer ReplicEdit, cliquez sur “ReplicEdit” du volet “Outils”,
regroupement “Base de données”, option “Réplication”.
3 Filtrer la réplication : INDISPENSABLE

Les capacités de stockage d’un terminal mobile sont limitées
7 Plus d’informations sur la réplication
Retrouvez plus d’information sur toutes les formes de répli-
et les volumes de données échangés sont à optimiser (ne serait-ce cations disponibles dans le dossier spécial réplication de la LST
que pour conserver l’autonomie de l’appareil car les transferts sont 95 : gestion des bases de données tierces, réplications de serveurs,
coûteux en énergie). Il est donc indispensable de filtrer efficacement astuces détaillées, etc.
les données répliquées entre le serveur et le terminal mobile.
Le filtrage s’effectue par l’onglet “Filtres” de l’outil ReplicEdit. Le filtrage

peut être réalisé de manière statique mais aussi dynamiquement, par
programmation en utilisant le concept de “Paramètre”, de manière
équivalente aux requêtes dans WINDEV, WEBDEV ou WINDEV Mobile.

LES AGENCEMENTS = 1 FENÊTRE Le Saviez-Vous ?
DANS PLUSIEURS PLATES-FORMES

Vous pouvez créer des agencements pour chaque configuration de votre projet WINDEV Mobile :
• Android,
• iOS (iPhone/iPad),
WINDEV Mobile 19 offre un nouveau mécanisme avancé pour simplifier • Windows Phone,
• Windows Store apps.
la gestion des plates-formes et des orientations de fenêtres mobiles : • Ou tout simplement pour visualiser le résultat des ancrages en mode portrait/paysage.
les agencements. À partir d’une même fenêtre (code et interface), les

agencements permettent de créer des “variantes” pour répondre aux
contraintes des plates-formes destination.
1 Fenêtre d’accueil : champs supprimés pour économiser de la place 2 Fiche client : disposition adaptée à la plate-forme
Voici la fenêtre d’accueil (“FEN_Accueil”) de l’application “WM Gestion Commandes TDF 19”. La fenêtre “FEN_Fiche_Client” est également un bon exemple de l’utilisation des agencements :
Comme vous pouvez le constater, la disposition des champs est différente sur l’iPad et le les mêmes champs sont affichés dans les deux plates-formes (tablette et smartphone) mais
Galaxy Notes. leur positionnement est parfaitement adapté à la configuration de l’écran.
Pour l’iPad (tablette), la fiche client se décompose en 3 blocs : informations

Pour l’iPad (tablette), un seul agencement est défini, en mode portrait.
générales, adresse de facturation, adresse de livraison. Tous les champs
L’application affiche :
sont visibles directement sur l’écran.
• une zone répétée (à gauche) qui occupe toute la hauteur,
• deux graphes (à droite).
Pour le Galaxy Notes (smartphone), deux agencements sont définis : Pour le Galaxy Notes (smartphone), les blocs sont positionnées les uns
un pour le mode portrait, un pour le mode paysage. en dessous des autres. Même si tous les champs ne sont pas visibles
La taille utile étant plus restreinte sur le téléphone, un graphe a été directement, il est naturel sur un smartphone de faire défiler un contenu.
“supprimé” sur ces agencements par rapport à l’agencement iPad.

LES AGENCEMENTS (SUITE) LICENCE LST Restez informés
Fournissez votre email et recevez des
• Si les applications sont destinées exclusi-
informations régulières en plus de la
PROGRAMME EXEMPLE désigne tout
LST.
1
logiciel source fourni avec la LST, et en vement à un usage interne au site physique
Création d’un agencement : particulier celui qui inclut ce texte. de la société abonnée à la LST, il n’y a La LST fournit tous les trimestres des
plate-forme et orientation pas de contrainte particulière à l’utilisa- informations, mises à jour et trucs
Le PROGRAMME EXEMPLE est fourni dans
tion du PROGRAMME EXEMPLE dans les et astuces sur les différents produits
un but didactique.
La création d’un nouvel agencement s’effectue depuis le volet applications. PC SOFT.
“Fenêtre”, dans l’option “Agencement .. Nouvel agencement.” L’utilisation de ce programme s’effectue • Si le PROGRAMME EXEMPLE est destiné Pour obtenir automatiquement des
Notre astuce : WINDEV Mobile crée un agencement en se basant
sous l’entière responsabilité de son uti- à être diffusé, à titre gratuit ou payant, informations entre deux LST, fournissez
sur la plate-forme d’édition en cours d’utilisation. Il est donc plus
lisateur. La responsabilité de PC SOFT ne par quel que moyen que ce soit, ce votre adresse email à PC SOFT. Vous
rapide de se placer sur l’agencement le plus proche graphiquement
pourra en aucun cas être mise en cause si le PROGRAMME EXEMPLE doit être inclus serez ainsi régulièrement prévenu :
pour limiter les modifications.
PROGRAMME EXEMPLE ne fonctionne pas dans une application dont 90% au moins • des nouvelles versions disponibles
tel que vous l’attendez, ou pour quelque des fonctionnalités de cette application en téléchargement.
Un agencement regroupe à la fois : raison que ce soit. • des nouvelles FAQ disponibles sur le
est constituée d’éléments autres que des
• la plate-forme destination, site de PC SOFT.
PROGRAMMES EXEMPLE provenant d’une
• l’orientation (portrait ou paysage) de l’application. Tout détenteur d’une licence WINDEV 19 • ...
LST.
et/ou WEBDEV 19 et/ou WINDEV Mobile 19
Il est donc interdit, par exemple, de modifier N’hésitez pas à envoyer un email à
enregistrée peut utiliser et/ou modifier ce
légèrement un PROGRAMME EXEMPLE PC SOFT (pcsoft@pcsoft.fr) pour indi-
PROGRAMME EXEMPLE en respectant les
2
et de le diffuser. Il est interdit de copier quer vos coordonnées électroniques.
conditions suivantes :
Personnalisation des champs Votre adresse email ne sera utilisée
• Les PROGRAMMES EXEMPLE peuvent être le contenu de cette LST, en partie ou en
L’exemple “WM Gestion Commandes TDF19” contient plu- inclus dans des applications sauf mention totalité, par quelque moyen que ce soit que par PC SOFT.
sieurs agencements : contraire dans l’article de présentation et/ et quel que soit le but. Il est interdit de
• un agencement pour iPad, mode paysage. dupliquer et/ou diffuser et/ou transmettre Le suppor t technique pour ce
ou le programme fourni.
• un agencement pour Samsung Galaxy Note 3, mode portrait. toute ou partie du CD / DVD. PROGRAMME EXEMPLE est accessible
• Toute mention se rapportant à PC SOFT
• un agencement pour Samsung Galaxy Note 3, mode paysage. à travers le service ‘‘Assistance Directe”
ou à WINDEV ou à WEBDEV devra être Une LST est destinée à l’usage unique de uniquement. Malgré les soins appor-
supprimée, afin qu’aucun doute ne puisse la personne qui y est abonnée.
Par défaut, les champs ont les mêmes propriétés, la même taille, la tés à sa rédaction, ce document n’est
subsister dans l’esprit d’un utilisateur final.
même position, dans tous les agencements. Il est interdit de prêter, louer ou vendre “la pas contractuel. Les copies d’écran sont
LST” (CD et / ou magazine). Il est interdit indicatives. PC SOFT se réserve le droit
L’intérêt des agencements est qu’il est possible de dissocier un champ, de diffuser par quelque moyen que ce soit d’améliorer et de modifier ses produits
pour qu’il ait une taille ou une position différente en fonction de les codes sources accompagnant une LST. à tout moment.
l’agencement. Pour cela, il suffit de choisir l’option “Agencements”
dans le menu contextuel sur le champ concerné.
Une fois le champ “dissocié”, il est possible d’adapter l’interface
de la fenêtre, comme par exemple dans la fenêtre “FEN_Accueil”
ABONNEZ-VOUS !
l’agencement “Samsung Galaxy Note 3, mode portrait” : L14118
• l’histogramme est déplacé en haut à gauche, Tarif modifiable sans préavis Vos Nom & Prénom : .....................................................................................................
• le graphe “Aire” est déplacé à côté de l’histogramme et sa taille Votre Société : ....................................................................................................................
Bulletin d’abonnement à retourner avec Votre Adresse précise : .....................................................................................................................
a été adaptée,
votre règlement à : ....................................................................................................................................
• la zone répétée est placée “dessous” et occupe toute la largeur.
PC SOFT Code Postal : ...................................... Ville : ........................................................
Nos astuces
Lettre du Support Technique Pays : ................................................... Tel : ..........................................................
1. Il est possible de rendre invisible un champ dans un agencement.
BP 44 408 Adresse Email : ...............................................................................................................
Ce qui est très utile lorsqu’une plate-forme ne dispose pas d’assez
34197 MONTPELLIER Cedex 05
de “place” pour afficher tous les champs. À partir du numéro : ..............
France Je choisis un abonnement “LST PC SOFT” pour :
2. Commencez par l’agencement le plus grand et le plus complet
puis créez les autres agencements en réduisant ou en masquant En cas de paiement par carte bancaire,
FRANCE Métropolitaine □ 1 an - 4 N°+ 4 DVD : 159 euros HT; 190,80 euros TTC
des éléments. vous pouvez nous faxer votre abonne-
□ 2 ans - 8 N°+ 8 DVD : 279 euros HT ; 334,80 euros TTC
3. Il est possible d’éditer deux agencements en parallèle par l’option ment au :
“Activer (double vue)” du menu contextuel. +33 (0) 4 67 03 07 87 AUTRE (exp. par avion) □ 1 an - 4 N°+ 4 DVD : 175 euros HT
□ 2 ans - 8 N°+ 8 DVD : 299 euros HT
3 Action Bar et Nav Bar

WINDEV Mobile 19 permet désormais de gérer de manière
Ci joint mon règlement de : ............. Euros TTC
□ Je règle par chèque. J’autorise PC SOFT à débiter sur ma carte VISA/MasterCard
Note : une facture acquittée est systématique-
ment adressée.
□□□
identique le champ “Action Bar” (Android) et le champ “Nav Bar” la somme de : ..................... Euros
(iOS) depuis la fenêtre de description de la fenêtre (voir sujet dédié □ Je règle par Carte Bancaire. Cryptogramme :
□□□□□□□□□□□□□□□□ □□ □□□□
dans ce support de cours, page 65). Numéro complet de la carte : la carte expire : mois année
Lors du Go de l’agencement (ou de la génération de l’application),

WINDEV Mobile utilise alors automatiquement le champ natif
Signature obligatoire du détenteur de la carte :
correspondant ce qui simplifie la réalisation d’applications multi-
Nom du détenteur de la carte :
plateformes iOS et Android.
..........................................................

Support Dec Ours

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Support Dec Ours

Transféré par

Droits d'auteur :

Formats disponibles

TDF Tech 2014

Ce document n’est pas un cours d’auto-formation, mais uni-

Ce document a été réalisé par l’équipe de la LST.

TDF Tech 2014 - www.pcsoft.fr - 3

4 Sommaire 28 Les états : personnalisation d’un cadre, étape par étape

8 PC SOFT à votre service

38 Le champ Tableau de bord : votre avantage stratégique

40 Champ Diagramme de Gantt : création, personnalisation

42 Création dynamique de champs : des IHM adaptatives !

4 - TDF Tech 2014 - www.pcsoft.fr TDF Tech 2014 - www.pcsoft.fr - 5

44 Graphes : Waterfall, animation, image de fond, ...

50 Optimiser le référencement d’un site WEBDEV

54 Réalisation pas à pas d’un bouton CSS

70 Les agencements = 1 fenêtre dans plusieurs plates-formes

6 - TDF Tech 2014 - www.pcsoft.fr TDF Tech 2014 - www.pcsoft.fr - 7

Support Technique déjà la prochaine intervention !

Gratuit Un assistanat vous fait gagner des journées de

Assistance Directe à WINDEV, WEBDEV et WINDEV Mobile, de différents niveaux : Prise

8 - TDF Tech 2014 - www.pcsoft.fr TDF Tech 2014 - www.pcsoft.fr - 9

10 - TDF Tech 2014 - www.pcsoft.fr TDF Tech 2014 - www.pcsoft.fr - 11

12 - TDF Tech 2014 - www.pcsoft.fr TDF Tech 2014 - www.pcsoft.fr - 13

14 - TDF Tech 2014 - www.pcsoft.fr TDF Tech 2014 - www.pcsoft.fr - 15

16 - TDF Tech 2014 - www.pcsoft.fr TDF Tech 2014 - www.pcsoft.fr - 17

4 La politique de réintégration : garantissez un code fonctionnel

Une politique de réintégration définit des

2 L’Administrateur du GDS : l’outil indispensable

L’administrateur du GDS permet de manipuler Définir une politique

18 - TDF Tech 2014 - www.pcsoft.fr TDF Tech 2014 - www.pcsoft.fr - 19

8 Partage d’éléments : des éléments toujours à jour

6 Comparaison et fusion : identifiez et récupérez une modification

Cette fonctionnalité présente plusieurs avan-

20 - TDF Tech 2014 - www.pcsoft.fr TDF Tech 2014 - www.pcsoft.fr - 21

22 - TDF Tech 2014 - www.pcsoft.fr TDF Tech 2014 - www.pcsoft.fr - 23

24 - TDF Tech 2014 - www.pcsoft.fr TDF Tech 2014 - www.pcsoft.fr - 25

L’image de fond de l’état n’est donc plus alté-

Les paramètres de style des tâches du dia-

matiquement activés. En effet, un état peut La page suivante présente la personnalisation

26 - TDF Tech 2014 - www.pcsoft.fr TDF Tech 2014 - www.pcsoft.fr - 27

1 Passer en mode d’édition

2 Les panneaux d’édition

3 Choisir le coin à modifier

28 - TDF Tech 2014 - www.pcsoft.fr TDF Tech 2014 - www.pcsoft.fr - 29

30 - TDF Tech 2014 - www.pcsoft.fr TDF Tech 2014 - www.pcsoft.fr - 31

32 - TDF Tech 2014 - www.pcsoft.fr TDF Tech 2014 - www.pcsoft.fr - 33

34 - TDF Tech 2014 - www.pcsoft.fr TDF Tech 2014 - www.pcsoft.fr - 35

36 - TDF Tech 2014 - www.pcsoft.fr TDF Tech 2014 - www.pcsoft.fr - 37

Widgets par défaut

38 - TDF Tech 2014 - www.pcsoft.fr TDF Tech 2014 - www.pcsoft.fr - 39

CHAMP DIAGRAMME DE GANTT :

40 - TDF Tech 2014 - www.pcsoft.fr TDF Tech 2014 - www.pcsoft.fr - 41

42 - TDF Tech 2014 - www.pcsoft.fr TDF Tech 2014 - www.pcsoft.fr - 43

Pour remplir ce graphe waterfall, les fonctions

44 - TDF Tech 2014 - www.pcsoft.fr TDF Tech 2014 - www.pcsoft.fr - 45

TABLEAU CROISÉ DYNAMIQUE :

UNE AIDE À LA DÉCISION

Par programmation, il est également possible de modifier les axes affichés

Le champ Tableau Croisé Dynamique est un champ décisionnel puissant qui

Des lignes, des colonnes et

Le champ Tableau Croisé Dynamique se

C’est très utile pour récupérer les données

46 - TDF Tech 2014 - www.pcsoft.fr TDF Tech 2014 - www.pcsoft.fr - 47

2 Gestion des utilisateurs et des groupes

3 Configuration des droits

48 - TDF Tech 2014 - www.pcsoft.fr TDF Tech 2014 - www.pcsoft.fr - 49