DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Concepts WEBDEV / Partie 2 - Développement d'un site
  • Créer un champ
  • Créer un nouveau champ
  • Créer un champ associé à une rubrique
  • Caractéristiques d'un champ
  • Affichage des caractéristiques
  • Caractéristiques par onglet
  • Manipuler les champs sous l'éditeur
  • Les poignées des champs
  • Manipulations disponibles
  • Alignement des champs
  • Grille magnétique
  • Correcteur d'interface en temps réel
  • Correcteur d'interface avancé
  • Les options d'alignement
  • Le zoom paramétrable
  • Options d'édition des champs dans une page
  • Ancrage des champs
  • Ancrer un champ sous l'éditeur
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadWidget IOSApple WatchMac CatalystUniversal Windows 10 App
Autres
Procédures stockées
14. Les champs en pratique
Page précédenteSommairePage suivante
WEBDEV propose de nombreux types de champs, facilement intégrables dans vos pages. Ces champs peuvent être créés directement par le volet "Création" du ruban WEBDEV.
Tous les champs peuvent bien sûr être manipulés par programmation.
Créer un champ
Les champs disponibles sous l'éditeur de pages de WEBDEV sont les suivants :
  • Champ Libellé,
  • Champ Planning,
  • Champ Zone de texte,
  • Champ Calendrier,
  • Champ d'affichage formaté,
  • Champ Graphe,
  • Champ Bouton,
  • Champ Code-Barres,
  • Champ Lien,
  • Champ Jauge,
  • Champ Image,
  • Champ Cellule,
  • Champ Popup,
  • Champ Onglet,
  • Champ Vignette,
  • Champ Tiroir,
  • Champ Page cornée,
  • Champ Bandeau défilant,
  • Champ Réseau social,
  • Champ Editeur d'images,
  • Champ Multimédia,
  • Champ Editeur de diagrammes,
  • Champ Web Caméra,
  • Champ Page interne,
  • Champ de saisie,
  • Champ Modèle de champs,
  • Champ Combo,
  • Superchamp,
  • Champ Liste,
  • Champ Tableau HTML,
  • Champ Notation,
  • Menu,
  • Champ Captcha,
  • Champ Réglette,
  • Champ Sélecteur,
  • Champ Plan du site,
  • Champ Interrupteur,
  • Champ Chemin de navigation,
  • Champ Potentiomètre,
  • Champ HTML,
  • Champ Zone répétée,
  • Champ IFrame,
  • Champ Zone répétée linéaire,
  • Champ Zone répétée de type Galerie d'images,
  • Champ Table,
  • Champ Table hiérarchique,
  • Champ Kanban,
  • Champ Flexbox,
  • Champ Applet Java,
  • Champ Arbre,
  • Champ Ligne,
  • Champ Tableau de bord,
  • Champ "Composant Web",
  • Champ Agenda,
  • Champ Disposition.

Créer un nouveau champ

Pour créer un champ :
  1. Sélectionnez le type de champ à créer grâce à l'icône correspondante dans le volet "Création" du menu de WEBDEV.
  2. La forme du nouveau champ apparaît sous le curseur de la souris.
  3. Cliquez dans la page à la future position de création du champ. Le champ est automatiquement créé.
Remarque : D'autres modes de création sont disponibles. Pour plus de détails, consultez l'aide en ligne.

Créer un champ associé à une rubrique

Mis à part les types de champs suivants, tous les champs d'une page peuvent être associés à une rubrique d'un fichier de données :
  • Champ Bouton,
  • Champ "Composant Web"
  • Champ Onglet
  • Champ Plan du site
  • Champ Ligne
  • Champ Réglette
  • Champ HTML
  • Champ Cellule et champ Tableau HTML
  • Champ Applet Java

Pour créer un champ associé à une rubrique (ou récupérer une rubrique), plusieurs méthodes sont disponibles :
  • Drag and Drop depuis le volet "Analyse".
  • Utilisation de l'onglet "Liaison" de la fenêtre de description du champ.
Caractéristiques d'un champ
Pour tous les champs d'une page, il est possible d'afficher la fenêtre de description des champs. Cette fenêtre est une fenêtre à onglets, regroupant toutes les caractéristiques paramétrables d'un ou de plusieurs champs.
Remarque : Il est également possible de visualiser et/ou de modifier les caractéristiques d'un ou de plusieurs champs dans le modifieur. Pour plus de détails, consultez l'aide en ligne.

Affichage des caractéristiques

Pour afficher la fenêtre de description d'un champ :
  • soit double-cliquez sur le champ.
  • soit sélectionnez l'option "Description" du menu contextuel du champ (clic droit de la souris).
  • soit sélectionnez le champ et utilisez le raccourci clavier Alt + Entrée.
Remarques :
  • Il est possible d'afficher la fenêtre de description pour un ensemble de champs sélectionnés. Seules les caractéristiques communes aux différents champs sélectionnés seront affichées.
  • Plusieurs fenêtres de description peuvent être affichées simultanément. Chaque fenêtre de description affiche alors les caractéristiques d'un ou de plusieurs champs.

Caractéristiques par onglet

Ce paragraphe présente rapidement les différentes catégories de caractéristiques affichées par onglet.
Pour plus de détails, consultez l'aide en ligne.
Onglet Général
L'onglet "Général" permet de spécifier le nom du champ et toutes les caractéristiques d'affichage du champ (libellé, masque de saisie, etc.).
Onglet UI
L'onglet "UI" permet de définir les différents paramètres de l'interface du champ :
  • Etat initial du champ à l'ouverture de la page,
  • Visibilité du champ,
  • Taille du champ,
  • Ancrage, etc.
Onglet Détail
L'onglet "Détail" permet de définir les différents paramètres du champ :
  • paramètres de saisie,
  • support des indirections, etc.
Le contenu de cet onglet varie beaucoup en fonction du type de champ en cours.
Onglet Liaison
L'onglet "Liaison" permet de sélectionner la rubrique (d'un fichier de données ou d'une requête) à laquelle le champ est relié. Selon l'enregistrement en cours, le contenu de la rubrique reliée sera affiché dans le champ.
La liaison peut être monofichier ou multifichier.
Onglet Contenu
L'onglet "Contenu" permet de définir :
  • soit le contenu initial du champ (pour les champs de saisie uniquement).
  • soit la source de données utilisée pour remplir le champ (pour les champs Liste, Combo, Table, etc.).
Onglet Aide
L'onglet "Aide" permet de :
  • décrire le fonctionnement détaillé du champ. Ces informations seront imprimées dans les documentations techniques (documentation du projet, de la page, etc.).
  • configurer tous les types d'aides associés au champ. Un champ peut avoir :
    • Une bulle d'aide, affichée lors du survol du champ.
    • Un message d'aide, affiché dans la barre de message lors de l'entrée dans le champ.
Onglet Avancé
L'onglet "Avancé" permet de saisir le code HTML généré avant et après le champ. Il permet également de saisir la valeur ajoutée dans l'attribut 'class' du champ.
Onglet Style
L'onglet "Style" permet de définir le style des différents éléments du champ. Cet écran permet de :
  • Modifier l'aspect d'un champ : il suffit alors de sélectionner l'élément du champ à modifier, puis ses caractéristiques de style. Seul l'aspect du champ en cours est modifié.
  • Créer ou modifier un style.
  • Choisir un style.
Manipuler les champs sous l'éditeur

Les poignées des champs

Lorsqu'un champ vient d'être créé ou lorsqu'il est sélectionné, il s'affiche avec des poignées. Les poignées permettent de :
  • visualiser la taille d'un champ,
  • modifier la taille d'un champ.
Les couleurs des poignées permettent de connaître les actions réalisables :
  • Les poignées noires permettent de visualiser et de redimensionner un champ.
  • Les poignées blanches permettent uniquement de visualiser un champ. Par exemple, lors de la sélection de plusieurs champs, les poignées blanches indiquent qu'il est impossible de modifier la taille des champs sélectionnés.
    Ce type de poignées est aussi affiché lorsqu'une page est en lecture seulement pour le développeur : les champs ne peuvent pas être modifiés.
  • Les poignées grises indiquent le premier champ sélectionné lors d'une sélection multiple. Ce champ sera le champ de référence.

Manipulations disponibles

L'éditeur de pages permet de :
  • Sélectionner un ou plusieurs champs (par exemple à l'aide du lasso).
  • Regrouper des champs sélectionnés.
  • Déplacer un champ.
  • Modifier le libellé d'un champ.
  • Afficher une bulle d'aide avancée lors du survol d'un champ. Cette bulle d'aide contient : le nom du champ, sa position, sa taille, son état initial (si le champ est invisible).
Alignement des champs
L'alignement des champs permet d'obtenir des UI "professionnelles" et harmonieuses. Pour vous aider à concevoir des UI standard, WEBDEV vous proposent les outils suivants :

Grille magnétique

La grille magnétique permet de placer des repères (verticaux et horizontaux) dans la page. Les champs créés viennent se placer contre ces repères, comme si les champs et les repères étaient magnétisés. La grille magnétique permet ainsi d'aligner les champs selon les repères.

Correcteur d'interface en temps réel

Lors du déplacement d'un champ dans une page, le correcteur d'interface en temps réel affiche automatiquement des guides. Ces guides sont magnétisés et permettent d'aligner le champ déplacé avec les champs présents dans la page.

Correcteur d'interface avancé

Le correcteur d'interface avancé est un outil permettant d'harmoniser la disposition des champs dans les différentes pages d'un site.
Le correcteur d'interface avancé propose pour la page en cours ou uniquement pour les champs sélectionnés, d'appliquer des règles de présentation d'interface issues du standard Windows : alignement des champs, normalisation de la taille des boutons, etc.

Les options d'alignement

Pour aligner plusieurs champs, WEBDEV met à votre disposition :
  • soit un alignement prédéfini (disponible sous le volet "Alignement", ou sous le volet "Modification", dans le groupe "Profondeur et Alignement").
  • soit un alignement personnalisé (disponible sous le volet "Alignement", dans le groupe "Autres alignements"). L'alignement personnalisé permet d'utiliser des propriétés spécifiques d'alignement.
Lors de l'alignement personnalisé, il est possible de définir :
  • l'alignement horizontal ou vertical : les champs peuvent être alignés à gauche en fonction du début du champ ou du début de la zone de saisie. Ils peuvent aussi être alignés à droite, en fonction de la fin du champ, ou de la fin de la zone de saisie.
  • l'espacement uniforme : l'espacement entre les champs est adapté pour être le même entre chaque champ (horizontalement ou verticalement).
  • la taille : la taille des champs sélectionnés est automatiquement adaptée pour obtenir des champs de même hauteur et/ou de même largeur.
  • le champ de référence : pour l'alignement et la taille des champs, le champ de référence est au choix :
    • le premier champ sélectionné,
    • le dernier champ sélectionné,
    • le plus grand champ sélectionné,
    • le champ situé le plus en haut à gauche des champs sélectionnés.

Le zoom paramétrable

Il est possible de spécifier un facteur de zoom pour réduire ou agrandir l'affichage de la page en cours.
Pour spécifier un facteur de zoom, plusieurs possibilités :
  • sous le volet "Affichage", dans le groupe "Aide à l'édition", spécifiez le facteur de zoom voulu.
  • saisissez directement le facteur de zoom dans la barre de message de l'éditeur (en bas à droite).
  • appuyez sur la touche Ctrl et modifiez le facteur de zoom avec la roulette de la souris tout en maintenant la touche Ctrl enfoncée.
Options d'édition des champs dans une page
Ces options d'affichage permettent de personnaliser la manipulation des champs sous l'éditeur de pages.
Les options d'édition permettent de paramétrer :
  • les options d'affichage.
  • le magnétisme des champs.
  • les opérations de clic et de double-clic sur les champs.
  • les options de sélection des champs.
Ces options d'affichage permettent de personnaliser la manipulation des champs sous l'éditeur de fenêtres.
Pour afficher ces options, sous le volet "Affichage", cliquez sur l'icône de regroupement du groupe "Options".
Ancrage des champs
Les pages d'un site WEBDEV peuvent être redimensionnables à l'exécution : le navigateur peut être redimensionné, le site peut être affiché sur des plateformes différentes (iPhone, PC, etc.). Grâce au mécanisme d'ancrage, la taille et la position des champs s'adaptent automatiquement lors d'un redimensionnement de la page.
La gestion de l'ancrage d'un champ est constituée de plusieurs paramètres :
  • l'ancrage du champ : ce paramètre permet de définir la modification à appliquer au champ en fonction du changement de la taille de la page. Le champ peut se déplacer vers la gauche ou vers le bas, s'agrandir en largeur et/ou en hauteur.
  • la gestion de la largeur et/ou de la hauteur : ce paramètre permet de gérer le comportement du champ lors de son étirement. La largeur ou la hauteur peut être adaptée au contenu du champ ou au navigateur. Il est également possible de définir la taille minimale du champ.
Ces paramètres peuvent être configurés sous l'éditeur de pages.

Ancrer un champ sous l'éditeur

Pour ancrer un champ :
  1. Sélectionnez un ou plusieurs champs à ancrer.
  2. Définissez l'ancrage du / des champs :
    • soit dans l'onglet "UI" de la fenêtre de description du champ (option "Description" du menu contextuel).
    • soit grâce à l'option "Ancrage" du menu contextuel (clic droit) du champ.
  3. Dans la fenêtre qui s'affiche, choisissez le type d'ancrage à utiliser.

    Trois types d'ancrages sont à définir :
    • ancrage en position : permet de définir la position du champ lors du redimensionnement du navigateur.
    • ancrage en largeur : permet de définir le comportement du champ en largeur lors du redimensionnement du navigateur. Le champ peut :
      • conserver sa largeur,
      • s'adapter au contenu,
      • suivre le comportement du navigateur.
    • ancrage en hauteur : permet de définir le comportement du champ en hauteur lors du redimensionnement du navigateur. Le champ peut :
      • conserver sa hauteur,
      • s'adapter au contenu,
      • suivre le comportement du navigateur.
  4. Il est également possible de définir le comportement du champ lorsque le contenu est plus grand que le champ. Il est possible :
    • d'agrandir le champ et pousser les autres champs de la page,
    • tronquer le contenu,
    • toujours activer un ascenseur,
    • afficher un ascenseur uniquement en cas de dépassement.
  5. Validez. Si l'option "Ancrage" est activée (sous le volet "Affichage", dans le groupe "Voir (tous les champs)"), les signes d'ancrage apparaissent automatiquement dans le champ (flèches rouges).
Remarque : Pour gérer l'ancrage des champs, il est également possible d'utiliser les tables de positionnement. Pour plus de détails, consultez Table de positionnement.
Page précédenteSommairePage suivante
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 14/09/2023

Signaler une erreur ou faire une suggestion | Aide en ligne locale