DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Développer une application ou un site / Champs, fenêtres et pages / Champs : Types disponibles / Champ Cellule
  • Présentation du champ Cellule
  • Champ d'une page dynamique ou statique
  • Créer un champ Cellule
  • Cellule de positionnement relatif
  • Evénements gérés par défaut
  • Permuter
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
Présentation du champ Cellule

Champ d'une page dynamique ou statique

Le champ Cellule contient des champs.
Le champ Cellule permet par exemple de :
  • définir une zone de couleur. Des champs pourront être positionnés sur cette zone.
    La couleur (ou l'image de fond) de la cellule peut être sélectionnée dans l'onglet "Style" de la fenêtre de description du champ.
  • faire remonter les champs situés en dessous d'un champ Tiroir lorsque celui-ci se replie.
  • dialoguer avec l'utilisateur.
    Remarque : pour dialoguer avec l'utilisateur, il est conseillé d'utiliser un champ Popup.
  • définir une table HTML dans une page statique, ...
Remarque : Les champs sont associés à une cellule. Les champs associés au champ Cellule ne doivent pas avoir l'option "Le champ peut être superposé". En effet, si cette option est cochée, le champ ne sera pas associé à la cellule.
Créer un champ Cellule
Pour créer un champ de type Cellule :
  1. Sous le volet "Création", dans le groupe "Conteneurs", cliquez sur "Cellule".
  2. Cliquez dans la page à la position où le champ doit être créé. Le champ apparaît en création.
Pour afficher les caractéristiques du champ, sélectionnez l'option "Description" dans le menu contextuel du champ.
Cellule de positionnement relatif
Le champ Cellule peut être utilisé en mode "positionnement relatif".
Dans ce mode, les champs situés à l'intérieur de la cellule sont placés dynamiquement de gauche à droite et de haut en bas en fonction de leur taille. Ce mode permet d'éliminer l'espace laissé vide par un champ invisible.
Pour définir une cellule en mode "positionnement relatif" :
  1. Affichez la fenêtre de description de la cellule.
  2. Dans l'onglet "Général", indiquez le positionnement des champs :
    • Libre (par défaut).
    • Relatif, de droite à gauche.
    • Relatif, de gauche à droite.
  3. Saisissez la taille de la marge interne de la cellule (en pixels) dans l'onglet "Style" (élément "Marges").
  4. Validez
Remarque : Dans une cellule de positionnement relatif, les règles de zones extensibles continuent de s'appliquer.
Evénements gérés par défaut
WEBDEV gère par défaut les événements suivants :
EvénementCondition d'exécution
Initialisation (Code serveur)Exécuté à l'ouverture de la page
Clic (Code navigateur)Exécuté lors du clic dans la cellule ou dans un champ de la cellule.
Souris déplacée (Code navigateur)Exécuté lors du déplacement de la souris dans la cellule ou dans un champ de la cellule.

Remarque : Dans une page statique, aucun code n'est disponible.
Permuter
WEBDEV permet de créer automatiquement un champ Cellule à partir d'une sélection :
  1. Sélectionnez les champs à intégrer dans la cellule.
  2. Sous le volet "Modification", dans le groupe "Transformations", déroulez "Refactoring et permutations" et sélectionnez "Créer un champ Cellule avec la sélection".
Liste des exemples associés :
Affichage d'un menu contextuel Exemples unitaires (WEBDEV) : Affichage d'un menu contextuel
[ + ] Affichage d'un "menu contextuel" lors d'un clic sur un bouton.
Le champ Cellule (Popup) Exemples unitaires (WEBDEV) : Le champ Cellule (Popup)
[ + ] Affichage d'un détail dans une cellule popup.
Les détails sont affichés dans une cellule déplaçable rendue visible lors du clic.
Bulle personnalisée Exemples unitaires (WEBDEV) : Bulle personnalisée
[ + ] Affichage d'une bulle personnalisée au survol d'un élément.
La bulle personnalisée est en fait une cellule qui est :
- affichée lors de l'événement "Souris au-dessus",
- cachée lors de l'événement "Souris en dehors".
Le champ Cellule (Déplacement) Exemples unitaires (WEBDEV) : Le champ Cellule (Déplacement)
[ + ] Utilisation d'une cellule déplaçable.
Cette cellule est déplacée à la souris ou par programmation.
Le champ Cellule (Animations) Exemples unitaires (WEBDEV) : Le champ Cellule (Animations)
[ + ] Création de "cellules furtives" dans vos sites WEBDEV.
Une cellule furtive est une cellule qui apparait en bas de la page et qui reste affichée pendant un certain temps.
Ces cellules peuvent servir à afficher des notifications, des publicités...
Version minimum requise
  • Version 9
Commentaires
Changer l'image de fond par programmation
Pour modifier l'image de fond d'un champ cellule par programmation en code serveur, on peut utiliser l'astuce suivante :

Dans les propriétés "Bord,fond" de la cellule, dans le champ "Image de fond:", écrivez : [%gsMonImage;2%] et validez.

Dans le code des déclarations des globales de la page, décrivez une variable :
gsMonImage est une chaîne

Et ensuite, modifier le contenu de cette variable avec le chemin relatif "Web" de votre image de fond :

gsMonImage = "/" + RepertoireWeb() + "/monimage.jpg"
Maax°(51)°
17 juin 2010

Dernière modification : 25/05/2022

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