PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

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
Profitez des 180 nouveautés communes de la version 23
WEBDEV bénéficie des nouveautés communes de la version 23.
WEBDEV 23 bénéficie bien entendu de l'évolution de l'environnement de développement, comme par exemple le nouveau champ Disposition, et des évolutions du WLangage, de HFSQL, et de la compatibilité avec WINDEV et WINDEV Mobile.
Le principe du champ Galerie d'images
WEBDEV propose en version 23 le nouveau champ "Galerie d'Images".
Ce champ, basé sur un champ Zone Répétée, permet d'afficher et gérer sans programmation l'affichage d'un ensemble d'images.
Les images peuvent être de taille et proportion différentes : le champ Galerie d'images se charge d'offrir un affichage harmonieux.
La navigation entre les images est automatiquement gérée.
Le champ affiche des images présentes dans un répertoire, ou provenant d'une base de données ou encore fixées par programmation.
Ce champ permet d'économiser des semaines de développement.
Fonctionnalités offertes par la galerie d'images
Une image est affichée dans une cellule.
Dans cette cellule, d’autres champs peuvent être insérés et/ou superposés à l’image : libellé, bouton, ...
Les autres champs peuvent être affichés en permanence ou uniquement lors du survol de l’image.
Lors d’un agrandissement du navigateur, selon le choix spécifié dans la fenêtre 7 onglets, soit le nombre d’images augmente, soit la taille des images augmente.
Le nombre maximum de lignes ou de colonnes peut être fixé.
La taille de l’image peut être bornée par des dimensions minimales et/ou maximales.
La présentation est toujours harmonieuse.
Galerie en lignes
Une galerie peut être organisée en lignes ou en colonnes.
Une galerie en lignes propose une même hauteur pour chaque image de la même ligne.
Les lignes n'ont pas forcément la même hauteur : cette hauteur est déterminée automatiquement en fonction des images de la ligne.
La galerie en ligne adapte automatiquement la largeur de chaque cellule pour respecter les proportions de l'image.
Galerie en lignes
Galerie en lignes
Galerie en colonnes
Une galerie en colonnes (comme dans l'exemple en page de gauche) propose une même largeur pour chaque image de la même colonne.
La galerie en colonnes adapte automatiquement la hauteur de chaque cellule pour respecter les proportions de l'image.
Lorsque le navigateur est agrandi, 3 options sont proposées :
  • le nombre de colonnes reste fixe, la taille des images reste fixe,
  • le nombre de colonnes reste fixe mais la taille des images augmente,
  • la taille des images reste fixe mais le nombre de colonnes augmente.
La galerie est responsive
Lorsqu'une galerie est créée dans une page responsive, la galerie est responsive !
Par exemple, la taille des cellules et le nombre de colonnes peuvent être définis pour chaque tranche.
En tranche mobile, l'affichage en survol sera remplacé par un affichage permanent (car il n'existe pas de survol de souris sur téléphone !)
Comment créer la galerie ?
Une galerie est une Zone Répétée de type "Galerie".
Il suffit de choisir ce type dans le ruban!

La cellule est configurée par défaut mais bien entendu tout est modifiable et paramétrable.
Galerie : où sont stockées les images ?
Les images d'une galerie sont stockées où vous voulez !
Les images peuvent se trouver dans une base HFSQL, dans une base tierce, dans un répertoire donné, sur un ou des serveurs de stockage distant (CDN, ...).
Une même image peut être stockée sous différentes tailles et sur des serveurs qui peuvent être différents.
Par exemple, les images utilisées dans la galerie sont stockées sur le serveur Web du site, et les images haute définition sont hébergées chez un hébergeur spécialisé (qui se chargera éventuellement de répliquer les images sur des sites répartis dans le monde pour être proche des internautes).
Navigation dans la galerie
La navigation dans la galerie est gérée automatiquement.
Par défaut, une réglette ou des boutons de parcours sont automatiquement présents en bas de la page de visualisation.
La visionneuse haute définition est également automatique.
Navigation dans les images haute définition (popup)
Un des modes de la galerie d'images est la visionneuse, qui permet la navigation automatique entre les images agrandies (mode "détail" ou "haute définition").
Navigation par défaut
Navigation par défaut
Cliquer sur une image de la galerie l'agrandit (ainsi que les champs inclus dans la cellule) et fait apparaître des flèches "Suivant" et "Précédent" sur les côtés, pour naviguer d'image en image.
La fenêtre popup peut être totalement personnalisée : icônes, flèches, icônes ou textes supplémentaires, taille, traitements, ...
Champ Disposition en WEBDEV
Le champ Disposition est également disponible sous WEBDEV.
Il permet de faciliter les mises en page complexes.
Très utile : il est possible de changer l'orientation du champ Disposition par tranche. Exemple : horizontal sur PC, vertical sur téléphone !
Chaque ensemble de champs dans une zone Disposition (ici matérialisée en rouge) peut être rendu visible ou invisible ; les zones autour se décalent pour ne laisser aucun trou
Chaque ensemble de champs dans une zone Disposition (ici matérialisée en rouge) peut être rendu visible ou invisible ; les zones autour se décalent pour ne laisser aucun trou

Table : adaptation automatique en Responsive
En version 23, le champ Table adopte un comportement adapté au mode Responsive.
Quand la largeur de la page devient insuffisante pour afficher toutes les colonnes de la table, la table change de représentation à l'écran. Il n'y a rien à programmer.
La présentation passe en mode "vertical" lorsque c'est nécessaire (voir copie d'écran ci-après).
Tout est automatique.
Ce cas se présente souvent lors de l'affichage d'une page sur un téléphone.
Une même table sur 2 matériels différents : PC et téléphone. La table reste lisible grâce au mode Responsive !
Une même table sur 2 matériels différents : PC et téléphone. La table reste lisible grâce au mode Responsive !
Tables : titres de colonnes contenant champ Image et champ Lien
En version 23, les titres des colonnes peuvent contenir des liens et/ou des images.
Titres de colonnes contenant un lien
Titres de colonnes contenant un lien
Tables et Zones répétées : édition facilitée
En version 23, la fenêtre 7 onglets de description des champs Table et Zone Répétée évolue pour plus de clarté et de facilité d'utilisation.
La création des colonnes dans les tables est facilitée.
La création des attributs dans les zones répétées est également facilitée grâce à une représentation plus intuitive.
Image dynamique homothétique
En version 23, les images dynamiques peuvent (enfin) être homothétiques.
Dans ce mode, l'image qui est par exemple passée par son lien ou son chemin respectera l'homothétie à l'intérieur du champ défini sous l'éditeur.
Les autres champs de la page ne seront pas déplacés.
Saisie : aperçu des mots de passe (oeil)
En version 23, la propriété "visualisation possible du mot de passe" apparaît sur les champs de saisie.
Un oeil apparaît en fin de zone de saisie.
Un clic sur l'oeil en cours de saisie permet à l'internaute de voir le mot de passe en clair.
C'est pratique pour éviter les fautes de frappe.
Le clic sur l'oeil permet de voir le mot de passe saisi (à éviter s'il y a du monde autour !)
Le clic sur l'oeil permet de voir le mot de passe saisi (à éviter s'il y a du monde autour !)

Personnalisez les styles des rendez-vous en CSS
En version 23, il devient possible de définir un style CSS pour les rendez-vous dans les champs Planning et Agenda.
Toutes les possibilités du CSS sont accessibles.
La définition des styles CSS s'effectue dans la fenêtre "7 onglets".
Des rendez-vous stylés avec des styles !
Des rendez-vous stylés avec des styles !
Agenda/Planning : améliorations diverses
Dans un champ Agenda ou dans un champ Planning, une case "Supprimer" apparaît en haut à gauche d'un rendez-vous quand on le survole à la souris. Cette case permet de supprimer le rendez-vous.
En version 23, il est possible de personnaliser l'image de la case "Supprimer".
Il est également possible de choisir sa position dans le rendez-vous (en haut à droite, en bas, etc.).
Des rendez-vous personnalisés
Des rendez-vous personnalisés
Champ de saisie : le libellé au-dessus
En version 23, il est possible de créer des champs de saisie avec le libellé du champ positionné au-dessus de la zone de saisie, et non plus forcément à gauche.
Cette disposition est particulièrement utile pour gagner de la place en largeur dans une page destinée à être consultée sur un téléphone.

Champ de saisie : le texte d'indication passe en libellé lors de la saisie
Le champ de saisie peut contenir un texte d'indication.
Ce texte d'indication indique à l'internaute le contenu qu'il doit saisir, le format à utiliser...
En version 23, lorsque l'internaute commence à saisir dans le champ, le texte d'indication peut devenir libellé au-dessus de la zone de saisie.
Ainsi l'internaute peut toujours lire cette indication pendant la saisie.
Le champ de saisie au repos
Le champ de saisie au repos
... en cours de saisie : le texte d'indication se réduit et se place au dessus du texte saisi
... en cours de saisie : le texte d'indication se réduit et se place au dessus du texte saisi
Refactoring sous l'éditeur : extraire le libellé d'un champ de saisie
En version 23, l'éditeur de pages propose une nouvelle fonctionnalité de refactoring de champs : créer 2 champs à partir d'un seul champ de saisie.
Un champ de saisie sera découpé en 2 champs :
  • libellé,
  • champ de saisie (sans libellé).
Le champ Libellé contient le même texte que l'ancien libellé du champ de saisie et conserve les mêmes propriétés : texte riche multilangue, style, ...
Le champ de saisie conserve ses propriétés mais le libellé est effacé du champ (le libellé du champ de saisie reste vide).
Cette dissociation permet de positionner le libellé à tout endroit de son choix, et pas forcément à gauche ou au-dessus !
Fusion de libellés en Zone de texte riche (ZTR)
La version 23 apporte la possibilité de fusionner deux ou plusieurs libellés en un seul.
Cette fonctionnalité est disponible sur les libellés "classiques" et également sur les zones de texte riche.
Cela permet de passer d'anciennes pages en technologie actuelle.

Ici, 3 libellés ont été fusionnés en 1 seul : c'est en général plus pratique à manipuler
Des jauges animées de haute qualité
En version 23, WEBDEV propose des planches d'images qui servent à définir des images animées.
Ces images peuvent être utilisées dans un champ Image ou un champ Bouton.
Ces images permettent de réaliser des jauges sans fin ou des sabliers en haute définition, d'une définition très supérieure aux Gifs.
Avec CSS, les cellules ont du style (cascading)
En version 23, tous les champs conteneurs et en particulier le champ Cellule acceptent un Style CSS.
Plus intéressant encore, chaque élément contenu dans un conteneur peut également se voir affecter automatiquement les propriétés du conteneur.
Il suffit que la caractéristique du style soit laissée vide (choix "non défini").
Par exemple, si aucune couleur de texte n'est spécifiée pour un élément contenu dans la cellule, alors celui-ci prendra la couleur de texte indiquée dans son conteneur parent.
Insertion de tableaux HTML dans un texte riche
En version 23, il devient possible d'insérer un tableau HTML dans une Zone de Texte Riche.
Cette possibilité permet de bénéficier du positionnement en mode flux.
Un tableau HTML est inséré au fil du texte
Un tableau HTML est inséré au fil du texte
Les tableaux HTML sont responsive
Le champ Tableau HTML permet d’afficher des tableaux dans une page.
Le champ Tableau HTML peut également faciliter la mise en page, en positionnant les éléments de la page dans un tableau.
En version 23, le champ Tableau HTML évolue et adopte un comportement Responsive.
Le champ Tableau s’adapte à la largeur de la page en cours de navigation.
L’affichage reste cohérent quel que soit le matériel : mobile, tablette ou desktop.
Les largeurs des colonnes restent proportionnelles à la disposition de référence.
Si la largeur diminue, la hauteur augmente si nécessaire pour permettre d’afficher le contenu.
Tableau HTML affiché sur PC
Tableau HTML affiché sur PC
Le même tableau HTML affiché sur téléphone
Le même tableau HTML affiché sur téléphone
Édition facilitée des tableaux HTML : sélection
En version 23, la manipulation des tableaux HTML est bien plus facile.
Sélectionner un tableau HTML s'effectue d'un simple clic.
Des poignées supplémentaires apparaissent sur les objets.
Les changements de taille s'effectuent facilement à la souris, pour le tableau HTML lui-même et/ou pour ses cellules.
Lors d'un redimensionnement du tableau HTML ou des cellules par les poignées, un algorithme contrôle la cohérence du tableau HTML et évite l'apparition de vide entre les cellules.
Édition facilitée des tableaux HTML : fenêtre 7 onglets non modale
La fenêtre 7 onglets de définition du champ Tableau HTML est non modale.
Cela permet de visualiser directement l'effet de chaque modification de paramètres.
Il devient également possible de modifier une même propriété sur plusieurs tableaux HTML simultanément.
Édition facilitée des tableaux HTML : modifieur
En version 23, la manipulation des tableaux HTML est également possible grâce au modifieur.
Le modifieur agit sur le tableau HTML lui-même et/ou sur ses cellules.
Aérez vos tableaux HTML : marges et espaces
En version 23, il devient possible de spécifier des marges internes et externes aux cellules des tableaux HTML.
Ces marges s'appliquent automatiquement à toutes les cellules du tableau HTML.
Marges et espaces dans les tableaux HTML pour une présentation aérée
Marges et espaces dans les tableaux HTML pour une présentation aérée
La marge externe permet d'espacer uniformément toutes les cellules du tableau HTML, offrant de nouvelles possibilités de mise en page.
La marge interne permet de réserver un espace (blanc tournant) entre le contenu des cellules et ses bords.
Déplacement des tableaux HTML par coordonnées
Certains infographistes ont l'habitude de positionner (déplacer) les éléments de pages en saisissant directement les coordonnées de positionnement dans la page.
Cela permet un positionnement très précis.
En version 23, il devient possible de positionner par coordonnées un tableau HTML.
Les coordonnées peuvent être saisies directement dans la barre de statut.
Il est bien sûr toujours possible d'effectuer un déplacement au pixel près avec les touches flèches du clavier.
Pinterest s'ajoute à Facebook, Twitter,...
WEBDEV propose un champ Réseau Social qui permet d'interagir avec les principaux réseaux sociaux sur Internet.
Lors de la création du champ, il suffit de choisir un réseau social et le type d'action à réaliser ("j'aime" sur Facebook, Tweeter sur Twitter, Partager sur Linkedin, etc.) et d'indiquer si nécessaire des paramètres de l'action.
WEBDEV crée alors automatiquement un bouton avec le pictogramme et le lien adéquats.
En version 23, WEBDEV propose en plus une interaction avec le réseau Pinterest à travers une nouvelle action "s'abonner à un profil Pinterest".
L'internaute peut ainsi s'abonner à un profil Pinterest en 1 clic.
Nouvelle action : afficher le profil
En version 23, une nouvelle action apparaît dans le champ Réseau Social : "Afficher la page de profil".
C'est un libellé générique pour une action qui a un nom différent selon le réseau social.
Cette action permet par exemple d'afficher le mur d'une personne sur Facebook, le profil Twitter, le tableau Pinterest, etc.
Nouveau graphe : graphe composite
En version 23, les graphes composites viennent enrichir les nombreux types de graphes déjà existants.
Les graphes composites sont une association de deux ou plusieurs types de graphe.
Par exemple, il est possible de combiner un histogramme avec une courbe, plusieurs courbes avec un histogramme, mais aussi un graphe chandelier avec un graphe aire, etc.
Des graphes plus lisibles : échantillonnage automatique (sub-sampling)
Les graphes de la version 23 proposent un échantillonnage automatique à l'affichage.
Lorsque la quantité de données à afficher est trop importante pour être lisible, un algorithme d'échantillonnage limite les données à afficher, en conservant un rendu fidèle au graphe original. Cette opération est réalisée sous le navigateur, ce qui permet au graphe de s'adapter immédiatement, sans retour au serveur (zoom, ...).
Zoom au doigt et à la souris sur les graphes
En version 23, il est possible de zoomer sur les graphes interactifs affichés par WEBDEV.
Le zoom s'effectue soit à la souris (CTRL + molette) soit à l'aide des doigts (pincé/écarté) sur les matériels à écran tactile.
Repère d'affichage orthonormé
La version 23 permet de spécifier qu'un graphe utilise un repère orthonormé, c'est-à-dire que sa graduation est identique sur les deux axes.
Le graphe calcule l'échelle et la graduation automatiquement.
Champs graphes : nouveautés diverses
De nouvelles fonctions spécifiques aux graphes font leur apparition en version 23 : grZoom, grInfoPoint.
La propriété Type de trait fait également son apparition.
Type "Procédure"
Le type Procédure fait son apparition en code navigateur.
Le type Procédure, associé aux procédures internes permet de mettre en place le concept de "closure".
Code navigateur : 23 nouvelles propriétés
En version 23, 23 nouvelles propriétés font leur apparition en WLangage navigateur.
Pour bénéficier de ces nouvelles propriétés, il est nécessaire d'activer le framework "version 2".
Rappel : le passage en framework "version 2" s'effectue en modifiant les options de génération du projet.
BoutonCalendrierBulleTitreContenuInitialDisposition
DuréeAnimationEtatInitialIndicationLibellé
LibelléHTMLNombreColonneNoteTexteAlternatif
TexteSansFormatTitreTitreNoteURL
ValeurAffichéeValeurInitialeVideVignette
VisibleInitialXInitialYInitial
WLangage : 4 nouvelles fonctions navigateur
4 nouvelles fonctions WLangage font leur apparition sous WEBDEV en mode navigateur en version 23 :
Variable serveur mise à jour en cas de modification navigateur
Des variables globales peuvent être déclarées en code Serveur.
Ces variables globales sont uniquement accessibles en lecture dans le code navigateur. Il s'agit du mode par défaut.
Pour des raisons de sécurité, il est possible d'interdire la lecture (donc le transfert de cette variable côté navigateur) en déclarant la variable globale avec l'attribut serveur uniquement.
Ceci est indispensable par exemple pour une variable Serveur qui contiendrait un mot de passe de connexion.
// La clé privée ne doit pas être transmise au navigateur
gsCléPrivée est une chaîne <serveur uniquement> = "1234657841549573541"
En version 23, les variables serveur partagées avec le code navigateur peuvent également être en écriture.
En cas de modification de la variable sur le navigateur, la variable sera automatiquement mise à jour sur le serveur.
Notez que la synchronisation de la variable sur le serveur sera effectuée sur le serveur à la requête HTTP suivante.
Le nouvel attribut fait son apparition.
Inutile de créer des champs cachés pour retourner les valeurs au serveur !
// La liste des clients doit être synchronisée entre le serveur et le navigateur
gsListeClients est une chaîne <synchronisé navigateur>
La touche "BACK" est opérationnelle dans le site SPA
Quand l'internaute utilise la touche "Précédent" du navigateur, le navigateur revient à la page précédente.
Or une application SPA n'a qu'une page !
Donc, la touche Précédent renvoie par défaut à la page affichée avant le lancement de l'application !
En version 23, WEBDEV permet de donner à la touche Précédent le fonctionnement attendu.
Ce mécanisme alimente l'historique de navigation et intercepte l'événement "Précédent" (ou "Suivant") pour contrôler l'affichage.
Cela permet d'afficher la page de l'application SPA dans son état précédent.
Cette gestion s'effectue par programmation.
Au choix du développeur, chaque état de l'application peut être mémorisé dans l'historique de navigation, à l'aide des nouvelles fonctions WLangage navigateur qui font leur apparition : NavigateurHistoriqueAjoute et NavigateurHistoriqueModifie.
Un nouveau traitement navigateur "Déplacement dans l'historique de navigation" est également disponible en version 23.
Ce traitement "Déplacement dans l'historique de navigation" est appelé lorsque l'internaute utilise les touches "Précédent" ou "Suivant".
Pour plus de détails, consultez :
Ouverture : ré-utilisez des ressources existantes de toutes technologies
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, ...
Vous le savez, WEBDEV permet d'utiliser des ressources externes, qui se présentent en général sous la forme :
  • un code HTML,
  • un code CSS,
  • un code JavaScript.
Avec WEBDEV, vous êtes ouverts aux ressources disponibles.
Convertisseur Sass (Syntactically Awesome Stylesheets)
Attention : ne confondez pas Sass (cette nouveauté) avec SaaS (Software as a Service).
Sass est un métalangage, c'est-à-dire un langage plus générique que CSS.
Les différents composants Web proposés sur Internet sont composés d'une partie HTML, d'une partie CSS et d'une partie Javascript.
Il est très fréquent que la partie CSS soit mise à disposition sous forme du métalangage Sass.
En version 23, WEBDEV permet de copier/coller directement du code Sass dans l'onglet CSS d'un champ Composant Web.
L'éditeur effectue directement la conversion Sass vers CSS natif.
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).
Vous le savez, WEBDEV permet de créer des Webservices SOAP et des Webservices REST.
Génération automatique des points d'entrée et des procédures (REST)
En version 23, WEBDEV propose un assistant qui crée automatiquement les points d'entrée et les procédures d'un Webservice REST.
Il suffit d'effectuer un "drag and drop" (glisser/déplacer) d'un fichier de données de l'analyse de données vers le Webservice.
Par exemple, pour un fichier de données CLIENT, les points d'entrée permettant d'ajouter, de modifier, de supprimer un client sont ajoutés, ainsi que les procédures correspondantes.
Gestion automatique des paramètres POST (REST)
Dans un Webservice REST, un point d'entrée peut être de divers types : GET, POST, DELETE, ...
Le point d'entrée de type POST reçoit un paramètre qui peut être lui aussi de différents types : Chaîne de texte, JSON, Buffer binaire, ...
En version 23, ce paramètre est automatiquement passé à la procédure WLangage liée au point d'entrée.
La désérialisation est automatique en fonction du type de paramètre utilisé et ne nécessite aucun code.
Sérialisation/Désérialisation des tableaux associatifs en JSON
En version 23, la sérialisation et la désérialisation des tableaux associatifs en JSON sont disponibles en code navigateur.
Il est ainsi facile de transmettre un tableau associatif entre le serveur et le navigateur.
Cette nouvelle fonctionnalité est très utile dans une requête Ajax.
Transmission automatique de variables complexes du serveur vers le navigateur
En version 23, il n'est plus nécessaire de sérialiser des variables complexes (tableau, tableau de structures, tableau associatif, ...) en JSON pour les transmettre au code navigateur.
WEBDEV assure la sérialisation et la désérialisation automatiquement et de manière transparente pour le développeur.
Les variables serveur concernées sont disponibles en code navigateur.
Utilisation de la version développeur de Analytics
Google Analytics est un outil très répandu de mesure de fréquentation des sites.
WEBDEV intègre automatiquement dans vos sites les trackers nécessaires aux statistiques sous Google Analytics.
Google Analytics existe dans une version dite "développeur" qui permet de tracer des informations supplémentaires dans la console de debug du navigateur.
En version 23, lors d'un test de site (GO sous l'éditeur), la version développeur de Google Analytics est utilisée dans les pages du site.
Cette fonctionnalité est surtout utile en cas d'utilisation avancée des fonctions de la famille WLangage GglAnalytics (GglAnalyticsAjoute, GglAnalyticsAjouteEvénement), ... ou lors d'un appel direct à l'API de Google Analytics.
Le développeur peut ainsi consulter des informations spécifiques dans la console du navigateur, telles que :
  • les appels au service Google Analytics,
  • la nature des appels,
  • les paramètres transmis.
Nouveau champ Disposition : il facilite le responsive !
En version 23, le nouveau champ Disposition facilite la page Responsive.
Il devient par exemple très facile de réaliser un formulaire de saisie en colonnes, dont une partie peut se rajouter de manière conditionnelle en fonction des réponses de l'internaute.
Le champ Disposition va vite vous devenir indispensable en Responsive !
Champ Disposition : des éléments de largeur fixe dans les pages responsive
Le nouveau champ Disposition de la version 23 est un champ "Conteneur".
Le champ Disposition contient des cellules, qui elles-mêmes contiennent un ou des champs.
Ces cellules peuvent être de largeur fixe, ou de largeur variable.
Il devient ainsi facile de créer dans une page Responsive des comportements mixant largeur fixe et largeur variable.
Champ Disposition : position fixe dans les pages responsive
Une cellule de champ Disposition peut rester vide.
Dans une page Responsive, elle agit alors comme un outil de positionnement fixe des autres champs de la ligne situés à sa droite.
Menu sur mobile : sliding menu automatique
Sur mobile, pour des raisons de place, les menus sont souvent remplacés par des boutons "hamburger".
L'appui sur ce bouton ouvre le menu. En version 23, ce menu peut également être ouvert directement comme un sliding menu, par un glisser de doigt de gauche à droite.
Slidding menu automatique
Slidding menu automatique
Editeur en mode RWD: des surcharges de propriétés plus claires
En version 23, la fenêtre de description des champs (7 onglets) évolue spécifiquement pour la gestion du RWD (Responsive Web Design).
Lors de l'édition d'un champ, les propriétés qui ne peuvent pas être modifiées dans la tranche en cours sont grisées.
La tranche en cours d'édition est rappelée dans la fenêtre des 7 onglets par son code couleur.
Editeur en mode responsive : amélioration de l'édition
Dans l'éditeur de pages en mode Responsive, le Webdesigner déplace le repère de "largeur navigateur" pour visualiser le comportement de la page dans les différentes largeurs d'affichage de la page.
En version 23, lors de l'édition de la page, le repère de "largeur navigateur" retourne automatiquement à la position de référence de la tranche en cours.
Cela évite de modifier des positionnements par erreur.
Editeur en mode responsive : alertes lors de déplacements de champs impactant la tranche de référence
Dans une page Responsive, lors de la modification de la position ou de la taille d'un champ dans une tranche autre que la tranche de référence, une confirmation est demandée.
Piège supprimé !
Ceci permet de ne pas modifier la position ou la taille d'un champ dans une tranche secondaire alors qu'on pensait travailler dans la tranche de référence!
Websockets : fermeture volontaire ou erreur ?
WEBDEV permet d'utiliser facilement des Websockets.
Depuis le code navigateur, il est possible d'interagir avec un serveur de sockets grâce à la famille de fonctions Socket : SocketConnecte, SocketEcrit, SocketExiste, SocketFerme.
Le traitement de la communication par sockets est asynchrone.
Il s'effectue à l'aide d'une procédure WLangage (callback) appelée à chaque événement.
En version 23, sur l'événement de fermeture du socket, la procédure de traitement des événements reçoit en paramètre le code qui identifie la raison de la fermeture : fermeture volontaire, redémarrage du serveur, erreur interne, problème de syntaxe, etc…
L'application peut ainsi déterminer l'action à réaliser : terminer la communication, afficher une erreur et terminer la communication, ou relancer une nouvelle connexion, ou modifier des paramètres, ...
Choix des styles par défaut pour le projet
Pour chaque type de champ, une ambiance propose un ensemble de styles harmonieux.
Parmi ces styles, un style est défini "par défaut".
C'est ce style par défaut qui est utilisé à la création d'un nouveau champ.
Dans les anciennes versions, il n'était pas possible de spécifier le style à utiliser par défaut.
En version 23, il devient possible de spécifier le style qui sera utilisé par défaut.
Il devient même possible d'utiliser un style qui ne se trouve pas dans l'ambiance.
Le gain de manipulations peut être important !
Définition d'une hauteur par défaut pour chaque type de champ
En version 23, il est possible de définir une hauteur de champ par défaut pour chaque type de champ.
Cela évite également de nombreuses manipulations de modifications lors de la création.
La hauteur de champ par défaut peut également être spécifiée dans le style.
Possibilité de spécifier les marges et espacements entre les champs par projet/page
En version 23, il est possible de définir pour l'ensemble du projet ou pour une page donnée les marges et l'espacement à respecter entre les champs.
L'éditeur applique ensuite un magnétisme en fonction de ces paramètres.
Liste des popups d'une page : affichage rapide
Dans l'environnement WEBDEV, les popups d'une page apparaissent dans une liste sous forme d'aperçus en vignettes.
En version 23, l'affichage de cette liste est rapide quel que soit le nombre de popups dans la page.
Edition des ancrages facile
En version 23, la fenêtre d'édition des ancrages devient non modale, et peut rester ouverte pendant l'édition de la page.
Il est ainsi possible de modifier les ancrages de plusieurs champs à la suite très rapidement ou de procéder par multisélection.
La version 23 permet également de modifier les ancrages du ou des champs sélectionnés directement depuis le modifieur.
Amélioration de la fluidité et de la précision de l'éditeur dans les déplacements
La version 23 améliore la fluidité de l'éditeur de pages dans les déplacements, dans le redimensionnement et dans le positionnement des champs.
L'impact des magnétismes est optimisé.
Le chargement des pages sous l'éditeur est également accéléré par un facteur de 20 à 80% selon les pages.
Édition des polices : nouvelle IHM conviviale
En version 23, la fenêtre d'édition des polices évolue pour plus de confort.
La création d'ensembles de polices est facilitée.
L'assistant de création d'ensembles de polices contenant à la fois des polices standard et des polices téléchargeables (Google Font, etc.) est devenu plus convivial.
Ensemble de polices : police de substitution automatique
En Web, on raisonne en "ensemble de polices".
Un ensemble de polices contient plusieurs polices ressemblantes. Pour les champs, le navigateur utilise normalement la première police de l'ensemble spécifié. Si cette police n'est pas disponible sur le poste de l'internaute, le navigateur utilise la police suivante, et ainsi de suite.
En général, 3 polices sont spécifiées, la 3ème police étant une police standard.
En version 23, à la création d'un nouvel ensemble, une police de substitution la plus proche de la police de référence est proposée automatiquement.
Le RAD "annonces immobilières" génère un site RWD
En version 23, le RAD Applicatif "Web-Immo", site d'annonces immobilières, évolue en une version Responsive Web Design pour permettre la navigation sur les téléphones.
1 clic, et le tour est joué !
Modèles de pages prédéfinis
En version 23, les modèles prédéfinies RWD Responsive Business, Responsive Blog, Responsive Mobile, Responsive Présentation et Responsive Administration évoluent pour intégrer le nouveau champ Disposition.
La mise en page est simplifiée, les modèles sont plus faciles à utiliser.
Chartes graphiques : 2 nouvelles ambiances
Deux nouvelles ambiances font leur apparition dans WEBDEV 23 :
  • une ambiance Ztim
  • une ambiance Spatiumn.
Cela ajoute encore des possibilités de choix de chartes graphiques immédiatement utilisables pour vos projets.
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.
Les nouveaux champs PHP
Les nouveaux champs disponibles sous WEBDEV sont également disponibles en PHP :
  • champ Galerie
  • champ Disposition
  • champ Table Responsive Web Design
  • évolution sur les champs
  • ...
PHP : graphes interactifs
En version 23, les graphes font leur apparition en PHP.
Tous les types de graphes interactifs sont disponibles : Secteur, Histogramme, Courbe, Aire, Nuage de points, Beignet, Hémicycle, Radar, Chandelier Japonais, MinMax, BarChart, Entonnoir, WaterFall, Graphe à Bulles, HeatMap.
Ces graphes peuvent être décrits en édition dans la fenêtre à 7 onglets et éventuellement modifiés par programmation.
Bénéficiez des nouveautés communes sous Linux
Rappel: un site développé avec WEBDEV peut également être déployé sur un serveur d’application WEBDEV en version Linux.
Les sites créés pour être hébergés sur des serveurs Linux bénéficient des nouveautés communes de la version 23.
Nouveaux champs
Les nouveaux champs de la version 23 sont supportés par le serveur d'application Linux.
SaaS : maintenance de la base SaaS depuis l'administrateur SaaS
En version 23, il devient possible de réindexer la base de données du module SaaS directement depuis l'administrateur.
Site AWP : appels Ajax parallèles
En version 23, dans un site AWP avec contexte, les appels Ajax peuvent maintenant être parallélisés sur le serveur.
Il devient possible de spécifier que l'appel Ajax ne va pas utiliser le contexte AWP, et donc ne va pas le bloquer.
Pour plus de détails, consultez :
Administrateur WEBDEV distant mobile friendly
En version 23, il est bien plus confortable d'administrer un serveur d'application WEBDEV depuis une tablette ou un smartphone : l'administrateur devient mobile-friendly.
Possibilité de recevoir une notification par email en cas d'erreur
En cas d'erreur sur le serveur d'application : site, serveur,... l'administrateur WEBDEV génère un fichier de Log.
En version 23, il est possible de demander à recevoir un email (courriel) si le fichier Log contient des erreurs.
Vous êtes prévenu !
Pour plus de détails, consultez Administrateur WEBDEV : Gestion des journaux.
Déploiement distant
Le déploiement de sites à distance utilise les protocoles HTTP ou HTTPS ainsi que FTP ou FTPS.
Suivant la configuration réseau (firewall, proxy, antivirus) du poste client (le poste du développeur), il est nécessaire d'utiliser le mode FTP passif ou le mode FTP actif pour permettre l'accès au serveur.
En version 23, l'installateur sélectionne automatiquement le mode d'accès FTP adapté pour le déploiement des sites depuis le poste de développement !
Version minimum requise
  • Version 22
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire