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 Composant Web
  • Présentation du champ Composant Web
  • Créer un champ Composant Web
  • Saisie des différentes ressources du composant Web
  • Utiliser des ressources supplémentaires
  • Caractéristiques du champ Composant Web
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 Composant Web
Le champ Composant Web permet d'intégrer n'importe quelle ressource Web externe dans un site WEBDEV. De nombreuses ressources Web réutilisables sont disponibles sur Internet : snippets Bootstrap, composants JQuery.UI, composants Angular.JS, ...
Des sites spécialisés proposent des ressources, soit gratuitement soit en les commercialisant.
Les ressources Web externes (composant Angular JS, Snippet Bootstrap...) sont généralement livrées sous forme de trois composantes :
  • un code HTML,
  • un code CSS,
  • un code JavaScript.
Il peut arriver que des fichiers de dépendances soient également livrés (images, ...). Un framework doit également être installé.
Le champ Composant Web permet de gérer toutes ces ressources.
Créer un champ Composant Web
Pour créer un champ de type Composant Web :
  1. Sous le volet "Création", dans le groupe "Intégration", cliquez sur "Composant Web".
    Création d'un champ Composant Web
  2. Cliquez dans la page à la position où le champ doit être créé. Le champ apparaît en création.
    Remarque : Les dimensions du champ créé sont optimisées pour occuper l'espace disponible à la position indiquée. Si la taille du champ ne vous convient pas, redimensionnez le champ grâce à ses poignées.
Pour afficher les caractéristiques du champ, sélectionnez l'option "Description" dans le menu contextuel du champ.
Astuce : Si vous connaissez le type de ressources utilisées, vous pouvez intégrer un champ Composant Web prédéfini : il est directement associé aux ressources externes de bases nécessaires. Pour intégrer un champ Composant Web pré-défini :
  1. Sous le volet "Création", dans le groupe "Intégration", cliquez sur "Composant Web" et choisissez le type du composant Web à créer :
    • JQuery
    • JQuery UI
    • Bootstrap
    • Angular
  2. Cliquez dans la page à la position où le champ doit être créé. Le champ apparaît en création.

Saisie des différentes ressources du composant Web

L'association des différentes ressources au champ Composant Web (code HTML, code CSS et code JS) est réalisée :
  • soit dans l'onglet "Général" de la description du champ :
    1. Dans la zone "Codes sources HTML - CSS - JS", cliquez sur "Editer".
      Editer le code HTML - CSS - JS
    2. Une fenêtre apparaît, permettant de saisir les différents codes nécessaires.
    3. Collez les différents codes nécessaires à votre composant.
      Editeur des codes HTML - CSS - JS
  • soit dans les onglets de code associés au champ :
    1. Sélectionnez le champ Composant Web.
    2. Trois onglets spécifiques sont affichés en haut de l'éditeur de page : "HTML", "CSS" et "Javascript".
      Onglets spécifiques aux codes HTML - CSS - JS
    3. Dans chaque onglet, saisissez le code nécessaire à votre composant. Par exemple :
      Editeur de code HTML

Utiliser des ressources supplémentaires

La ressource Web utilisée peut nécessiter des frameworks spécifiques. L'onglet Général" de la description du champ Composant Web permet de :
  • Ajouter des ressources externes en saisissant directement l'url de la ressource Javascript ou CSS.
    Saisie des ressources JS ou CSS
  • Ajouter les ressources CSS si nécessaires.
Caractéristiques du champ Composant Web
La fenêtre de description du champ permet de renseigner les différentes caractéristiques du champ Composant Web :
  • L'onglet "Général" permet de saisir les différents codes associés au champ et les ressources externes utilisées (voir paragraphe précédent).
    Remarque : Dans les sites fournissant des ressources, les ressources Web nécessaires sont souvent indiquées.
  • L'onglet "UI" permet notamment de spécifier si le rendu HTML doit être affiché en édition. Si l'option "Afficher le rendu HTML en édition" est cochée :
    • le code HTML saisie est interprété et affiché.
    • l'édition de la page peut être ralentie.
    • le rendu est calculé sans exécution du code Javascript et sans "media-queries".
  • L'onglet "Détail" permet de visualiser les procédures locales navigateur et serveur liées au champ. Il est possible d'ajouter, supprimer ou éditer ces procédures.
Version minimum requise
  • Version 22
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 25/05/2022

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