DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Tuto WEBDEV / Tuto - Ancrages, zoning et agencements
  • Ce que vous allez apprendre dans cette leçon
  • Présentation
  • Découverte des styles
  • Un champ : plusieurs éléments
  • Découverte des styles grâce à un exemple
  • Sélectionner les styles CSS d'un champ
  • Editer le style CSS d'un champ
  • Les styles WEBDEV
  • Mise en place des styles : un exemple pratique
  • Surcharger un style CSS pour un champ
  • Modifier un style CSS pour tous les champs
  • Styles et texte riche
Leçon 7.1. Les styles
Ce que vous allez apprendre dans cette leçon
  • Les styles CSS.
  • Les styles WEBDEV.
Durée de la leçon

Durée estimée : 1 h
Leçon précédenteSommaireLeçon suivante
Présentation
WEBDEV permet bien entendu de "designer" vos sites. Pour vous aider dans cette tâche, WEBDEV propose d'utiliser deux types de styles :
  • Les styles CSS,
  • Les styles WEBDEV.
L'utilisation des styles pour vos champs présente un grand avantage : une modification réalisée dans un style (WEBDEV ou CSS) est automatiquement reportée sur tous les champs qui utilisent ce style.
Découverte des styles
Avant de manipuler les styles, voyons leur support d'application, les champs.

Un champ : plusieurs éléments

Chaque champ WEBDEV est composé de plusieurs éléments.

  • Considérons par exemple le champ de saisie. Ce champ est composé de trois éléments :
    • le libellé.
    • la zone de saisie.
    • une zone supplémentaire contenant le libellé et la zone de saisie.
      Eléments de style d'un champ de saisie
  • Comment s'appliquent les styles sur le champ de saisie ? Selon le type de style utilisé (WEBDEV ou CSS), le mode d'application varie.
    • Les styles CSS dans WEBDEV vont s'appliquer aux éléments d'un champ.
      Dans le cas du champ de saisie, il est possible d'appliquer un style CSS spécifique au libellé du champ de saisie ou à la zone de saisie.
    • Les styles WEBDEV vont s'appliquer sur un champ complet.
      Un style WEBDEV est composé de plusieurs styles CSS.
      Par exemple, sur le champ de saisie, le style WEBDEV contient :
      • Le style CSS pour le libellé,
      • Le style CSS pour la zone de saisie,
      • Les différentes options de style pour la zone globale du champ.

Découverte des styles grâce à un exemple

  • Pour découvrir les styles dans WEBDEV, nous vous avons préparé un exemple simple :
    1. Affichez la page d'accueil de WEBDEV (Ctrl + <).
    2. Dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Partie 7 - Leçon 7.1 - Les styles", double-cliquez sur "Styles - Corrigé".
    3. Ouvrez la page "PAGE_Styles" sous l'éditeur.
    4. Affichez la fenêtre de description du champ de saisie "Nom" (affichez le menu contextuel du champ et sélectionnez l'option "Description").
    5. Sélectionnez l'onglet "Style". Cet onglet permet de définir toutes les caractéristiques de style du champ.
    6. La fenêtre suivante s'affiche :
      Onglet 'Style' d'un champ de saisie
A partir de cette fenêtre, il est possible de gérer les styles CSS (partie 1 de la fenêtre) et les styles WEBDEV (partie 2 de la fenêtre) pour le champ. Nous allons voir ensemble les possibilités de cette fenêtre.

Sélectionner les styles CSS d'un champ

  • Pour sélectionner les styles CSS d'un champ :
    1. Dans l'onglet "Style" de la fenêtre de description du champ, dans la combo "Elément", choisissez l'élément de style voulu.
      Eléments gérés par le style
      Remarque : Tous les éléments qui sont notés "(CSS)" peuvent utiliser un style CSS directement : il suffit de sélectionner son nom.
    2. La combo "Style CSS" permet de choisir le style CSS de l'élément : ce style va être appliqué sur l'élément.

Editer le style CSS d'un champ

  • Pour créer ou éditer un style CSS :
    1. Dans l'onglet "Style" de la fenêtre de description du champ, cliquez sur le bouton à côté de la combo "Style CSS".
      Créer ou éditer un style CSS
    2. Dans le menu contextuel qui s'ouvre, sélectionnez l'option "Editer".
    3. La fenêtre d'édition des styles CSS s'ouvre.
      Fenêtre d'édition des styles CSS
    4. Dans cette fenêtre, il est possible de créer ou modifier tous les styles CSS du projet.
  • Examinons cette fenêtre. Cette fenêtre se décompose en 2 zones :
    • Zone 1. L'état du champ sur lequel le style doit s'appliquer : normal, survol, actif, ...
    • Zone 2. Les propriétés CSS associées à l'état sélectionné. Chaque propriété CSS peut être modifiée par état.
  • Vérifions ensemble par exemple les caractéristiques du style CSS “MonStylePerso_ZoneDeSaisie” :
    1. Sélectionnez le style “MonStylePerso_ZoneDeSaisie” dans la combo de la zone 1 si nécessaire.
    2. Sélectionnez l'état "Normal (défaut)" (le premier état de la zone 1).
    3. Cliquez sur l'onglet "Fond" : la couleur de fond est blanche.
    4. Sélectionnez l'état "Sélectionné (focus)" (le 4ème état de la zone 1).
    5. Dans l'onglet "Fond", la couleur de fond de la zone de saisie est jaune pastel. Le style CSS contient le style pour chacun des états.
    6. Fermez la fenêtre de description du style CSS.
  • L'onglet "Style" de la fenêtre de description du champ apparaît à nouveau. Dans la partie basse de la fenêtre, vous avez un accès rapide aux éléments de style les plus fréquemment modifiés :
    Accès rapide aux options
    • Police,
    • Taille,
    • Gras / Italique / Souligné / Barré,
    • Alignement vertical et horizontal,
    • Couleur de fond.

Attention

Ces options permettent de faire une surcharge rapide du style CSS pour le champ en cours. Dans ce cas, les modifications effectuées dans ces options ne seront pas reportées sur les autres champs qui utilisent ce style CSS.
Le lien "+ de surcharges" permet de surcharger toutes les autres propriétés du style CSS.
Découvrons maintenant les styles WEBDEV.

Les styles WEBDEV

Un style WEBDEV est composé de plusieurs styles CSS. Par exemple, sur le champ de saisie, le style WEBDEV contient :
  • Le style CSS pour le libellé,
  • Le style CSS pour la zone de saisie,
  • Les différentes options de style pour la zone globale du champ.
  • Pour gérer les styles WEBDEV, il suffit d'utiliser le panneau affiché à droite de l'onglet "Style" du champ :
    Gestion des styles WEBDEV
    Le nom du style WEBDEV apparaît en haut de cette fenêtre. Il est possible de :
    • Choisir un style existant.
    • Ajouter le style du champ en cours à la feuille de styles du projet.
      Cette option permet de réutiliser ce style dans d'autres champs du projet.
    • Dissocier ce champ.
      Cette option permet d'empêcher les futures modifications du style d'être reportées sur ce champ. Cette option est déconseillée : il est préférable d'utiliser les surcharges de styles.
L'ambiance du projet définit par défaut un style WEBDEV pour chaque type de champs. Ce style WEBDEV peut être utilisé "tel quel" ou bien il peut être modifié sur certains éléments du champ.
Par exemple, pour indiquer que le libellé doit être gras sur un champ de saisie (et celui-ci uniquement), il suffit de :
  • Sélectionner l'élément "Libellé (CSS)" dans la zone basse de l'onglet "Style".
  • Sélectionner l'option "Gras", dans la zone basse.
Cette modification ne va pas dissocier le style WEBDEV du champ : une surcharge de la propriété Gras va être réalisée par rapport au style original.
Ainsi, si le style original est modifié (pour changer la couleur de fond par exemple), cette modification va se reporter également sur ce champ tout en conservant la surcharge.

Note

Pour voir les éléments surchargés, il suffit de cliquer en haut du panneau de gestion des styles WEBDEV sur le lien qui indique le nombre de surcharges effectuées pour le champ.
Mise en place des styles : un exemple pratique
Après la théorie, un peu de pratique. Nous allons créer un champ de saisie et modifier ses styles dans la page "PAGE_Styles" du projet "Styles".
Remarque : Nous allons manipuler un champ de saisie mais le principe de la manipulation des styles peut s'appliquer à tous les champs disponibles sous WEBDEV.

  • Pour créer le champ de saisie :
    1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur Créer un champ de saisie.
    2. Cliquez dans la page à la position où le champ doit être créé.
Par défaut, ce champ est associé à un style WEBDEV (c'est le style WEBDEV par défaut défini dans l'ambiance choisie lors de la création du projet).

  • Trois méthodes permettent de sélectionner le style WEBDEV d'un champ :
    • Soit via l'onglet "Style" de la fenêtre de description du champ (nous l'avons vu précédemment).
    • Soit via le volet "Modification" du ruban : un aperçu des différents styles WEBDEV disponibles pour le champ est affiché.
      Volet 'Modification' du ruban
    • Soit en affichant le menu contextuel du champ et en choisissant l'option "Choisir un style WEBDEV".
      Edition de la feuille de styles
  • Nous allons utiliser cette dernière méthode pour associer le champ que nous venons de créer avec le style "SAI_Personnalisé". Ce style est utilisé par tous les autres champs de la page.
    1. Sélectionnez le champ que nous venons de créer.
    2. Affichez le menu contextuel du champ et sélectionnez l'option "Choisir un style WEBDEV".
    3. Dans la fenêtre qui s'affiche, sélectionnez le style "Personnalisé".
    4. Validez la fenêtre de sélection des styles. Le libellé du champ change de couleur : le style s'est appliqué.
  • Enregistrez la page (Ctrl + S) et lancez le test de la page (Tester une page parmi les boutons d'accès rapide).
    1. La page s'affiche sous le navigateur.
    2. Entrez en saisie dans le nouveau champ de saisie : la zone de saisie passe en jaune.
    3. Fermez le navigateur.

Surcharger un style CSS pour un champ

  • Nous allons maintenant modifier le style de la zone de saisie du champ :
    1. Affichez la fenêtre de description du champ créé.
    2. Dans l'onglet "Style", choisissez l'élément "Zone de saisie (CSS)".
    3. Cliquez sur le lien "+ de surcharges" pour surcharger les options CSS de cet élément.
    4. Sélectionnez l'état “Sélectionné (focus)”.
      Style - Etats d'un élément
    5. Dans l'onglet "Fond", changez la couleur de fond. Choisissez par exemple une couleur mauve.
    6. Validez. Dans le volet des styles WEBDEV, en haut à droite le lien indique “1 surcharge”.
    7. En cliquant dessus, vous voyez que c'est la couleur de fond de la zone interne en saisie qui a été surchargée.
    8. Validez la fenêtre de description du champ.
  • Enregistrez la page (Ctrl + S) et lancez le test de la page (Tester une page parmi les boutons d'accès rapide).
    1. La page s'affiche sous le navigateur.
    2. Passez le curseur d'un champ à l'autre : la couleur de fond est restée jaune pour tous les champs sauf pour le champ que vous avez créé.
    3. Fermez le navigateur.

Modifier un style CSS pour tous les champs

  • Nous allons maintenant modifier le style CSS de la zone de saisie pour changer la couleur du texte saisi. Cette modification va être réalisée pour tous les champs de saisie de la page.
    1. Affichez la fenêtre de description du champ créé (Alt + Entrée).
    2. Dans l'onglet "Style", choisissez l'élément "Zone de saisie (CSS)".
    3. Cliquez sur le bouton à droite du nom du style CSS. Dans le menu qui s'ouvre, sélectionnez "Editer". La fenêtre d'édition du style CSS s'affiche.
    4. Sélectionnez l'état “Normal”.
    5. Dans l'onglet "Texte", changez la couleur. Choisissez par exemple une couleur verte.
    6. Validez puis validez la fenêtre de description du champ.
  • Enregistrez la page (Ctrl + S) et lancez le test de la page (Tester une page parmi les boutons d'accès rapide).
    1. La page s'affiche sous le navigateur.
    2. Saisissez du texte dans les différents champs de saisie de la page : le texte saisi s'affiche avec la nouvelle couleur sélectionnée. Cette modification a été prise en compte même sur le champ que nous avons créé et dont le style a été surchargé.
    3. Fermez le navigateur.
Styles et texte riche
Au niveau du look, il est également possible de définir du texte riche dans les éléments !
Grâce au texte riche, il est possible d'utiliser des styles différents pour les différents mots du libellé d'un champ. Ainsi, sur le libellé d'un champ de saisie, il est possible de définir qu'une partie du libellé utilisera la couleur du style par défaut, et qu'une autre partie utilisera une autre couleur.
Prenons un exemple simple : l'ajout d'un astérisque rouge pour spécifier le caractère obligatoire d'un champ.

  • Dans notre exemple :
    1. Sélectionnez le champ de saisie "Nom".
    2. Appuyez sur la touche ESPACE ou ENTREE du clavier.
    3. Le texte du libellé passe en édition.
      Libellé du champ en édition
    4. Ajoutez une étoile à la fin du libellé.
    5. Sélectionnez cette étoile.
    6. Sous le volet "Texte", dans le groupe "Police" :
      Options de police
      • Cliquez sur le bouton Exposant pour passer l'étoile en exposant.
      • Changez la couleur du texte en rouge avec le bouton Changement de couleur.
    7. Sortez du mode d'édition (touche Echap).
    8. L'astérisque rouge apparaît bien dans le libellé du champ.
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 28
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 22/05/2023

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