Vous êtes sur la page 1sur 93

TDF Tech 2012

Support de cours
Le document que vous avez entre les mains n’a pas la fina-
lité de remplacer les documentations techniques ou com-
merciales livrées avec WINDEV, WEBDEV ou WINDEV Mobile.
Ce document n’est pas un cours d’auto-formation, mais
uniquement un support “papier” à la présentation tech-
nique que vous avez suivie.
Ce document a été réalisé par l’équipe de la LST.

TDF TECH 2012 - www.pcsoft.fr - 3


TDF TECH 2012
SOMMAIRE
Retrouvez dans ce support de cours les sujets abordés lors
du TDF Tech 2012.
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 2012.

4 Sommaire
8 PC SOFT à votre service
10 WINDEV
Présentation rapide de WINDEV et de ses fonctionnalités

12 WEBDEV
Présentation rapide de WEBDEV et de ses fonctionnalités

14 WINDEV Mobile
Présentation rapide de WINDEV Mobile et de ses fonctionnalités

18 Organigramme
Le champ organigramme permet de représenter des éléments hiérarchisés entre eux.
Voici un survol des fonctionnalités disponibles pour ce champ.

20 Personnaliser l’affichage d’un champ organigramme


Avec le champ organigramme, il est possible de personnaliser l’affichage pour l’adapter aux éléments affichés (personnes, processus, ...)

22 Le champ ruban : création, conseils et astuces


Le champ ruban permet de présenter un grand nombre de champs organisés de façon logique dans un espace réduit.
Ce champ permet de proposer très simplement un menu complet et surtout contextuel.
Présentation et utilisation de ce champ indispensable.

24 Les états : enchaînement, filigranes, signets, ...


En version 17, les états bénéficient de nouveautés qui améliorent et facilitent leur utilisation : enchaînement d’états, ajout de filigranes
et de signets.

26 Android : menu Action Bar


L’Action Bar est un système de menu disponible à partir d’Android 3.
Ce nouveau système de menu est préconisé pour les applications “tablettes”.

4 - TDF TECH 2012 - www.pcsoft.fr


28 Création d’une application pour tablette Android
Création pas à pas d’une application pour tablette Android : filtrage et affichage de données, gestion de la rotation de l’écran, utilisation
d’un champ Action Bar, intégration de fonctionnalités multitouch et reconnaissance vocale !

32 Android : positionner et personnaliser des marqueurs sur une carte géographique


Il est possible d’utiliser une carte Google avec des marqueurs correspondants à des positions “importantes”.
Dans l’exemple “Android Restaurant TDF17”, il s’agit de la liste (fictive) des restaurants d’une enseigne.

34 Android : accéder à une base de données HyperFileSQL distante


Par défaut, les applications Android utilisent des bases de données au format SQLite stockées en local sur le terminal.
Il est cependant possible d’accéder à des données distantes par une connexion Wifi ou 3G.
Voici un résumé des solutions pour accéder à une base HyperFileSQL Client/Serveur.

36 Schéma : accéder à distance à des données depuis Android ou iOS


38 Kindle Fire
WINDEV Mobile permet de générer facilement des applications pour différentes plates-formes ... même celles non sorties en France !

40 iOS : création rapide d’une interface graphique présentant une liste et un détail
42 iOS : 7 conseils
Sous iOS, le “look and feel” est spécifique. Voici 7 conseils pour le mettre en place dans vos applications WINDEV Mobile.

45 iOS : prise de photos et lecture de QR Codes


L’appareil photo des terminaux Android ou iOS permet non seulement de prendre une photo (de produit par exemple), mais aussi de lire
des QR Codes.

46 iOS : création de l’exécutable et déploiement


Le projet iPhone ou iPad est terminé ?
Il reste maintenant à créer l’exécutable pour le tester sur le simulateur Mac ou sur un vrai terminal !

48 Site WEBDEV : création rapide d’une zone répétée “produits” et d’une fiche référençable
50 Zoom automatique sur une image
Lors de l’affichage d’une “fiche produit”, il est souvent intéressant de permettre à l’utilisateur de voir en détail le produit : le zoom
automatique le fait en un clic.

TDF TECH 2012 - www.pcsoft.fr - 5


TDF TECH 2012
SOMMAIRE (SUITE)

51 Nouvelle gestion des popups


Avec la version 17, il est possible de créer des popups sans utiliser de cellules “cachées” en bas d’une page : la page est plus claire, la
mise en page plus facile.

52 Le champ notation (rating)


Le champ notation permet à la fois aux utilisateurs de noter un produit ou un service, mais aussi d’afficher une note dans une application
WINDEV ou un site WEBDEV.

53 Découverte du zoning
Le mode d’édition par zoning permet de réaliser des mises en page complexes sans utiliser de cellules et en permettant le redimensionnement
a posteriori !

54 PHP : bénéficiez de toutes les nouveautés de WEBDEV


56 Le champ graphe entonnoir : une aide à la décision
Le nouveau type de graphe “entonnoir” permet de visualiser rapidement la répartition de différentes phases d’un processus.

58 HyperFileSQL  : 3 conseils pour optimiser les accès aux bases de données


Dès que les volumes de données deviennent conséquents, le choix des bonnes clés est une garantie de performances et de constances de
ces performances.

60 Les ancrages : 3 cas concrets d’utilisation


Les ancrages permettent de définir le comportement des champs lorsque le navigateur est agrandi ou réduit ou lorsqu’un champ affiche
plus ou moins d’informations.
Cet article présente un résumé de l’utilisation des ancrages ainsi que 3 exemples concrets d’utilisation.

64 Internationalisation et Unicode
WINDEV, WEBDEV et WINDEV Mobile permettent de développer des applications multilingues.
Des outils (WDMsg, WDTrad, ...) permettent également de faciliter la traduction des ressources de vos applications.
Petit guide pas à pas pour traduire vos applications.

68 HTML5  : gestion du “drag and drop”


Pour rendre un site WEBDEV plus interactif, il est possible de mettre en place un “drag and drop” (ou glisser-déplacer) dans les pages.
Effet “Waouh” garanti pour vos sites !

70 Accédez nativement à vos données Outlook et Lotus Notes


Le WLangage dispose d’une centaine de fonctions pour accéder aux données (emails, tâches, rendez-vous, contacts, groupes, documents)
Outlook et Lotus Notes.
Cet article montre comment accéder aux rendez-vous Outlook et à une base de données Lotus Notes.

6 - TDF TECH 2012 - www.pcsoft.fr


72 Imprimez vos plannings et vos agendas simplement
Imprimer un planning ou un agenda avec WINDEV : c’est un clic, c’est automatique et c’est super pratique !

74 Kinect
Interfacez vos applications WINDEV avec un boîtier Kinect et créez dès aujourd’hui les applications de demain !

IV      Annexe : Le champ planning


Disponible en WINDEV et en WEBDEV, le champ planning vous permet de gérer simplement des événements pour de multiples ressources.

VI      Annexe : Style, paramètre, code : personnalisez vos plannings à 100%


En quelques clics, vous pouvez créer un champ planning déjà très riche en fonctionnalités et très graphique.
Mais vous pouvez COMPLÈTEMENT personnaliser le champ planning : couleur, taille, police, affichage de rendez-vous, comportement, etc.

VIII Annexe : Référencement WEBDEV et URL Rewriting


Rappel sur le référencement d’un site et optimisation de ce référencement grâce à l’URL Rewriting

X          Annexe : Audit statique


Utiliser efficacement le mécanisme intégré d’audit statique

XII    Annexe : Audit dynamique


Analyser une application à l’aide de l’audit dynamique

XIV Annexe : Programmation et débogueur


Fonctions de mise au point et de débogage :
• Assertions
• Traces
• Débogueur

XVI Annexe : Déployer une application Android sur Google Play Store


(anciennement “Android Market”)

TDF TECH 2012 - www.pcsoft.fr - 7


PC SOFT À VOTRE SERVICE
N’hésitez pas à nous
contacter : une journée de
consulting est toujours rentable
Consulting
pour vos développements. 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

Support Technique
et déjà la prochaine intervention !

Un assistanat vous fait gagner des journées de

Gratuit développement!
Quelques exemples de sujets traités :
• Simplification du code et mise en place de nouvelles techniques :
Le site du support technique gratuit (www.pcsoft.fr/st) met gratui-
HyperFileSQL Client/Serveur, Socket, Web Services, Composants,
tement à votre disposition un ensemble d’informations destinées à
Patchs, Configurations, …
vous aider à mieux développer :
• Transformation de modules développés avec WINDEV en Services
• les FAQ
Web.
• les téléchargements
• Optimisation de traitements avant la recette de l’application,
• les forums développeurs professionnels (News Group)
validation d’analyse avant de débuter une application.
Vous avez une question ? Contactez le Support Technique Gratuit
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 à 10 Mo sans l’accord préalable de votre destinataire. Sinon
Formation
votre fichier sera refusé par le système. Séminaires de fo
rmation pour W

Assistance Directe
WEBDEV et WIN INDEV,
DEV MOBILE
PC SO FT organise à Paris
, chaque semaine,
à WINDEV, WEBD des séminaires de
EV et WINDEV Mob formation
en main, Perfecti ile, de différents
Un complément efficace du onnement, Expert, niveaux : Prise
Client/Serveur, ..
Support Technique Gratuit Ces séminaires, .
animés par des
tés, permettent ingénieurs PC SO
Tout projet important ou stratégique doit bénéficier d’une “Assistance de découvrir et FT expérimen-
WINDEV Mobile se de maîtriser WIND
Directe” ! lon un plan effic EV, WEBDEV et
Consultez le calen ace.
L’Assistance Directe permet d’une part de bénéficier d’un contact drier des sémina
des stages et les ires joint à cette
contenus pédago LST (le détail
téléphonique immédiat avec un ingénieur spécialisé, et d’autre part site Web : www. giques sont dispo
pcsoft.fr), vous tro nibles sur notre
de choisir les sujets à traiter, et ce pour une durée que vous définissez votre expérience uverez LA forma
et à votre besoin. tion adaptée à
vous-même. Cela vous permet de résoudre immédiatement les sujets
qui vous posent problème. Suivre une forma
tion organisée pa
c’est se donner r PC SOFT est toujo
les moyens de ma urs rentable  :
Le contact téléphonique est garanti sous 8 heures ouvrables, ce qui les meilleurs délai îtriser WINDEV et
s, ou d’en découv WEBDEV dans
vous permet une meilleure efficacité. puissante ! rir la face cachée
, encore plus
Ce service est disponible sur abonnement. Inscrivez-vous vit
e!
Contactez le service commercial pour plus d’informations (Fabrice Ces séminaires pe
uvent également
CHAMBON au 04-67-032-032). en France et à l’é être organisés da
tranger. ns vos locaux,
Le montant de ce
s formations est dé
ductible du “1,5 
% Formation”.
8 - LA LETTRE DU SUPPORT TECHNIQUE PC SOFT
Présentation

TDF TECH 2012 - www.pcsoft.fr - 9


WINDEV
Présentation rapide de WINDEV
et de ses fonctionnalités

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

10 - TDF TECH 2012 - www.pcsoft.fr


TDF TECH 2012 - www.pcsoft.fr - 11
WEBDEV
Présentation rapide de WEBDEV
et de ses fonctionnalités

W
EBDEV est un AGL (Atelier de un puissant débogueur. du développement (création de pages,
Génie Logiciel) orienté déve- • Un éditeur de styles incluant police, cou- traitements, états, etc.), sans oublier les
loppement de sites Intranet leur, position, etc. sauvegardes.
et Internet. • Un éditeur de requêtes pour les sélections
WEBDEV permet de développer tout type d’enregistrements dans les fichiers. Les Concepts Internet
de sites dynamiques incluant l’accès à • Un éditeur d’états.
des bases de données. Il permet aussi de • Un éditeur de dossier technique reprenant Les différents services de
développer des sites semi-dynamiques et intégralement toutes les informations tech- l’Internet
statiques ou PHP. niques de votre projet.
Le terme Internet regroupe plusieurs services
• Un éditeur d’installation.
Présentation de * accès natif optionnel, ** accès natif
d’utilisation différente :
• FTP (File Transfer Protocol) est un ser-
WEBDEV inclus
vice permettant de transférer des fichiers
WEBDEV est composé de différents éditeurs : L’éditeur d’installation assure la mise en d’un ordinateur vers un autre à travers
• Un éditeur de projet permettant de visua- place des sites créés, ainsi que leur main- Internet.
liser et d’agir sur le graphe du projet. tenance. Cet outil permet de réaliser une • SMTP (Simple Mail Transfer Protocol) per-
• Un éditeur de pages. installation sur le serveur via FTP ou par met d’envoyer des messages ou mails à un
• Un éditeur d’analyses permettant l’accès à média physique (CD, Zip, etc.). utilisateur défini. Chaque utilisateur doit
tout type de base de données (HyperFileSQL, Des outils facilitant le développement disposer d’une adresse Email qui lui sert
HyperFileSQL Client/Serveur, MySQL**, sont également fournis (WDMAP, WDOUTIL, de boîte aux lettres.
xBase, AS/400*, Oracle*, SQL Server*, WDSQL, etc.) ainsi que de nombreux exem- • HTTP (HyperText Transfer Protocol). HTTP
Access**, OLE DB, etc.). ples et assistants réutilisables. est un protocole de niveau application qui
• Un éditeur de code évolué (avec assis- Les principaux éditeurs sont utilisés, depuis est utilisé pour le transfert de pages sur
tants, vérification du code saisi, coloration la définition d’une analyse jusqu’à l’ins- Internet.
syntaxique, aide contextuelle, …) incluant tallation, en passant par toutes les phases Chacun de ces services nécessite un gestion-

12 - TDF TECH 2012 - www.pcsoft.fr


naire de services installé sur un serveur : pas dynamiquement en fonction d’un choix Principe de programmation
• Le gestionnaire de services FTP gère l’hé- de l’utilisateur. WEBDEV
bergement des fichiers, les droits d’utilisa- • Un site semi-dynamique est un site statique Le débit entre le serveur Internet et le poste
tion des fichiers et la réponse aux demandes composé de pages conçues à l’avance mais client est plus lent qu’avec un réseau local
en provenance des autres postes. enrichies par une base de données. Dans ce classique. Les échanges de données entre le
• Le gestionnaire de services SMTP prend en cas, le contenu des pages n’évoluera pas poste client et le serveur doivent donc être
charge les demandes d’envoi de messages et dynamiquement en fonction d’un choix de réduits pour que le site puisse s’exécuter
le routage vers les serveurs POP (réception l’utilisateur. L’un des meilleurs exemples est sans ralentissement. WEBDEV permet de
des messages) concernés. un catalogue de pièces détachées. différencier les traitements exécutés sur
• Le gestionnaire Web (www) permet • Un site dynamique est constitué de pages le serveur et les traitements exécutés sur
l’hébergement des pages et répond aux enrichies de données provenant d’une base le poste client.
demandes de consultation de la part des de données. Il est nécessaire d’exécuter
postes client. des traitements d’accès aux données sur le 1. Les traitements sur le
serveur permettant de constituer la page. serveur
Le Web en détail
Les pages Web sont visualisées sur un poste Les traitements exécutés sur le serveur
WEBDEV permet de développer des sites
par l’intermédiaire d’un sont les traitements principaux de l’ap-
navigateur Web (Internet plication. Ils concernent
Explorer, FireFox, Chrome, la gestion de la base de
Safari, Opera, etc.). données (HyperFileSQL et
HyperFileSQL Client/Serveur,
Le navigateur interprète
xBase, AS/400, Oracle, SQL
le contenu des fichiers au
Server, Access, OLE DB, etc.)
format HTML décrivant les
et les traitements de calcul.
pages. On parle de pages
Ces traitements sont écrits
HTML.
en WLangage.
WEBDEV génère automati-
quement le code HTML et 2. Les traitements
Javascript.
sur le poste client
Il est possible d’afficher
Les traitements exécutés
directement une page dans
sur le poste client sont les
un navigateur en tapant son
traitements de contrôle de
URL dans la zone adresse du
saisie, de vérification qui
navigateur.
ne nécessitent pas d’accé-
L’URL (Uniform Resource der au serveur. Ces traite-
Locator) correspond au che- ments utilisent uniquement
min d’accès de la page sur le les informations contenues
serveur qui l’héberge, par dans la page. Ces traite-
exemple : ments peuvent être écrits
http://www.monserveur.com/page3.htm dynamiques composés de pages, de traite-
en Javascript ou WLangage. Dans ce der-
ments serveur (accès aux bases de données,
Si l’URL ne correspond pas à une adresse nier cas, WEBDEV se charge de convertir
calculs, etc.) et de traitements exécutés
valide, une erreur de connexion est retour- automatiquement le code WLangage en
par le navigateur (contrôles, traitements
née dans l’écran du navigateur. Javascript pour qu’il puisse être exécuté
répétitifs, etc.).
par le navigateur.
Si l’URL est valide, la page demandée s’af- WEBDEV permet aussi de développer des
fiche dans le navigateur. L’utilisateur peut sites statiques et semi-dynamiques.
3. Administrateur WEBDEV
alors déclencher une action en cliquant
sur un lien ou un bouton. La requête cor- Fonctionnement d’un L’administrateur WEBDEV est un exécutable
installé sur le serveur.
respondante est alors envoyée au serveur site WEBDEV L’administrateur permet de configurer le
qui l’analyse.
Un site WEBDEV hébergé sur un serveur peut nombre de connexions autorisées en même
Le lien permet de lancer le chargement être exécuté en appelant une URL particu- temps pour le serveur, par site, par utili-
d’une autre page ou bien de lancer une lière depuis un navigateur. Par exemple : sateur. Il permet aussi de fixer le temps
application Web. “http://www.monserveur.com/monappli”. maximum d’exécution d’une requête et
le temps limite pour la déconnexion des
Le serveur d’application construit utilisateurs inactifs.
Site statique, dynamiquement la première page du site L’administrateur peut à tout moment affi-
semi-dynamique ou et l’envoie au navigateur par l’intermédiaire cher la liste des utilisateurs connectés au
dynamique ? du serveur Web. site.

•  Le site statique est composé de pages


conçues à l’avance de manière définitive.
Dans ce cas, le contenu des pages n’évoluera

TDF TECH 2012 - www.pcsoft.fr - 13


WINDEV MOBILE
Présentation rapide de WINDEV Mobile
et de ses fonctionnalités

W
INDEV Mobile permet de déve- Environnement Des outils facilitant le développement
lopper simplement tout type sont également fournis (WDREGISTRE,
d’applications destinées à être L’environnement de développement intégré WDCAPTURE, WDSYNCHRO, ...) ainsi
utilisées sur un Pocket PC, un de WINDEV Mobile se compose de différents que de nombreux exemples et assistants
Smartphone, un téléphone ou une tablette éditeurs : réutilisables.
Android, un téléphone Windows Phone 7, un • Un éditeur de projet permettant de visua-
Des centres de contrôle permettent la ges-
iPhone ou un iPad et la plupart des terminaux liser et d’agir sur le graphe du projet.
tion du cycle de vie de vos applications ainsi
mobiles (Symbol, Psion, ...). • Un éditeur d’analyses permettant l’accès à
que leur administration.
tout type de base de données (HyperFileSQL,
HyperFileSQL Client/Serveur,...).
Une aide en ligne vous guide tout au long
Présentation • Un éditeur UML permettant une modélisa-
du développement de votre application.
tion objet de vos données et traitements.
Les applications développées peuvent accé- Cette aide inclut également une aide à la
• Un éditeur d’IHM avec correcteur d’inter-
der à des bases de données. correction d’erreurs.
face en temps réel.
WINDEV Mobile inclut un puissant moteur de • Un éditeur de code évolué (avec assis-
base de données : HyperFileSQL Mobile. Le moteur HyperFileSQL Mobile sera utilisé
tants, vérification du code saisi, coloration
pour les fichiers de données de l’application
Il est conseillé d’utiliser HyperFileSQL pour syntaxique, aide contextuelle) incluant un
(ou SQLite sur Android).
vos applications afin d’obtenir les meil- puissant débogueur
leures performances dans vos traitements • Un éditeur de requêtes pour les sélections
L’utilisation d’autres moteurs de base de
de fichiers. Une version HyperFileSQL Client/ d’enregistrements dans les fichiers.
données est également possible sur le même
Serveur est aussi disponible. • Un éditeur d’états.
principe.
• 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.

14 - TDF TECH 2012 - www.pcsoft.fr


TDF TECH 2012 - www.pcsoft.fr - 15
16 - TDF TECH 2012 - www.pcsoft.fr
Support de cours

TDF TECH 2012 - www.pcsoft.fr - 17


ORGANIGRAMME
Le champ organigramme permet de représenter des éléments hiérarchisés
entre eux. Voici un survol des fonctionnalités disponibles pour ce champ.

Projet d’illustration également possible d’ajouter un champ • le type de flèche qui relie les différents
par le menu “Insertion .. Champ .. Champ éléments.
Le projet utilisé pour illustrer ce sujet est Organigramme”.
“WD Organigramme TDF17” (présent sur Toutes les options peuvent bien évidemment
le DVD). Le champ organigramme peut être rempli par être modifiées par la suite dans la fenêtre
programmation ou se baser sur une source de description du champ organigramme.
Présentation du de données existante (fichier ou requête).
champ FAA du champ
Si le champ organigramme est basé sur
Le champ organigramme permet de repré- une source de données, il est nécessaire Le champ organigramme dispose de plu-
senter des éléments hiérarchisés entre eux. d’indiquer pour chaque information d’un sieurs FAA (Fonctionnalités Automatiques
Par exemple : élément organigramme la rubrique qui lui de l’Application).
• les collaborateurs de la société, en fonc- est associée.
tion de leur hiérarchie. L’utilisateur peut en effet :
• les différentes filiales d’un groupe, avec Par défaut, WINDEV détecte automatique- • zoomer en utilisant le raccourci “Ctrl +
leurs dépendances. ment les informations dont le nom corres- roulette souris”.
• les différentes étapes d’un processus de pond [Fig. 1]. • se déplacer dans l’organigramme avec la
fabrication. souris. Deux “range slider” sont également
• ... Attention : il est important de renseigner disponibles sur les côtés du champ pour
correctement la liaison récursive qui définit faciliter le zoom et le déplacement.
Création d’un champ la hiérarchie de l’organigramme. • enregistrer l’organigramme dans une
image (pour l’imprimer par exemple).
Pour créer un champ organigramme, il Cette fonctionnalité est également dis-
L’assistant de création du champ permet
suffit d’utiliser la barre d’outils et de ponible par programmation via la fonction
également de choisir :
dropper le champ dans la fenêtre. Il est OrgaSauveImage.
• l’orientation du champ,

18 - TDF TECH 2012 - www.pcsoft.fr


ORGA_FINDER, exemple, le premier élément de l’organi-
nIndiceParent, UnPays) gramme est donc “Absolue” qui est l’élément
FIN final du schéma).
Les éléments “fils” du schéma doivent donc
être définis comme éléments “parents”
Personnaliser dans l’organigramme (dans notre exemple,
l’affichage des l’étape de “Chauffe, refroidissement, filtre”
éléments est définie comme fils de “Absolue”, alors
qu’il s’agit de l’étape précédente dans le
WINDEV permet de personnaliser simple- schéma).
ment l’affichage des éléments d’un champ • afficher l’organigramme de “droite à
organigramme. gauche” (ou de “bas en haut”) pour “réta-
blir” le sens correct du schéma.
La personnalisation de l’affichage d’un
organigramme est détaillée dans les pages 
suivantes de ce support de cours.
Fig. 2
Afficher un processus
de fabrication
L’organigramme “ORGA_SCHEMA” (présent
sur le plan 3 de la fenêtre de l’exemple) pro-
pose l’affichage d’un schéma : les étapes du
processus de fabrication du parfum [Fig. 2].
Pour réaliser ce type de schéma, le champ
Manipuler un organigramme est tout adapté, mais néces-
organigramme par site des paramétrages particuliers.
programmation
Dans un champ organigramme, chaque élé-
Pour manipuler un champ organigramme ment ne peut avoir qu’un seul et unique
par programmation, le WLangage met à parent.
disposition : Dans un schéma de processus, la représen-
• la famille de fonction OrgaXXX : tation est en général l’inverse : à partir de
OrgaAjoute, OrgaAffiche, OrgaSupprime, plusieurs éléments (parents), un élément
etc. est créé (fils).
• le type OrgaElement, qui représente un
élément de l’organigramme. Il faut donc créer un champ organigramme
inversé. Pour cela, il suffit de :
L’organigramme “ORGA_Finder” (situé sur le • définir les éléments dans l’ordre inverse
plan 2 de la fenêtre de l’exemple) présente du processus.
un exemple d’organigramme rempli par Le premier élément “parent” doit être le
programmation. dernier élément du schéma (dans notre

// Remplit le type OrgaElement


// avec les informations Fig. 1
// du PAYS
UnPays est un OrgaElément
UnPays.FiDessin = ...
“FI_VUEORGAELEMENT_PAYS”
UnPays.ID = ...
“PA”+PaysAgence.IDPaysAgence
UnPays.Titre = PaysAgence.Nom
UnPays.SousTitre = ...
REQ_TotalAgencePays.Total+
“ agence” + ...
UnPays.Image = ...
PaysAgence.Image
// Ajoute le pays
SI nIndiceParent = 0 ALORS
nPaysMère=OrgaAjoute(...
ORGA_FINDER, UnPays)
SINON
nPaysMère=OrgaAjouteFils(...

TDF TECH 2012 - www.pcsoft.fr - 19


Avec le champ
organigramme,
il est possible
de personnaliser
l’affichage pour
l’adapter aux
éléments affichés
(personnes,
processus, ...)

PERSONNALISER L’AFFICHAGE
D’UN CHAMP ORGANIGRAMME
Projet d’illustration réalisé directement depuis la description Dans notre exemple, l’organigramme hié-
du champ organigramme en sélectionnant rarchique (plan 1) utilise la fenêtre interne
Le projet utilisé pour illustrer ce sujet est comme fenêtre interne pour les éléments “FI_VUEORGAELEMENT_PERSONNEL”. Cette
“WD Organigramme TDF17” (présent sur “Fenêtre prédéfini - Ajouter et person- fenêtre interne a été personnalisée pour
le DVD). naliser la fenêtre prédéfinie” [Fig. 1]. La afficher des informations supplémentaires
fenêtre “FI_WinDevVueOrgaElement” sera (email, numéro de téléphone) ainsi qu’un
alors ajoutée au projet. bouton pour envoyer un email au collabora-
Importer la fenêtre teur directement depuis le champ.
interne 2. Il est également possible d’importer cette

Sur le même principe que pour les champs


fenêtre directement à partir du fichier phy- Personnaliser le code et l’in-
sique. Cette fenêtre est disponible dans le
agenda et planning, l’affichage de chaque
répertoire “Programmes\Données\Fenêtres
terface
élément de l’organigramme repose sur une Lorsque la fenêtre interne est importée
prédéfinies\FAA” du répertoire d’installation
fenêtre interne spécifique. [Fig. 2], il est possible de tout personnaliser
de WINDEV. L’import d’un élément dans le
et surtout d’ajouter de nouveaux champs,
projet peut être réalisé par le menu “Fichier
Cette fenêtre interne prédéfinie, livrée pour afficher davantage d’informations.
.. Importer .. Des éléments WINDEV et leurs
avec WINDEV, peut être importée dans un
dépendances”.
projet. Il est alors possible de personnali- Dans ce cas, il est également nécessaire
ser complètement la fenêtre pour avoir le de modifier le code de la fenêtre interne.
Dans l’exemple “WD Organigramme TDF17”,
rendu souhaité.
chaque organigramme présenté utilise une
Par exemple, pour la fenêtre interne qui est
fenêtre interne spécifique, qui est adaptée
Pour importer cette fenêtre, deux solutions : utilisée dans l’affichage de l’organigramme
au rendu souhaité.
1. L’import de la fenêtre interne peut être hiérarchique, les modifications suivantes

20 - TDF TECH 2012 - www.pcsoft.fr


ont été appliquées à la fenêtre interne Modifier la forme de l’élément Mieux encore : il est possible, dans un même
standard : Le type de variable OrgaElément permet champ organigramme, d’utiliser plusieurs
1. Changement du mode d’affichage de également de modifier visuellement le rendu fenêtres internes.
l’image. de l’élément via la propriété ImageFond. Cette fonctionnalité est particulièrement
2. Modification des styles des champs déjà utile pour les organigrammes affichant
Cette propriété permet en effet de définir
en place (titre et contenu). des éléments de différents types, qui ont
l’image qui sera affichée en fond de la
3. Ajout de libellés pour afficher le téléphone des informations différentes.
fenêtre interne. Il est alors possible d’affi-
et l’email du collaborateur affiché.
cher des formes par exemple : c’est le cas
Cette fonctionnalité est accessible en utili-
dans l’organigramme “ORGA_SCHEMA”.
Afficher des informations sup- sant la propriété FIDessin du type de variable
plémentaires // Absolue
OrgaElément.
Dans la fenêtre interne, les informations // (affiché dans un carré)
affichées ne sont pas contenues dans le Absolue est un OrgaElément Cette propriété permet de définir la fenêtre
type de variable OrgaElément : ce sont des Absolue.Contenu = “Absolue” interne qui doit être utilisée par le champ
informations spécifiques à l’application en Absolue.ImageFond =... organigramme pour l’élément.
cours. Il est donc nécessaire de rechercher “orgaschema_02_Fuschia.png”
ces informations. nParent = OrgaAjoute(... Cette méthode aurait pu être utilisée pour
ORGA_SCHEMA, Absolue) l’organigramme de processus de fabrication,
Pour effectuer simplement le lien entre un // Processus en utilisant :
// (affiché dans un losange) • une fenêtre interne pour les éléments
élément de l’organigramme et une entité
Chauffe est un OrgaElément avec un carré en image de fond et un libellé
lambda de l’application (un collaborateur,
Chauffe.Contenu = ...
une filiale, etc.), il suffit lors de l’ajout d’un indiquant quantité de produits par exemple.
“Chauffe, refroidissement,
OrgaElément, de renseigner la propriété ID filtrage” • une fenêtre interne pour les traitements
avec l’identifiant de l’entité (typiquement, Chauffe.ImageFond = ... avec un losange en image de fond et un
un identifiant automatique de fichier) si le “orgaschema_01.png” libellé indiquant une durée de traitement
remplissage est effectué par programmation. nParent = OrgaAjouteFils(... ou des informations sur la ou les machines
ORGA_SCHEMA, nParent, Chauffe) utilisées.
Pour un organigramme basé sur un fichier,
la propriété ID est automatiquement rensei- 
gnée à partir des clés de la liaison récursive
Utiliser une fenêtre
définie. interne
Chaque champ organigramme, dans une
Dans le code de la fenêtre interne, l’élé-
même application, peut donc avoir un rendu
ment à afficher est passé en paramètre via
différent et unique, qui lui est propre.
une variable OrgaElément. Il suffit alors
d’utiliser la propriété ID pour rechercher
toutes les informations annexes à afficher
via cet identifiant. Fig. 1

Dans notre exemple [Fig. 3], l’OrgaElément


contient les informations sur un membre
du personnel.
La propriété ID contient l’identifiant du
fichier “Personnel”.
Il suffit alors de rechercher les informations
souhaitées dans les autres fichiers de la base
via cet identifiant.

// Recherche le collaborateur
// à partir de son ID
HLitRecherchePremier(Personnel,
IDPersonnel,
Fig. 2 Fig. 3
gOrgaElement.ID)
// Remplit les informations
// du collaborateur
LIB_ORGAELEMENT_TELEPHONE =
Personnel.Téléphone
BTN_ORGAELEMENT_EMAIL..
Libellé = Personnel.Email
LIB_ORGAELEMENT_TITRE =
Personnel.Nom+ESP+
Personnel.Prénom

TDF TECH 2012 - www.pcsoft.fr - 21


LE CHAMP RUBAN : CRÉATION,
CONSEILS ET ASTUCES
Le champ ruban permet de présenter un grand nombre de
champs organisés de façon logique dans un espace réduit.
Ce champ permet de proposer très simplement un menu
complet et surtout contextuel.
Présentation et utilisation de ce champ indispensable.

Projet d’illustration • le champ ruban est contextuel. Cela Création d’un champ
signifie que selon le positionnement de
Le projet utilisé pour illustrer ce sujet est l’utilisateur, le champ ruban se positionne
ruban
“WD Ruban TDF17” (présent sur le DVD). automatiquement sur le volet qui contient Pour créer un champ ruban, comme pour tous
les options adaptées. Bien évidemment, il les champs dans WINDEV, il suffit d’utiliser
Présentation du est nécessaire de programmer cet affichage la barre d’outils et de dropper le champ
champ contextuel. dans la fenêtre. Il est également possible
d’ajouter un champ par le menu “Insertion
Un champ ruban se présente sous la forme Le champ ruban se décompose en 2 types .. Ruban”.
d’un large bandeau qui occupe toute la d’éléments.
largeur de la fenêtre. 1. Les volets, qui correspondent aux menus La gestion (ajout, modification, suppression)
généraux de l’application (Fichier, Affichage, des volets et des regroupements s’effectue
Ce champ offre plusieurs avantages à l’uti- Options, etc.). Les volets sont affichés en depuis la fenêtre de description du champ,
lisateur par rapport à un menu classique : haut du ruban. Chaque volet contient un ou onglet “Général” [Fig. 1].
• l’utilisateur peut facilement visualiser plusieurs regroupements.
toutes les options disponibles en parcou- Lorsque les volets et regroupements sont
2. Les regroupements, qui permettent de
rant simplement les volets. Dans un menu définis, il suffit d’ajouter les champs dans
regrouper différents champs portant sur
standard, il est nécessaire de parcourir les les regroupements, comme pour un champ
une même fonctionnalité.
menus et sous-menus. conteneur standard.
• le champ ruban est un champ visuel, qui Il est possible d’ajouter tout type de champs
peut contenir différents champs (un bouton souhaité : bouton, combo, interrupteur,
d’accès, une jauge, etc.). champ de saisie, champ notation, jauge, etc.

22 - TDF TECH 2012 - www.pcsoft.fr


Manipuler un ruban est nécessaire. Pour ajouter ce bouton, il suffit de cocher
l’option “Avec bouton (traitement de clic)”
par programmation // Rend visible le volet 5 de la description du regroupement. Le code
RUBAN_MENU[5]..Visible = Vrai qui sera exécuté lors du clic sur ce bouton
Accéder aux différents élé- est le code du traitement “Clic” du regrou-
ments du champ ruban Bien entendu dans ce cas, il est néces- pement.
Par programmation, les modifications saire de repasser le volet en “invisible” le
peuvent concerner : moment venu. 2. Une fonctionnalité très utilisée dans les
• le champ ruban lui-même. Il est possible rubans est le bouton à flèche. L’avantage de
de modifier ses propriétés, par exemple pour Transformer un menu ce type de bouton (ici dans le ruban) est qu’il
le rendre invisible ou l’enrouler. Un champ principal en champ permet de hiérarchiser encore les actions.
ruban enroulé occupe moins de place : seuls
les volets restent visibles. Le champ se ruban Pour transformer un champ bouton en bou-
déroule automatiquement lorsque l’utili- Pour faciliter le passage d’un menu principal ton à flèche, il suffit de modifier l’option
sateur clique sur un des volets. standard à un champ ruban, WINDEV 17 “Type de flèche” de l’onglet “IHM” de la
dispose d’une option “Champ .. Permuter description du bouton.
// Enroule le champ ruban .. Menu principal vers Ruban”. Le champ
RUBAN_MENU..Enroulé = Vrai Trois types de flèches sont disponibles :
ruban ainsi créé peut bien évidemment être
modifié comme un champ ruban classique. • “aucune flèche” (bouton standard),
• les volets. Pour accéder à un volet, il suffit • “bouton flèche” : un clic sur le bouton ou
d’utiliser la syntaxe suivante : sur la flèche exécutera le même code (le
Remarque :
Cette fonctionnalité est disponible à partir code de clic du bouton),
<Champ ruban>[<indice>]
de la version 170068 de WINDEV. • “bouton avec flèche distincte” : le bouton
et la flèche ont deux traitements distincts. Il
Il est alors possible de modifier la visibilité
ou le libellé d’un volet par exemple. Trucs et Astuces est ainsi possible d’exécuter un code lors du
clic sur la flèche (dérouler un menu contex-
// Modifie le libellé du 1. Il est possible d’ajouter un bouton sur tuel par exemple) et un code différent lors
// volet “Messages” pour les regroupements dans la barre de titre du clic sur le bouton (exécuter la dernière
// indiquer le nombre de du regroupement, pour exécuter une action option sélectionnée par exemple).
// messages en attente supplémentaire.
RUBAN_MENU[1]..Libellé = ...
ChaîneConstruit(... 
Ce bouton peut par exemple permettre d’af-
“Messages (%1/%2)”,
ficher un menu contextuel ou une fenêtre
nNbEnAttente, nNbTotal)
détaillée des options présentées dans le
regroupement.
• les regroupements. Pour accéder à un
regroupement, il suffit d’utiliser la syntaxe
suivante :

<Champ ruban>.<Regroupement>

Fig. 1
Rendre le ruban contextuel
L’un des avantages du champ ruban est de
proposer un affichage contextuel des options
disponibles.

Pour rendre un menu ruban contextuel, il


suffit de le manipuler par programmation
en modifiant le volet actif du champ ruban.
Il est possible de :
• affecter l’indice du volet directement au
champ ruban :

// Positionne le champ ruban


// sur le 5ème volet
RUBAN_MENU = 5

• modifier la visibilité d’un volet. Si le volet


contient des fonctionnalités très spécifiques
à afficher uniquement dans un cas particu-
lier, il peut être intéressant de cacher ce
volet par défaut et de l’afficher quand cela

TDF TECH 2012 - www.pcsoft.fr - 23


En version 17, les
états bénéficient
de nouveautés
qui améliorent
et facilitent
leur utilisation :
enchaînement
d’états, ajout de
filigranes et de
signets.

LES ÉTATS : ENCHAÎNEMENT,


FILIGRANES, SIGNETS, ...
Projet d’illustration • iEnchaînementImprime qui déclenche tions WLangage fListeFichier) du répertoire
l’impression de l’enchaînement d’états. de “États & Requêtes” (accessible via la
Le projet utilisé pour illustrer ce sujet est fonction fRepEtatsEtRequêtes).
// Aperçu avant impression
l’exemple “WD Etats TDF17” (présent sur iAperçu(iapZoom100) // Liste les états de
le DVD). // l’utilisateur
// Parcours des états choisis
POUR TOUTE LIGNE nLigne fListeFichier(...
Enchaînements d’états DE TABLE_ETATS_CHOISIS fRepEtatsEtRequêtes(...
iEnchaînementAjoute(... repUtilisateur))
par programmation TABLE_ETATS_CHOISIS.
L’enchaînement des états par programma- COL_Etat[nLigne]) Filigrane
tion permet d’enchaîner autant d’états que FIN
souhaités, dynamiquement à l’exécution afin // Lance l’impression Un filigrane est un texte imprimé en surim-
de les imprimer dans un même document. iEnchaînementImprime() pression d’un état. Il permet généralement
d’ajouter une indication sur le document :
Il est par exemple possible de proposer à
Notre astuce confidentiel, duplicata, ...
l’utilisateur les états qu’il souhaite imprimer L’ajout d’un filigrane dans un état est pos-
“Etats & Requêtes” est un logiciel librement
dans un ordre particulier. sible par programmation ou directement
diffusable avec les applications WINDEV
C’est le cas de la fenêtre “FEN_CHOIX_ depuis l’aperçu avant impression.
qui permet aux utilisateurs de créer leurs
IMPRESSION” de l’exemple.
propres états et leurs propres requêtes.
Pour réaliser un enchaînement d’états, le
Par programmation
Il peut donc être intéressant de proposer
WLangage met à disposition deux ordres : L’ajout d’un filigrane par programmation
aux utilisateurs les états qu’ils ont eux-
• iEnchaînementAjoute qui permet d’ajou- s’effectue à l’aide :
mêmes créés.
ter un état dans l’enchaînement, • du type Filigrane. Ce type permet de
Il suffit pour cela de lister les fichiers (fonc-
paramétrer le filigrane : orientation, posi-

24 - TDF TECH 2012 - www.pcsoft.fr


Les états : quels états pour
quels besoins ?
Retrouvez un article consacré à la bonne utilisation
des différents types d’états dans la LST 87.

tion, couleur, opacité, ... Dans l’état “ETAT_Catalogue”, l’ajout Fusion de PDF
• de la fonction iParamètreFiligrane. Il est du signet est effectué dans la rupture La fonction WLangage PDFFusionne permet
possible de préciser directement un texte “Catégorie”. de fusionner des fichiers PDF, qu’ils aient
à la fonction pour obtenir un filigrane avec // Ajout du signet sur été générés avec WINDEV ou non.
les paramètres par défaut. // la catégorie Cette fonction propose deux syntaxes :
// Paramètre le filigrane iAjouteSignet(... • une syntaxe à laquelle on donne directe-
MonFiligrane est un Filigrane PRODUIT.LibCatégorie, ment la liste des fichiers PDF à fusionner.
MonFiligrane.Angle = 45 PRODUIT.LibCatégorie)
// Fusion de PDF
MonFiligrane.Opacité = 75
PDFFusionne(sFichierFinal,
MonFiligrane.Position = ... Notre astuce sFichier,sFichierCGV)
iCentreH +iCentreV Si l’utilisation de signets est conseillée sur
MonFiligrane.Taille = ... les documents de taille importante, l’uti- • une syntaxe qui attend en paramètre un
iAutomatique lisation abusive de signets risque vite de tableau de chaînes. Il est alors possible
MonFiligrane.Texte = ... de remplir un tableau avec les listes des
perdre l’utilisateur.
“Confidentiel” chemins de fichiers PDF. Cette syntaxe est
// Impression d’un filigrane N’hésitez pas à utiliser des ruptures dans
utile lorsque le nombre de fichiers PDF n’est
// paramétré vos états pour les structurer et à ajouter
pas connu à l’avance.
iParamètreFiligrane(... des signets dans ces ruptures.
iFiligraneImpression, // Liste les fichiers PDF
MonFiligrane) PDF : RTF et fusion // de “C:\Mes Documents”
// Imprime l’état sListePDF =...
iImprimeEtat(... fListeFichier(...
ETAT_STATISTIQUES_VENTE) Images et tableaux en RTF “C:\Mes documents\*.PDF”)
... Lors de l’impression d’états contenant du // Conversion
// Impression d’un filigrane RTF avec des images et/ou des tableaux, il ChaîneVersTableau(sListePDF,
// avec paramètre par défaut est conseillé d’utiliser la fonction iPara- tabFichiersPDF, RC)
iParamètreFiligrane(... mètre avec la constante iRTFAvecImage- // Fusionne tous les PDFs
“Confidentiel”) sEtTableaux. PDFFusionne(sFichierFinal,
// Imprime l’état tabFichiersPDF)
iImprimeEtat(... // Gestion du RTF par WINDEV
iParamètre(... Remarque : pour fusionner des PDF ayant un
ETAT_STATISTIQUES_VENTE)
iRTFAvecImagesEtTableaux,Vrai) mot de passe, utilisez la fonction WLangage
PDFFusionneAvecMotDePasse.
Depuis l’aperçu Ce paramétrage permet d’avoir un rendu RTF
La fenêtre d’aperçu avant impression offre géré par WINDEV, optimisé pour ce contenu.

également la possibilité d’ajouter un fili-
grane. Fig. 1
Cette fonctionnalité est particulièrement
utile si un utilisateur souhaite réimprimer
un duplicata de facture pour son client par
exemple : il lui suffit d’ajouter un filigrane
et de réimprimer l’état.
L’utilisateur peut alors facilement para-
métrer son filigrane via la fenêtre [Fig. 1].

Signets
Les signets permettent d’accéder rapide-
ment à une position définie de l’état, ce qui
facilite la navigation de l’utilisateur dans
les éditions de taille importante (comme
les catalogues).
Important : lors d’un export au format
PDF, les signets de l’état sont également
exportés !
Pour créer un signet dans un état, il suffit
d’utiliser la fonction WLangage iAjouteSi-
gnet. Cette fonction peut être utilisée dans
n’importe quel code de l’état : rupture,
corps, champs, ...
Cette fonction attend en paramètre ;
• l’identifiant du signet,
• le libellé du signet,
• l’identifiant du signet parent (optionnel).

TDF TECH 2012 - www.pcsoft.fr - 25


MENU ACTION BAR
L’Action Bar est un système de menu disponible à partir d’Android 3. Ce
nouveau système de menu est préconisé pour les applications “tablettes”.

Projet d’illustration Par défaut, l’Action Bar contient l’icône Chaque volet peut être associé à une fenêtre
de l’application et le titre de la fenêtre. interne, ce qui permet d’afficher un contenu
Le projet utilisé pour illustrer ce sujet est différent selon le volet sélectionné (indiqué
l’exemple “Android Restaurant TDF17” (pré- par un liseré bleu sous le libellé).
sent sur le DVD).

Le champ Action Bar


L’Action Bar est le nouveau système de
menu disponible à partir d’Android 3. Ce
nouveau système a pour objectif de rendre Gestion des volets
les interfaces plus intuitives et les choix
immédiatement visibles. Ajout de volets
En édition, sur la partie gauche de l’Action
Pour insérer une Action Bar dans une fenêtre,
Bar, des volets peuvent être affichés. Chaque
il suffit d’utiliser l’option “Action Bar” du
action a alors un libellé.
menu “Insertion”.
Dans l’exemple “Android Restaurant”, les 3
volets du champ Action Bar sont :
• Entrées,
• Plats,
Il est alors possible d’exécuter un code
• Desserts.
différent selon le volet pour initialiser la
fenêtre interne correspondante.

L’utilisation de fenêtres internes permet de


limiter le nombre de champs chargés par
l’application à un instant T. Il est cependant
possible d’utiliser le mécanisme des plans
pour réaliser ce type de fonctionnalité.

Note : dans le cas d’une application multi-


plateforme, l’utilisation des fenêtres

26 - TDF TECH 2012 - www.pcsoft.fr


Gestion du menu et
Pour éviter les problèmes de chevauche-
des options ments d’options, il existe un mécanisme
En plus des actions / volets, il est pos- intégré permettant de gérer l’espace dis-
sible d’ajouter un menu sur la droite de ponible. Par exemple, voici un menu avec
l’Action Bar. Ce menu est disponible lors de 2 options.
l’ajout d’un menu principal à la fenêtre :
“Fenêtres .. Menu Principal .. Ajouter un
menu principal”.

Ajout d’options
En édition, sur la partie droite de l’Action
Bar, un bouton avec 3 traits est affiché.

internes permet de partager un contenu avec


des applications iOS mais également avec Si l’Action Bar dispose de suffisamment
des applications Android ne disposant pas du de places disponible, les options du menu
champ “Action Bar” (par exemple pour les peuvent apparaître directement dans la
périphériques disposant d’une version plus barre.
ancienne de Android, le champ “Action Bar”
Ce bouton correspond au menu de l’Action Il suffit pour cela d’activer l’option
n’étant disponible qu’à partir de Android 3).
Bar et contient les options de l’Action Bar. “Déplacer cette option dans l’Action Bar
Traitement des actions Il est possible d’ajouter ou de modifier une si la place est disponible” de la fenêtre de
Dans le code des actions (traitement “à option par le menu contextuel sur le champ description de l’option.
chaque modification” de l’Action Bar), il “Action Bar”.
suffit de filtrer les données en fonction des
options sélectionnées.

Dans l’exemple “Android Restaurant TDF17”,


lorsque l’utilisateur filtre sur les entrées
les plats ou les desserts, il suffit d’exé- Les options seront alors affichées à la place
cuter la fonction HFiltre sur la catégorie du menu sur la partie droite de l’écran :
correspondante.
SELON MoiMême
  CAS 1
    HFiltre(Plat,...
LibelléCategorie, “Entrées”)
  CAS 2
    HFiltre(Plat, ...
LibelléCategorie, “Plats”)
  CAS 3
    HFiltre(Plat, ... Lors de l’utilisation de cette fonctionnalité,
LibelléCategorie, “Desserts”) il est important de spécifier une image
FIN pour l’option de menu : seule cette image
et, en fin de traitement, de mettre à jour sera affichée dans l’action bar. Il est bien
la zone répétée pour actualiser l’affichage entendu possible de sélectionner une image
(par la fonction ZoneRépétéeAffiche) ou du catalogue WINDEV.
d’affecter la propriété Filtre.
ZR_Plat..Filtre = gsFiltrePlat

Affichage automatique d’op-
tions en fonction de la place
Puisque les terminaux Android ont de nom-
breuses résolutions possibles et que l’orien-
tation de l’application peut être changée, la
largeur totale du champ “Action Bar” n’est
pas fixée à l’avance.

TDF TECH 2012 - www.pcsoft.fr - 27


CRÉATION D’UNE APPLICATION
POUR TABLETTE ANDROID
Création pas à pas d’une application pour tablette
Android : filtrage et affichage de données, gestion de
la rotation de l’écran, utilisation d’un champ Action
Bar, intégration de fonctionnalités multitouch et
reconnaissance vocale !

Projet d’illustration l’installation de ce SDK sont décrites dans seul type de tablette : le matériel utilisé
WINDEV Mobile et dans l’aide en ligne. est donc connu).
Le projet utilisé pour illustrer ce sujet est
Dans ce cas, nous vous conseillons d’utiliser
l’exemple “Android Restaurant TDF17” (pré- Note : pendant la création du projet, il est la détection automatique des caractéris-
sent sur le DVD). possible d’indiquer les langues utilisées dans tiques : cela permet à WINDEV Mobile de
Le projet “Android Restaurant TDF17” est le projet. En effet, WINDEV Mobile 17 permet créer automatiquement les fenêtres à la
la version obtenue après les différentes de développer des applications avec des bonne taille.
opérations décrites dans ce sujet. langues non latines (russe, chinois, hébreu,
arabe, etc.).

Création du projet Ce choix de langue peut être modifié ou


complété a posteriori et à tout moment via
la fenêtre de description du projet.
Configuration générale Si le périphérique n’est pas connu, sélec-
La création d’un projet Android s’effectue
tionnez le terminal correspondant “au plus
comme la création d’un projet WINDEV, Détection des caractéristiques petit périphérique” que l’application devra
WEBDEV ou WINDEV Mobile en utilisant du matériel supporter. Il est alors possible de filtrer les
l’assistant de création de projet. Lors de la création du projet, il est possible périphériques pour ne voir que les téléphones
de demander à WINDEV Mobile de détecter ou les tablettes.
À noter que, dans le cas d’une application les caractéristiques du périphérique. Cette
Android, il est nécessaire d’installer sur le possibilité est très utile lorsque le terminal
poste de développement un SDK Android. utilisé par les utilisateurs est connu (dans
Les informations sur la localisation et notre exemple, le restaurant va utiliser un

28 - TDF TECH 2012 - www.pcsoft.fr


Création de fenêtre l’orientation souhaitée dans la description
de la fenêtre (onglet “Détail”).
et gestion de
l’orientation
Pour créer une nouvelle fenêtre dans une
application Android, nous vous conseillons
d’utiliser l’assistant de création de fenêtre
(ou un modèle de fenêtres afin d’homogé-
néiser l’interface de l’application).

L’exemple “Android Restaurant TDF17” a


été développé pour une tablette Samsung
“Galaxy Tab”.

Intégration d’un champ


Action Bar
Puisqu’il s’agit d’une application destinée à
une tablette, dont les caractéristiques sont
connues, il est possible d’utiliser le champ
NB : pensez à donner un titre à la fenêtre. “Action Bar” de WINDEV Mobile 17 pour
Ce titre sera visible et affiché à l’utilisateur gérer le menu de l’application.
dans l’Action Bar décrite dans la suite de
ce sujet. Ce menu est préconisé pour les applications
sur tablettes (nécessite Android 3).

Détection des caractéristiques Taille de fenêtres et orienta-


L’utilisation du champ Action Bar dans cet
du matériel a posteriori tion
exemple est décrite dans l’article précédent.
Si le matériel n’était pas connu lors de la Par défaut, les fenêtres d’une application
création du projet (ou que celui-ci a évolué), en exécution peuvent être affichées :
il est toujours possible de le modifier a pos- • en mode portrait,
Affichage de données
teriori en utilisant l’option “Description de • et en mode paysage.
la plate-forme” de la fenêtre de description La zone “commune” aux deux modes d’affi- Présentation d’une liste de
du projet ou de la configuration. chage est donc un carré ayant pour côté la résultats
largeur de l’écran en mode portrait. Cette Le champ idéal pour présenter une liste de
limite est indiquée sous l’éditeur. résultats sur les terminaux mobiles, c’est
le champ “Zone répétée”.

Le champ “Zone répétée” peut être rempli :


• par programmation (à l’aide des fonctions
ZoneRépétéeXXX du WLangage),
• automatiquement par une base de données
Lorsque l’utilisateur passe en mode paysage, (fichier ou requête).
Définition de la base de don- tous les champs situés en dessous de cette
nées limite seront accessibles via un ascenseur Dans l’exemple “Android Restaurant”, le
Sur Android, les données sont au format automatique dans la fenêtre. champ zone répétée de présentation des
SQLite. Ce format est géré automatiquement plats (présent dans la fenêtre interne “FI_
par WINDEV Mobile. Les données sont alors Pour réaliser une interface sans ascenseur, il ListePlat”) est alimenté automatiquement
stockées sur le mobile (et éventuellement faut donc définir les champs au-dessus de la par la base de données :
sur une carte SD). Les données peuvent ainsi limite indiquée par l’éditeur et utiliser les • Fichier de parcours : Plats.
être facilement accédées par une applica- ancrages pour indiquer comment occuper • Clé de parcours : Catégorie (pour per-
tion tierce (une application WINDEV par l’espace disponible selon l’orientation de mettre de filtrer les plats par catégorie).
exemple) si besoin. l’écran (ancrage en largeur pour le mode • Ordre de parcours : Croissant.
paysage et ancrage en hauteur pour le mode
portrait). Les champs “photo”, “nom” et “prix” sont
placés dans la zone répétée et alimentés
par la zone répétée (selon l’onglet “Liaison”
Forcer l’orientation des champs).
Bien entendu, il est possible de forcer
l’orientation d’une fenêtre en mode portrait
ou en mode paysage : il suffit de sélectionner

TDF TECH 2012 - www.pcsoft.fr - 29


CRÉATION D’UNE APPLICATION
POUR TABLETTE ANDROID (SUITE)

Traitement de la reconnais-
sance vocale
Une fois l’option ajoutée, il suffit de
provoquer le déclenchement de la
reconnaissance vocale par la fonction
ReconnaissanceVocaleDéclenche du
WLangage.

À l’appel de cette fonction, Android affiche


automatiquement une fenêtre système. Il est
possible de paramétrer le texte affiché dans
cette fenêtre en l’indiquant en paramètre
à la fonction WLangage.

sListeProposition est une chaîne


// Début de la reconnaissance
// vocale
sListeProposition =...
ReconnaissanceVocaleDéclenche(...
“Indiquez le nom du plat”)
La fonction ReconnaissanceVocale—
Déclenche renvoie une chaîne avec la liste
Zoomer sur un produit Reconnaissance des phrases potentiellement reconnues.
Les phrases sont classées par pertinence
grâce au multitouch vocale décroissante.
Dans la fenêtre de présentation du détail L’exemple “Android Restaurant” contient
du produit (“FEN_Details” dans l’exemple également une fonctionnalité originale : Dans l’exemple “Android Restaurant”, si
“Android Restaurant TDF17”), l’utilisateur une recherche avec reconnaissance vocale. l’utilisateur prononce “Gingembre”, la
a la possibilité de zoomer sur la photo du reconnaissance vocale renvoie une chaîne
produit à l’aide du multitouch. Dans l’exemple, cela veut dire que l’uti- de caractères de la forme :
lisateur peut dire un mot (par exemple Gingembre<RC>gin tendre<RC>...
La gestion du multitouch s’effectue dans “Gingembre”) et ce mot va provoquer la
l’onglet “Détail” de la fenêtre de descrip- recherche des plats contenant cet ingré-
tion du champ image : ce sont les options dient.
Traitement des phrases
“Scroll” et “Zoom”. Pour traiter les phrases issues de la recon-
naissance vocale, il est alors possible de :
Une action pour activer la • lire uniquement le premier résultat ren-
reconnaissance vocale voyé,
Sous Android, la reconnaissance vocale n’est • parcourir les résultats (avec une boucle
pas activée en permanence : l’utilisateur POUR TOUT par exemple) pour combiner les
doit l’activer en fonction de ses besoins résultats ou rechercher le premier résultat
dans l’application. pertinent dans le cadre de l’application.

Dans l’exemple “Android Restaurant”, nous


Une fois activée, l’option “Zoom” permet à
Traitement des phrases :
avons ajouté une option de recherche dans
l’utilisateur de zoomer avec deux doigts et le champ “Action Bar” dans la zone de menu
recherche du premier résultat
l’option “Scroll” lui permet de se déplacer (sur la partie droite du champ “Action Bar”). Dans l’exemple “Android Restaurant”,
dans l’image à l’intérieur du champ image. c’est la seconde solution qui a été utilisée
(exploitation de la phrase la plus pertinente
NB : Bien entendu, cette fonctionnalité est connue).
à tester sur un périphérique réel. // Parcours des propositions

30 - TDF TECH 2012 - www.pcsoft.fr


À la fin de la génération, il est possible de
tester l’application Android dans un ému-
lateur Android ou de la déployer sur une
tablette.
Les périphériques ou les émulateurs ayant
une différence avec la plateforme actuelle
sont indiqués en rouge (différence de réso-
lution, de version, etc.).

POUR TOUTE CHAÎNE sProposition Il suffit enfin de mettre à jour la zone répé-
DE sListeProposition tée pour afficher les résultats.
SEPAREE PAR RC
Si vous ne disposez pas de périphériques
// Recherche en base
  HLitRecherchePremier(... correspondants à la résolution souhaitée,
Génération de
Plat,NomPlat,sProposition) ou pour tester l’application sur un autre
  SI HTrouve() ALORS l’application format (ou une autre version d’Android),
// Affichage du résultat vous pouvez créer des émulateurs spécifiques
La génération de l’application se déroule
OuvreFille(FEN_Détails) directement depuis cette fenêtre à l’aide
// On sort du traitement de façon habituelle, il faut cependant noter
du bouton “Créer un émulateur”.
RETOUR que l’utilisation du champ “Action Bar”
FIN nécessite une version Android supérieure
FIN ou égale à 3 [Fig. 1].
De plus, pour utiliser une carte Google Map
// Aucun plat trouvé
Erreur(“Aucun plat trouvé”) dans une application Android, il suffit d’obte-
nir une clé auprès des services de Google.
Si vous n’en avez pas, il suffit de cliquer sur
Traitement des phrases : res- le bouton “Obtenir une clé”, et de suivre
triction de l’analyse au résultat la procédure (gratuit). Retrouvez plus de 
le plus pertinent détails sur la gestion des cartes Google Map
Dans la première solution proposée (limi- dans le sujet suivant.
ter la recherche au premier résultat), le
code serait alors de la forme suivante (dans
l’exemple, la recherche est effectuée par Fig. 1
la fonction HFiltreContient, mais il est
possible d’utiliser HFiltre) :
sRecherche est une chaîne
sRecherche = ExtraitChaîne(...
sListeProposition,1,RC)
// Mise en place du filtre
HFiltre(Plat, IDPlat,...
hValMin, hValMax, ...
“DescriptionPlat ~[ ” +...
sRecherche)
Astuce : L’opérateur tilde – crochet (“~[”)
utilisé ici permet de réaliser une condition
“contient” dans un filtre, mais peut aussi
être utilisée dans un traitement de compa-
raison de chaînes.

NB : bien entendu, il est également possible


d’utiliser une requête pour réaliser cette
opération.

TDF TECH 2012 - www.pcsoft.fr - 31


ANDROID : POSITIONNER
ET PERSONNALISER DES
MARQUEURS SUR UNE
CARTE GÉOGRAPHIQUE

Il est possible d’utiliser une carte Google avec des


marqueurs correspondants à des positions “importantes”.
Dans l’exemple “Android Restaurant TDF17”, il s’agit de la
liste (fictive) des restaurants d’une enseigne.

Projet d’illustration Champ carte” de WINDEV Mobile), il est queurs dans le catalogue [Fig. 1].
possible de le configurer depuis sa fenêtre • etc.
Le projet utilisé pour illustrer ce sujet est de description :
l’exemple “Android Restaurant TDF17” (pré- • le mode d’affichage par défaut, plan ou
sent sur le DVD), dans la fenêtre “FEN_ satellite. Ajout des marqueurs
CARTEGEO”.
L’ajout de marqueurs s’effectue par la
fonction WLangage CarteAjouteMarqueur.
Création du champ Dans l’exemple “Android Restaurant TDF17”,
carte il suffit de parcourir le fichier “Restaurants”
définit dans l’analyse.
Pour afficher une carte dans une application
Android, WINDEV Mobile dispose d’un champ POUR TOUT Restaurant
dédié : le champ carte.  RestoPosition est une
• si l’utilisateur peut zoomer ou non. géoPosition
 RestoPosition..Latitude =...
   Restaurant.Latitude
 RestoPosition..Longitude = ...
   Restaurant.Longitude
 MarqueurResto est
un Marqueur
Une fois le champ ajouté et positionné • l’image des marqueurs. Le catalogue de  MarqueurResto..Position = ...
dans la fenêtre (par la barre d’icônes ou WINDEV Mobile contient de nombreux mar-
RestoPosition
depuis l’option “Insertion .. Champs ..

32 - TDF TECH 2012 - www.pcsoft.fr


• une description,
• une image,
• un nom,
• une position.

Création de
l’application
Pour utiliser une carte Google Map dans une
application Android, il est nécessaire d’obte-
nir une clé auprès des services de Google.
Si vous n’en avez pas, il suffit de cliquer
sur le bouton “Obtenir une clé” situé dans
l’assistant de génération de l’application
[Fig. 2] et de suivre la procédure (gratuit).


MarqueurResto..Nom = ...
Restaurant.NomRestaurant
Fig. 1

CarteAjouteMarqueur(...
CARTE_Resto,MarqueurResto)
FIN
La fonction CarteAjouteMarqueur prend
en paramètre :
• le nom du champ carte,
• la latitude du marqueur,
• la longitude du marqueur.

Modification des
marqueurs
Il est possible de modifier a poste-
riori un marqueur grâce à la fonction
CarteModifieMarqueur du WLangage.

Il est également possible de suppri-


mer un marqueur ou l’ensemble des
marqueurs d’une carte par les fonc-
tions CarteSupprimeMarqueur et
CarteSupprimeTout. Le catalogue d’images de WINDEV Mobile propose en standard un ensemble de
marqueurs directement utilisables

Actions sur les


Fig. 2
marqueurs
La syntaxe utilisée pour ajouter des mar-
queurs est la syntaxe simplifiée de la fonc-
tion WLangage CarteAjouteMarqueur.
Cette fonction a également une syntaxe
plus complète, qui prend en paramètre
une variable de type Marqueur. Il est alors
possible de spécifier :
• une procédure à appeler lors d’un clic sur
un marqueur,

TDF TECH 2012 - www.pcsoft.fr - 33


ANDROID : ACCÉDER À
UNE BASE DE DONNÉES
HYPERFILESQL DISTANTE
Par défaut, les applications Android utilisent
des bases de données au format SQLite stockées en local
sur le terminal. Il est cependant possible d’accéder à
des données distantes par une connexion Wifi ou 3G.
Voici un résumé des solutions pour accéder à une base
HyperFileSQL Client/Serveur.
Projet d’illustration Accès ponctuel par un
En revanche, cette solution nécessite
Les projets utilisés pour illustrer ce sujet d’écrire un code spécifique et complet
composant interne
sont l’exemple “Android Liste Courses correspondant aux besoins des applications. L’exemple “Android Liste Courses TDF17”
TDF17” et le projet Webservice “WS_Liste_ utilise un composant interne permettant
Courses_TDF17” (présents sur le DVD). À noter que WINDEV et WEBDEV permettent un accès simplifié à une base de données
de créer 2 types de Webservices : HyperFileSQL (utilise la connexion associée
Le projet “WS_AccesDistant_TDF17” (projet • sans contexte : chaque appel est indé- dans l’analyse).
WINDEV) permet de déployer votre propre pendant et est une forme de formalisation
Webservice d’accès. Le composant interne “AccesHyperFileSQL”
des requêtes REST. Ce type de Webservice
utilise :
est particulièrement adapté aux données
• un Webservice générique à déployer sur un
“publiques” (des actualités par exemple).
Accès général par serveur ayant accès à la base de données et
accessible par le terminal Android.
Webservice • avec contexte : des variables sont conser-
• une collection de procédures contenant
vées sur le serveur, par exemple l’identité
Les Webservices sont particulièrement adap- des fonctions d’accès reprenant les fonctions
de l’utilisateur. Ce type de Webservice est
tés à une utilisation mobile car ils utilisent le HXXX du WLangage.
particulièrement adapté aux applications
port http et un protocole multiplateforme.
“Back-office” ou nécessitant une sécurité Note : Le projet Android doit contenir dans
complémentaire par identification. son analyse la description des fichiers dis-
De plus, l’utilisation d’un Webservice permet
tants.
de déporter les traitements lourds sur le
Pour plus de détails consultez l’article Attention, la base de données est alors
serveur (requête de recherche par exemple)
“Connecter un “Back-office” à un site grâce accessible directement via le Webservice.
et de limiter la quantité de données ren-
à un Webservice de la LST 87. Il est possible de sécuriser le Webservice
voyée, ce qui est primordial dans le cas
d’une application mobile. en ajoutant une méthode d’identification
par exemple.

34 - TDF TECH 2012 - www.pcsoft.fr


Vrai ALORS
/ Parcours de la requête
/
TANTQUE HReqSQLAvance(...
“SQLListeAchatPourMagasin”)=0
// Lecture du résultat
// par la fonction ReqSQLLitCol
Info(ReqSQLLitCol(...
“SQLListeAchatPourMagasin”,...
“Acheter”))
FIN
HReqSQLFerme(...
“SQLListeAchatPourMagasin”)
FIN
Bien entendu, les performances dépendent
du nombre d’accès. Si le nombre d’accès
est trop important, il est préférable de
développer un Webservice spécifique pour
limiter les allers-retours entre l’application
et le Webservice.

Accès par requête


REST
Pour des données “en lecture” comme des
Déploiement du Webservice aux données distantes par les fonctions HXXX actualités, une liste de produits, etc. une
générique du composant interne. simple requête de type REST peut suffire.
Le Webservice est défini dans le projet // Se positionne sur Pour cela, il suffit de réaliser une page Web
“WS_AccesDistant_TDF17”. Pour déployer // l’enregistrement du magasin (par exemple une page AWP) capable de
ce Webservice, il suffit de : HLitRecherchePremier(... renvoyer une chaîne résultat en fonction
• ouvrir le projet “WS_AccesDistant_TDF17”. magasin,IDmagasin,gnIdMagasin) de paramètres.
• importer l’analyse des donnés à rendre SI HTrouve()=Vrai ALORS
Du côté du site, le code est alors de la
accessibles (ou créer une analyse contenant // Affiche l’enregistrement
forme :
LIB_Titre = ...
la description des fichiers à rendre accessible
magasin.NomMagasin) ChaîneAffiche(...
en mode distant) et modifier si nécessaire FIN “Valeur de retour”)
la connexion définie dans l’analyse.
• déployer le Webservice. Il est également possible d’utiliser Du côté de l’application Android, il suffit de
des requêtes à l’aide de la fonction construire l’URL à contacter puis d’utiliser
Intégration dans un projet HReqSQLExec du composant interne. la fonction HTTPRequête du WLangage.
Pour intégrer cette fonctionnalité d’ac- Cette fonction permet d’utiliser une requête Cette solution offre l’avantage d’utiliser le
cès à distance dans une base de données SQL (et non une requête de l’éditeur de port HTTP par défaut et de ne pas être un
HyperFileSQL Client/Serveur, les opérations requêtes). mode connecté ce qui est particulièrement
à réaliser sont les suivantes : // Execute la requête adapté à une connexion mobile (Edge ou 3G).
SI HReqSQLExec(scodesql,...
• intégrer le Webservice “WSListeCourses.
”SQLListeAchatPourMagasin”)=... 
awws”.
• intégrer le composant interne
“AccesHyperFileSQL” dans le projet Android.
• désactiver l’accès distant par la fonction
du composant interne HModeAccèsDistant
pour les fichiers locaux.
Le paramètre de la fonction
HModeAccèsDistant vaut :
• Vrai pour indiquer au Webservice qu’il
doit accéder à la base distante (valeur par
défaut).
• Faux pour indiquer au Webservice qu’il
doit accéder à la base locale.

Utilisation
Une fois le Webservice déployé et le compo-
sant interne intégré, il est possible d’accéder

TDF TECH 2012 - www.pcsoft.fr - 35


SCHÉMA : ACCÉDER À DISTANCE À DES
DONNÉES DEPUIS ANDROID OU IOS

36 - LA LETTRE DU SUPPORT TECHNIQUE PC SOFT


LA LETTRE DU SUPPORT TECHNIQUE PC SOFT - 37
KINDLE FIRE
WINDEV Mobile permet de générer facilement des applications pour
différentes plates-formes ... même celles non sorties en France !

L
a tablette “Kindle Fire” est une
tablette distribuée par Amazon et
qui tourne sous Android. Fig. 1

Avec WINDEV Mobile, il est donc possible de


créer et déployer des applications pour ce
tout nouveau périphérique, qui n’est pas
encore disponible en France (ndlr : à l’heure
de la rédaction de cet article).

NB : WINDEV Mobile permet de dévelop-


per des applications pour Kindle Fire, mais
pas pour les autres périphériques “Kindle”
de Amazon qui sont en effet des liseuses
électroniques.

Taille des écrans


La seule vraie spécificité de la tablette
Kindle Fire se retrouve dans les dimensions
de son écran : 600 x 1024.

En plus de cela, la Kindle réserve :


• 40 pixels pour la barre système en haut,
• 64 pour la barre du bas.

38 - TDF TECH 2012 - www.pcsoft.fr


forme” [Fig. 2]. fenêtres à utiliser dans un projet. Il est
possible de définir :
WINDEV Mobile créera alors automatique- • la largeur et la hauteur de l’écran,
ment les fenêtres à la bonne taille. • la hauteur de la barre système,
• la hauteur de la barre de titre,
• la hauteur de l’Action Bar,
Taille personnalisée • la hauteur de la barre du bas,
Bien évidemment, il est possible de para- • le DPI de l’écran.
métrer complètement les dimensions des 
Fig. 2

La taille disponible pour les fenêtres est


donc 600 x 920.

Dans WINDEV Mobile 17, pour obtenir des


fenêtres directement à cette taille, il suffit
de préciser “Kindle Fire” dans la description
de la plateforme :
• soit en création de projet [Fig. 1], à
l’étape “Description - Appareil” de l’assis-
tant de création de projet.
• soit sur un projet existant, depuis la
fenêtre de description du projet, onglet
“Projet”, option “Description de la plate-

WINDEV Mobile permet de développer des applications pour tous les périphériques Android :
vous disposez de fenêtres adaptées à tous les écrans, simplement.

TDF TECH 2012 - www.pcsoft.fr - 39


IOS : CRÉATION RAPIDE D’UNE
INTERFACE GRAPHIQUE
PRÉSENTANT UNE LISTE ET UN
DÉTAIL

Projet / Configuration
Il est possible de créer une ap-
plication iOS soit :
• lors de la création d’un nou-
veau projet,
•  sur un projet existant en
créant une configuration iOS.
Dans le cas d’un projet mul-
tiplate-formes, les fonctionna-
lités spécifiques seront indi-
quées.

Base de données
Les applications iPhone / iPad
peuvent accéder en natif à des
bases de données HyperFile-
SQL :
•  stockées directement sur le
périphérique,
•  à distance (WiFi, 3G, etc.)
pour un serveur HyperFileSQL
Client/Serveur.

Création de fenêtres
Pour créer rapidement des fe-
nêtres iOS, un assistant spéci-
fique est disponible dans WIN-
DEV Mobile.

Le développeur créé alors une


interface cohérente avec les
applications iOS du marché
qu’il peut aisément personna-
liser.

40 - TDF TECH 2012 - www.pcsoft.fr


Les zones répétées
Le champ zone répétée est le
champ indispensable dans un
projet iOS.
Lors de la création d’une
fenêtre avec une zone répé-
tée, l’assistant de création de
fenêtre propose de créer les
zones répétées correspondants
aux usages les plus courants en
iOS.

Des barres ...


Barres de navigation ou d’op-
tions, les applications iOS en
ont presque toujours.
WINDEV  Mobile permet d’en
ajouter lors de la création de
fenêtre ou à la demande sur
une fenêtre existante. Cela
guide le développeur afin de
l’aider à créer facilement et
rapidement des applications
répondant aux standards iOS.

Ascenseur automatique
Les applications iOS sont orga-
nisées en hauteur. Pour accé-
der aux champs, l’utilisateur
peut scroller, comme dans une
page Web.
Pour le développeur, il suffit
d’agrandir la fenêtre  : WIN-
DEV  Mobile gèrera automati-
quement le défilement de la
fenêtre.

Go et Simulateur
Pour mettre au point rapide-
ment le code et l’interface
d’une application iOS, WIN-
DEV Mobile dispose d’un simu-
lateur intégré.
Le développeur peut alors uti-
liser le débogueur, tester la
rotation de son application et
corriger rapidement sans dé-
ployer sur un terminal.

TDF TECH 2012 - www.pcsoft.fr - 41


Barre en
haut :
la barre de Utiliser
navigation le gaba
rit
adapté r
à l i se au
l’iPhone i e
et Ut ouv p
l’iPad ! n m
U le cha ne
de ti
l zo ili
ré s z ise t
pé on r ul
m
té es
es
Date ,
heure , ... :
utiliser le Barre de
rouleau ! thèmes
Aspe ou
ct
bout des barre
ons  s?
c’est d'option
essen
tiel !

IOS : 7 CONSEILS
Sous iOS, le “look and feel” est spécifique. Voici 7 conseils pour le mettre
en place dans vos applications WINDEV Mobile.

2
Projet d’illustration Une barre en de changer d’application.
Sur la droite, il est possible d’ajouter les bou-
Le projet utilisé pour illustrer ce sujet est haut : la barre de tons de l’application : ajouter, modifier, etc.
l’exemple “iOS CRM TDF17” (présent sur navigation Reportez-vous au point 5 de ce sujet pour
le DVD). plus de détails sur les boutons à utiliser à

1
cet endroit.

3
La barre de navigation est située en haut
Quel gabarit des fenêtres.
utiliser ? Une barre en
bas : barre
d’outils ou de
Dans WINDEV Mobile, la création d’une barre thèmes
Par défaut, le gabarit proposé par WINDEV de navigation peut être effectuée :
Mobile lors de la création d’un projet iOS • à la création de la fenêtre depuis l’assis- La barre située en bas des fenêtres peut
est le gabarit “ActivePhone5”. tant. être de deux types :
• a posteriori, depuis l’éditeur par le menu • une barre d’outils : les boutons permettent
Le gabarit “ActivePhone5” permet de réaliser “Insertion .. Barre de navigation”. d’effectuer des actions disponibles pour le
rapidement des interfaces ayant l’aspect contenu en cours (supprimer le contact, lui
graphique des applications natives iOS. Par défaut, WINDEV Mobile crée le bouton envoyer un email, etc.).
“Retour” (à gauche) et également un libellé
Il est cependant possible d’utiliser un autre pour le titre de la fenêtre.
gabarit pour avoir une interface spécifique
ou si l’application est une application mul- Le bouton “Retour” est un bouton indispen-
tiplates-formes iOS / Android par exemple. • une barre de thèmes : les boutons per-
sable dans une application iOS. Il n’existe en
mettent alors de naviguer entre différents
effet qu’un bouton physique sur les périphé-
“plans” de la fenêtre (liste des contacts,
riques iOS et ce bouton permet uniquement

42 - TDF TECH 2012 - www.pcsoft.fr


4 Utiliser un rouleau Dans la barre de navigation
Dans la barre de navigation (en haut), les
e pour les dates et
ign les heures
boutons présents sont :
• Sur la gauche, le bouton de retour. Ce
bouton a un style spécifique dans le gabarit :
“Btn_App_Retour”.
La saisie des dates et des heures est souvent
effectuée dans les applications iOS non pas
par un calendrier ou une saisie directe mais
par un champ “rouleau”.

Pour définir que la saisie d’une date ou d’une • Sur la droite, les boutons d’actions de
heure s’effectuera avec le rouleau système l’application (carrés). Plusieurs types de
du périphérique, il suffit de sélectionner, boutons sont proposés dans les styles du
dans la fenêtre de description du champ, gabarit.
le masque de saisie :
• “Rouleau Date”

Dans la barre d’outils ou de


thèmes
Les boutons de la barre d’outils sont géné-
ralement carrés et d’aspect simple.
Ces boutons utilisent le style “Btn_App_
favoris, à recontacter, etc.).
Menu” du gabarit.
Les boutons de la barre de thèmes possèdent
généralement un libellé (en dessous).
Nous vous conseillons d’utiliser ceux propo-
sés lors de la création de la barre d’outils.
Dans WINDEV Mobile, la création d’une barre
d’outils ou de thèmes peut être effectuée : • “Rouleau Heure”.
• à la création de la fenêtre. Ailleurs dans la fenêtre
• a posteriori, depuis l’éditeur par le menu Les boutons sont généralement peu nom-
“Insertion .. Barre d’outils”. breux dans le reste de l’application. Si un
bouton est nécessaire, utilisez de préférence
WINDEV Mobile ouvre alors une fenêtre qui un gros bouton (interface tactile).
permet de paramétrer cette barre. Il est
possible de choisir :
• la couleur de fond de la barre,
• le style de la barre (avec ou sans dégradé),
• les différents boutons à intégrer dans la
barre. WINDEV Mobile propose une liste de
boutons prédéfinis.

Remarque : les masques “Rouleau” sont


les masques par défaut des champs Date,
Heure et Durée dans une configuration iOS.

Ces boutons sont ensuite intégrés à la barre


d’outils. Ce sont des boutons “standards” :
5 Quel aspect pour
les boutons ?

Lors de la création d’un bouton, WINDEV 6 Comportement


de la zone
répétée
vous pouvez les utiliser et les personnaliser Mobile propose différents types de boutons
comme d’habitude (code, description, etc.). par défaut. Bien entendu, d’autres styles Le champ “Zone répétée” est un champ
sont proposés dans les options de style. essentiel pour le développement d’applica-
tions pour iOS : en effet, sous iOS, toutes les

TDF TECH 2012 - www.pcsoft.fr - 43


IOS : 7 CONSEILS - SUITE
listes sont affichées dans des zones répétées. • des lignes définies en exécution (en fonc- Utilisation “statique”
tion de données par exemple). L’utilisation de contenu statique permet de
Lors de la création d’une fenêtre, l’assistant
propose de créer automatiquement des simplifier la mise en forme de l’interface
fenêtres avec une zone répétée configurée en groupant les éléments par “thème”. Par
Création d’un champ “zone
et positionnée. exemple, un champ multiligne statique sera
multiligne”
utilisé dans une fiche pour la saisie de la
Le champ “zone multiligne” est un champ à
civilité, du nom et du prénom d’un contact.
part entière : pour l’insérer, il suffit d’uti-
liser l’icône dédiée contenue dans la barre
des champs de WINDEV Mobile.

Par défaut, le champ créé ne contient qu’une


seule ligne “statique” vide. La manipulation
Si la zone répétée a été créée sans passer par de ce champ s’effectue par sa fenêtre de Dans ce cas, le contenu sera “statique”,
cet assistant, il est important de configurer description. c’est-à-dire que le nombre de lignes est fixe :
son fonctionnement lors d’une sélection. • une ligne pour la civilité,
En effet, sur iPhone ou iPad, la sélection • une ligne pour le nom,
provoque l’exécution d’un traitement tout Ajout d’une ligne
• une ligne pour le prénom.
en affichant momentanément un bandeau L’ajout d’une ligne dans un champ multiligne
s’effectue par le bouton “nouvelle ligne” de Autre exemple d’utilisation : une liste sta-
de sélection.
la fenêtre de description du champ. tique mais avec de la programmation pour
Pour cela, il suffit d’activer l’option “Mode avoir le comportement d’un sélecteur.
de sélection Android/iOS” dans l’onglet
“IHM” de la fenêtre de description de la
zone répétée.

Lors de la création d’une nouvelle ligne, un


assistant propose de créer un contenu par
défaut correspondant aux utilisations les
plus classiques : Utilisation “dynamique”
• un bouton interrupteur, L’utilisation “dynamique” permet d’ajouter

7
• un libellé avec un sous-libellé dirigeant des lignes par programmation (par exemple,
vers une liste de choix, une liste d’options ou une liste de valeurs
Un champ • etc. possibles en fonction d’un choix ou d’une
spécifique : Le base de données).

champ “zone L’ajout d’une ligne s’effectue par la fonction


zmlAjouteLigne du WLangage.
multiligne”
nLigne est entier = ...
Lorsque différents champs doivent être zmlAjouteLigne(ZM_Selecteur)
groupés (options sur une même catégorie,
La fonction zmlAjouteLigne renvoie l’indice
regroupement d’informations sur un contact,
de la ligne ajoutée. Il est alors possible
etc.), un champ spécifique est utilisé : le
d’accéder directement aux champs consti-
champ “zone multiligne”.
tuant la ligne.
ZM_Selecteur[nLigne].
LIB_LibelléOption = ...
sLibelle
Bien entendu, il existe d’autres fonctions
zmlXXX pour manipuler les lignes d’une
zone multiligne.
Ce champ peut contenir à la fois :
• des lignes définies en édition (le nombre
de lignes est indiqué en édition).

44 - TDF TECH 2012 - www.pcsoft.fr


PRISE DE PHOTOS ET
LECTURE DE QR CODES
L’appareil photo des terminaux
Android ou iOS permet non
seulement de prendre une photo (de
produit par exemple), mais aussi de
lire des QR Codes.

une interface connue par l’utilisateur, Cette fonction va ouvrir une fenêtre de
en utilisant ses paramètres habituels. capture du code-barre : il suffit alors de
cadrer le code-barres et de valider.
En retour, l’application reçoit le chemin
complet de la photo de la vidéo (ou // Capture un code-barres
une chaîne vide en cas d’annulation MonCB est un CodeBarres = ...
ou d’erreur). CBCapture()

Sur iOS, la photo est stockée dans un Cette fonction renvoie un type de données
répertoire interne à l’appareil qui n’est spécifique correspondant à une variable de
pas accessible directement. Pour mémo- type CodeBarres.
riser l’image capturée, deux solutions :
• mémoriser le contenu (binaire) de Il est alors possible de lire le contenu du
l’image en base de données (dans une QR Code grâce à la propriété ValeurBrute
rubrique de type mémo). de la variable.
Projet d’illustration • utiliser la fonction AlbumSauve, pour
// Récupère le contenu
mémoriser l’image dans l’album photos de
Le projet utilisé pour illustrer ce sujet est // du QR Code
l’appareil.
l’exemple “iOS Capture TDF17” (présent sResultat est une chaîne = ...
sur le DVD). MonCB..ValeurBrute
L’image pour alors être réutilisée via la
fonction AlbumSélecteur : cette fonction Rappel : WINDEV et WEBDEV permettent
ouvre en effet un sélecteur basé sur le
Prise de photos ou de répertoire des photos de l’appareil.
d’afficher ou d’imprimer des QR Codes grâce
au champ code-barres ou à la fonction iIm-
vidéos primeCodeBarre du WLangage.
La prise de photos ou de vidéos peut être Sur Android, la photo est stockée sur la
utile dans de nombreuses applications SDcard de l’appareil et est également ajou- 
mêmes professionnelles. tée automatiquement à l’album.

Que l’application fonctionne sous Android


ou iOS, le code WLangage est identique : il
Scan d’un QR Code
suffit d’utiliser la fonction VidéoLanceAppli. Les appareils photos des smartphones
Android ou iOS permettent également la
Cette fonction prend en paramètre le type lecture des QR Codes.
de capture à réaliser :
• viCaptureImage : pour prendre une photo. En effet, les QR Codes (ou Code QR) peuvent
• viCaptureVidéo : pour capturer une stocker des adresses de sites Internet, des
séquence vidéo. numéros de téléphone ou des données libres.

// Capture une image Leur principal avantage est de pouvoir être


// depuis l’application caméra décodé rapidement à partir d’une photo
// native de l’appareil et donc d’un téléphone grand public, sans
IMG_Photo = VidéoLanceAppli(...
lecteur de codes-barres spécifique.
viCaptureImage)
Ce QR Code contient une URL :
Pour lire le contenu d’un QR Code depuis une testez-le avec l’application
Lors de l’utilisation de cette fonction, l’ap-
application iOS ou Android, il suffit d’utiliser “iOS Capture TDF17” !
plication utilisera l’application système
la fonction cbCapture du WLangage.
définie sur le périphérique et offrira ainsi

TDF TECH 2012 - www.pcsoft.fr - 45


Le projet iPhone
ou iPad est
terminé ? Il reste
maintenant
à créer
l’exécutable pour
le tester sur le
simulateur Mac
ou sur un vrai
terminal !

IOS : CRÉATION DE L’EXÉCUTABLE


ET DÉPLOIEMENT
Le déploiement d’une application iOS s’ef- une bonne méthode est d’utiliser le nom de points. Les groupes de nombres corres-
fectue en 3 étapes : domaine de votre site internet, qui est déjà pondent à la version majeure, la version
• La génération du projet XCode depuis unique, et le nom de l’application. mineure, au numéro de génération et en
WINDEV Mobile, dernier au numéro de révision.
• La création de l’exécutable depuis XCode, Icônes pour l’application
• Le déploiement de l’application. 3 icônes d’application doivent être fournies Intégration de fichiers supplé-
[Fig. 2] : une icône pour iPad et deux icônes mentaires
Génération du projet pour l’iPhone (l’iPhone 4 a une résolution • Il est possible d’intégrer des fichiers sup-
différente avec l’écran Rétina). plémentaires dans l’application : cela peut
La génération du projet XCode s’effectue
être des fichiers prédéfinis, des fichiers
comme une génération classique via l’assis- Splash screen de paramétrage, des .ini, etc. Ces fichiers
tant. Voici les détails des plans de l’assistant
Le splash screen est obligatoire (des images peuvent être des fichiers HyperFileSQL (une
spécifiques à l’environnement iOS.
par défaut sont générées). base produit par exemple). Pour chacun de
ces fichiers, il faut indiquer si les fichiers
Identifiant de bundle Gestion de librairies externes sont en écriture.
Il est nécessaire de fournir un identifiant de
Des librairies peuvent être nécessaires si Note : Pourquoi indiquer si l’application
“bundle” : cet identifiant est l’identifiant
vous avez saisi du code natif Objective C accède en écriture à un fichier ?
unique de votre application auprès d’Apple.
utilisant des librairies spécifiques. Il faut Lorsqu’un fichier est intégré dans l’appli-
Il se définit et s’enregistre sur le compte
alors indiquer dans ce plan ces librairies. cation, il est en fait directement intégré
développeur Apple.
Cet identifiant est nécessaire au déploiement dans l’exécutable. L’application peut donc
Numéro de version y accéder en lecture mais pas en écriture
de l’application [Fig. 1].
Les numéros de version correspondent à (c’est le cas idéal pour un fichier de codes
Note : pour construire un identifiant unique, un ensemble de 4 nombres séparés par des

46 - TDF TECH 2012 - www.pcsoft.fr


postaux par exemple). raît en haut (“Succeeded” ou le nombre •  le déploiement via l’appStore. Si vous
de warnings et d’erreurs le cas échéant). développez une application grand public,
Pour accéder à un fichier en écriture, il est
4. Une fois le programme compilé sans utilisez ce type de déploiement.
nécessaire de l’extraire de l’application.
erreurs, vous pouvez lancer la simulation À savoir, vos applications doivent au préa-
Il ne serait pas intéressant de tout extraire
(Option “Product .. Run”). La fenêtre de lable être validées et acceptées par Apple
par défaut, car le fichier reste tout de même
simulation apparaît avec l’application sur avant d’être visibles sur l’AppStore.
présent dans l’exécutable : il serait donc
le périphérique (l’application doit être • le déploiement AdHoc. Ce type de déploie-
dupliqué sur le terminal et occuperait plus
signée et le périphérique renseigné sur le ment n’est pas soumis au processus de vali-
de place.
site Apple). dation d’Apple mais est limité par Apple à
Partage avec iTunes 100 terminaux.
Le partage avec iTunes permet d’accéder Déploiement de • le déploiement inHouse. Ce déploiement
permet de déployer sur plus de 100 termi-
aux fichiers depuis iTunes [Fig. 3]. En effet l’application naux “définis” et n’est pas soumis non plus
depuis iTunes, l’utilisateur peut récupérer les
Une fois l’application générée, il reste au processus de validation d’Apple.
fichiers de l’application sur son ordinateur,
ou envoyer des fichiers dans le répertoire
à la déployer. Apple propose 3 types de 
déploiement :
de l’application, sur le terminal.
Ce type de partage peut être intéressant
par exemple pour récupérer les fichiers Fig. 1
de données et faire une synchronisation,
transférer des images dans le répertoire de
l’application, etc.

Génération terminée ?
Une fois la génération terminée, le réper-
toire de génération contient les éléments
suivants :
1. Un répertoire “lib”. Ce répertoire contient
le Framework WINDEV Mobile pour iOS.
2. Un répertoire au nom du projet conte-
nant :
• La bibliothèque “.WDL” des objets du
projet. Cette bibliothèque est identique
à la bibliothèque générée sous WINDEV ou
WEBDEV. Fig. 2
• Plusieurs fichiers nécessaires au compila-
teur Xcode sur le MAC.
3. Un dossier nommé “<Nom du projet>.xco-
deproj”. Dans ce dossier, le fichier “project.
pbxproj” correspond au projet à ouvrir sous
Xcode sur le MAC.

Création de
l’exécutable
Lorsque le projet WINDEV Mobile pour
iPhone/iPad est généré sur le poste de déve-
loppement, les fichiers générés doivent
être transférés sur un poste Mac pour être
compilés.
Pour compiler le projet sous Xcode :
1. Dans la liste déroulante en haut à gauche,
sélectionnez les options de compilation.
Sélectionnez alors le scheme correspondant Fig. 3
à votre application puis la cible de compi-
lation (appareil actuellement connecté ou
un simulateur).
2. Pour lancer la compilation, cliquez sur
l’option de menu “Product .. Clean” puis
sur l’option de menu “Product .. Build”.
3. Un compte-rendu de compilation appa-

TDF TECH 2012 - www.pcsoft.fr - 47


SITE WEBDEV : CRÉATION
RAPIDE D’UNE ZONE RÉPÉTÉE
“PRODUITS” ET D’UNE FICHE
RÉFÉRENÇABLE

Projet / Configuration
Pour créer un site référen-
çable, il faut que la partie à ré-
férencer du site soit constituée
de pages AWP (ou PHP).
Ces pages pourront ensuite
être avec ou sans contexte se-
lon les besoins du site.
Il est bien entendu possible de
mixer les différents types de
pages dans un même site.

Charte graphique
Si vous ne disposez pas d’une
charte graphique initialement,
WEBDEV vous propose un en-
semble d’ambiances et de pa-
lettes ainsi que des modèles de
pages prédéfinis.
Une palette est suggérée avec
chaque ambiance, mais vous
pouvez bien entendu sélec-
tionner celle correspondant le
plus à vos besoins.

Zones répétées
Les zones répétées sont à privi-
légier (par rapport aux tables)
pour des données à référencer.
Les zones répétées peuvent
être mono ou multi-colonnes
mais devront posséder un
nombre de lignes fixes (pour
limiter la taille de la page) et
de préférence non Ajax.

48 - TDF TECH 2012 - www.pcsoft.fr


Contenu d’une Zone
répétée
L’alimentation du contenu
d’une zone répétée n’in-
fluence pas sur la capacité de
référencement des données, il
est donc possible  : d’associer
un fichier, d’utiliser une va-
riable (binding) ou de remplir
la zone répétée par program-
mation.

Refactoring pour le
style
Pour donner rapidement un
aspect graphique soigné à un
contenu d’une zone répétée,
il est possible de créer rapi-
dement des cellules avec des
bordures en sélectionnant les
champs à encadrer et en uti-
lisant l’option “Refactoring ..
Créer une cellule avec la sélec-
tion” de WEBDEV.

Des ruptures ?
Les ruptures permettent de
grouper les données par caté-
gorie selon le critère défini par
les attributs de la zone répé-
tée.
Les ruptures sont très utiles
pour renvoyer un ensemble de
produits selon des critères (ce
qui est toujours bon pour le
référencement).

Liens : point sensible


Une fois qu’une page est réfé-
rençable, il faut que les liens
sortants de cette page per-
mettent le référencement des
pages appelées.
Pour cela, il faut indiquer la
page destination (et les para-
mètres éventuels) depuis la
fenêtre de description pour
ne pas générer de “lien Javas-
cript” non référençables.

TDF TECH 2012 - www.pcsoft.fr - 49


ZOOM AUTOMATIQUE SUR UNE
IMAGE
Lors de l’affichage d’une “fiche produit”, il est souvent
intéressant de permettre à l’utilisateur de voir en détail le
produit : le zoom automatique le fait en un clic.

options) dans une popup auto- Facteur de zoom


matique. Le facteur de zoom est défini par rapport à la
taille de l’image réelle (à ne pas confondre
Note : L’utilisateur pourra égale- avec la taille de l’image).
ment zoomer sur cette image en
utilisant la roulette de la souris Pour un résultat optimal, il est donc conseillé
directement sur le champ image. d’avoir un champ image :
• en mode étiré,
• plus petit que l’image originale,
Choix de la position de
• respectant le ratio de l’image.
la popup d’affichage
La position de la popup est bien
Dans le cas d’un zoom supérieur à 100 %,
entendu paramétrable et dépend
l’image aura un affichage dégradé (effet
de la position de l’image à zoo-
de pixelisation).
Projet d’illustration mer. Par défaut, la popup de
zoom est placée sur la droite de l’image.
Le projet utilisé pour illustrer ce sujet est Personnalisation de la
l’exemple “WW_VinoSublimo_TDF17” (pré- Si l’affichage de la popup ne peut pas être
sent sur le DVD). effectué correctement dans le navigateur
popup
(par exemple, si le champ image est tout à Si la popup automatique ne convient pas à
droite du navigateur de l’internaute et que votre application, il est possible de définir
Mise en oeuvre la popup est paramétrée pour s’afficher à une popup spécifique. Pour cela il suffit de
La page “DetailsProduit” de l’exemple “WW_ droite), la popup sera alors automatiquement créer une popup (voir page suivante pour
VinoSublimo_TDF17” contient un champ affichée à une autre position (au-dessus du plus de détails), de la personnaliser (cadre,
image qui affiche l’image du produit. champ image ou à sa gauche par exemple). couleur, etc.) et d’y placer les champs sou-
La popup s’adapte donc automatiquement haités : picto de disponibilités du produit,
à toutes les configurations des Internautes. description, etc.
Activation de la fonctionnalité
Il est également possible de définir la taille Dans l’exemple “WW_VinoSublimo_TDF17”
de la popup automatique. la popup réalisée est la popup “POPUP_
ZoomAuto”.
Cette popup est matérialisée sous l’éditeur
par une zone en pointillés.

Nous vous conseillons d’aligner au maximum


les dimensions de la popup avec les autres
champs de la page.
Pour activer la fonctionnalité de zoom auto
matique de WEBDEV, il suffit de définir le
mode d’affichage de l’option “zoom auto-
matique” (disponible dans l’onglet “Détail” Bien entendu, cette popup doit disposer
de la fenêtre de description du champ) : d’un champ image pour afficher le résultat
• zoom dans une popup automatique. du zoom et il est nécessaire de l’indiquer
• zoom dans une popup personnalisée. dans la fenêtre de description du champ
image “source”.
En exécution, la position survolée de l’image
sera alors affichée (et zoomée selon les 

50 - TDF TECH 2012 - www.pcsoft.fr


NOUVELLE GESTION DES POPUPS

Avec la version 17, il est possible


de créer des popups sans utiliser
de cellules “cachées” en bas d’une
page : la page est plus claire, la
mise en page plus facile.

Bien entendu, une popup est toujours liée


à une page (ou à un modèle de pages),
mais dispose de sa propre zone d’édition.

NB : définir une popup dans un modèle


de pages permet d’utiliser cette popup
dans toutes les pages utilisant ce modèle.

Ajouter ou éditer une popup


Les popups disposent de leur propre
Il est également possible de créer une popup
menu dans le menu “Page” de WEBDEV.
à partir d’une sélection de champs, via le
menu “Champ .. Refactoring .. Créer une
Il est alors possible soit de créer une
page Popup avec la sélection”.
nouvelle page Popup, soit d’éditer une
page Popup existante.
Projet d’illustration
Le projet utilisé pour illustrer ce sujet est
l’exemple “WW_VinoSublimo_TDF17” (pré-
sent sur le DVD).

Rappel
Avant les versions 17, pour afficher une Et la programmation ?
popup dans une page WEBDEV, il fallait : Les fonctions WLangage CelluleAffiche–
• créer une cellule dans la page, Dialogue et CelluleFermeDialogue sont
• rendre cette cellule invisible, compatibles avec les pages Popup.
• rendre cette cellule superposable, Les popups ouvertes sont alors indiquées Donc en cas de permutation de cellules
• forcer son positionnement automatique dans la barre de documents de WEBDEV. en popup (pour bénéficier de la souplesse
pour éviter les ascenseurs, d’édition des popups), le code existant
• afficher cette cellule par la fonction reste compatible et fonctionnel.
WLangage CelluleAfficheDialogue.
Un nouveau jeu de fonctions PopupXXX est
également disponible :
Bien évidemment, cette solution fonctionne
• PopupAffiche permet d’afficher une page
toujours dans WEBDEV 17.
Popup à une position donnée (définie par une
constante ou par les coordonnées X et Y).
Mais nous vous conseillons fortement d’uti- Permutation à partir d’une
liser la nouvelle gestion des popups, plus cellule // Affiche la popup au centre
simple et plus claire. PopupAffiche(POPUP_MaPopup,
Dans les projets contenant déjà des cellules
popupCentre)
pour gérer les popups, il est possible de
transformer ces cellules en pages Popup • PopupFerme permet de masquer une page
Nouvelle gestion indépendantes par l’option “Champ .. Popup ouverte par PopupAffiche.
Avec les versions 17, il devient possible de Permuter .. Cellule/Page popup”. // Ferme la popup
manipuler et d’éditer les popups comme PopupFerme(POPUP_MaPopup)
des éléments indépendants.

TDF TECH 2012 - www.pcsoft.fr - 51


LE CHAMP NOTATION
(RATING)
Le champ notation permet à la fois
aux utilisateurs de noter un produit
ou un service, mais aussi d’afficher
une note dans une application
WINDEV ou un site WEBDEV.

REQ_NoteMoyenneProduit.Moyenne
Et comme tous les champs, le champ nota-
tion peut être relié à la base de données,
depuis l’onglet “Liaison”.

Saisie d’une note


• Évaluation fixe multi-images : la borne max
ne peut pas être fixée car elle est définie Pour qu’un utilisateur ou un internaute puisse
par l’image. Par contre, chaque valeur peut saisir une note, il suffit de :
avoir un picto différent. • rendre le champ notation actif (onglet
“IHM”)
• gérer le traitement de saisie de note dans
Projet d’illustration le traitement “à chaque modification”.
Dans le cas d’une saisie de notation dans un
Le projet utilisé pour illustrer ce sujet est
site Internet, il est souvent préférable de
l’exemple “WW_VinoSublimo_TDF17” (pré-
contrôler que cette notation ne provient pas
sent sur le DVD). Dans la fenêtre de description du champ, il d’un utilisateur ayant déjà voté (contrôle
est possible de définir : par identification, vérification de l’adresse
Mise en œuvre • la note maximale possible, IP, etc.).
• la note initiale,
Dans le site “WW_VinoSublimo_TDF17”, nous
• la granularité des notes (valeur entière,
avons mis en place une gestion simplifiée
demi-valeur, valeur réelle),
Personnalisation
des avis des internautes accessible depuis
• etc. Il est possible de personnaliser l’affichage
la page “produits” (lien “+ de détails”).
du champ notation grâce à sa fenêtre de
Dans la page de détails du produit, la note Affichage d’une note description dans l’onglet “Général”.
moyenne obtenue par le produit est affichée
Pour affecter une valeur au champ notation, Par exemple, il est possible de spécifier une
et l’internaute peut donner son avis.
il suffit d’affecter directement la valeur au nouvelle planche d’images pour afficher les
notes (une image par note ou répétition
Création d’un champ champ, comme pour un champ classique.
d’une même image).
// Affecte la note moyenne
“notation” NOTE_AvisClient = ...
Le champ “notation”, comme tous les

champs, est disponible dans la barre d’outils
des champs.
Plusieurs champs notation sont proposés
par défaut, avec un look et un paramé-
trage défini : il suffit de déposer celui
souhaité directement dans la page pour
l’utiliser.
Deux types de champs notation sont proposés
par défaut :
• Évaluation modifiable : il est possible
de fixer la borne max, le picto est répété
autant de fois que nécessaire.

52 - TDF TECH 2012 - www.pcsoft.fr


DÉCOUVERTE DU
ZONING
Le mode d’édition par zoning
permet de réaliser des mises
en page complexes sans utiliser
de cellules et en permettant le
redimensionnement a posteriori !

chures), Créer une nouvelle


• un corps,
• une zone pour les boutons “Valider”
zone
et “Annuler”, Pour créer une nouvelle zone d’édition il
• un bas de page. suffit de sélectionner l’outil “Ajouter une
zone de mise en page”.
Grâce à ces zones, il est possible de modi-
fier très rapidement et facilement la mise
en page générale du site.
La manipulation des zones s’effectue dans
le mode “Zoning” de la page. Le curseur de la souris se transforme en
crayon et il est alors possible de dessiner
les zones.
Projet d’illustration Agrandir une zone en mode Au survol d’un trait de zone, il est possible
Le projet utilisé pour illustrer ce sujet est “Page” de le déplacer.
l’exemple “WW_VinoSublimo_TDF17” (pré- En mode “page”, pour décaler un ensemble
sent sur le DVD). de champs (le titre vers la droite par
exemple), il faut :
• agrandir la page,
Principe • décaler tous les champs vers le bas pour
Le zoning est le nouveau mode d’édition faire de la place.
des pages de WEBDEV 17. Le zoning est un
concept important pour la mise en page En cas d’erreur (si la page a été trop agrandie
facile des sites. par exemple), il faudra refaire les mêmes
opérations dans l’autre sens, pour réduire.
Éditer une zone
Lors de l’ouverture d’une page (dans
l’exemple la page “DemandeBrochure”), Une zone à une existence : il est possible
Changer de mode d’édition de lui donner un style, de lui associer des
deux onglets sont affichés en haut à gauche
Pour passer rapidement du mode “Page” au champs, etc. Ces opérations sont acces-
mode “Zoning” (et inversement), il suffit de sibles, en mode “zoning” depuis le menu
sélectionner l’onglet voulu ou d’utiliser le contextuel.
raccourci clavier “Alt + Z”.
• L’onglet “Page”, permet de travailler sur
les champs de la page, comme d’habitude.
• L’onglet “Zoning” (apparu en version 17) Agrandir une zone en mode
permet de gérer les zones d’édition : créa- “Zoning”
tion, modification, suppression. Une fois passé en mode zoning il suffit
de sélectionner et de déplacer les traits
de matérialisation des zones, comme des
Les zones d’éditions splitters. WEBDEV agrandira alors automa-
Les zones d’édition sont matérialisées par tiquement la page et décalera les champs
des traits rouges. si nécessaire.
Dans la page exemple, plusieurs zones sont
définies :
• une zone pour le haut de page,
• une zone “presse” sur la gauche,
• une zone pour le titre (demande de bro-

TDF TECH 2012 - www.pcsoft.fr - 53


PHP : BÉNÉFICIEZ DE TOUTES
LES NOUVEAUTÉS DE WEBDEV
Défilement automatique

Mais aussi :
zone répétée
avec rupture
enroulable,
gestion des
popups,
Unicode, ...
54 - TDF TECH 2012 - www.pcsoft.fr
Edition
par zoning

Champ Notation

Zoom
automatique
sur image

TDF TECH 2012 - www.pcsoft.fr - 55


Le nouveau
type de graphe
“entonnoir”
permet de
visualiser
rapidement
la répartition
de différentes
phases d’un
processus.

LE CHAMP GRAPHE ENTONNOIR :


UNE AIDE À LA DÉCISION
Projet d’illustration Le graphique en entonnoir est particulière- • sélectionner le type de graphe dans l’assis-
ment destiné à visualiser la représentation tant de création de champ.
Pour illustrer ce sujet, nous vous conseillons des opportunités d’affaires. Ainsi, les affaires • alimenter le graphe (automatiquement
de consulter l’exemple “WD Graphe” (livré les plus proches de la signature sont en ou par programmation).
en standard avec WINDEV). bas de l’entonnoir, les affaires les moins
avancées sont en haut. Note : dans les états, le champ graphe peut
être placé dans tous les types d’états. C’est
Présentation du C’est une solution utile pour assister les un champ et non un type d’état spécifique.
graphe décideurs lors de la phase d’instruction du
processus de prise de décision.
Le graphe en entonnoir affiche sous forme Astuce pour les graphes dans
d’entonnoir des données qui, totalisées, les états
sont égales à 100 %. Il s’agit d’un graphique Création d’un champ L’édition des graphes dans les états a évolué
à série unique représentant les données
comme des parties de 100 % ; il n’utilise graphe entonnoir en version 17 : il est maintenant possible de
définir le graphe en édition (positionnement
pas d’axe. Le champ graphe est disponible dans les du titre, de la légende, etc.).
fenêtres, les pages et les états. Pour créer Tous les nouveaux graphes créés bénéfi-
Les graphes de type Entonnoir sont un type un champ graphe entonnoir, il suffit de : cient automatiquement de ce nouveau mode
de graphe souvent utilisé pour représenter • ajouter un champ graphe dans la fenêtre d’édition.
les étapes d’un processus de vente et indi- ou la page.
quer le montant des recettes potentielles Pour bénéficier de ces fonctionnalités sur
ou de concrétisation attendue pour chaque des graphes existants :
étape. • sélectionnez le champ graphe,

56 - TDF TECH 2012 - www.pcsoft.fr


• ouvrez le menu contextuel, // Modification de • proportionnelle à l’aire : la valeur est sym-
• sélectionnez l’option “Mettre à niveau le // la couleur dans le graphe bolisée par l’aire de la portion de l’entonnoir.
champ graphe”. grCouleurSérie(... • proportionnelle à la hauteur : la valeur
GRF_Graphe, ...
est symbolisée par la hauteur de la portion
nSérie, DonneCouleur())
de l’entonnoir.

3. Les caractéristiques d’apparence du


graphe sont définies dans l’onglet “Détail” Espacement entre les portions
de la fenêtre de description du graphe. Les L’espacement entre les portions peut être
options suivantes sont disponibles : défini par l’option “Espacement entre les
• adoucir les effets d’escalier, portions” (onglet “Général” de la fenêtre
• couleurs de bordure automatiques, de description du champ) ou par la fonction
Rappels sur les couleurs • couleurs dégradées (avec possibilité de grHistoEspacement.
1. La couleur des portions est définie auto- dégradé horizontal).
matiquement. Pour modifier la couleur des
portions, utilisez la fonction grCouleurSérie Embout de l’entonnoir
en précisant le numéro de la portion. Configuration et
Les caractéristiques de l’embout de l’enton-
// Modification de spécificités du graphe noir sont saisies dans l’onglet “Général” de
// la couleur dans le graphe
grCouleurSérie(... entonnoir la description du champ :
GRF_Graphe,nSérie,nCouleur) • largeur de l’embout (exprimée en pour-
Taille des portions centage).
2. Pour obtenir automatiquement des cou- L’onglet “Général” de la fenêtre de descrip- • hauteur de l’embout (exprimée en pour-
leurs harmonieuses, il est possible d’utiliser tion du champ (ou la fonction grParamètre) centage).
la fonction WLangage DonneCouleur. permet de choisir la taille des portions :

TDF TECH 2012 - www.pcsoft.fr - 57


HYPERFILESQL
3 CONSEILS POUR OPTIMISER LES
ACCÈS AUX BASES DE DONNÉES
Dès que les volumes de données deviennent conséquents,
le choix des bonnes clés est une garantie de performances
et de constances de ces performances.

1 Utiliser des clés et Une application souhaite interroger ce fichier Cas 2 : une clé définie sur la
par l’intermédiaire d’une requête pour récu- date, un parcours restreint
des clés pérer les commandes : Pour accélérer la recherche, une clé (avec
composées • qui datent d’aujourd’hui, doublons) est définie sur la rubrique “date”
• dont le montant est supérieur à 50 €. du fichier “Commande”.
Une clé, un index, est une rubrique triée Seules 25 commandes en base répondent à Dans ce cas, le moteur HyperFileSQL dispose
par le moteur HyperFileSQL et qui va servir ces deux critères. d’un index qui lui indique, pour chaque date,
aux recherches, aux parcours, ... Voici le comportement du moteur les numéros des différents enregistrements
HyperFileSQL selon les clés définies (ou qui correspondent.
non définies). Seuls les enregistrements qui corres-
Principe de
pondent à la date du jour vont donc être
fonctionnement des parcourus.
Cas 1 : aucune clé, un parcours
clés fastidieux Mais pour chaque enregistrement parcouru,
Pour illustrer le fonctionnement des clés, Si aucune clé n’est définie dans le fichier, le le deuxième critère (montant) doit être
voici un cas concret expliqué pas à pas. moteur HyperFileSQL n’a pas d’autres choix analysé.
que de parcourir chaque enregistrement Si 5 000 commandes ont été passées ce jour,
Soit un fichier “Commande” qui contient
et de regarder si les deux critères (date 5 000 enregistrements seront tout de même
comme rubriques (entre autres) :
et montant) correspondent à la demande. parcourus, pour seulement 25 enregistre-
• une date,
• un montant total. Autrement dit, TOUS les enregistrements ments ramenés.
vont être parcourus. Plus le fichier com-
Ce fichier contient plusieurs millions de
porte d’enregistrements, plus la recherche
commandes.
sera longue.

58 - TDF TECH 2012 - www.pcsoft.fr


Cas 3 : une clé composée, un Bien entendu, il est possible de définir fit de cliquer sur le bouton “Nouveau” et
parcours optimisé manuellement les clés composées, direc- de sélectionner “Nouvelle Optimisation
Pour optimiser la recherche, une clé com- tement dans l’éditeur d’analyses. Automatique”.
posée des rubriques “date” et “montant” Un article sur le choix des bonnes clés com-
posées est disponible dans la LST 81. 

3
est créée.
Dans ce cas, le moteur HyperFileSQL dispose
d’un index qui lui indique directement les Recalculer les
numéros d’enregistrements qui correspon-
dant à la date du jour et ayant un montant
statistiques
supérieur à 50.
Seuls les enregistrements correspondant
aux deux critères souhaités sont lus : le Le troisième conseil pour optimiser les accès
parcours est optimisé ! à une base de données est de recalculer
régulièrement les statistiques sur les fichiers

2
de données.
Ces statistiques sont utilisées pour optimiser
Utiliser des clés les recherches en fonction des données
discriminantes réelles contenues dans la base.
Pour lancer le recalcul des statistiques, il
est possible d’utiliser :
• la fonction WLangage hStatsCalcule, pour
L’utilisation de clés est donc un gage d’opti- effectuer un recalcul ponctuel par exemple,
misation des requêtes ... à condition de • le Centre de Contrôle HyperFileSQL, pour
définir les bonnes clés ! définir une tâche planifiée de recalcul heb-
domadaire par exemple.
Il est fortement déconseillé de créer toutes
les clés composées possibles pour un fichier :
L’ajout de tâches planifiées est disponible
• l’ajout de clés composées fait grossir l’in-
dans l’onglet “Éléments planifiés”. Il suf-
dex du fichier. Plus un index est conséquent,
plus la lecture de celui-ci est ralentie. Au
lieu d’optimiser le traitement, cela risque
de le ralentir.
• le nombre important de clés composées
devient difficilement gérable et risque de
perdre le développeur.
Pour choisir les bonnes clés composées,
WINDEV, WEBDEV et WINDEV Mobile mettent
à disposition du développeur l’optimiseur
de requêtes.

L’optimiseur de requêtes est disponible


depuis le menu “Projet .. Audit d’édition
.. Optimiseur de requêtes”.
Il suffit de sélectionner les requêtes à ana-
lyser et l’éditeur indique les clés les plus
discriminantes. Pour ajouter directement
les clés proposées, il suffit de cliquer sur
le bouton “Appliquer les modifications”.

TDF TECH 2012 - www.pcsoft.fr - 59


LES ANCRAGES :
3 CAS CONCRETS D’UTILISATION
Les ancrages permettent de définir le comportement des
champs lorsque le navigateur est agrandi ou réduit ou
lorsqu’un champ affiche plus ou moins d’informations.
Cet article présente un résumé de l’utilisation des
ancrages ainsi que 3 exemples concrets d’utilisation.

Projet d’illustration champ : au contenu”).


• l’ancrage en position (déplacement du
L’exemple “WW_MagicAncrage_TDF17” est champ lors du redimensionnement du navi- Cas d’utilisation
un exemple d’illustration des cas d’utili- gateur ou du conteneur).
sation présentés dans les pages suivantes. • l’ancrage en taille (agrandissement du Les pages suivantes contiennent des cas
champ lors du redimensionnement du navi- d’utilisation des ancrages et présentent :
Ancrage et zoning gateur ou du conteneur). • le rendu de la page avant l’utilisation
d’ancrage,
Dans les versions précédentes de WEBDEV, • l’ancrage défini dans la page,
Dans le cas d’un ancrage en taille, il est
la mise en forme des pages était réalisée à • le rendu de la page avec ancrage.
nécessaire de spécifier si l’agrandissement
l’aide des zones extensibles.
est relatif :
• au navigateur (option “Adaptée au navi- Chaque cas est présent dans l’exemple du
Avec les versions 17, cette mise en forme DVD, en version “avant” et “après”.
gateur”).
est simplifiée grâce à l’utilisation du mode
d’édition “zoning” et des ancrages.
• au contenu du champ (option “Adaptée 
Le système d’ancrage est similaire à celui Fig. 1
déjà présent dans WINDEV et WINDEV Mobile.
Plus simple et plus intuitif que les zones
extensibles, il offre également une liberté
de mise en forme beaucoup grande.

Pour plus de détails sur le zoning, vous


pouvez consulter l’article “Découverte du
zoning”, page 53.

Modifier le mode
d’édition d’une page
Le choix du mode d’édition est un paramé-
trage spécifique à chaque page.

Pour modifier le mode d’édition d’une page


(pour passer du mode extensible au mode
zoning sur un projet crée en version 16 par
exemple), il suffit d’ouvrir la fenêtre de
description de la page, onglet “Général”
et de cocher l’option “Edition en zoning”.

Définir un ancrage
La définition d’un ancrage s’effectue sur
les champs via l’option “Ancrage” du menu
contextuel du champ [Fig. 1].
Cette fenêtre permet de définir pour un

60 - TDF TECH 2012 - www.pcsoft.fr


CAS 1 : ADAPTER DES CHAMPS AUX
DIMENSIONS DU NAVIGATEUR
Page “Découverte”
(avant)
Lorsque le navigateur est
agrandi, la cellule centrale et
les champs contenus restent
fixes.

Pour un rendu plus esthétique,


il faudrait que la zone cen-
trale (cellule et champs) suive
l’agrandissement pour occuper
tout l’espace disponible.

Ancrages utilisés
•  Sur la cellule et le champ
“Votre demande”  : “le champ
s’étire vers la droite et vers
le bas”, “Adaptée au naviga-
teur”.
• Sur le champ “Votre adresse
email” : “le champ s’étire vers
la droite”, “Adaptée au navi-
gateur”.
•  Sur les deux boutons : “le
champ se déplace vers la droite
et vers le bas”, “Adaptée au
navigateur”.

Page “Découverte”
(après)
Lorsque le navigateur est
agrandi, la cellule centrale suit
l’agrandissement en hauteur et
en largeur, pour occuper tout
l’espace.
Les boutons sont, eux, tou-
jours placés en bas à droite
de la page, sous le champ de
saisie.

TDF TECH 2012 - www.pcsoft.fr - 61


CAS 2 : ADAPTER UNE ZONE
RÉPÉTÉE À SON CONTENU
Page “Emotion”
(avant)
La zone répétée est paramé-
trée pour afficher 4 lignes au
maximum.

Si la zone répétée affiche seu-


lement 2 lignes, il reste un
espace vide “inutile” entre la
zone répétée et le détail en
dessous.

Il faudrait que le bloc en des-


sous puisse utiliser la place
disponible si la zone répétée
n’occupe pas tout l’espace qui
lui est alloué.

La zone répétée doit donc


s’ancrer selon son contenu.

Ancrage utilisé
• Sur le champ zone répétée :
“le champ s’étire vers le bas”,
“Adaptée au contenu”.

Autres modifications
•  Le nombre de lignes réser-
vées a été supprimé (mis à 0)
pour la zone répétée.
• Le bloc gris contenant les in-
formations a été remonté juste
sous la zone répétée. Il sera
automatiquement poussé vers
le bas par la zone répétée.

Page “Emotion”
(après)
Quel que soit le nombre de
lignes affichées dans la zone
répétée, le bloc suivant est
automatiquement collé.
La mise à forme s’adapte au
contenu et tout reste harmo-
nieux.

62 - TDF TECH 2012 - www.pcsoft.fr


CAS 3 : ADAPTER UNE IMAGE À
SON CONTENU
Page “Sensation”
(avant)
Le champ image a des dimen-
sions définies (fixes) et utilise
le mode “Etiré” (pour que
l’image soit visible en inté-
gralité quelles que soient ses
dimensions originales).
Si l’image affichée est plus
haute que le champ initial,
l’image semble écrasée.
Il faudrait que le champ image
puisse occuper l’espace dispo-
nible en dessous.

Ancrage utilisé
•  Sur le champ image  : “le
champ s’étire vers le bas”,
“Adaptée au contenu”.

Page “Sensation”
(après)
Lorsque l’image qui est affi-
chée dans le champ est plus
haute que la hauteur du
champ, le champ est automa-
tiquement agrandi pour affi-
cher une image correcte, qui
respecte les proportions origi-
nales.

TDF TECH 2012 - www.pcsoft.fr - 63


您好,欢迎到文待悟
(BONJOUR, BIENVENUE
DANS WINDEV)
WINDEV, WEBDEV et WINDEV Mobile permettent de
développer des applications multilingues. Des outils
(WDMsg, WDTrad, ...) permettent également de faciliter la
traduction des ressources de vos applications.
Petit guide pas à pas pour traduire vos applications.

1
• les heures, Convertir les chaînes simples en messages
Préparer le projet • les dates, multilangues”. WINDEV va parcourir tout le
à être traduit • les durées, code source des éléments demandés (projet,
• ... élément courant, etc.) et demander pour
chaque chaîne si elle doit être convertie.
Par défaut, ce sont les options linguistiques
Langues de l’application du PC de l’utilisateur qui sont utilisées. Attention : ne convertissez que les chaînes
La gestion des langues de l’application est qui sont des messages à destination des
accessible dans la fenêtre de description du Lors de la validation de la description du
utilisateurs (Info, Erreur, etc.) et pas les
projet, onglet “Langues” [Fig. 1]. projet, toutes les langues sélectionnées sont
chaînes internes au fonctionnement de
automatiquement ajoutées aux éléments
l’application.
Il est possible d’ajouter jusqu’à 64 langues du projet (fenêtres, champs, collections
Le code risquerait de ne plus fonctionner
dans une application. de procédures, ...) [Fig. 2].
et les ressources seraient extraites, et donc
Vous disposez même de 20 langues per- traduites, inutilement.
sonnalisées pour des langues spécifiques : Messages multilangues
vous pouvez donc livrer une version ch’ti Par défaut, les chaînes présentes dans l’édi- // Message d’information
de votre application ! teur de code ne sont pas traduites. // à traduire
Info(“Aucune donnée” )
Pour chaque langue du projet, il est possible Pour qu’une chaîne soit traduite, il est néces- ...
de définir les options linguistiques (format saire de la convertir en message multilangue. // Chaînes internes
d’affichage) pour : // ne pas traduire
• les nombres, Cette opération peut être effectuée par INILit(“PARAM”, “SAUV”, “”,
• les monétaires, le menu “Code .. Message Multilangues .. sFichierINI)

64 - TDF TECH 2012 - www.pcsoft.fr


cales spécifiques à la langue.

Lorsque la langue a été appliquée à tous les


éléments du projet et que tous les messages
multilangues ont été définis, l’application
peut être traduite.

2 Traduire l’applica-
tion avec WDMsg

La traduction de l’application peut être


effectuée :
• directement dans l’application au fur et
à mesure (si le développeur est polyglotte).
• à l’aide de l’outil WDMsg.

WDMsg permet de fournir un fichier de


ressources à traduire (à un cabinet de tra-
duction par exemple).

sMessage = ChaîneConstruit( WDMsg, c’est un module complémentaire


Notre astuce : pour convertir une chaîne en “Le fichier a été modifié le %1
de WINDEV qui industrialise la phase de
ressource multilangue directement, vous à %2 par %3”,dDateModif,
traduction.
pouvez utiliser le raccourci “Ctrl + T”. hHeureModif,sAuteur)

Cet outil :
Les messages multilangues se distinguent En utilisant la fonction ChaîneConstruit, le
• extrait toutes les ressources à traduire :
des chaînes classiques par un petit drapeau traducteur aura la ressource complète et
les libellés, les bulles de survol, les titres
en fin de chaîne. pourra donc la traduire dans son intégralité
de fenêtre, les messages, etc.
en respectant les constructions grammati-
Remarque : en version 17, il est possible
d’affecter directement dans le code une Fig. 1
chaîne avec du chinois, du grec, du russe,
de l’hindi, ...

Notre conseil
Lorsqu’une chaîne est construite avec des
paramètres, il est conseillé d’utiliser la
fonction ChaîneConstruit plutôt que de
concaténer les chaînes.

Cela facilitera la traduction, puisque le tra-


ducteur disposera d’une phrase complète
et pas de bouts de phrase.

De plus, les constructions grammaticales Fig. 2


pouvant varier d’une langue à l’autre, la
concaténation de bouts de phrase peut
donner une phrase incorrecte.

Par exemple, prenons le message suivant :

sMessage = “Le fichier a été


modifié le ”+ dDateModif +“ à
”+ hHeureModif +“ par ”+sAuteur

Dans ce cas, le traducteur aura 3 ressources :


“Le fichier a été modifié le ”, “ à ” , “ par ”.

TDF TECH 2012 - www.pcsoft.fr - 65


• traduit les ressources en s’appuyant sur WDMsg. Il est donc possible de le fournir
Fig. 3
un dictionnaire dynamique. avec les fichiers à traduire aux traducteurs.
• gère ce dictionnaire dynamique et l’enri-
chit. Nous ne détaillerons pas ici l’utilisation de
• réintègre tout ce qui a été traduit dans WDTrad : nous vous invitons à vous reporter
le projet. à l’aide ligne ou au support de cours du TDF
Tech 2008.

Extraction
L’extraction des messages par WDMsg est Réintégration
effectuée par le menu “Outils .. WDMsg .. Lorsque la traduction est terminée, les
Extraction des messages”. ressources peuvent être réintégrées dans le
projet initial via l’option de menu “Outils

4
L’assistant demande alors de choisir la langue .. WDMsg .. Réintégration des messages” :
à extraire. Cette langue sera la langue de il suffit de préciser la langue à réintégrer.
référence pour le traducteur (certains cabi-

3
nets traduisent uniquement à partir d’une
Adapter la base
langue donnée, l’anglais par exemple). de données
Changer la
Il est possible d’extraire les ressources de langue du projet
tout ou partie d’un projet : il est possible
par exemple de demander la traduction
Dans une application qui gère différentes
d’une seule fenêtre uniquement.
langues avec différents alphabets, il est
Une fois les ressources réintégrées, il est pos- nécessaire d’adapter les rubriques chaîne
Notre conseil
sible de changer la langue de l’application : de la base de données.
WDMsg peut effectuer l’extraction des res-
sources soit dans un fichier texte, soit dans • directement sous l’éditeur. Cela permet
d’avoir un rendu de l’application dans une Pour stocker des chaînes dans des alphabets
un fichier HyperFileSQL.
langue. Il suffit pour cela d’utiliser le rac- non latins, il est en effet nécessaire d’utiliser
Nous vous conseillons d’utiliser le fichier
courci “Ctrl + Alt + L” (ou le menu “Affichage des rubriques Unicode.
HyperFileSQL pour 3 raisons :
• La rapidité : le chargement et l’enregis- .. Langue affichée .. <Langue>”).
• en exécution. Le changement de la langue Rappel Ansi/Unicode :
trement des ressources sont beaucoup plus
utilisée dans une application est effectué • La norme Ansi code 1 caractère sur 1
rapides dans ce format.
par programmation via la fonction WLangage octet : la limite est donc de 255 caractères.
• L’unicité : un fichier HyperFileSQL permet
Nation. • La norme Unicode code 1 caractère sur
de gérer toutes les langues du projet. Avec
2 octets : la limite monte donc à 65 535
le format texte, il faudra générer autant
Attention : si la langue du projet est modi- caractères.
de fichiers qu’il existe de langues dans
l’application. fiée dans une fenêtre (par une option de
menu par exemple), il est nécessaire d’ap- L’Unicode permet ainsi de gérer tous les
• La simplicité : quand vous passez par un
peler la fonction Utilise pour rafraîchir la alphabets existants.
cabinet de traduction qui a son propre outil
de traduction, les processus d’import/export fenêtre avec la nouvelle langue.
sont simplifiés avec le fichier HyperFileSQL. Nos conseils
// Passe l’application
Il suffit en effet de parcourir le fichier pour 1. Il n’est pas conseillé de passer en Unicode
// en anglais
récupérer les traductions à faire. Nation(nationAnglais) toutes les rubriques chaînes : passez uni-
// Rafraîchit la fenêtre quement les rubriques nécessaires, qui
L’assistant d’extraction permet également
Utilise(MaFenêtre) stockeront des données dans des alphabets
de limiter le nombre d’extractions, en ne différents.
récupérant que les ressources ajoutées ou En effet, le passage d’une rubrique chaîne
Bien évidemment, lors du changement de
modifiées depuis la dernière extraction : en Unicode augmente la taille des fichiers
langue, tous les champs s’adaptent à la
moins de ressources à faire traduire, c’est de données et donc ralentit légèrement
langue et surtout à son sens d’écriture.
autant d’heures de traduction non facturée l’accès aux données.
et donc économisées !
Par exemple, si l’application est traduite
en arabe : Par exemple, pour un produit :
• le menu de l’application sera positionné • le libellé sera affiché dans plusieurs alpha-
Traduction
à droite, bets (dans les applications, sites, etc.) :
Pour lancer la traduction des messages, il
• la saisie sera effectuée de droite à gauche, donc la rubrique correspondante devra donc
suffit d’utiliser le menu “Outils .. WDMsg
• etc. être Unicode.
.. Traduction des messages”.
• la référence interne du produit, non visible
par les clients, pourra rester en chaîne Ansi
L’outil WDTrad se lance : c’est cet outil qui
“standard”.
gère la phase de traduction proprement dite.
Ce module est bien évidemment inclus avec

66 - TDF TECH 2012 - www.pcsoft.fr


2. Lorsque le type d’une rubrique est
Fig. 4
“Unicode”, il est possible de spécifier un
tri pour la rubrique :
• si la rubrique est destinée à stocker une
seule et unique langue, triez selon cette
langue.
• si la rubrique est amenée à contenir dif-
férentes langues, utilisez un tri multilingue
[Fig. 3].

5 Passage en mode
Unicode

Puisque les données sont au format Unicode,


il est nécessaire de gérer ce format dans
Fig. 5

l’application :
• les champs des fenêtres doivent afficher
des données Unicode,
• les variables doivent manipuler ces don-
nées correctement. En effet, il n’est pas
possible de manipuler des données Unicode
avec des chaînes Ansi.

La version 17 facilite cette adaptation : le


projet peut être passé en mode Unicode.

Pour cela, dans la fenêtre de description


de la configuration, onglet “Unicode”, il
faut choisir l’option “Utiliser des chaînes
UNICODE en exécution” [Fig. 4]. Cela signifie
que toute chaîne utilisée dans le code sera
forcément une chaîne Unicode.

Attention : cette opération n’est pas une


opération anodine. En effet, toutes les
manipulations de chaînes ou de fichiers
externes sont directement impactées.

Un audit important
Lors du passage en mode “Unicode”, WINDEV
réalise un audit du projet pour le passage en
Unicode pour faciliter la transition et mettre
en avant les traitements qui pourraient
ou des structures contenant des chaînes de passage à l’Unicode”.
poser problème.
doivent être vérifiés : il faut appeler la
version Unicode de l’API ou modifier les Remarque : il est bien évidemment toujours
Par exemple :
chaînes en chaîne Ansi. possible d’utiliser une chaîne au format Ansi
• la fonction ChangeAlphabet devient obso-
• etc. dans un projet “tout Unicode”.
lète. Elle peut donc être supprimée.
Il suffit de le préciser dans la déclaration
• si les fonctions fChargeTexte et fSauve-
L’audit remonte également des comporte- de la variable.
Texte manipulent des fichiers d’échange
ments différents, qui sont moins sensibles : sMaChaineANSI est
entre applications, il faut être sûr que les
autres applications gèrent les fichiers en
• l’utilisation des fonctions Minuscule ou une chaîne ANSI
Majuscule.
Unicode. De même pour toutes les fonctions
de manipulations de fichiers : fEcritLigne,
• la comparaison de chaînes via les fonctions 
Min, Max ou un opérateur de comparaison.
fLitLigne, fEcrit, etc.
• les appels d’API (par les fonctions API ou
Cet audit est disponible à tout moment via le
AppelDLL32) qui manipulent des chaînes
menu “Projet .. Audit d’édition .. Assistant

TDF TECH 2012 - www.pcsoft.fr - 67


HTML5  :
GESTION DU
“DRAG AND DROP”
Pour rendre un site WEBDEV plus interactif, il est
possible de mettre en place un “drag and drop” (ou glisser-
déplacer) dans les pages.

Effet “Waouh” garanti pour vos sites !


MoiMême..DndSource = ...
Projet d’illustration dndProgrammé
• l’événement à gérer. Plusieurs événements
sont disponibles : début et fin du glisser
Le projet utilisé pour illustrer ce sujet est déplacer, entrée et sortie du champ cible,
“WW_Drag_n_Drop_HTML5”, livré en stan- • 1 champ “destination” : il s’agit de l’image survol du champ cible et lâcher sur le champ
dard dans WEBDEV. du plan. Dans le code d’initialisation de cible. Ces événements sont identifiés par

1
ces champs, la propriété ..DndCible est des constantes (dndXXX).
donc utilisée.
Définir les sources Dans notre exemple, les deux événements
et les cibles du // Indique que le champ est gérés sont le survol et le lâcher.
// cible d’un “drag and drop”
“drag and drop” MoiMême..DndCible = dndProgrammé
// Active le drag and drop

2
// sur l’image du plan
La première étape dans la mise en place DnDEvénement(Survol,
du drag and drop est l’identification des
Déclarer les IMG_PLAN, dndSurvol)
champs qui vont être utilisés dans le “drag événements à DnDEvénement(Lacher,
IMG_PLAN, dndLâcher)
gérer

3
and drop”.

Dans notre exemple, il existe :


La fonction WLangage DnDEvénement per- Agir pendant un
• 3 champs “sources” : il s’agit des 3 champs
image d’extincteur. Dans le code d’initialisa- met de définir les événements gérés lors événement
tion de ces champs, la propriété ..DndSource du drag and drop. Cette fonction attend
est donc utilisée pour indiquer que ces en paramètres :
champs sont sources d’un “drag and drop” • le nom de la procédure WLangage qui sera
programmé. exécutée lorsque l’événement aura lieu. Survol de la cible
• le champ sur lequel l’événement doit être La procédure “Survol” est appelée lorsque
// Indique que le champ est géré. Il est possible de spécifier un champ l’utilisateur survolera la zone cible pendant
// source d’un “drag and drop” ou tous les champs de la page. un “drag and drop”.

68 - TDF TECH 2012 - www.pcsoft.fr


// Récupère le champ source
sIDExtincteur = _DND.ChampSource
// La couleur est différente
// selon l’extincteur
// sélectionné
SELON sIDExtincteur
CAS IMG_EXTINCTEUR..Nom
nCouleur = 255
CAS IMG_EXTINCTEUR1..Nom
nCouleur = 3243262
CAS IMG_EXTINCTEUR2..Nom
nCouleur = 65535
AUTRE CAS
nCouleur = 16706050
FIN

4. L’ensemble des données (coordonnées,


couleur, taille) est ensuite mémorisé dans
un tableau pour pouvoir être réutilisé lors
du dessin par DessineTout.

// Sauvegarde les coordonnées


sCoordonnees = sIDExtincteur
+TAB+ nXImage +TAB+ nYImage
+TAB+ SAI_POTENTIOMETTRE
+TAB+ nCouleur
// Mémorise la position // Sauvegarde les informations
// du curseur gnIndiceCourant++
nXImage = _DND.SourisPosX gtabListeCoordonnees[...
nYImage = _DND.SourisPosY gnIndiceCourant]=sCoordonnees
// Dessine les extincteurs
3. Le champ source du “drag and drop” est // sur le plan
également récupéré. Selon le champ source, DessineTout()
la couleur associée va être mémorisée pour
le dessin. 

Dans notre cas, l’action à effectuer lors


du survol est de modifier le curseur pour
indiquer à l’utilisateur l’action autorisée
par le “drag and drop” sur ce champ cible.

Il suffit pour cela d’utiliser la fonction


DnDCurseur, avec la constante dndDépla-
cer dans notre cas.

// Modifie le curseur
DnDCurseur(dndDéplacer)

Lâcher du “drag and drop”


Lors du lâcher, plusieurs actions sont réa-
lisées.
1. L’action de déplacement est acceptée
via la fonction DnDAccepte.

// On accepte le drag and drop


DnDAccepte(dndDéplacer)

2. La position du curseur est récupérée


via _DND.SourisPosX et _DND.SourisPosY.
Ces variables renvoient en effet la position
du curseur au moment du lâcher sur la cible.

TDF TECH 2012 - www.pcsoft.fr - 69


OUVERTURE
SUR LE MONDE
ACCÉDEZ NATIVEMENT
À VOS DONNÉES
OUTLOOK ET LOTUS NOTES

Le WLangage dispose d’une centaine de fonctions pour


accéder aux données (emails, tâches, rendez-vous,
contacts, groupes, documents) Outlook et Lotus Notes.
Cet article montre comment accéder aux rendez-vous
Outlook et à une base de données Lotus Notes.

Projet d’illustration d’ouvrir une session sur Outlook via la fonc- et RendezVousSuivant.
tion OutlookOuvreSession. Cette fonction • remplir l’agenda à l’aide de la variable
Le projet utilisé pour illustrer ce sujet est permet ensuite d’accéder à tous les éléments mRendezVous.
“WD Ouverture TDF17” (présent sur le DVD). de Outlook (rendez-vous, tâches, etc.). AgendaEvt est un RendezVous
// Parcourt les rendez-vous
Pour obtenir une liste complète des possi- Si aucun profil n’est précisé en paramètre, SI RendezVousPremier(nIDSession)
bilités d’interaction avec Outlook et Lotus la fonction : ALORS
Notes, vous pouvez consulter les pages d’aide • affichera une fenêtre de choix du profil TANTQUE
suivantes : si plusieurs profils sont définis. mRendezVous.EnDehors=Faux
• “http://doc.pcsoft.fr/?3032137&name= // Importe les données
• utilisera le profil du poste dans le cas
acceder-outlook”, // de l’événement
contraire.
AgendaEvt .Auteur = “”
• “http://doc.pcsoft.fr/?3032136&name=
// Ouvre une session AgendaEvt .Contenu =
acceder-lotus-notes”. nIDSession = ... mRendezVous.Notes
N’hésitez pas également à tester les dif- OutlookOuvreSession(“”) AgendaEvt .DateDébut =
férents exemples livrés en standard dans mRendezVous.DateDébut
La manipulation des rendez-vous peut être
WINDEV : AgendaEvt .DateFin =
effectuée par les fonctions RendezVousXXX
mRendezVous.DateFin
• “Accès aux bases Notes et Outlook” du WLangage. AgendaEvt .ID =
(exemple unitaire WINDEV)
mRendezVous.ID
• “WD Outlook “ (exemple Complet WINDEV). Lors de la lecture d’un rendez-vous par une AgendaEvt .Lieu =
de ces fonctions, une variable WLangage mRendezVous.Lieu
mRendezVous est automatiquement rem- AgendaEvt .Titre =
Ouverture sur Outlook plie avec les informations du rendez-vous mRendezVous.Objet
Outlook.
AgendaEvt .Catégorie =
La fenêtre “FEN_Agenda” du projet per-
mRendezVous.Catégorie
met d’afficher les rendez-vous d’un agenda ...
Outlook afficher dans un champ Agenda. Pour notre exemple, il suffit donc de : // Ajoute le rendez-vous
Dans un premier temps, il est nécessaire
• parcourir les rendez-vous du profil à AgendaAjouteRendezVous(...
l’aide des fonctions RendezVousPremier AGD_SansNom1,AgendaEvt)

70 - TDF TECH 2012 - www.pcsoft.fr


Le WLangage dispose de fonctions permet-
tant d’accéder aux bases de données Domino
(Lotus Notes).

Voici un code générique permettant de


manipuler les documents d’une base.

Dans un premier temps, il est nécessaire


de se connecter au serveur Domino via la
fonction NotesOuvreConnexion, en préci-
sant le mot de passe , le nom du serveur et
le certificat d’identification.
nIDConnexion = ...
NotesOuvreConnexion(“mdp”,
“”,fRepExe()+“\notes.id”)
Il suffit alors de :
• se connecter à la base souhaitée.
nIDBase = NotesOuvreBase(...
nIDConnexion,fRepExe()+
“\MaBase.nsf”)
• récupérer les vues disponibles.
// Ajoute la liste des vues
ListeAjoute(COMBO_VUE,
NotesListeVue(nIDBase))
• activer la vue souhaitée.
// Active la vue
NotesActiveVue(nIDBase,
COMBO_VUE[COMBO_VUE])
• parcourir les documents de la vue à
l’aide des fonctions NotesDocumentXXX
(NotesDocumentPremier et NotesEnDehors
dans notre exemple).
NotesDocumentPremier(nIDBase)
SI PAS NotesEnDehors(nIDBase)
ALORS
// Affiche les documents
FIN
Les documents peuvent ensuite être mani-
pulés à l’aide des fonctions :
• NotesListeChamp pour récupérer la liste
des champs du document.
// Liste les champs du document
// en cours
sListe = NotesListeChamp(nIDBase,
notesLstType)
• NotesChamp pour récupérer la valeur
d’un champ du document.
// Récupère la valeur du champ
// Rendez-vous suivant Ouverture sur Lotus // “MonChamp”
RendezVousSuivant(... Notes sValeur = NotesChamp(nIDBase,
nIDSession) “MonChamp”)
FIN Attention : pour accéder aux données de
• NotesExtraitFichierAttaché pour récupé-
FIN Lotus Notes, le client Lotus Notes doit être
rer les fichiers attachés à un champ.
En fait de traitement, la session est fermée installé sur le poste des utilisateurs.
// Récupère le 1er fichier
par la fonction FermeSession. Cette fonction
Le client Lotus Notes est disponible à cette // attaché du champ “MonChamp”
permet de fermer une session Outlook ou NotesExtraitFichierAttaché(...
adresse : “http://www.ibm.com/develope-
Lotus Notes. nIDBase,“MonChamp”,1,sImage)
rworks/downloads/ls/lsndad/index.html”.
// Fin de la session
FermeSession(nIDSession) 

TDF TECH 2012 - www.pcsoft.fr - 71


Imprimer un
planning ou un
agenda avec
WINDEV : c’est
un clic, c’est
automatique et
c’est super
pratique !

IMPRIMEZ VOS
PLANNINGS ET
VOS AGENDAS
SIMPLEMENT
Projet d’illustration contextuel du champ, accessible par clic ExécuteFAA, en précisant le champ concerné
droit : il suffit alors de cliquer sur l’option et la FAA à exécuter. L’impression d’un plan-
Le projet utilisé pour illustrer ce sujet est “Imprimer”. ning est exécutée en utilisant la constante
“WD Planning TDF17” (présent sur le DVD). faaImprimerPlanning par exemple.
Une fenêtre de paramétrage d’impression
Retrouvez deux articles sur la création et [Fig. 1] permet alors de choisir : // Impression du planning
la personnalisation du champ planning dans • l’orientation d’impression : portrait ou ExécuteFAA(PLN_LOCATIONS,
les pages “Annexes” de ce support de cours. paysage. faaImprimerPlanning)
• le style d’impression : jour, semaine, mois.
Remarque :
Impression • l’étendue, c’est-à-dire la période à impri-
La fonction WLangage DésactiveFAA permet
automatique mer. Cette période est définie par une date
de désactiver la possibilité d’imprimer un
de début et une date de fin.
planning, pour un champ planning donné ou
WINDEV dispose en standard de FAA (les
pour toute une application.
Fonctionnalités Automatiques de l’Applica- Impression // Empêche l’impression
tion). Ces FAA permettent aux utilisateurs
d’applications WINDEV de bénéficier de programmée DésactiveFAA(PLN_LOCATIONS,
faaImprimerPlanning)
Fonctionnalités avancées (export Word ou Comme pour toutes les FAA disponibles, il est
Excel, mémorisation de valeur, etc.) sans possible d’exécuter la FAA d’impression de
code de la part du développeur. planning par programmation. Cela permet
Personnaliser
En version 17, les champs agenda et planning de proposer la fonctionnalité via un bouton l’impression
disposent d’une nouvelle FAA “Imprimer”. ou une option de menu par exemple.
Il est possible de personnaliser l’état utilisé
L’impression d’un champ agenda ou plan- L’exécution d’une FAA par programma- lors de l’impression en créant un état de type
ning s’effectue simplement via le menu tion s’effectue via la fonction WLangage “Planning”. L’exemple “WD Planning TDF17”

72 - TDF TECH 2012 - www.pcsoft.fr


Fig. 2
propose un état planning personnalisé. Cet
état peut être imprimé à partir du bouton
“Imprimer” de la fenêtre de l’exemple.
L’assistant de création d’état va permettre
de choisir le type de champ concerné (agenda
ou planning) ainsi que le mode d’affichage
(jour, semaine, mois, ressource, ...) [Fig. 2].
La source des données définit l’origine des
données à afficher dans l’état : il est pos-
sible de choisir un fichier de données, une
requête ou un champ par exemple.
Il suffit ensuite d’indiquer la rubrique asso-
ciée à chaque information d’un rendez-vous.
Par défaut, WINDEV détecte automatique-
ment les informations dont le nom corres-
pond [Fig. 3].
Évidemment, tous les paramètres définis
dans l’assistant de création de l’état peuvent
être modifiés ultérieurement. Fig. 3
Pour modifier les options d’affichage d’un
état planning, il suffit d’ouvrir la descrip-
tion du champ planning contenu dans l’état
[Fig. 4] et de modifier les options des onglets
“Général” et “Contenu”. Il est également
possible de modifier les propriétés du plan-
ning. Par exemple pour personnaliser le
libellé de la période affichée dans l’en-tête :
// Personnalise le libellé
// de période de l’en-tête
PLN_PlanningPerso..LibelléPér
iodeEntête = ...
“Voici mon planning du ” +
DateVersChaîne(dDebut,
“JJJJ JJ MMMM AAAA”) +
“ au ”+
DateVersChaîne(dFin,
“JJJJ JJ MMMM AAAA”)


Fig. 1 Fig. 4

TDF TECH 2012 - www.pcsoft.fr - 73


KINECT
Interfacez vos applications WINDEV avec un boîtier Kinect et créez dès
aujourd’hui les applications de demain !

Projet d’illustration gée de gérer les flux 3D. Importation du


Les projets utilisés pour illustrer ce sujet composant
sont : Présentation de la Dans un premier temps, il est nécessaire
• “WD Kinect TDF17 - Source” qui est un Kinect d’importer le composant livré “WD Kinect”.
composant externe contenant le code source
pour s’interfacer avec la Kinect. La Kinect est un périphérique initialement
L’importation d’un composant externe dans
• “WD Kinect TDF17 - Exemple” qui est un conçu pour une utilisation avec une console
un projet est réalisée par le menu “Atelier
exemple d’utilisation du composant. de jeux XBOX360.
.. Composant externe .. Importer un compo-
Ces deux projets sont présents sur le DVD. sant dans le projet .. À partir d’un fichier”.
La particularité de ce périphérique est d’in-
teragir directement avec son corps et/ou sa
Prérequis voix, sans utiliser de manettes/joysticks/ Utilisation du
souris et autres périphériques standards.
Pour utiliser l’exemple “WD Kinect TDF17”, composant
il est bien sûr nécessaire de disposer de : La Kinect peut être utilisée comme un
• un boîtier “Kinect for Windows” relié périphérique de PC et permet de mettre Démarrer
au PC, en œuvre des applications d’une nouvelle La classe principale de gestion de la Kinect
• Windows 7 (ou supérieur), envergure. est la classe Kinect. Cette classe dispose
• la version 170068 de WINDEV (ou supé- de différentes propriétés permettant de
rieure). Les applications WINDEV peuvent utiliser ce récupérer :
périphérique grâce au code source livré avec • des informations sur le matériel,
L’exemple met également à disposition :
l’exemple “WD Kinect TDF17” sous forme • l’état de la Kinect,
• un runtime (“KinectRuntime-v1.0-Setup.
d’un composant réutilisable. • ...
exe”) à exécuter pour installer les pilotes, ...
L’objet de base est donc un objet Kinect.
• une DLL spécifique “WDKINECT.dll”, char-

74 - TDF TECH 2012 - www.pcsoft.fr


// Réceptionne les l’objet Kinect.
// événements de connexion,
// déconnexion d’un // Ajoute notre callback de :
// capteur Kinect // - réception de trame 3D
KinectCapteurDétecte(... MaKinect:Trame3DAjoutée+=
SurDétectionCapteur) SurRéception3D
// - réception de trame vidéo
Définir les écouteurs MaKinect:TrameVidéoAjoutée+=
Pour chaque flux traité, il est nécessaire de SurRéceptionVidéo
définir des “écouteurs” : il s’agit de procé- // - réception de skeleton
MaKinect:TrameSkeletonAjoutée+=
dures qui seront automatiquement appelées
SurRéceptionSkeletons
lors d’événement sur un flux (réception // - signal audio modifié
d’une trame, changement d’angle de la MaKinect:ImageSignalAudioModi
source sonore, etc.) fiée+=SurRéceptionImageSignal
Audio
Ces procédures doivent attendre en para-
mètre l’objet Kinect qui a reçu la trame // Procédure écouteur 3D
et une variable de type KinectTrameXXX qui PROCEDURE SurRéception3D(
pclCapteur est une Kinect
dépend du type de trame (KinectTrameVidéo
dynamique <utile>,
pour une trame vidéo, KinectTrame3D pour
stTrame3D est une
une trame 3D, etc.). KinectTrame3D)

Ces structures contiennent différentes infor- Remarque :


mations sur la trame : Les propriétés TrameXXAjoutée sont des
• une image de la trame, variables de type Procédure. L’opérateur
• un masque (pour les trames 3D) qui définit “+=” permet d’ajouter une procédure à
La connexion au capteur s’effectue par la par exemple le contour d’une personne exécuter à la variable. Il est donc possible
fonction KinectConnecte qui attend l’iden- détectée, d’ajouter, pour un seul écouteur, plusieurs
tifiant ou l’indice de la Kinect à laquelle • la source binaire de la trame telle qu’elle procédures à exécuter à la réception d’une
se connecter. a été reçue par le capteur, trame.
• des informations diverses sur la trame
La fonction KinectDémarre démarre la (numéro de trame, timestamp, résolution, La propriété Trame3DVidéoSynchronisée
capture proprement dite des différents flux format, FPS). à la particularité d’exécuter les procédures
demandés. Il est en effet possible de choisir à la réception d’une trame vidéo ET de la
le ou les flux qui doivent être capturés via Pour renseigner les écouteurs, il suffit d’uti- trame 3D.
les constantes kciXXX. liser les propriétés TrameXXXAjoutée de

MaKinect est une Kinect


// On se connecte au capteur
// avec l’identifiant
MaKinect <- ...
KinectConnecte(sIDCapteur)
// Démarre le capteur
// sur tous les flux
KinectDémarre(MaKinect, ...
kciTout, Faux)

Remarque : pour un même PC, il est possible


de connecter plusieurs Kinects. Pour gérer
ce cas, il est possible d’utiliser :
• la fonction KinectCapteurOccurrence,
qui renvoie le nombre de capteurs actuel-
lement branché.

// Récupère le nombre de
// capteurs connectés
nNbCapteurs = ...
KinectCapteurOccurrence()

• la fonction KinectCapteurDétecte, qui


permet d’être appelée dès qu’un nouveau
capteur Kinect est connecté à la machine.

TDF TECH 2012 - www.pcsoft.fr - 75


KINECT (SUITE)
Notre conseil : les procédures “écouteurs” Spécificités audio skeleton qui bouge peu ou pas du tout est
sont exécutées quasiment en permanence considéré comme stable (voir la propriété
lors de la réception de flux. Il est donc Pour capter les signaux audio, la Kinect EstStable des objets KinectSkeleton). Cette
important de ne pas effectuer de traite- dispose de plusieurs micros qui lui per- fonction permet donc de régler le seuil et
ments lourds et consommateurs de CPU mettent de déterminer la position de la d’adapter la sensibilité des skeletons.
dans ces procédures, pour éviter de ralentir source sonore.
• ...
les affichages.
La gestion de l’audio est effectuée par un

Terminer la capture
objet KinectSourceAudio. Cet objet dispose Exemple livré
de différentes propriétés qui permettent
Pour stopper la capture, il suffit d’utiliser notamment de supprimer les bruits, para- L’exemple “WD Kinect TDF17 - Exemple”
la fonction KinectArrête. métrer le mode et l’angle d’orientation des est un exemple d’utilisation didactique du
Si cette fonction n’est pas utilisée, le com- micros (“beam”). composant “Kinect”.
posant se chargera d’effectuer les libérations
nécessaires. L’activation des micros est effectuée par la Cet exemple permet de :
fonction KinectAudioActiveSource. • afficher le flux vidéo (avec ou sans ske-
// Arrête le capteur leton),
KinectArrête(MaKinect) MaSourceAudio est une • afficher le flux 3D (avec ou sans skeleton),
KinectSourceAudio dynamique • afficher et enregistrer le flux audio,
Remarque : la libération des ressources // Active la source audio • afficher la position de la source audio.
allouées à l’utilisation de la Kinect peut SI KinectOptionActivée(MaKinect,
prendre plusieurs secondes. kciAudio) ALORS 
MaSourceAudio = ...
KinectAudioActiveSource(
Skeleton MaKinect)
FIN
Un skeleton est une représentation sous
forme de points (coordonnées) d’une per-
sonne. Les différents points sont les points Fonctions utilitaires
caractéristiques d’un être humain : tête,
cou, épaule, coude, mains, ... Le composant “WD Kinect”
propose plusieurs fonctions
La Kinect peut détecter jusqu’à 6 personnes, utilitaires pour faciliter l’uti-
mais seuls 2 skeletons peuvent être suivis lisation et l’analyse des élé-
simultanément. Les autres personnes sont ments récupérés (vidéo, audio,
alors simplement identifiées par leur bary- skeletons, ...) :
centre (point central). • les fonctions KinectFluxXXX­
VersChamp permettent d’affi-
Un skeleton est représenté par la classe cher automatiquement un flux
KinetSkeleton du composant. 3D ou vidéo dans un champ
image.
• les fonctions Skeleton­
Spécificités 3D et VecteurXXX permettent de
vidéo faciliter l’analyse des positions
des skeletons.
Les informations 3D détectées par la Kinect
Par exemple la fonction
sont récupérées par l’intermédiaire de
SkeletonVecteurRectangle
faisceaux infrarouges : selon la distance à
détermine le rectangle dans
laquelle un point infrarouge est “stoppé”
lequel le skeleton est défini.
(par un corps, un objet, ...), la Kinect déter-
mine une profondeur. • les fonctions
KinectAudioCaptureDébut
Par défaut, la Kinect est programmée pour et KinectAudioCaptureFin
gérer des éléments situés entre 80cm et 4m permettent d’enregistrer dans
de distance. La propriété DistanceType de un fichier le flux audio capté
l’objet KinectFlux3D permet de réduire par la Kinect.
cet intervalle à 40cm-3m (pour détecter • la fonction KinectSkeleton­
des éléments très proches, par exemple SeuilStabilité permet de
si la Kinect est disposée juste au-dessus modifier le seuil de stabilité
de l’écran). des skeletons. En effet, un

76 - TDF TECH 2012 - www.pcsoft.fr


LICENCE LST La WDNews
Fournissez votre email et recevez des
PROGRAMME EXEMPLE désigne tout • Si les applications sont destinées exclusi- informations régulières en plus de la LST.
logiciel source fourni avec la LST, et en vement à un usage interne au site physique
particulier celui qui inclut ce texte. de la société abonnée à la LST, il n’y a pas La LST fournit tous les trimestres des infor-
de contrainte particulière à l’utilisation du mations, mises à jour et trucs et astuces sur
Le PROGRAMME EXEMPLE est fourni dans
PROGRAMME EXEMPLE dans les applications. les différents produits PC SOFT.
un but didactique.
• Si le PROGRAMME EXEMPLE est destiné à Pour obtenir automatiquement des infor-
L’utilisation de ce programme s’effectue être diffusé, à titre gratuit ou payant, par mations entre deux LST, fournissez votre
sous l’entière responsabilité de son utili- quel que moyen que ce soit, ce PROGRAMME adresse email à PC SOFT. Vous serez ainsi
sateur. La responsabilité de PC SOFT ne EXEMPLE doit être inclus dans une appli- régulièrement prévenu :
pourra en aucun cas être mise en cause si cation dont 90% au moins des fonctionna- • des nouvelles versions disponibles en
le PROGRAMME EXEMPLE ne fonctionne pas lités de cette application est constituée téléchargement.
tel que vous l’attendez, ou pour quelque d’éléments autres que des PROGRAMMES • des nouvelles FAQ disponibles sur le site
raison que ce soit. EXEMPLE provenant d’une LST. de PC SOFT.
• ...
Tout détenteur d’une licence WINDEV 16 Il est donc interdit, par exemple, de modi-
et/ou WEBDEV 16 et/ou WINDEV Mobile 16 fier légèrement un PROGRAMME EXEMPLE N’hésitez pas à envoyer un email à PC SOFT
et/ou WINDEV 17 et/ou WEBDEV 17 et/ou et de le diffuser. Il est interdit de copier (pcsoft@pcsoft.fr) pour indiquer vos coor-
WINDEV Mobile 17 enregistrée peut utiliser le contenu de cette LST, en partie ou en données électroniques.
et/ou modifier ce PROGRAMME EXEMPLE totalité, par quelque moyen que ce soit
Votre adresse email ne sera utilisée que
en respectant les conditions suivantes : et quel que soit le but. Il est interdit de
par PC SOFT.
• Les PROGRAMMES EXEMPLE peuvent être dupliquer et/ou diffuser et/ou transmettre
inclus dans des applications sauf mention toute ou partie du CD / DVD.
Le support technique pour ce PROGRAMME
contraire dans l’article de présentation Une LST est destinée à l’usage unique de EXEMPLE est accessible à travers le ser-
et/ou le programme fourni. la personne qui y est abonnée. vice ‘‘Assistance Directe” uniquement.
• Toute mention se rapportant à PC SOFT
Il est interdit de prêter, louer ou vendre “la Malgré les soins apportés à sa rédaction,
ou à WINDEV ou à WEBDEV devra être
LST” (CD et / ou magazine). Il est interdit ce document n’est pas contractuel. Les
supprimée, afin qu’aucun doute ne puisse
de diffuser par quelque moyen que ce soit copies d’écran sont indicatives. PC SOFT
subsister dans l’esprit d’un utilisateur final.
les codes sources accompagnant une LST. se réserve le droit d’améliorer et de
modifier ses produits à tout moment.

ABONNEZ-VOUS !
L11181
Tarif modifiable sans préavis Vos Nom & Prénom : ...........................................................................
Votre Société : ..................................................................................
Bulletin d’abonnement à retourner avec Votre Adresse précise : ........................................................................
votre règlement à : .....................................................................................................
PC SOFT Code Postal : .............................. Ville : .............................................
Lettre du Support Technique Pays : ........................................ Tel : ...............................................
BP 44 408 Adresse Email : .................................................................................
34197 MONTPELLIER Cedex 05
France Je choisis un abonnement “LST PC SOFT” pour : À partir du numéro : ..............

En cas de paiement par carte bancaire,


FRANCE Métropolitaine □ 1 an - 4 N°+ 4 DVD : 159 euros HT; 190,16 euros TTC
vous pouvez nous faxer votre abonne-
□ 2 ans - 8 N°+ 8 DVD : 279 euros HT ; 333,68 euros TTC
ment au :
+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
Note : une facture acquittée est systématique-
 Ci joint mon règlement de : ............. Euros TTC ment adressée.

□ Je règle par chèque.        J’autorise PC SOFT à débiter sur ma carte VISA/MasterCard

□□□
            la somme de : ..................... Euros
□ Je règle par Carte Bancaire.      Cryptogramme :

□□□□□□□□□□□□□□□□ □□ □□□□
Numéro complet de la carte : la carte expire : mois année

Signature obligatoire du détenteur de la carte :


Nom du détenteur de la carte :
..........................................................

LA LETTRE DU SUPPORT TECHNIQUE PC SOFT - 77


II - TDF TECH 2012 - www.pcsoft.fr
Annexes

TDF TECH 2012 - www.pcsoft.fr - III


LE CHAMP PLANNING
Disponible en WINDEV et en WEBDEV, le champ planning vous permet de
gérer simplement des événements pour de multiples ressources.

Projet d’illustration Création d’un champ L’assistant demande alors de définir les
éléments correspondant aux informations :
Les exemples “WD Planning” et “WD planning • obligatoires [fig. 4] : titre, dates de début
Agenda”, livrés en standard avec WinDev Pour créer un champ planning, il suffit, dans et de fin, ressource.
illustrent l’utilisation des champs Planning l’éditeur de fenêtres ou de pages, d’utiliser • facultatives [fig. 5] : contenu, auteur,
et Agenda de WinDev. le bouton “Créer un champ Planning”. lieu, invités, etc.

Le premier élément à sélectionner est la Remarque : Dans le cas d’une source


Agenda, Planning : source du champ planning, autrement dit HyperFileSQL, si les noms des rubriques
quelles différences ? “comment le champ planning va-t-il être sont suffisamment explicites, l’assistant
rempli ?” [fig. 3]. va détecter automatiquement les bonnes
Le champ Agenda, apparu en version 15,
rubriques à utiliser.
permet de gérer les événements, les ren- Cette source peut être :
dez-vous d’une seule et unique ressource. • du code. Le planning devra alors être L’assistant peut alors être terminé, non sans
rempli en utilisant les fonctions WLangage avoir indiquer :
Un agenda [fig. 1], permet d’afficher la liste
de la famille PlanningXXX (essentiellement • le mode d’affichage du planning, horizontal
des rendez-vous : les disponibilités d’une
PlanningAjouteRendezVous) (les ressources sont affichées en ligne) ou
salle ou d’un véhicule dans une agence de
• un fichier HyperFileSQL (c’est cette vertical (les ressources sont affichées en
location, etc.
méthode qui est utilisée dans la fenêtre colonne).
Le champ Planning, permet de gérer plu- “FEN_Planning”). Il suffit dans ce cas de • le nombre de jours à afficher. Le planning
sieurs ressources : les rendez-vous de plu- sélectionner le fichier HyperFileSQL présent dispose de différentes périodes prédéfinies
sieurs collaborateurs, les disponibilités de dans l’analyse. (journée, mois complet, semaine de 5 ou 7
plusieurs salles ou de plusieurs véhicules • une variable de type “tableau de rendez- jours, du premier au dernier rendez-vous)
d’une agence de location, ou même la liste vous”. Cette variable peut être une variable mais il est possible d’afficher un nombre de
des rendez-vous de plusieurs collaborateurs globale au projet, à la fenêtre ou définie jours particulier.
[fig. 2]. dans une collection de procédures. • les granularités de durée (durée minimale
d’un rendez-vous) et déplacement (précision
de positionnement d’un rendez-vous).

IV - TDF TECH 2012 - www.pcsoft.fr


Fig. 1

Suppression
Lorsque le champ planning est lié à une base
de données, la FAA de suppression d’un
rendez-vous n’est pas activée par défaut,
pour éviter les risques de suppression par
inadvertance qui supprimeraient directe-
ment dans la base de données.
Pour proposer cette option aux utilisateurs,
il suffit de l’activer, via l’option “Autoriser
la suppression” de l’onglet “Contenu” de la
description du champ planning.
Fig. 2
Remplir un planning
par programmation
Si le planning est un planning “programmé”,
le remplissage doit être effectué à l’aide
de la fonction PlanningAjouteRendezVous.
Cette fonction accepte deux syntaxes :
• la première syntaxe attend en paramètres
les informations obligatoires (titre, res-
source, dates de début de fin).
PlanningAjouteRendezVous(...
  PLN_RendezVous, “Marcel”,
Et voilà, le planning est créé et opération-   “Réunion commerciale”,
nel ! Il est bien évidemment possible de   dDateDebut, dDateFin, Fig. 3
paramétrer ce planning dans les moindres   “REUNION”)
détails, nous le verrons dans l’article suivant, • la seconde syntaxe attend en paramètre
mais pour l’instant regardons comment le une variable de type RendezVous. Ce type
manipuler. de variable permet de renseigner directe-
ment toutes les informations (obligatoires
Utilisation du champ et facultatives) d’un rendez-vous.
planning Rendezvous est un RendezVous
Rendezvous.DateDébut = ...
En exécution, le champ planning dispose dDateDebut
de FAA (Fonctionnalités Automatiques de Rendezvous.DateFin = ...
l’Application). dDateFin
Rendezvous.Titre = ...
Il est par exemple possible de changer le
“Réunion commerciale” Fig. 4
mode d’affichage du planning : au mois, à Rendezvous.Ressource = ...
la semaine entière, au jour, etc. “Marcel”
Ces FAA permettent également de : PlanningAjouteRendezVous(...
• ajouter un rendez-vous. Il suffit pour cela   PLN_RendezVous, Rendezvous)
de sélectionner une période et d’utiliser
l’option “Nouveau rendez-vous” du menu Notre astuce
contextuel.
Si vous remplissez des plannings avec de
• modifier un rendez-vous, via l’option
nombreuses ressources / de nombreux ren-
“Éditer le rendez-vous” du menu contextuel.
dez-vous, n’hésitez pas à désactiver l’affi-
• déplacer un rendez-vous à la souris, en
chage du planning avant remplissage pour
sélectionnant le rendez-vous et en faisant
éviter tout effet de “paint” et accélérer
un “glisser déplacer”. Il est alors possible Fig. 5
l’affichage du champ.
d’affecter un rendez-vous à une autre res-
source. // Désactive l’affichage
• augmenter sa durée, en redimensionnant PLN_RendezVous..
 AffichageActif = Faux
le rendez-vous.
// Traitement de remplissage
Les modifications effectuées dans le planning ...
sont automatiquement répercutées dans la // Réactive l’affichage
base de données ou dans la variable utilisée. PLN_RendezVous..
 AffichageActif = Vrai

TDF TECH 2012 - www.pcsoft.fr - V


STYLE, PARAMÈTRE, CODE :
PERSONNALISEZ VOS
PLANNINGS À 100%
En quelques clics, vous pouvez créer un champ planning
déjà très riche en fonctionnalités et très graphique.
Mais vous pouvez COMPLÈTEMENT personnaliser le champ
planning : couleur, taille, police, affichage de rendez-vous,
comportement, etc.

// Change la granularité
Modification des // d’un rendez-vous :
liste (cadre extérieur, horaires ouvrables,
jours fériés, etc.) [fig. 2],
paramètres // 60 minutes • modifier les couleurs et polices.
PLN_RendezVous..
Le planning dispose de nombreux paramètres
 GranularitéRendezVous=60
qui permettent d’adapter le champ à tous
// Change l’heure de début
Affichage d’un
types de besoin : taille de rendez-vous,
// des heures ouvrables : rendez-vous
plages horaires, etc. // 08h30
PLN_RendezVous.. Par défaut, l’affichage d’un rendez-vous
En édition  HeureOuvrableDébut = “0830” comprend [fig. 3] :
Bien évidemment, tous les paramètres du • un bandeau “titre”,
champ planning peuvent être modifiés depuis
l’éditeur de fenêtres (ou éditeur de pages).
Personnalisation du • un libellé “contenu”,
• une image,
Il suffit pour cela d’ouvrir la fenêtre de
style • un pictogramme indiquant la récursivité
description du champ planning, onglet Par défaut, le champ planning utilise le style d’un rendez-vous.
“Détails” [fig. 1]. par défaut du gabarit associé au projet.
Sous WINDEV, cet affichage est en fait déter-
Mais il est tout à fait possible de person-
En exécution naliser tous les éléments graphiques d’un
miné par une fenêtre interne, qui peut être
La modification des paramètres d’un champ complètement remaniée dans l’éditeur de
champ planning.
planning peut être effectuée par program- fenêtres.
mation, en utilisant les propriétés associées Il suffit pour cela de :
Pour récupérer la fenêtre interne d’affi-
au champ planning. • ouvrir la fenêtre de description du champ
chage, il suffit de sélectionner l’option
Par exemple : planning, onglet “Style”.
“Fenêtre prédéfinie” dans l’onglet “Général”
• sélectionner l’élément à modifier dans la
de la fenêtre de description du champ plan-

VI - TDF TECH 2012 - www.pcsoft.fr


Le planning ou l’agenda sont
des champs à part entière dis-
posant de fonctions spécifiques
et d’une fenêtre à 7 onglets
dédiée.

Il suffit donc d’ajouter le code nécessaire


dans le traitement voulu, en manipulant la
variable du traitement.
Par exemple, pour demander confirmation
à l’utilisateur avant la suppression d’un
rendez-vous, il suffit de personnaliser le
traitement “Suppression d’un rendez-vous
de <NomDuChampPlanning>” comme suit :
PROCEDURE Suppression(...
  rdvSupprimé est un
    RendezVous)
// Demande confirmation
// AVANT la suppression
SI OuiNon(Non,ChaîneConstruit(
  “Êtes-vous sûr de vouloir
  supprimer le rendez-vous
  %1 ?”, rdvSupprimé.Titre))
    = Non ALORS
    // Interruption du
    // traitement par défaut
    // la suppression n’est
    // pas effectuée
    RENVOYER Faux
FIN
ning : la fenêtre interne “FI_WinDevVueRDV” de description. Remarque :
est alors ajoutée au projet. Sous WEBDEV, chaque traitement du champ
Cette fenêtre est entièrement
Adaptation du planning est disponible à la fois en code
personnalisable : comportement Serveur et en code Navigateur.
• via l’éditeur de fenêtres, il est pos- Attention donc à bien positionner le code
Par défaut, le champ planning permet
sible, par exemple, de supprimer le libellé dans le bon traitement.
d’ajouter, modifier, supprimer et déplacer
“Contenu”, d’augmenter la taille de l’image des rendez-vous.
associée, d’ajouter un nouveau champ, etc.
Mais il est possible d’effectuer des traite-
Exemples
• via l’éditeur de code, il est possible de
manipuler le rendez-vous en cours via la ments personnalisés, sur l’ajout, l’édition, Les exemples “WD Planning” et “WW_
variable globale gGclRendezVous. la suppression, le déplacement, le redimen- Planning”, respectivement livrés en stan-
sionnement d’un rendez-vous. dard dans WINDEV et WEBDEV, sont des
Remarque :
Un traitement personnalisé, cela peut être exemples complets de manipulation du
Si vous personnalisez la fenêtre interne
par exemple de demander confirmation aux champ Planning.
en laissant son nom par défaut, TOUS les
utilisateurs avant toute suppression défini-
plannings et agendas du projet utiliseront
ce nouvel affichage. tive d’un rendez-vous, ou bien ouvrir une 
fenêtre pour saisir la création d’un rendez-
Pour disposer d’un affichage particulier pour vous avec des contrôles supplémentaires.
un planning donné, enregistrez la fenêtre
interne sous un autre nom et sélectionnez Pour chaque traitement du champ plan-
cette fenêtre comme fenêtre des rendez- ning, une procédure a été automatiquement
vous dans l’onglet “Général” de la fenêtre générée avec en paramètre le rendez-vous
concerné par le traitement.

Fig. 1 Fig. 2 Fig. 3

TDF TECH 2012 - www.pcsoft.fr - VII


RÉFÉRENCEMENT WEBDEV ET
URL REWRITING
Rappel sur le référencement d’un site et optimisation de
ce référencement grâce à l’URL Rewriting
Le référencement d’un site est la produits du site soient référencés par les de paramètres et tous les paramètres sont
clé de sa visibilité dans les moteurs moteurs de recherche. inclus dans le nom de la page.
de recherche. Il ne faut pas donc que l’URL change à chaque Pour activer l’URL Rewriting sur un site
affichage : dans ce cas, il convient d’utiliser
Un site bien référencé est un site WEBDEV, il suffit de cliquer sur l’option
le mode AWP.
qui apparaît en tête des résultats “Projet .. Référencement .. Paramétrer
et qui sera donc logiquement visité. l’URL Rewriting”.
Mode AWP
WEBDEV propose plusieurs fonction- L’une des caractéristiques du mode AWP est WEBDEV analyse automatiquement les pages
nalités pour aider au référencement que l’URL d’une page donnée reste toujours et en déduit automatiquement un modèle
des sites. la même : l’URL est connue. L’URL d’une d’URL Rewriting adapté au site.

L’URL Rewriting permet un référen- page donnée est donc référençable par les Par exemple, la page “recherche” de
cement accru des pages. moteurs de recherche. l’exemple “WEBIMMO” attend différents
Le développement d’un site en mode paramètres :
Projet d’illustration AWP nécessite de gérer par program- • la région de recherche,
mation les contextes. WEBDEV dis- • le type de bien,
Le projet utilisé pour illustrer ce sujet • la surface demandée,
pose de différentes fonctions prévues
est “WEBIMMO” (fourni en standard dans • etc.
à cet effet : DéclareContexteAWP,
WEBDEV).
ConfigureContexteAWP, etc. L’adresse de la page après l’URL Rewriting
est : “http://www.monsite/recherche-dept-
Rappel sur WEBDEV Le premier point de base à respecter pour
cp-cat-prixmin-prixmax-surface-type-bien.
faire un site référençable est donc d’utiliser
WEBDEV permet de créer des sites Internet, le mode AWP. awp”.
Intranet, et Extranet. Il existe un certain nombre de règles à Cette adresse se compose :
respecter pour optimiser le référencement. • du nom de domaine : “www.monsite”,
WEBDEV dispose de plusieurs technologies
• du nom de la page : “recherche”,
intégrées : Remarque : Pour plus de détails sur le réfé- • des paramètres, inclus dans le nom de
• le mode standard, qui gère les contextes rencement et sa mise en place dans un site la page et séparés par un tiret (“-”). Il est
de manière automatique, WEBDEV, vous pouvez consulter la LST 76. possible de séparer les paramètres par un
• le mode AWP (“Active WebDev Page”), qui
slash (“/”).
permet de créer des sites avec des pages
adressables individuellement, Utiliser l’URL Rewriting
Un point important pour le référencement,
Notre astuce
• le mode PHP, qui permet de développer
en WLangage des sites PHP. mais souvent négligé, est le nommage des
pages et des paramètres.
Mode standard En effet, les noms des pages et les para-
Le mode standard est le mode de dévelop- mètres de l’URL sont également référencés.
pement par défaut de WEBDEV. Le dévelop- Un nom de page “clair” optimise donc le
pement est très proche de celui de WINDEV. référencement.
Pour des questions de sécurité, l’URL d’une Il est possible de réécrire les URL d’accès
page donnée change à chaque session : la aux pages : il s’agit du mécanisme d’URL
page ne peut donc pas être référencée par Rewriting.
les moteurs de recherche comme Google.
Les moteurs de recherche indexent le nom
Pour un Intranet ou un Extranet, il n’y a des pages avec un poids plus fort que les
rien de mieux d’un point de vue sécurité. Dans la partie basse, vous pouvez tester
paramètres.
Un seul point d’entrée au site est défini, il l’URL Rewriting avec une adresse spécifique
Mais, la plupart du temps, un des para-
s’agit de la page d’accueil. pour savoir quelle page sera appelée et avec
mètres contient l’information importante,
La mise en place d’un système d’identifi- quels paramètres.
par exemple le nom du produit à afficher.
cation (login/mot de passe) et le site est Il suffit donc de cocher les pages sur les-
Le nom du produit se retrouve donc réfé-
sécurisé ! quelles l’URL Rewriting doit être activé,
rencé avec un poids moins fort que le nom
c’est-à-dire les pages qui acceptent des
Mais si le site concerné est un site de vente de la page en elle-même, qui est souvent
paramètres et dont le contenu varie en
en ligne, avec un catalogue de produits par plus générale.
fonction de ces paramètres (page de détails
exemple, il est souhaitable que tous les Avec l’URL Rewriting, l’URL ne contient plus d’un produit, page de recherche, etc.).

VIII - TDF TECH 2012 - www.pcsoft.fr


Il est également possible de personnaliser La génération de ce fichier “SiteMap” est
le format de la réécriture de l’URL pour donc très importante pour un site réfé-
chaque page en cliquant sur le bouton “...”. rençable.
Le format de l’URL peut être complètement • soit par programmation. Il suffit d’utiliser WEBDEV génère automatiquement ce fichier.
personnalisé : la propriété ..URL sur le lien pour générer Il suffit de préciser la fréquence de mise à
• définition des éléments qui vont composer un lien standard HTML. jour de chaque page ainsi que son impor-
l’URL, en spécifiant s’il s’agit d’un élément LIEN_RENDEZVOUS..URL = ... tance dans votre site. Pour paramétrer le
fixe (comme le nom de la page) ou d’un “./rendezvous.awp?id=”+ fichier “SiteMap”, il suffit de :
paramètre. PageParamètre(“id”) • ouvrir la fenêtre de description de la page,
• définition du format de la valeur (numé- onglet “Détails”.
rique, alphanumérique, etc.). Notre astuce • sélectionner la fréquence de mise à jour
• choix de l’ordre des éléments : cela per- Dans tous les cas, pour avoir un lien référen- de la page.
met par exemple de mettre les libellés en çable, il est important de ne pas utiliser la • définir la priorité de la page par rapport
premier de manière à ce qu’ils soient mieux fonction WLangage PageAffiche. En effet, au site.
référencés. cette fonction génère un lien Javascript,
• choix de l’expression régulière corres- donc un lien que les moteurs de recherche
pondant à l’URL. ne peuvent pas suivre.

Une fois l’URL Rewriting activé pour les pages


d’un site, il est important de modifier les
Multiplier les liens Notre conseil
éventuelles URLs programmées (propriété Pour optimiser le référencement, une astuce Si la page affiche un contenu qui est figé,
..URL des champs bouton et lien) qui accè- consiste à avoir un grand nombre de liens une fréquence de rafraîchissement d’une
dent à ces pages. De cette façon, les moteurs qui pointent vers une même page avec des fois par mois est suffisante.
de recherche indexeront l’URL réécrite. libellés différents. Ces liens peuvent venir Pour une page dont le contenu évolue (affi-
du site lui-même ou, mieux encore, de sites chage de promotions, de nouveautés, etc.),
De façon générale, les paramètres sont
extérieurs. préférez une fréquence de rafraîchissement
passés après le nom de la page, derrière
hebdomadaire ou quotidienne.
un point d’interrogation (“?”). Le principe est le suivant : plus il existe de
Pour exploiter l’URL Rewriting, il suffit de liens vers une page, plus la page sera trouvée
déplacer les paramètres directement dans le par le moteur de recherche et donc plus son Ajouter un plan du site
nom de la page, en séparant chaque élément poids sera important. Et si les liens ont des Le plan du site est une page qui regroupe
par un tiret (ou un slash, selon ce qui a été libellés différents, la page sera référencée toutes les pages accessibles d’un site (ce
défini dans la fenêtre de paramétrage de avec plus de mots-clés. qui rejoint le conseil de multiplication des
l’URL rewriting). liens). Il permet également aux visiteurs
Par exemple, dans la page “index” de Définir des mots-clés d’avoir une vue d’ensemble du site.
l’exemple “WEBIMMO”, les liens des bonnes WEBDEV propose en standard un champ
Il est important de spécifier les mots-clés des
affaires respectent le format défini par “plan du site” statique.
pages. En effet, les moteurs de recherche
l’URL rewriting : Un modèle de champs permettant par
indexent les mots-clés d’une page avec un
// URL de recherche de maisons à exemple de construire le plan du site
poids plus fort que le contenu de la page
// vendre pour Montpellier,
MoiMême..URL = ChaîneConstruit( lui-même. dynamiquement à partir de données pro-
  “./recherche-Herault-Montpellier- venant de la base de données a été fourni
F4-200000-250000-%1-%2-%3.awp”,
Pour spécifier les mots-clés d’une page sous
avec le support de cours du TDF 2009.
PARAMETRE_AUCUNE_SUPERFICIE, WEBDEV, il suffit de :
PARAMETRE_ACHETER, • ouvrir la fenêtre de description de la page, Les détails sur l’utilisation de ce modèle
 PARAMETRE_MAISON) de champs sont disponibles dans le support
onglet “Détails.
Si l’URL Rewriting permet une optimisation • cliquer sur le bouton “Éditer les expressions de cours du TDF 2009, accessible depuis le
réelle du référencement d’un site WEBDEV, il et les mots-clés”. site de PC SOFT.
existe cependant d’autres règles et astuces • saisir les mots-clés dans le champ prévu
à respecter. à cet effet. Plusieurs conseils de choix de Notre conseil
mots-clés sont affichés : un mot-clé par
WEBDEV dispose d’une option qui analyse un
Fixer les URL des liens ligne, saisir les singuliers et pluriels, etc.
site et détermine les manques en matière de
Les liens doivent avoir des URLs fixes de référencement. Il suffit d’utiliser l’option
façon à ce que les moteurs de recherche
Utiliser un SiteMap “Projet .. Référencement .. Optimiser le
puissent suivre le lien. Pour mieux indexer les sites, Google référencement”.

Pour avoir des URLs fixes dans les liens, il


recherche et analyse un fichier spécifique 
associé au site : le fichier qui a pour nom
existe deux possibilités :
“SiteMap”.
• soit via la fenêtre de description du lien.
Le bouton “Paramètres...” permet de spé- Ce fichier “SiteMap” sert principalement à
cifier les paramètres à passer à la page. Ces renseigner Google sur la fréquence de mise
paramètres peuvent être fixes ou renseignés à jour de chaque page et l’importance de
via une variable. chaque page dans votre site.

TDF TECH 2012 - www.pcsoft.fr - IX


AUDIT STATIQUE

Utiliser efficacement le mécanisme intégré d’audit


statique
une correction est possible, un bouton per-
met d’accéder aux détails de l’information
ou d’activer la fonctionnalité demandée.

Notre astuce
Si une information d’audit ne vous intéresse
pas, il est possible de l’ignorer afin qu’elle
ne ressorte plus dans les prochains audits du
projet : il suffit d’utiliser l’option “Ignorer
cette information” du menu contextuel.
Le bouton “Voir les informations ignorées”
permet d’afficher toutes les informations
d’audit qui ont été marquées comme à
ignorer et éventuellement de les réactiver.
Remarque :
Il est possible d’imprimer le résultat de
l’audit statique via le bouton “Imprimer”.

Le rapport d’analyse du projet se divise en


plusieurs catégories.

Dangers potentiels
Cette catégorie regroupe les problèmes qui
peuvent avoir une incidence relativement
importante sur le projet :
• le projet est de taille conséquente mais
n’utilise pas le GDS,
• un élément du projet est extrait du GDS
depuis plus de 15 jours,
• des fenêtres, pages ou états qui ne sont
pas à jour de leurs modèles,
• un accès natif est utilisé mais n’est pas
installé ou n’est pas à jour de la version
majeure,
• etc.

Qualité
WinDev, WevDev et WinDev Mobile disposent projet : il suffit de cliquer sur le bouton
de nouveaux outils pour améliorer la qualité “Audit Statique”. Cette catégorie regroupe les problèmes
et la performance des applications, dont d’amélioration et d’optimisation :
Le menu “Projet .. Audit d’édition” permet
les “audits”. • des requêtes peuvent être optimisées.
également de lancer une analyse :
• le projet contient du code mort. Il s’agit
L’audit statique analyse les sources du pro- • du projet complet (option “Rapport géné-
de procédures déclarées qui ne sont jamais
jet, les fenêtres, les champs, le code et crée ral”).
utilisées.
un rapport de tous les problèmes potentiels • de certains éléments du projet seulement :
• le projet contient des éléments orphelins.
qui ont été détectés. analyse des requêtes, du code mort, des
Il s’agit de fenêtres, pages ou états qui sont
éléments orphelins, etc.
définis mais qui ne sont jamais appelés.
WINDEV analyse le projet et en ressort un
Audit de projet rapport concernant les améliorations qu’il
• etc.

Le lancement de l’audit statique s’effectue est possible d’effectuer au niveau du projet. Notre astuce
directement depuis le tableau de bord du Dans le cas du code mort et des éléments
Pour chaque ligne d’information d’audit, si

X - TDF TECH 2012 - www.pcsoft.fr


orphelins, certains éléments peuvent être le dictionnaire. pour travailler à plusieurs. L’utilisation du
utilisés mais non détectés : par exemple, En effet, la désactivation de l’erreur est GDS dispose de fonctionnalités améliorées
s’ils sont utilisés en compilation dynamique effectuée pour le projet : tous les postes qui facilite le travail coopératif.
ou par l’intermédiaire de chaînes. qui utiliseront le projet verront donc cette • le mode d’extraction automatique n’est
N’hésitez pas à utiliser le bouton erreur comme désactivée. pas activé. Cette option facilite le travail
“Rechercher” pour retrouver une utilisation Par contre, si le terme est ajouté au dic- en groupe : le projet est extrait et réintégré
éventuelle dans le code. tionnaire, il est ajouté uniquement au dic- automatiquement dès que nécessaire.
Si une procédure est effectivement bien tionnaire du poste local : la faute sera donc • etc.
utilisée, il convient de la marquer comme toujours visible pour tous les autres postes
telle. Il suffit pour cela de : qui utilisent l’application. Analyse de la
• sélectionner la ou les erreurs
• cliquer sur le bouton “Marquer comme
bibliothèque et du
utilisé”. Nettoyage pack d’installation
• choisir ou saisir un commentaire sur son Cette catégorie regroupe les problèmes de L’audit statique analyse également :
utilisation. clarté du projet : • la bibliothèque de l’exécutable.
• le nettoyage des fichiers du projet n’a pas • le pack d’installation.
été exécuté depuis longtemps.
IHM • des groupes de champs sont définis mais
Ces deux analyses permettent de visualiser
la place occupée :
Cette catégorie regroupe les problèmes liés ne contiennent aucun champ. • par élément, de façon individuelle. Un
directement à l’interface du projet : • il existe des configurations multigéné- carré représente en effet un élément à
• des fautes d’orthographe sont détectées ration. proprement parler : plus un carré occupe
dans les fenêtres, les états, les pages, le • des styles définis dans la feuille de styles une place importante dans la visualisation,
code. du projet ne sont pas utilisés. Attention : plus l’élément occupe une place importe
• la fonctionnalité des erreurs d’IHM n’est l’audit statique ne permet pas de détecter dans la bibliothèque ou l’installation.
pas activée. les styles utilisés via la fonction WLangage • par catégorie d’éléments. Chaque caté-
• etc. ChangeStyle, qui permet de changer gorie d’élément est représentée par une
dynamiquement un style par programmation. couleur spécifique. Plus une couleur est pré-
Rappel :
• etc. sente dans la visualisation, plus les éléments
Pour que les fautes d’orthographe soient
détectées, au niveau de l’audit comme au de ce type occupe une place importante.
niveau des différents éditeurs, il est néces-
saire d’installer un dictionnaire Open Office
Conseils 
sur le poste de développement. Cette catégorie regroupe différents conseils
Pour installer ces dictionnaires, il suffit d’uti- pour faciliter le développement du projet :
liser l’option de menu “Fichier .. Assistants • le projet utilise le groupware développeur
.. Installer de nouveaux dictionnaires” de
OpenOffice Writer et de suivre les différentes
étapes de l’assistant.
Dans le cas des fautes d’orthographe détec-
tées par l’audit, il existe deux possibilités
pour les corriger :
• soit il s’agit de vraies fautes (faute de
frappes, de traduction, etc.) : dans ce cas il
suffit de cliquer sur la faute et de la corriger,
tout simplement.
• soit il s’agit d’abréviation ou de mots
spécifiques inconnus du dictionnaire utilisé.
Dans ce cas, le plus simple est de désactiver
ces fautes. Il suffit pour cela de cliquer sur
le bouton “Ne plus afficher cette faute” pour
chaque ligne concernée. La faute se retrouve
alors dans la table des fautes désactivées.
Une faute désactivée peut évidemment être
réactivée à tout moment.

Notre conseil
Dans le cas de fautes qui sont des mots
corrects, mais inconnus du dictionnaire, il
est conseillé de désactiver l’erreur depuis
l’audit plutôt que d’ajouter le terme dans

TDF TECH 2012 - www.pcsoft.fr - XI


AUDIT DYNAMIQUE

Analyser une application à l’aide de l’audit dynamique

environnement : par exemple, une image


non trouvée parce qu’elle est recherchée
sur le réseau du développeur.

Auditer une
application par
programmation
L’audit dynamique peut également être
programmé. Cette fonctionnalité est très
utile pour récupérer les informations de
l’application déployée chez le client, mais
également pour auditer uniquement un
traitement spécifique de l’application.
WINDEV dispose en standard de la famille de
fonctions dbgXXX. Cette famille regroupe
toutes les fonctions utiles au débogage
d’applications : assertions, logs d’exécu-
tion, logs d’audit, etc.
Pour activer l’audit, il suffit d’utiliser la
fonction dbgActiveAudit. Cette fonction
attend en paramètre :
• le chemin complet du fichier d’audit
généré. Par défaut, le fichier est généré
dans le répertoire d’exécution, avec un nom
qui contient la date et heure de création.
• les options de l’audit. Par défaut, l’audit
démarre immédiatement et enregistre tous
L’audit dynamique permet d’analyser l’exé- de bord et via le bouton “Go” de la barre les événements.
cution d’une application et de visualiser les d’outils. // Active l’audit dynamique
warnings et conseils d’optimisation qui ont • par programmation directement, avec la dbgActiveAudit()
été détectés. fonction WLangage dbgActiveAudit.
Les fonctions dbgSauveDumpDébogage et
dbgSauveDumpMémoire permettent res-
L’audit automatique assure donc la qualité Notre conseil pectivement d’enregistrer dans un fichier
des applications avant même leur diffusion. Il est conseillé d’activer l’audit dynamique spécifique :
à 2 moments principaux : • un dump de débogage. Ce dump permet de
L’audit détecte les bugs avant qu’ils ne se • lors de la phase de tests manuels ou auto- positionner le débogueur avec les différentes
produisent en clientèle et améliore ainsi la matiques, via le “Go minutieux”. L’audit informations de l’application au moment de
qualité perçue tout en réduisant les coûts va permettre de détecter les problèmes l’appel à la fonction.
de maintenance. potentiels avant même que l’application ne
// Mémorise un dump de débogage
soit livrée : par exemple des libellés ou des
dbgSauveDumpDébogage()
champs de saisie affectés par programmation
Lancer un audit et qui se retrouvent tronqués. •  un dump mémoire. Ce dump fournit
dynamique Rappel : un article sur la mise en place de une description détaillée des éléments en
tests automatiques est disponible dans le mémoire et de leur consommation.
Le lancement de l’audit dynamique peut
support de cours du TDF Tech 2009. // Mémorise un dump mémoire
être effectué de deux façons différentes :
• lors de la phase de recettage chez les dbgSauveDumpMémoire()
• depuis l’environnement, avec le “Go
clients, via les fonctions du WLangage.
Minutieux”. Ce mode “Go” est disponible
L’audit permettra de remonter des pro-
via le bouton “Audit dynamique” du tableau
blèmes spécifiques aux clients et à leur

XII - TDF TECH 2012 - www.pcsoft.fr


Analyser un audit
dynamique
L’audit dynamique crée un fichier “.waudit”
qui contient toutes les informations récoltées
pendant l’exécution de l’application : infor-
mations de débogage, warnings, assertions,
erreurs, exceptions, etc.
Ce fichier peut être ouvert directement
depuis l’éditeur : il suffit de faire un
Détails d’un événement peut être nécessaire de l’agrandir ou de
Drag&Drop du fichier depuis l’explorateur réduire la chaîne à afficher.
Pour chaque événement de l’audit, il est
directement dans l’éditeur. • Le masque d’un champ de saisie ne permet
possible de :
• afficher le détail complet de l’erreur, via pas d’afficher la valeur qui lui est affectée.
Présentation Soit le masque est mal défini, et il suffit
le bouton “...”. Ce détail contient toutes
les informations relatives à l’événement : de le redéfinir correctement, soit il est
pile, code d’erreur, message d’erreur, etc. nécessaire de contrôler les valeurs qui lui
• ouvrir l’éditeur de code sur l’appel qui a sont affectées.
provoqué l’événement, via le bouton “code”. • La requête est exécutée plusieurs fois avec
les mêmes paramètres dans un intervalle
Dump mémoire restreint. Dans ce cas, il peut être intéres-
La fenêtre de visualisation d’audit permet sant de modifier le code pour regrouper les
Le dernier élément de la table est une
d’afficher les événements : différentes exécutions en une seule.
information de débogage (uniquement en
• soit dans un ordre chronologique. Cette • Certaines rubriques de la requête ne sont
go minutieux) : l’audit dynamique effectue
vision permet d’appréhender la suite des pas du tout utilisées. Cette information est
systématiquement un dump mémoire lors de
événements dans le temps. le cas typique de la requête de type “SELECT
la fermeture de l’application.
• soit par regroupement d’événements *”. Dans ce cas, il peut être intéressant
identiques. Cette vision permet de mettre Le dump mémoire permet de voir toutes les
de revoir la requête pour qu’elle ne lise
l’accent sur les événements les plus récur- ressources utilisées par l’application, qui
que les rubriques qui sont utilisées dans le
rents et donc, potentiellement, les plus sont encore en mémoire et qui n’ont donc
code. Attention cependant à ne pas tout
importants à corriger. pas été libérées.
supprimer : la requête peut être utilisée à
Même si WINDEV s’occupe de libérer les différents endroits du code et utiliser les
Filtrage des événements pointeurs, champs, ... certains éléments différentes rubriques.
n’ont pas de libération automatique. • L’espace disque du serveur où est localisée
C’est le cas des requêtes par exemple. En la base HyperFileSQL possède moins de 10%
effet, WINDEV ne peut déterminer quand de place disponible.
libérer la requête. • Aucun des cas d’une instruction SELON
Pour libérer une requête, il suffit d’utiliser n’est exécuté. De manière générale, il est
Il est également possible de filtrer les types conseillé de toujours utiliser la syntaxe
la fonction WLangage HAnnuleDéclaration
d’événements à afficher : “AUTRE CAS”. De cette façon, tous les cas
lorsque la requête n’est plus utilisée.
• les exceptions, sont réellement gérés. Et si le cas “AUTRE
• les erreurs, CAS” ne devrait logiquement pas arriver, il
• les warnings,
Exemples est possible d’utiliser une assertion via la
• les assertions, d’informations fonction dbgAssertion afin d’être prévenu
• les événements de débogage. de son exécution.
L’audit dynamique permet de mettre en
Ce système de filtre permet, dans le cas évidence différents problèmes. 
d’un audit contenant beaucoup d’infor- En voici quelques exemples :
mations, d’analyser les événements par • Le libellé est trop petit pour afficher la
ordre d’importance : les exceptions, puis totalité d’une chaîne affectée par program-
les erreurs, puis les warnings, etc. mation. Si le libellé rempli par programma-
tion affiche une information importante, il

TDF TECH 2012 - www.pcsoft.fr - XIII


PROGRAMMATION ET
DÉBOGUEUR
Fonctions de mise au point et de débogage :
• Assertions
• Traces
• Débogueur

W
INDEV dispose en standard de • Le débogueur “L’objet n’a pas été instancié”)
plusieurs outils et fonctionna-
lités pour aider le développeur Les assertions Pour définir une assertion, il suffit d’utiliser
à mettre au point et optimiser la fonction dbgAssertion du WLangage avec
les applications. Une assertion permet de vérifier une condi- en paramètre la condition à vérifier, et le
tion lors de l’exécution de l’application. message à afficher si jamais elle ne l’est pas.
Dans cet article, nous allons étudier les • Si la condition n’est pas vérifiée, une boîte
principales fonctionnalités offertes par d’information s’affiche avec le détail de la Par défaut, les assertions sont actives uni-
WINDEV sur ce domaine afin de vous aider vérification. quement en mode test. Il est possible de les
à choisir lesquels sont les plus adaptés selon activer en déploiement, il suffit d’utiliser
vos projets. Le développeur a alors accès à la pile d’exé- la fonction dbgactiveAssertion, avec le
cution, c’est-à-dire tous les appels qui ont paramètre Vrai.
abouti à ce résultat.
Principales
// Variable CClient Différence fondamentale
fonctionnalités clClient est un CClient La condition utilisée dans l’assertion n’est
Les principales fonctionnalités offertes par exécutée par le WLangage que lorsque les
WINDEV en termes de mise au point sont
// Création du client assertions sont actives. Le fonctionnement
CréerClient(clClient)
les suivantes : peut donc être différent en mode test et
• Les assertions // L’objet clClient doit en mode exécutable.
• Les traces // avoir été instancié
• Les logs d’exécution dbgAssertion(clClient<>Null, Il faut être particulièrement vigilant lors de
l’utilisation de fonctions dans la condition
fournie à la fonction dbgAssertion. En effet,
si la fonction utilisée réalise une initialisation
ou une connexion, cette opération ne sera
pas réalisée dans l’application utilisée en
mode “exécutable”.

En revanche, cela permet de mettre “plus de


tests” sans ralentir l’application en exploi-
tation et ainsi permet d’accélérer la mise
au point des applications.

Notre conseil
Les assertions peuvent servir pour des cas
“spécifiques” ou vérifier les “prérequis”
d’une fonction. C’est-à-dire le cas qui ne
devrait jamais arriver mais qui arrive tou-
jours un jour : une chaîne vide alors que l’on
attend un nom logique, un chemin vers un
fichier inexistant, etc.

Les assertions ne peuvent pas remplacer la

XIV - TDF TECH 2012 - www.pcsoft.fr


gestion classique des erreurs : il faut gérer
le cas, mais mettre une assertion permet
d’être prévenu et de retrouver pourquoi
c’est arrivé grâce à la pile d’exécution.

L’utilisation des assertions permet également


de guider l’utilisation d’une fonctionna-
lité lors d’un développement à plusieurs
développeurs : le code “appelant” ne doit
pas provoquer d’assertion dans le code
“appelé”.

Les traces
La fonction WLangage Trace permet d’affi-
cher des informations pendant l’exécution permettre de fiabiliser l’application.
de l’application. Cette fonction est très
couramment utilisée lors des phases de
développement d’une application. Le débogueur
Dans WINDEV, le débogueur permet de débo-
En revanche, beaucoup moins de
guer dans différentes configurations :
développeurs connaissent la possibilité de
• Déboguer le projet en mode test
personnaliser le fonctionnement des traces.
• Déboguer un exécutable, en local ou à
Cette personnalisation est effectuée grâce
distance (en lançant l’application WDDebug
à la fonction TraceDébut du WLangage.
sur le poste distant).
// la fenêtre de trace • Déboguer un site, en local ou à distance
// est affichée par dessus • Déboguer directement sur un terminal
// les autres fenêtres et mobile
// un fichier de trace est • Déboguer un composant, depuis le projet
// sauvegardé hôte, ou depuis un exécutable
TraceDébut(trFenêtre + ... • Déboguer des procédures et des triggers
trDessusTout + trFichier, stockés
fRepExe() +[“\”]+ ...
”TraceExecution.txt”)
Le débogueur permet alors de :
• Faire du débogage multithread
Il est alors possible de :
• Évaluer des variables dynamiquement
• Afficher les traces dans une fenêtre,
• Définir l’instruction suivante à exécuter
c’est le fonctionnement par défaut avec la
• Modifier le code à la volée, c’est le Edit
constante trFenêtre
and Continue
• Enregistrer les traces dans un fichier avec
• Visualiser le contexte HyperFileSQL d’un
la constante trFichier.
fichier ou d’une source de données
• Désactiver les traces par programmation
• Faire des points d’arrêts conditionnels....
avec la constante trDésactivée


Le volet du débogueur
Il est également possible de retrouver les
assertions, et les traces directement dans
l’éditeur dans le volet du débogueur.

Ce volet est très pratique, notamment pour


le débogage distant car les traces et les
assertions apparaissent aussi sur votre poste
dans WINDEV. De plus, un simple double-clic
sur une assertion ou une trace affichée dans
ce volet positionne automatiquement le code
sur la ligne ayant provoqué cet affichage.

Le développeur dispose également dans


ce volet de toutes les erreurs non fatales
rencontrées par l’application ce qui peut

TDF TECH 2012 - www.pcsoft.fr - XV


ANDROID - DÉPLOIEMENT

Déployer une application Android sur


Google Play Store
(anciennement “Android Market”)
480 x 800, ...). Ces images permettent aux
Une fois les informations renseignées, il est visiteurs d’avoir un aperçu visuel de l’appli-
nécessaire de payer les frais d’inscription. cation lors de leur navigation sur Google
Ces frais ne peuvent être réglés que par carte Play Store. Des conseils sur ces images sont
bancaire. L’inscription à Google Play Store disponibles dans la page de déploiement de
est en effet payante : 25$, soit à peu près l’application.
18 euros (le prix indiqué peut avoir évolué • le titre de l’application. Ce titre est celui
depuis la rédaction de cet article). qui identifiera votre application sur Google

G
oogle Play Store est une plate- Vous êtes maintenant prêt à déployer une Play Store : choisissez le suffisamment
forme de téléchargement en ligne application Android ! simple et explicite.
accessible directement depuis un • un texte de description de l’application.
terminal mobile Android. Compte marchand • une icône haute résolution de l’application
Si vous souhaitez distribuer des applica- PNG ou JPEG en 512x512. Cette icône est
Cette plateforme permet donc de télécharger tions Android payantes, il est nécessaire de obligatoire.
des applications, mais également (et surtout) paramétrer un compte marchand “Google • une image en 1024x500 (format PNG ou
de mettre une application à disposition Checkout” avec davantage d’informations : JPEG) qui servira de “bannière” sur le mar-
des utilisateurs Android. Ces applications • les coordonnées personnelles du contact. ket (exemple ici pour notre application
peuvent être gratuites ou payantes. Par défaut, les informations du compte “WM Note De Frais” : “https://play.google.
Google utilisé sont récupérées. com/store/apps/details?id=com.pcsoft.
Les applications Android développées avec
• les coordonnées publiques : raison sociale, wm_note_de_frais”).
WINDEV Mobile peuvent bien évidemment
site de l’entreprise, etc. • le type de l’application (s’agit-il d’un jeu
être déployées sur cette plateforme.
• les informations financières. ou d’une application ?) et la catégorie cor-
Cet article présente la marche à suivre pour • ... respondante (application de communication,
déployer une application WINDEV Mobile de finance, social, etc.)
Android sur Google Play Store. Déployer une application • ...
Pour déployer une application, il suffit de
PC SOFT a publié sur Google Play Store
plusieurs exemples d’application :
cliquer sur le bouton “Publier une applica- Notre conseil
tion” dans votre page. Les titres et descriptifs peuvent être saisis
• “WM FTP Client”,
• “WM Lecteur RSS” dans plusieurs langues. Il suffit de cliquer sur
• “WM Note de frais”, le lien “Ajouter une langue” et de sélection-
• “WB Quizz”, ner les langues souhaitées. Pour renseigner
• ... les textes dans une langue donnée, il suffit
Avant le déploiement effectif de l’applica- alors de cliquer sur le lien correspondant.
Création d’un compte tion sur Google Play Store, il est nécessaire N’hésitez pas à renseigner différentes
et identification de rassembler quelques éléments essentiels : langues, surtout si votre application est
• le fichier .APK, qui correspond à l’applica- multilingue !
Dans un premier temps, il est nécessaire de tion proprement dite. Ce fichier est généré Lorsque toutes les informations relatives à
créer un compte sur la page “https://play. par WINDEV Mobile via le menu “Atelier .. l’application sont saisies, il suffit de cliquer
google.com/apps/publish/Home”. Générer l’application Android” ou directe- sur le bouton “Publier”.
Si vous ne possédez pas de compte Google ment par le bouton de génération.
L’application sera immédiatement visible
(GMail, AdWord, etc.), il est nécessaire Sur le plan “Signature de l’application” de sur Google Play Store.
d’en créer un. l’assistant de génération, il est nécessaire
Une fois vos identifiants récupérés, il vous de cocher l’option “Signer l’application”.

suffit de vous identifier sur la page. Il est en effet obligatoire de signer une
application afin qu’elle puisse être déployée
Avant de publier une application, il est
sur Google Play Store.
nécessaire de renseigner quelques infor-
• au moins 2 captures d’écran de l’appli-
mations essentielles au compte :
cation (optionnelles). Ces captures d’écran
• le nom du développeur,
doivent être au format PNG ou JPEG 24 bits,
• un numéro de téléphone,
avec des dimensions spécifiques (320x480,
• un site internet.

XVI - TDF TECH 2012 - www.pcsoft.fr


TDF TECH 2012 - www.pcsoft.fr - XVII