PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

Nouveauté WEBDEV 22 !
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Autres
Procédures stockées
180 nouveautés communes
WEBDEV bénéficie des nouveautés communes de la version 22.
WEBDEV 22 bénéficie bien entendu de l'évolution de l'environnement de développement, comme par exemple la présence de l'éditeur d'images intégré, des évolutions du WLangage, de HFSQL, et de la compatibilité avec WINDEV et WINDEV Mobile.
Le principe : le bandeau défilant contient plusieurs plans
WEBDEV propose en version 22 le nouveau champ "Bandeau défilant".
Le champ Bandeau défilant permet d'afficher successivement plusieurs contenus, soit automatiquement, soit suite à une action de l'internaute.
Il ne s'agit pas d'un simple champ Image à défilement automatique, ni d'une zone répétée linéaire ! Le bandeau peut contenir des champs et des traitements.
Le bandeau défilant permet d'afficher des contenus totalement différents et indépendants d'un plan à l'autre.
On voit souvent un bandeau défilant en en-tête de site.
Le bandeau change de plan tout seul ou à la demande. Les plans peuvent contenir des champs

Le bandeau change de plan tout seul ou à la demande Les plans peuvent contenir des champs
Le bandeau change de plan tout seul ou à la demande.
Les plans peuvent contenir des champs

Le champ Bandeau défilant fait automatiquement défiler ses plans comme un diaporama, et l'internaute peut choisir le plan à afficher à l'aide de flèches ou d'une réglette à puces.
Sur écran tactile, un mouvement du doigt permet de naviguer.
Chaque contenu est indépendant, et s'édite sous forme d'un plan (voir nouveautés 883 à 890).
Pour plus de détails, consultez Le champ Bandeau défilant.
Comment créer le bandeau défilant
Sous l'éditeur de WEBDEV 22 il suffit de créer un champ Bandeau défilant!
Chaque plan est éditable directement en WYSIWYG.
Un plan contient du code et des champs.
Chaque plan peut accueillir tout type de champs WEBDEV : des images, des Zones de Texte Riche (ZTR), des tables, des champs formulaires...
Un plan du bandeau peut être considéré comme une petite page!
Vous faites ce que vous voulez dans le bandeau : juste afficher des images, ou exécuter des traitements plus lourds.
Pour plus de détails, consultez Le champ Bandeau défilant.
Comment programmer le bandeau défilant
Chaque plan du bandeau défilant peut être rendu visible ou invisible grâce à la propriété ..Visible.
La propriété ..Valeur du champ Bandeau permet elle de spécifier le plan du bandeau à afficher.
Il est également possible de régler le timer entre deux changements de plan, de faire avancer ou reculer le défilement, de suspendre le timer, etc.
La gestion des interactions avec l'internaute est automatique ou programmée (voir ci-dessous).
Pour plus de détails, consultez Le champ Bandeau défilant.
Réglette ou flèches
Par défaut, une réglette personnalisable de parcours des différents plans est disponible.
Cette réglette se présente sous forme de puces affichées en bas de la zone.
De chaque côté de l'image, des flèches discrètes sont positionnées pour naviguer.
4 exemples de jeux de réglettes & flèches
4 exemples de jeux de réglettes & flèches

Si nécessaire, il est possible de ne pas afficher cette réglette ou ces flèches et de gérer les actions de l'internaute par programmation.
Pour plus de détails, consultez Le champ Bandeau défilant.
Effets de transition dans le bandeau
Le bandeau défilant propose différents effets de transition : fondu, balayage, recouvrement, flip, repliement, flou, ...
Ces effets peuvent être appliqués automatiquement à chaque changement de plan.
Pour plus de détails, consultez Le champ Bandeau défilant.
Nouveau champ Upload HTML5
Un site a souvent besoin d'uploader des fichiers.
Le nouveau champ Upload de la version 22 est basé sur le standard HTML5.
Le nouveau champ Upload permet notamment l'upload asynchrone d'un ou plusieurs fichiers.
L'internaute sélectionne les fichiers à uploader :
  • soit par le sélecteur de fichiers du navigateur ou de l'OS
  • soit directement par glisser/déposer des fichiers.
Ici les fichiers à uploader sont déposés dans la zone d'upload
Ici les fichiers à uploader sont déposés dans la zone d'upload

Upload asynchrone en cours avec une jauge pour chaque fichier
Upload asynchrone en cours avec une jauge pour chaque fichier

Des modèles de champs Upload prédéfinis
Lors de la création du champ Upload, des champs prédéfinis sont proposés.
Ces modèles gèrent différents cas :
  • mono fichier
  • multi fichiers
  • multi fichiers asynchrone avec jauge
  • ...
Titre de colonnes de table : texte riche et multiligne
En WEBDEV 22, les titres des colonnes de table peuvent contenir du texte riche et acceptent le texte multiligne.
Un titre de colonne riche...
Un titre de colonne riche...

Table : positionnement automatique
Dans une table, on veut parfois s'assurer qu'une ligne est visible à l'affichage pour l'internaute.
La fonction TablePosition permet de positionner automatiquement la table sur une ligne donnée, grâce à la nouvelle constante taVisible.
Si la ligne est déjà visible, la table n'est pas modifiée.
Menu : options de menu riches et multilignes
En version 22, les options de menu peuvent contenir du texte riche et peuvent occuper plusieurs lignes.
Planning : titre multiligne
Sous WEBDEV 22, les titres de colonne du champ Planning affiché en colonne deviennent multilignes.
Styles sur rendez-vous
En version 22, il devient possible d'appliquer un style aux rendez-vous des champs agenda et planning.
Cela permet d'adapter l'agenda et le planning à la charte graphique du site, comme par exemple "material design".
Des rendez-vous avec des styles
Des rendez-vous avec des styles
Bulle : style personnalisable
Des bulles personnalisées
Des bulles personnalisées

L'aspect de la bulle d'information standard ("tooltip") dépend du navigateur utilisé par l'internaute.
Son style est souvent en décalage avec la charte graphique du site.
WEBDEV 22 permet de créer un style personnalisé pour les bulles d'information de vos sites.
Icône de police dans le texte riche
WEBDEV 22 permet d'insérer des icônes dans les textes riches de tous les champs : libellé de bouton, de champ de saisie, zone de texte riche, titre de colonne…
Lors de l'édition du texte, il suffit d'utiliser l'option insérer une icône.
Dans l'assistant qui s'ouvre, choisissez une police d’icônes : la planche d’icônes est affichée.
Il suffit alors de sélectionner l’icône désirée.
Pour changer la taille, il suffit de choisir la taille de police adéquate.
Ces polices étant vectorielles, l’icône sera toujours nette !
Pour changer la couleur, il suffit d'opérer comme pour un caractère.
Grâce à cette nouveauté de la version 22, il devient facile de créer des pictogrammes de taille et de couleur variables.
Exemples de polices d’icônes

Exemples de polices d’icônes
Exemples de polices d’icônes

Cette icône d'une main est un caractère de la police
Cette icône d'une main est un caractère de la police

Utilisez des polices d’icônes de bibliothèques en ligne
De nombreuses polices d’icônes ("iconic font" en anglais) sont proposées sur des sites spécialisés.
Il est ainsi facile de disposer des polices adéquates.
Insérez des icônes de polices dans un bouton ou dans un menu
Dans un bouton, l’icône de police peut remplacer l'image de fond ! (Surtout en look Material Design).
Pour créer une icône cliquable, il suffit de créer un champ bouton, et de coller l’icône de police dans le libellé.
L'icone de police peut également être cliquable dans un texte (lien hypertexte).
Créez un bouton sans infographie
Créez un bouton sans infographie

Authentification avec les identifiants facebook, google+, Twitter ou linkedin
Lorsque vous créez un site qui demande une authentification (mot de passe), il est possible d'utiliser les identifiants déjà existants de l'internaute : identifiants de Facebook, Google+, Twitter ou LinkedIn.
Notez que votre site ne connaîtra pas les identifiants de l'internaute.
Graphe heatmap
Le moteur d'affichage des graphes de WEBDEV propose un nouveau type de graphe : le graphe Heatmap.
Un graphe Heatmap ("carte de chaleur") permet de représenter dans un espace à deux dimensions des données qui varient suivant 3 critères : 1 critère est associé à l'axe des abscisses, 1 critère est associé aux ordonnées du graphique.
Le troisième critère est représenté par la variation de couleur des points du graphique, en suivant une échelle de couleurs (du bleu au rouge).
Ce type de graphe est particulièrement adapté pour visualiser des variations continues.
Exemple d'application :
  • Fréquentation d'un site en fonction de l'heure et de la date
  • Variation du CA selon le mois sur les 10 dernières années
  • Hydrométrie du sol en fonction de l'altitude par jour...
Graphe Heatmap
Effet parallaxe
Les effets de parallaxe sont très utilisés dans les sites vitrine, en particulier pour les sites à connotation artistique ou à fort caractère graphique.
L'effet de parallaxe permet de faire défiler les éléments constituant la page à des vitesses différentes quand l'internaute déplace l'ascenseur de la page (scroll).
Ceci donne une dynamique spécifique à l'ensemble du site.
L'effet peut être appliqué sur une image de fond, ou sur des champs.
Depuis la fenêtre "7 onglets" il est possible de définir le comportement d'un champ pendant le déplacement de l'ascenseur de la page.
Des comportements prédéfinis sont proposés et il est possible de régler manuellement le taux de parallaxe du champ.
Lorsque l’internaute descend dans la page (il baisse l’ascenseur ou glisse avec le doigt): l’image du haut remonte lentement. L’image du bas remonte plus vite :
Champ épinglé furtif
Avec WEBDEV, un champ peut être épinglé dans la page.
En version 22, un nouveau mode d'épinglage fait son apparition : le champ épinglé furtif.
Ce nouveau mode est surtout utile pour épingler des champs menu, des barres d'outils, des pieds de page...
Lorsque l'internaute déplace longuement l'ascenseur, le champ se masque.
Dès que l'internaute déplace ensuite légèrement l'ascenseur dans l'autre sens, le champ réapparaît épinglé en haut ou en bas du navigateur.
Ce comportement permet de libérer le maximum d'espace pour le contenu présent sous le champ épinglé.
Ceci est particulièrement utile pour les sites affichant du texte comme contenu principal : articles, documentations, ...
Mise en page flottante: cellule à positionnement relatif: cadrage à droite ou à gauche
WEBDEV 22 permet de définir le sens du positionnement dans les cellules à positionnement relatif (float).
En version 22, le cadrage des cellules à positionnement relatif peut être défini à droite ou à gauche.
Lorsqu'un  champ est supprimé, les autres champs flottants se replacent suivant le cadrage défini
Lorsqu'un champ est supprimé, les autres champs flottants se replacent suivant le cadrage défini
Changez l'image de fond de page (ou cellule) par programmation
En version 22, il devient possible de changer l'image de fond d'une page ou d'une cellule par programmation.
La nouvelle propriété ..ImageFond permet de changer l'image en code navigateur ou en code serveur.
L'avis de l'expert
La tendance actuelle est de déporter le maximum de traitements possibles sur le navigateur: le serveur est ainsi déchargé, il y a moins de données transférées, donc l’expérience utilisateur est bien plus fluide. WEBDEV 22 suit cette tendance forte.
Le code navigateur en version 22
Le code d'un site Web est différencié entre le code "Serveur" et le code "Navigateur".
En version 22, WEBDEV étend sensiblement les possibilités du WLangage en mode "Navigateur".
Il devient ainsi possible de créer beaucoup plus de traitements qui s'exécuteront directement sur le navigateur.
Le site est ainsi plus réactif, plus rapide, consomme moins de bande passante, sollicite moins le serveur.
Grâce à ces évolutions de la version 22, WEBDEV vous apporte la puissance côté navigateur.
Navigateur : Nouvelles propriétés sur les champs
De nombreuses propriétés sur les champs sont maintenant accessibles en code navigateur.
Ces propriétés permettent d'agir directement avec les champs sans passer par le serveur.
La disponibilité de ces propriétés en mode navigateur permet de programmer l'interface d'un site directement en code navigateur.
Par exemple, il est possible de griser ou dégriser un champ en code navigateur, de définir le libellé d'un bouton, d'indiquer l'adresse d'un lien ...
Liste des nouvelles propriétés :
BandeauVisibleBorneMaxBorneMinBoutonCalendrier
BulleBulleTitreContenuInitialDuréeAnimation
EnSaisieEtatEtatInitialGrisé
IndicationLibelléLibelléHTMLNombreColonne
NomCompletNoteTexteAlternatifTexteSansFormat
TitreTitreNoteTypeURL
ValeurAffichéeValeurInitialeVideVignette
VisibleInitialXInitialYInitial
Navigateur : manipulez facilement des sous-chaînes [[ ]]
Afin de manipuler plus facilement les chaînes en code navigateur, l'opérateur [[]] est disponible en affectation.
MaChaine est une chaîne
MaChaine [[2 A 5]] = "toto"
Navigateur : Procédure : renvoi de valeurs multiples
En version 22, une procédure peut renvoyer directement des valeurs multiples.
Inutile de déclarer des variables spécifiques pour dialoguer avec les procédures.
Le code est plus simple, inutile de créer des structures spécifiques : tableau, ...
(x, y, z) = RenvoieMesCoordonnées()
RENVOYER (x, y, z)
Navigateur : procédure à nombre de paramètres variable
Il est possible de créer des procédures à nombre de paramètres variable.
Cela permet de créer des traitements indépendants du nombre de valeurs à traiter, comme par exemple faire la somme d'un ensemble de factures envoyées, dont le nombre n'est pas connu à l'avance.
Un autre exemple est de changer les attributs d'un ensemble de champs dont le nombre n'est pas connu à l'avance.
Le nouveau mot-clé MesParamètres permet de manipuler ces paramètres.
Nouvelles syntaxes supportées :
MesParamètres[n A] , MesParamètres[A n]
MesParamètres[n sur o]
MesParamètres[n A o]
MesParamètres[*]
MesParamètres[A,x]
MesParamètres..Occurrence
Enumération & combinaison : maîtrisez les valeurs possibles d'une variable
Une variable de type énumération ne peut prendre qu'une valeur parmi un ensemble de valeurs prédéfinies.
Une variable de type combinaison peut prendre une ou plusieurs valeurs parmi un ensemble de valeurs prédéfinies.
Ces types énumération et combinaison existent maintenant en WLangage Navigateur.
L'usage de ces types élimine des cas d'erreurs de programmation en apportant une rigueur de codage.
Type variant : manipuler des variables sans connaître leur type
Le type VARIANT permet de manipuler n'importe quel type de variable.
L'usage de ce type permet d'écrire du code pour manipuler des valeurs sans connaître à l'avance leur type : chaine, entier, tableau...
Ce type Variant est utile pour les échanges externes : Webservice, WebSocket...
Navigateur : Procédure : Passage des paramètres par référence (par adresse)
En plus du passage de paramètre par valeur, il est possible de passer des paramètres à une procédure par référence (par adresse).
L'avantage du passage de paramètres par référence est la possibilité de modifier la variable (ou l'objet) d'origine.
Le passage de paramètres par référence fonctionne sur les types simples et sur les types avancés : élément de tableau, propriété de champ, ligne de table, [], objet...
Ce mode de passage de paramètres devient le mode par défaut.
Navigateur : Mot-clé "Local"
Le mot clé Local permet une copie de la valeur du paramètre localement à la procédure.
Navigateur : Mot-clé "dynamique" sur déclaration de variable
Le mot clé Dynamique permet de définir une variable de type complexe qui sera allouée plus tard dans le code.
Navigateur : Opérateurs d'affection <- et <=
Les opérateurs <- et <= remplacent l'opérateur = pour préciser le type d'affectation :
  • l'opérateur <- force la prise de référence (pas adresse)
  • l'opérateur <= force la copie de valeur
Navigateur : Procédure interne
Une procédure interne est une procédure dont le code est défini à l'intérieur du traitement qui va l'utiliser.
Cette procédure est connue uniquement localement.
Ce type de procédure est utile quand un même code est appelé plusieurs fois localement.
Meilleure gestion des erreurs WLangage navigateur
Avant la version 22, en exécution d'un site, des erreurs de programmation WLangage Navigateur pouvaient provoquer l'affichage d'un message en Javascript (difficilement compréhensible!).
En version 22, les erreurs affichées par le WLangage Navigateur sont toujours en français, très claires, et permettent de comprendre l'erreur (pour la corriger plus facilement !).
Présentation
WEBDEV propose en version 22 la possibilité de créer des "plans" dans les pages.
Un plan est un ensemble de champs de la page.
Chaque plan peut être visible ou non.
Le choix du plan affiché s’effectue par programmation en WLangage Navigateur ou Serveur ou Ajax.
Le changement de plan peut être réalisé depuis n’importe quel traitement de champ :
  • code de la page en fonction de certains critères ...
Ainsi l’apparence et le contenu de la page évoluent au fil de la navigation sans aucun retour au serveur.
C’est une nouvelle méthode de conception des sites particulièrement adaptée aux Applications Web (Single Page Application).
L’AVIS DE L’EXPERT
Une nouvelle manière d’architecturer les sites est d’effectuer un maximum de traitements dans une page unique pour éviter de charger des pages.
Comme le langage Navigateur est très riche, les accès au serveur sont réduits :une page est forcément sur le serveur, donc chaque changement de page est pénalisant.
Changer l'affichage sans retourner au serveur
L'ensemble des plans d'une page est contenu dans la page.
Le changement de plan s'effectue en code navigateur sans nécessiter de retour au serveur pour charger une nouvelle page.
L'expérience utilisateur est ainsi beaucoup plus fluide et rapide.
Le serveur ne renvoie que le minimum de données.
Le serveur n'a plus besoin de renvoyer le "décor" de la page (informations de mise en page : HTML, images, CSS, ...).
Le serveur renvoie uniquement les données demandées par la page : quantité en stock, prix, ...
Comment rafraîchir les données dans un plan ?
Les données affichées dans un plan sont initialisées automatiquement au chargement de la page qui contient le plan.
Pour rafraîchir les données d'un plan déjà affiché (comme une quantité en stock), il existe plusieurs méthodes :
  • appel d'un traitement Ajax
  • appel d'un Webservice (par un timer par exemple)
  • usage d'un WebSocket.
  • ...
Voir nouveauté 919
Plans : page ou zone de mise en page
Un plan peut être une page entière ou une partie de page (zone de mise en page).
Plusieurs plans peuvent être utilisés simultanément dans une même page : plan bandeau, plan bas de page, ...
Une appli Web peut donc être constituée d'une seule page et d'un ensemble de plans ! Cette appli Web minimise donc les allers-retours au serveur.
Plans dans les champs conteneurs : cellule, popup...
Les plans sont utilisables dans les pages, nous l'avons vu.
Mais les plans sont encore plus puissants !
Les plans sont utilisables par tous les champs de type "conteneur" :
  • Cellule
  • Popup
  • Modèle de champs et Superchamp
  • ...
Dans une Zone Répétée, il est par exemple possible d'afficher sur chaque ligne une présentation différente en fonction de la catégorie du produit (casquette, vélo, tshirt, ...).
Programmation facile : ..Plan
Changer de plan par programmation est un jeu d'enfant.
Il suffit d'utiliser la propriété ..Plan sur la page, ou le champ conteneur qui contient des plans.
Exemple de code :
MaPage..Plan = 3
Programmation : nouveaux traitements
Lorsque des plans sont présents dans la page, 3 nouveaux traitements de "changement de plan" sont actifs :
  • Un traitement serveur Ajax
  • Un traitement Navigateur avant le changement de plan
  • Un traitement Navigateur après le changement de plan
Ces traitements permettent d'initialiser ou mettre à jour les données du plan.
Effet visuel sur changement de plan
Chaque changement de plan peut s'accompagner d'un effet visuel : il suffit de le spécifier dans la fenêtre des "7 onglets".
WEBDEV 22 propose de nombreux effets automatiques :
  • fondu
  • balayage
  • recouvrement
  • flip
  • repliement
  • flou
  • ...
Un effet différent peut être spécifié pour le changement avant et arrière.
Chargement différé de plan
Tous les plans de la page ne sont pas forcément utilisés immédiatement par l'internaute.
Certains plans peuvent avoir un contenu lourd à charger (table de taille importante), qui peut ralentir le premier affichage de la page.
WEBDEV 22 propose une option pour différer le chargement de chaque plan à sa première utilisation.
Ouverture : ré-utilisez des ressources existantes de toutes technologies
Un exemple de composant
Un exemple de composant

Certains développeurs Web aiment utiliser des ressources externes.
De nombreuses ressources Web réutilisables sont disponibles sur Internet : snippets Bootstrap, composants JQuery.UI, composants Angular.JS...
Des sites spécialisés proposent des ressources, soit gratuitement soit en les commercialisant.
Une entreprise peut également posséder un existant de ce type.
Grâce à ses nouveaux assistants, WEBDEV 22 permet d'intégrer facilement des snippets Bootstrap, des composants JQuery.UI, des composants Angular.JS dans une page.
Les ressources Web externes (composant Angular JS, Snippet Bootstrap...) sont généralement livrées sous forme de trois composantes :
  • un code HTML
  • un code CSS
  • un code JavaScript.
Il peut arriver que des fichiers de dépendances soient également livrés (images,...). Un framework doit également être installé.
L'AVIS DE L'EXPERT
1- Utilisez les ressources du Web dans vos sites WEBDEV.
2- Appelez des ressources WEBDEV depuis vos pages Angular JS, Bootstrap et autres.
Bénéficiez du meilleur des 2 mondes.
L'intégration d'un composant externe s'effectue en 5 étapes rapides
Etape 1 : Utiliser le nouveau champ "Composant Web externe"
WEBDEV 22 propose une méthode très simple pour intégrer n'importe quelle ressource Web externe dans un site WEBDEV.
Il suffit d'utiliser le nouveau champ "composant Web".
Ce champ "composant Web" peut occuper :
  • soit une partie de la page, pour y incruster un composant externe
  • soit occuper la totalité de la page, pour réaliser une application Web basée sur une technologie externe.
Etape 2 : Insérer la ressource externe : HTML, CSS, Javascript
Les ressources Web externes sont généralement constituées de trois composantes :
  • un code HTML
  • un code CSS
  • un code Javascript.
Avec WEBDEV 22, il suffit de copier/coller les codes HTML, CSS, JS de la ressource externe directement dans les volets respectifs du champ "composant Web".
Chacun de des ces codes est modifiable dans son langage respectif depuis l'environnement WEBDEV.
La coloration syntaxique et l'indentation sont présentes.
Les nouvelles propriétés ..CodeJS, ..CodeCSS, ..CodeHTML du champ "composant Web" permettent également d'apporter des modifications par programmation WLangage.
Etape 3 : Intégrer le framework tiers
Dans la majorité des cas, la ressource externe utilise un framework tiers pour son fonctionnement : framework Angular.JS v2, jQuery, jQuery UI, Bootstrap v3 et v4,…
WEBDEV 22 propose un assistant pour importer et intégrer un framework tiers dans le projet.
Le framework tiers sera inclus dans l'installation du site WEBDEV 22.
Etape 4 : Positionner la ressource dans la page
Le positionnement de la ressource externe dans la page s'effectue très facilement en WYSIWYG.
Il suffit de placer le champ "composant Web" comme n'importe quel champ WEBDEV.
Les ancrages sont disponibles sur le champ Composant Web.
Si la ressource externe constitue une page intégrale, il suffit d'étendre le champ Composant Web à la totalité de la page WEBDEV.
Etape 5 : Le dialogue avec la ressource externe
Pour dialoguer avec le composant externe, il est possible d'initialiser, de lire et d'écrire des variables Javascript de la ressource externe en WLangage !
En général, des procédures WLangage associées au champ "composant Web" sont créées dans ce but.
Ces procédures peuvent être appelées directement depuis le code (HTML ou Javascript) de la ressource externe .
Exemple d'appel à inclure dans le code Javascript de la ressource externe :
MonComposant.MaProcédureWL()
L'appel peut bien entendu transmettre des paramètres.
Ainsi, sur un événement interne au composant, par exemple onclick sur un bouton, une procédure WLangage navigateur écrite en WEBDEV peut être exécutée.
De même, les procédures Javascript de la ressource externe peuvent être exécutées depuis un traitement WLangage.
Il est donc très facile de dialoguer.
Les traitements WLangage sur le champ Composant Web
Le champ "Composant Web" possède des traitements spécifiques pour faciliter sa programmation:
  • Traitement onload
  • Traitement onsubmit
  • Traitement action
  • Traitement affectation de la propriété ..Valeur
  • Traitement lecture de la propriété ..Valeur
Ces traitements permettent d’initialiser le champ, d’exécuter un traitement défini, de transmettre des données, ...
Webservice : SOAP ou REST ?
Les deux méthodes les plus répandues pour implémenter des Webservices sont le protocole SOAP (Simple Object Access Protocol) et les architectures de type REST (REpresentational State Transfer).
Sur Internet, on utilise aujourd'hui surtout des Webservices REST car ils reposent sur le protocole HTTP.
Ils permettent notamment au serveur de renvoyer du JSON (JavaScript Object Notation) qui sera directement analysé par le navigateur qui exécute du code Javascript.
Les anciennes versions de WEBDEV (et la version 22) permettent de créer des Webservices SOAP.
Une nouveauté de la version 22 est la création facile de Webservices REST.
Un Webservice REST = un projet ou une configuration de projet
Avec WEBDEV 22, créer un Webservice REST est facile. Il peut s'agir soit d'un projet complet, soit d'une configuration de projet.
L'intérêt de la configuration de projet est de partager le code métier entre le site et le Webservice au sein d'un même projet.
Un nouvel éditeur pour définir l'interface du Webservice REST
La description d'un Webservice REST s'effectue très simplement depuis le nouvel éditeur de Webservices qui fait son apparition en version 22.
Il suffit de décrire chacun des points d'entrée de l'interface externe du Webservice : nom de la méthode, paramètres attendus, valeur renvoyée, ainsi que le type de requête (GET, POST, PUT, DELETE, ..).
Il est également possible d'indiquer une note de documentation, ainsi que des exemples d'utilisation du point d'entrée et un descriptif du format de la valeur de retour.
WEBDEV 22 génère les procédures ou les classes nécessaires.
Le nouvel éditeur de Webservice REST

Page de test et page de documentation du Webservice
WEBDEV 22 génère automatiquement des pages de test et de documentation pour le Webservice.
Ces pages sont automatiquement déployées au côté du Webservice et constituent un outil indispensable pour aider les développeurs amenés à consommer le Webservice.
Déploiement du Webservice
Le déploiement s'effectue de la même manière que le déploiement d'un site.
Le Webservice est hébergé sur un serveur d'application WEBDEV (serveur propriétaire ou dans le cloud).
Tous les outils habituels du déploiement de site sont disponibles.
Consommation du Webservice : depuis le front-end d'un site WEBDEV ou d'un site tiers
Depuis un site réalisé avec WEBDEV 22, la consommation d'un Webservice REST s'effectue en code navigateur ou en code serveur.
La nouvelle fonction RESTExécute permet d'appeler le Webservice et de récupérer le résultat.
Lorsque le résultat est au format JSON, la fonction JSONExécute appelle le Webservice et interprète automatiquement le résultat.
Un Webservice REST réalisé avec WEBDEV 22 peut également se consommer depuis un site tiers.
Consommation du Webservice : depuis une application WINDEV, WINDEV Mobile ou une application tierce
En code WLangage, la consommation s'effectue par un simple appel RESTExécute.
Depuis un code tiers l'appel s'effectue par les fonctions de requêtes HTTP du langage tiers.
Support du protocole CORS : appeler du JSON sur un site différent
Le protocole CORS (Cross-Origin Resource Sharing) permet d'appeler un service JSON sur un nom de domaine différent du site en cours de navigation, en synchrone ou en asynchrone.
En version 22, la fonction WLangage JSONExécute évolue, et respecte le protocole CORS.
Un exemple d'utilisation est l'utilisation d'un service d'alerte météo directement depuis la page d'un site.
Utilisation de JSON en code navigateur
En version 22, de nouvelles fonctions WLangage Navigateur font leur apparition pour manipuler les chaînes JSON très facilement ces fonctions existent déjà en code Serveur).
Les fonctions JSONVersVariant et Désérisalise permettent de décoder automatiquement une chaîne JSON pour l'affecter dans des variables du WLangage navigateur.
Inversement, VariantVersJSON et Sérialise au format JSON permettent de construire facilement une chaîne JSON à partir des variables du WLangage.
Tracking automatique des pages du site
Google Analytics est un outil très répandu de mesure de fréquentation des sites.
Google Analytics permet de mesurer le nombre de vues pour chaque page du site, le temps de chargement de chaque page, le chemin de navigation, le temps de chargement des ressources de la page (images), le taux de rebond, l'environnement de l'internaute (matériel, localisation géographique, langue, navigateur,….), l'origine de la navigation (page d'origine, publicité, ..), etc...
La version 22 de WEBDEV intègre automatiquement dans vos sites les trackers nécessaires aux statistiques sous Google Analytics : vous saurez tout du parcours des internautes sur vos sites !
Nouvelle famille de fonctions WLangage pour tracker des événements particuliers
En plus des statistiques générales de navigation gérées automatiquement par WEBDEV 22, il est possible de mesurer des comportements particuliers :
  • Evénement personnalisé : clic sur bouton commander, passage dans un champ,...
  • Interaction avec réseau social
  • Timing personnalisé : mesure de temps passé sur un traitement
  • Exception au sens programmation : erreur de programmation
  • Vue d'une page
Evénement personnalisé (Event tracking)
Le suivi d'un événement personnalisé permet de mesurer la fréquence d'une action spécifique de l'internaute : par exemple le clic sur un bouton, le téléchargement d'un fichier, le clic sur une bannière de publicité, le lancement d'une vidéo, ...
Il suffit d'appeler la fonction WLangage GglAnalyticsAjouteEvénement dans le code concerné.
Interaction avec réseau social (Social Interactions)
Ce tracker permet de mesurer le nombre de clics sur un "bouton social" inclus dans la page : Like, Tweet,...
Il suffit d'appeler la fonction WLangage GglAnalyticsAjouteActionRéseauSocial dans le code concerné.
Il est possible de spécifier en paramètre le réseau social concerné, le type d'action (J'aime, faire suivre, tweeter,…), la cible de l'action...
Timing personnalisé (User Timings)
Ce tracker permet d'obtenir des statistiques de mesures de temps écoulé pendant des traitements ou des actions utilisateur spécifiques : mesure du temps pour afficher une liste de produits, mesure du temps passé à remplir un formulaire, …
Il suffit d'appeler la fonction WLangage GglAnalyticsAjouteDurée dans le code concerné.
Tracker les (éventuelles) erreurs d'exécution (Page Tracking)
Ce tracker permet de mesurer le nombre d'erreurs inattendues dans le code Navigateur du site.
Il suffit d'utiliser l'ordre WLangage QuandException , puis d'appeler la fonction GglAnalyticsAjouteException quand l'exception est levée.
Tracker de page (Page Tracking)
Ce type de tracker personnalisé est utile pour affiner les vues sur les pages complexes : plans...
Nouvelle fonction WLangage : GglAnalyticsAjoutePage
Edition Mobile First
Vous le savez, WEBDEV permet de construire des pages Responsive Web Design.
En version 22, la construction d'une page Responsive se base soit sur la présentation "Desktop", soit sur la présentation "Mobile".
En mode "Mobile First", la page Mobile est construite en premier, et sert de base pour la création des pages plus grandes.
En mode "Desktop First", c'est la page pour PC qui est créée en premier.
Le mode "Mobile First" est adapté pour débuter un nouveau site Responsive. Le mode "Desktop First" facilite lui la transformation d'un site existant en mode Responsive.
Nouveau traitement de changement de tranche
Un nouveau traitement WLangage fait son apparition dans les pages Responsive en WEBDEV 22. Il s'agit du nouveau traitement Changement de tranche dans la page.
Le code présent dans ce traitement est appelé à chaque fois que la page change de tranche pendant la navigation.
Cela permet de gérer des cas particuliers.
Visualisation des conflits de positionnement
L'édition en mode Responsive Web Design permet de déplacer les champs selon la tranche d'affichage. Toutefois, les champs déplacés doivent rester dans un ordre logique par rapport à la tranche de référence.
La version 22 de WEBDEV visualise les conflits de positionnement à l'aide de cadres de couleur.
Champ Tableau de bord : Responsive
En version 22, le champ Tableau de bord devient Responsive.
Il devient possible de définir le nombre et la position des Widgets par tranche.
Le même tableau de bord sur tablette et sur smartphoneLe même tableau de bord sur tablette et sur smartphone
Le même tableau de bord sur tablette et sur smartphone

2 champs restent à une distance fixe dans tous les cas (ancrage des champs superposables au pixel)
Par défaut, en mode Responsive, la taille et l'espacement entre les champs sont proportionnels à la largeur de la page.
En version 22, il devient possible d'ancrer les champs superposables de manière fixe : l'espace entre les champs ne sera pas modifié lors de l'agrandissement ou la réduction de la largeur de la page.
Cela permet de conserver des groupes de champs avec une présentation fixe (champ de recherche et bouton "rechercher" par exemple).
L'avis de l'expert
Les Websockets permettent à un site de recevoir des notifications instantanées. Par exemple un stock se mettra à jour lorsqu’il est modifié dans la base de données.
Pour plus de détails, consultez les pages d'aide suivantes :
Recevoir des notifications depuis un serveur (push)
Sur Internet, les échanges de données avec les sites sont basés sur le protocole HTTP.
Le serveur Web envoie des informations au navigateur lorsque ce navigateur lui en fait la demande par une requête (de type HTTP).
Il est parfois nécessaire d'envoyer au navigateur une donnée depuis le serveur Web, sans que le navigateur n'en fasse la demande.
Par exemple pour signaler immédiatement une alerte météo.
L'utilisation de Websockets est la seule façon de notifier le navigateur sans qu'il en fasse la demande.
Pour plus de détails, consultez les pages d'aide suivantes :
Principe : écouter une socket, et appeler une callback selon ce qui arrive
WEBDEV 22 propose une nouvelle famille de fonctions WLangage navigateur : les fonctions Socket.
Ce jeu de fonctions permet de gérer la transmission d'informations via une Websocket.
La fonction SocketConnecte permet de se connecter au serveur de socket et d'ouvrir le canal de communication.
La fonction SocketEcrit permet elle d'envoyer une notification au serveur, par exemple pour demander au serveur de recalculer des statistiques.
Pour plus de détails, consultez les pages d'aide suivantes :
Exemples d'utilisation
L'usage de Websockets permet d'envoyer (de "pusher") des données à un site : afficher une alerte météo ou boursière, créer un chat instantané, gérer une édition de document partagé entre plusieurs internautes en temps réel, ...
Pour plus de détails, consultez les pages d'aide suivantes :
Serveur de sockets : créé en WINDEV ou serveur tiers
Le serveur de Websockets peut être écrit en WINDEV à l'aide des fonctions WLangage de la famille Socket.
Ce serveur de Websockets peut également être un serveur tiers.
Le serveur des Websockets peut être hébergé sur une machine différente du serveur Web.
Pour plus de détails, consultez les pages d'aide suivantes :
Edition du CSS : coloration syntaxique et indentation
En version 22, un nouvel éditeur de code CSS fait son apparition.
Le nouvel éditeur propose la coloration syntaxique, la complétion sur les noms de propriétés CSS et l'indentation automatique.
Le nouvel éditeur de CSS
Le nouvel éditeur de CSS

Déplacement des zones de mise en page à la souris (zoning)
En version 22, il devient possible de déplacer visuellement les zones de mises en page dans l'éditeur de WEBDEV.
La construction "par bloc" des pages devient bien plus simple !
Nouvel éditeur d'images et d’icônes
En version 22, un nouvel éditeur fait son apparition : l'éditeur d'images et d’icônes.
(voir nouveauté 072)
Nouveau RAD : portail collaboratif d'entreprise (Honolulu)
Un nouveau modèle de RAD applicatif permet de réaliser "en un clic" un portail collaboratif d'entreprise clé en main.
Le portail inclut :
  • Messagerie
  • Partage de documents
  • Chat
  • Forum
  • Agenda
  • Actualité
  • Gestion de favoris
  • Gestion des utilisateurs
  • ...
Portail Honolulu
Nouveau RAD : site de gestion de FAQ
Un nouveau RAD "Gestion de FAQ" (Questions fréquentes) :
  • Edition et publication de FAQ en ligne
  • Gestion des comptes utilisateurs et des accès
  • Recherche...
PHP
PHP : Bénéficiez des nouveautés communes
Vous le savez, WEBDEV peut générer un site en PHP.
La plupart des nouveautés présentées dans WEBDEV ainsi que les nouveautés communes sont disponibles pour les sites PHP, dont les Websockets.
Recherche "full text" sur mysql
Les sites générés en PHP utilisent des bases de données MySQL.
En version 22, la recherche "full text" est gérée par WEBDEV sur ces bases.
Les nouveaux champs PHP
Les nouveaux champs disponibles sous WEBDEV sont également disponibles en PHP :
  • Plan
  • Bandeau défilant
  • Champ upload
  • Evolutions sur les champs
  • Composant Web
  • ...
Charte graphique : 2 nouvelles ambiances
Deux nouvelles ambiances font leur apparition dans WEBDEV 22:
  • une ambiance BStrap
  • une ambiance Lounge.
Cela ajoute encore des possibilités de choix de chartes graphiques immédiatement utilisables pour vos projets.
De nouveaux modèles de pages prédéfinis
3 nouveaux modèles de pages sont livrés avec WEBDEV 22 (à la norme Responsive):
  • Portfolio
  • Présentation d’application mobile
  • Panneau d’administration
SaaS : mot de passe oublié
WEBDEV permet de créer des applications SaaS automatiquement.
En version 22, la gestion du mot de passe oublié par l'utilisateur final devient également automatique.
Pour plus de détails, consultez :
SaaS : captcha intelligent
En version 22, l'authentification sur un site SaaS est améliorée par l'apparition d'un Captcha après 3 échecs de saisie d'identifiant et de mot de passe.
Captcha en SaaS
Pour plus de détails, consultez Développement d'un site SaaS.
Le serveur d'application WEBDEV est également un serveur de tâches planifiées
Le serveur d'application WEBDEV est également un serveur de tâches planifiées.
En version 22, la planification des tâches s'effectue selon 3 modes :
  • depuis l'environnement
  • par programmation
  • depuis l'administrateur du Serveur d'Application (voir nouveauté 963).
La nouvelle famille de fonctions WLangage ServeurAppli permet de planifier finement l'exécution d'une procédure ou d'une méthode : planifier, supprimer, ajouter, lister...
Tâches planifiées
Pour plus de détails, consultez Fonctions de gestion des tâches planifiées WEBDEV.
Exécuter immédiatement une tâche planifiée par programmation
En version 22, WEBDEV peut exécuter une tâche planifiée à la demande, par programmation grâce à la fonction ServeurAppliExécuteTachePlanifiée.
Configuration automatique de IIS plus rapide
Dans les cas où de nombreux sites sont installés sur un serveur IIS (plusieurs centaines de sites sur un seul serveur, par exemple serveur mutualisé), la re-configuration automatique du serveur IIS pouvait prendre un certain temps.
En version 22, cette re-configuration automatique est maintenant beaucoup plus rapide.
L'ajout d'un site, la suppression d'un site, le changement de version des sites est maintenant immédiat.
Administrer facilement les tâches planifiées
Depuis l'administrateur du serveur d'application WEBDEV (local ou distant) du site déployé, il devient possible d'administrer les tâches planifiées.
Administrer facilement les Webservices REST
Les Webservices REST créés avec WEBDEV ou WINDEV sont présents dans l'administrateur du Serveur d'Application WEBDEV.
Déploiement de Webservices REST : automatique
Le déploiement d'un Webservice REST s'effectue aussi simplement que le déploiement d'un site...
Il n'y a rien de particulier à faire !
Diagnostic avant installation d'une mise à jour de l'environnement WEBDEV
Lors de l'installation d'une mise à jour de WEBDEV en version 22, un ensemble de vérifications est effectué afin de vérifier que les paramètres système sont corrects :
  • configuration des droits de registre
  • import automatique ou manuel des comptes WEBDEV existants
  • vérification de la configuration de serveur IIS
  • création d'un point de restauration sur le serveur IIS
  • ...
... et de nombreuses autres nouveautés
La version 22 propose également de nombreuses autres nouveautés intéressantes, que nous vous laissons découvrir lorsque vous aurez commandé et reçu votre package ...
Version minimum requise
  • Version 22
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire