|
|
|
|
|
|
|
|
|
|
- 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
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 : - Sous le volet "Création", dans le groupe "Intégration", cliquez sur "Composant Web".
- 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 : - 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
- 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 :
- Dans la zone "Codes sources HTML - CSS - JS", cliquez sur "Editer".
- Une fenêtre apparaît, permettant de saisir les différents codes nécessaires.
- Collez les différents codes nécessaires à votre composant.
- soit dans les onglets de code associés au champ :
- Sélectionnez le champ Composant Web.
- Trois onglets spécifiques sont affichés en haut de l'éditeur de page : "HTML", "CSS" et "Javascript".
- Dans chaque onglet, saisissez le code nécessaire à votre composant. Par exemple :
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.
- 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.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|