Les Design Systems (ou systèmes de conception) mettent à disposition
des ensembles de composants webs documentés que les développeurs peuvent
utiliser . Ils offrent plusieurs avantages pour le développement des
applications, comme la garantie d'une cohérence visuelle ou encore un gain de temps car il vous évite de concevoir chaque élément de
l'interface en repartant de zéro.
L'utilisateur pourra choisir d'afficher ou non les arbres issus du fond de
carte, en cliquant sur un bouton de type toggle switch. Comme d'habitude, vous
pouvez suivre le tutoriel pas à pas ci-dessous pour obtenir le même résultat,
ou bien consulter le code et en modifier interactivement les paramètres dans
ce CodePen.
Cette semaine, nous continuons notre
série de tutoriels sur l'API JavaScript d'ArcGIS
avec un hors-série consacré au
Design System d'Esri : Calcite. Nous allons voir ensemble comment intégrer rapidement un composant à notre
application en le personnalisant et en le reliant à une action. Voici le
résultat que nous obtiendrons à l'issue de cette étape :
Présentation du Calcite Design System
Calcite est le Design System mis à disposition par Esri, dont la
première version de production date de début 2023.
Esri a décidé de mettre à disposition les composants auxquels ils font appel
pour développer leurs propres applications à travers ce Design System. Il
comprend un
kit d'interface utilisateur, des
icônes, des
schémas de couleurs
et une
bibliothèque de composants web.
Cette bibliothèque inclut de nombreux éléments d'interface utilisateur :
différents types de boutons, des panneaux, des accordéons, des alertes, des
loaders, etc. dont vous pouvez retrouver la liste complète
ici. Vous pouvez intégrer ces différents composants à votre application afin de
ne pas avoir à redévelopper par vous-même leur comportement et leur style,
tout en gardant la possibilité de les personnaliser pour les adapter à votre
charte graphique.
|
|
Exemple d'application utilisant différents composants de Calcite |
Personnaliser un composant
Pour notre application, nous aurons besoin du composant
Switch, qui est un bouton présentant deux états "on" et "off". C'est un composant
idéal pour les choix booléens ; il sera donc parfait pour notre cas d'usage,
où nous voulons donner le choix à l'utilisateur d'afficher ou non une
couche
L'aide en ligne nous permet d'accéder au code
permettant d'intégrer ce composant. Mais avant de le faire, nous allons nous
intéresser aux options de personnalisation interactives qui vont nous
permettre de compléter l'extrait de code que nous devrons ajouter, afin que le
bouton soit directement configuré comme nous le souhaitons.
Dans la partie à droite de l'échantillon, nous pouvons accéder aux propriétés
du composant via la fonctionnalité "properties". Dans l'exemple
ci-dessous, j'ai changé par exemple son état pour qu'il soit coché par défaut,
j'ai modifié sa taille (vous avez le choix entre "s","m" et "l") et je lui ai
donné un nom (notez que j'ai fait ceci à titre de démonstration, mais que nous
ne nous en servirons pas pour notre application). Le code en bas se met à jour
automatiquement pour s'adapter à ces modifications.
Toujours dans le panneau de droite, vous avez accès à d'autres fonctionnalités
qui peuvent vous permettre de personnaliser et de comprendre davantage la
structure du composant :
- La fonctionnalité "slot" vous permet de mettre en avant les emplacements des différents éléments des composants complexes afin de mieux appréhender leur structure ;
- La fonctionnalité "variables" vous permet d'accéder aux propriétés CSS de certains composant possédant leurs styles spécifiques ;
- La fonctionnalité "translations" vous permet de localiser des composants affichant du texte, des dates ou des chiffres afin de les mettre au format français par exemple.
-
Enfin, la fonctionnalité "theming" vous permet d'appliquer un thème
général aux composants. Vous pouvez choisir le mode (clair ou sombre) et
entre plusieurs thèmes prédéfinis, ou bien importer les couleurs propres à
votre charte graphique. Vous pouvez également sauvegarder vos choix pour
qu'ils s'appliquent par défaut lorsque vous cherchez des composants sur
l'aide en ligne.
Nous allons utiliser cette dernière fonctionnalité pour obtenir un extrait de
code permettant d'avoir un bouton Switch aux couleurs du reste de notre
application. Nous allons modifier les codes hex suivants :
- --calcite-ui-brand: #7b656f;
- --calcite-ui-brand-hover: #473b40;
Ajouter le composant au code
Les composants sont toujours composés d'une partie HTML, à laquelle s'ajoute
une partie CSS si vous avez modifié leur style, et enfin certains composants
ont une partie JavaScript si leur comportement le nécessite. Ici, nous allons
ajouter ensemble du HTML et du CSS à notre code.
Référencer le Design System
Pour commencer, notre application doit être capable d'accéder aux ressources
de Calcite. Nous allons donc commencer par référencer le design system dans le
HTML au sein de la balise <head> :
<script type="module" src="https://js.arcgis.com/calcite-components/1.4.3/calcite.esm.js"></script>Ajouter le composant au HTML
Dans la partie sample de l'aide en ligne, naviguez en utilisant les boutons du
bas pour obtenir le code HTML du composant. Ici, il est très simple :
<calcite-switch></calcite-switch>
Vous n'avez qu'à coller ce bout de code dans le <body> de votre HTML
pour que le composant apparaisse. Afin qu'il s'affiche au bon endroit de notre
application, rendez-vous au sein de la balise <div class="mentions">,
qui contient toutes les mentions s'affichant en bas à gauche de l'application.
A l'intérieur de celle-ci se trouve une balise <h4> qui englobe
elle-même toutes les mentions. En dessous de la balise <a> contenant la
mention au PORTAIL OPEN DATA PARIS | DATA, sautez deux lignes avec deux
balises <br/>. Enfin, ajoutez le code du composant, que vous devriez
voir apparaître en bas à gauche de votre application, en-dessous de toutes les
mentions. Afin que l'utilisateur comprenne ce à quoi sert le bouton, ajoutez
le texte AFFICHER TOUS LES ARBRES entre la balise de saut de ligne et la
balise du composant.
Voici ce à quoi votre code devrait ressembler :
Modifier le style du composant dans le CSS
Toujours dans la partie sample de l'aide en ligne, passez maintenant à
l'option CSS. Voici à quoi ressemble le code, qu'il va falloir adapter pour
qu'il fonctionne dans notre application :
.custom-example-theme {
--calcite-ui-brand: #7b656f;
--calcite-ui-brand-hover: #473b40;
}
Pour l'instant, le code apporte une modification pour les composants inclus
dans une balise de la classe "custom-example-theme". Dans notre HTML, nous
avons ajouté le composant au sein d'une balise <div> dont la classe
était "mentions". Il suffit donc de modifier le CSS en changeant le nom de la
classe pour mentions :
.mentions {
--calcite-ui-brand: #7B656F;
--calcite-ui-brand-hover: #473B40;
}Relier le composant à une fonction
Le bouton est rajouté, il est de la bonne couleur et s'active parfaitement...
Mais pour l'instant, vous avez beau cliquer dessus pour l'activer et le
désactiver, rien ne se passe dans l'application ! Nous allons le relier à une
fonction, pour que le fait de cliquer dessus entraîne une action dans la
carte.
De retour dans le code JavaScript de notre application, nous allons nous
intéresser au code que nous avions ajouté à la fin du troisième tutoriel de la
série pour cacher la couche des arbres de la basemap :
let treeLayer = map.basemap.referenceLayers.find(function (layer) {
return layer.id === "1872932aeb4-layer-48";
});
treeLayer.visible = false;
Pour rappel, nous avons accédé à la couche contenant les arbres et l'avons
stockée dans la variable treeLayer, puis nous avons accéder à sa propriété
'visible' et l'avons définie sur false pour que la couche ne s'affiche pas par
défaut.
Nous allons maintenant créer une constante changeVisibility définie comme une
fonction fléchée
qui va inverser la valeur de la propriété 'visible' de la couche
treeLayer à chaque fois qu'elle est appelée (la propriété passera donc de true
à false et inversement) :
const changeVisibility = () => {
treeLayer.visible = !treeLayer.visible;
};Enfin, nous allons relier cette fonction à notre composant Switch :
Cette ligne de code recherche un élément du DOM avec l'identifiant ou la classe "calcite-switch", ici le composant de type Switch que nous avons rajouté à l'étape précédente. Lorsque cet élément subit un changement spécifique (donc quand l'utilisateur l'active ou le désactive en cliquant dessus), l'événement "calciteSwitchChange" est déclenché grâce à l'écouteur .addEventListener(), ce qui active la fonction changeVisibility créée juste avant qui s'exécute en conséquence.
document.querySelector("calcite-switch").addEventListener("calciteSwitchChange", changeVisibility);Et voilà, votre bouton devrait être fonctionnel !
Nous en avons fini pour cette semaine. Vous pouvez retrouver l'intégralité du code que nous avons écrit ensemble jusqu'ici sur Github ou sur CodePen. Nous nous retrouvons la semaine prochaine pour l'ultime épisode de cette série, où nous ajouterons les derniers détails à notre application en modifiant la couleur de sélection des entités, en contraignant les niveaux de zoom maximum et minimum et en réutilisant ce que nous venons de voir pour ajouter un loader lors du chargement. En attendant, n'hésitez pas à retrouver les autres épisodes de cette série si vous les avez manqués.
Aucun commentaire:
Enregistrer un commentaire