PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

  • 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
  • Champ dynamique, champ statique
  • Manipuler les champs sous l'éditeur
  • Les poignées des champs
  • Manipulations disponibles
  • Alignement des champs
  • Les règles
  • 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/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Autres
Procédures stockées
14. Les champs en pratique
Chapitre précédentSommaireChapitre suivant
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 :
  • Libellé,
  • Planning,
  • Zone de texte,
  • Calendrier,
  • Champ d'affichage formaté,
  • Graphe,
  • Bouton,
  • Code-Barres,
  • Lien,
  • Jauge,
  • Image,
  • Cellule,
  • Image clicable,
  • Popup,
  • Vignette,
  • Tiroir,
  • Page cornée,
  • Bandeau défilant,
  • Champ Vidéo,
  • Onglet,
  • Champ Web Caméra,
  • Champ Page interne,
  • Champ de saisie,
  • Champ Modèle de champs,
  • Combo,
  • Superchamp,
  • Liste,
  • Tableau HTML,
  • Notation,
  • Menu,
  • Captcha,
  • Réglette,
  • Sélecteur,
  • Plan du site,
  • Interrupteur,
  • Chemin de navigation,
  • Potentiomètre,
  • Champ HTML,
  • Zone répétée,
  • Champ IFrame,
  • Zone répétée linéaire,
  • Champ Flash,
  • Zone répétée Galerie d'images,
  • Champ Flex,
  • Table,
  • Champ Silverlight,
  • Table hiérarchique,
  • Champ Applet Java,
  • Arbre,
  • Ligne,
  • Tableau de bord,
  • Champ "Composant Web".
  • 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 :
  • Bouton,
  • Champ "Composant Web"
  • Onglet
  • Champ Flash
  • Ligne
  • Réglette
  • Champ HTML
  • Cellule et tableau HTML
  • Champ Applet Java
  • Plan du site

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 "Fichier" 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 sur chacune des caractéristiques présentes dans les différents onglets, consultez l'aide contextuelle des fenêtres de description.
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, ...).
Onglet IHM
L'onglet "IHM" 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, …
Onglet Détail
L'onglet "Détail" permet de définir les différents paramètres du champ :
  • paramètres de saisie
  • Drag and Drop, …
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 rubrique) à 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 mono-fichier ou multi-fichier.
Onglet Contenu
L'onglet "Contenu" est disponible uniquement pour les champs des pages.
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 listes, les combos et les tables uniquement).
Onglet Note/Aide
L'onglet "Note/Aide" permet de :
  • décrire le fonctionnement détaillé du champ. Ces informations seront imprimées dans les dossiers de programmation (dossier du projet, dossier de la page, ...).
  • 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.
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.

Champ dynamique, champ statique

Pour tous les types de champs, WEBDEV propose les options suivantes :
  • Automatique : le champ s'adaptera automatiquement au type d'utilisation qui est effectué.
  • Statique : le champ ne pourra pas être modifié en programmation : les différentes propriétés associées au champ seront sans effet.
  • Dynamique : le champ pourra être modifié en programmation : toutes les propriétés associées au champ pourront être utilisées.
Remarque : si un champ est défini comme étant dynamique, le code HTML de la page contiendra du code spécifique pour gérer la programmation du champ en WLangage. Le fichier HTML correspondant à la page sera donc plus important que si le champ est défini en statique.
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 interfaces "professionnelles" et harmonieuses. Pour vous aider à concevoir des interfaces standard, WEBDEV vous proposent les outils suivants :

Les règles

Sous l'éditeur de pages, il est possible de faire apparaître des règles d'alignement.
Dans ces règles, des guides magnétiques sont affichés : tout champ approché d'un guide est automatiquement "attiré" par celui-ci. Ce magnétisme permet d'utiliser les guides pour faciliter le positionnement, l'alignement ou le redimensionnement des champs de la page.
Afficher les règles
Pour afficher les règles, sous le volet "Affichage", dans le groupe "Aide à l'édition", cochez "Règles". Deux types de guides peuvent alors être utilisés :
  • les guides, permettant d'aligner et de disposer les champs à l'intérieur des pages.
  • les guides de bordure, permettant de déterminer une bordure de taille identique de chaque côté de la page.
Remarque : L'option "Guide visible" du menu contextuel des règles permet de visualiser la page avec ou sans ses guides. Visibles ou non, les guides sont toujours actifs : un champ déplacé vers un repère est automatiquement accolé à celui-ci.
Manipuler les repères
Les repères sont facilement manipulables à l'aide de la souris dans l'éditeur. Lorsque la souris survole un repère, le curseur se transforme en une double flèche.

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, ...

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 "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, ...). 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 "IHM" 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.
    • ancrage en largeur : permet de définir le comportement du champ en largeur lors du redimensionnement. 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. Le champ peut :
      • conserver sa hauteur,
      • s’adapter au contenu
      • suivre le comportement du navigateur.

        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.
  4. 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 l’aide en ligne.
Chapitre précédentSommaireChapitre suivant
Version minimum requise
  • Version 23
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire