Une référence pratique à Calcite pour les outils spatiaux qui exigent de la précision : surfaces sémantiques, actions bleues, panneaux d’inspection compacts, véritables API de saisie et exemple complet d’examen local d’un site.
Guide OpenDesign8 chapitres48 entrées de référenceGuide de l’application d’origine
01
Esri Calcite Aperçu de l’interface du système de design
Sélectionnez un site dans la liste ou le schéma, filtrez les états de validation et validez une note qui reste associée à chaque site jusqu’au rechargement.
Interprétation originale de HTML/CSS/JavaScript à partir de références visuelles documentées. L’illustration n’est pas une carte ArcGIS ; aucun environnement d’exécution ni aucune police Esri n’est inclus. · Référence de mise en œuvre
02
Référence de design du système de design Esri Calcite
Jetons de design Calcite 4.1.0 et composant API actuel, vérifiés en parallèle de Components 5.1.2. Le package de jetons et le package de composants ont des numéros de version distincts. L’exemple intégré est une interprétation originale de HTML/CSS ; il ne redistribue pas l’environnement d’exécution Calcite et ne prétend pas reproduire son comportement natif.
Espace de travail et architecture des panneaux du système de design Esri Calcite
Gardez le contexte de l’objet visible
Une tâche spatiale comporte généralement au moins deux contextes : la zone examinée et l’objet sélectionné. L’exemple associe une petite liste de sites à un schéma original et à un inspecteur. La sélection d’une ligne de la liste ou d’un repère définit le même ID de site stable, afin que le nom, l’état et la note ne puissent pas se rapporter par erreur à des objets différents.
Distinguez l’illustration d’une vraie carte
Le SVG illustre le lien entre une liste et une surface spatiale. Il ne comporte ni projection, ni coordonnées, ni couches, ni zoom, ni géocodage, ni itinéraire. Sa légende visible précise qu’il s’agit d’un schéma qui n’est pas à l’échelle. Une vue ArcGIS de production nécessite sa propre intégration SDK, ses données et un travail d’accessibilité ; une interface Calcite, à elle seule, ne fournit pas ces fonctionnalités.
Rôles de couleurs sémantiques du système de design Esri Calcite
Utilisez les surfaces pour séparer les outils sans multiplier les cartes visuelles
La référence distingue surface-1 à surface-4, et réserve surface-highlight à la mise en évidence. L’exemple présente un inspecteur blanc sur une zone de travail blanc cassé, sobre, et une ligne sélectionnée bleu pâle. De fines bordures neutres délimitent les panneaux sans ajouter une carte flottante autour de chaque champ.
Donnez au bleu une signification cohérente pour les interactions
Les couleurs de marque, de survol et d’activation forment une séquence de plus en plus sombre, de #007ac2 à #00619b puis #004874. Le repère sélectionné et l’action principale d’enregistrement utilisent cette famille pour des rôles d’interaction différents. Les états de revue indiqués par du texte et le message de validation de la note restent compréhensibles sans dépendre uniquement de leur couleur.
Typographie et densité de l’information du système de design Esri Calcite
Préservez la hiérarchie des petits éléments d’information
Les références typographiques absolues publiées comprennent 12px pour les petits caractères, 14px pour le texte de base, 16px pour le texte moyen et 20px pour le très grand texte. L’exemple associe un titre d’espace de travail de 20px à des titres de panneau de 16px et à des contrôles de 14px. Les métadonnées sont plus petites, mais ne constituent jamais le seul moyen d’identifier l’objet sélectionné.
Distinguez une police de remplacement de la police de marque
Cet exemple indépendant utilise Arial et des polices de remplacement système. Il n’inclut pas les polices de marque Esri et ne présente pas cette police de remplacement comme étant Avenir. Une intégration native autorisée doit respecter les ressources et la configuration du thème de la version Calcite choisie. Le changement de police peut modifier les retours à la ligne et la largeur des contrôles ; testez donc les ressources réellement déployées.
Jetons d’espacement et panneaux adaptatifs du système de design Esri Calcite
Choisissez les noms de jetons actuels
La référence utilise l’échelle actuelle --calcite-space-*, qui combine des valeurs en pixels pour les plus petits pas et des valeurs en rem pour les espacements plus importants. Utilisez ces rôles nommés de façon cohérente lors de l’implémentation d’un thème natif. La mise en page de l’application dans cet exemple utilise des valeurs explicites CSS afin que l’interprétation fonctionne sans importer de packages soumis à des restrictions.
Réorganisez l’inspecteur avant de réduire le champ
Sélection et filtrage dans le système de design Esri Calcite
Utilisez un seul identifiant de sélection
La liste et le schéma partagent la sélection au moyen des identifiants A-01, B-02 et C-03, et non de leur position actuelle dans le tableau. Le filtre « Vérifié » sélectionne le site correspondant disponible, et l’inspecteur suit cette sélection. L’état enfoncé est indiqué à la fois sur le bouton de la liste et sur le repère correspondant.
Séparez les notes enregistrées des brouillons non enregistrés
Une note enregistrée est stockée dans une Map indexée par ID de site. Lorsque vous revenez à ce site, elle est restaurée ; si vous changez de site sans enregistrer, le texte non enregistré est remplacé. Le texte d’aide précise explicitement que la note est conservée localement. Un éditeur de production devrait protéger les modifications non enregistrées si la perte d’un brouillon pouvait avoir des conséquences importantes.
Validation des champs et récupération dans le système de design Esri Calcite
Utilisez le véritable composant de saisie natif API avec Calcite
L’exemple natif utilise labelText, value, status et validationMessage. L’événement calciteInputInput peut effacer une erreur devenue obsolète, tandis que setFocus() ramène l’attention sur le composant après l’échec d’une règle de validation de l’application. Ce sont des noms API publics, contrairement à l’accès à un élément interne en fouillant dans un shadow root.
Ne confondez pas une confirmation locale avec la persistance sur un service
L’aperçu indépendant exige au moins dix caractères après suppression des espaces en début et en fin, et limite le champ à 240 caractères. La confirmation identifie le site et précise explicitement que la note est enregistrée localement. Le rechargement de la page efface les notes. Une version connectée à un réseau nécessiterait une gestion des états d’attente, d’échec, de nouvelle tentative et de conflit ; le message d’enregistrement local ne sous-entend rien de tel.
Essayez d’enregistrer une note vide ou trop courte, puis lisez le message d’erreur.
Saisissez une note plus longue, enregistrez-la, sélectionnez un autre site, puis revenez au premier.
Rechargez la page pour confirmer que cet exemple ne promet aucune persistance.
Esri Calcite — Alternatives spatiales accessibles du système de design
Fournissez une liste équivalente pour chaque repère
Chaque repère interactif dispose d’un bouton textuel dans la liste du site. La carte illustrée n’est donc pas le seul moyen de sélectionner un objet. Son SVG reçoit une description concise, tandis que les commandes ont leurs propres noms et des indicateurs de focus visibles. Une véritable carte nécessite davantage que la simple reprise du texte de remplacement du schéma.
Placez la validation à côté du champ
La zone de texte référence à la fois l’aide et l’erreur avec aria-describedby. En cas d’échec, elle reçoit aria-invalid et le focus ; la modification du texte supprime l’état d’invalidité devenu obsolète. La confirmation utilise une région de statut. Les personnes utilisant le clavier peuvent sélectionner un site, saisir une note et l’enregistrer sans interagir avec une forme géographique dessinée.
Esri Calcite — Versions du système de design et limites d’intégration
Verrouillez les versions des packages et vérifiez les conditions de licence
Les composants 5.1.2 et les jetons de design 4.1.0 sont des packages distincts. La page de licence actuelle indique que leur utilisation nécessite un compte ArcGIS Online, Enterprise ou Location Platform. Ne transposez pas à ces packages actuels des hypothèses liées à une ancienne version open source. Le code source natif ci-dessous s’adresse aux projets qui remplissent ces conditions.
Après avoir vérifié les conditions de licence actuelles, installez @esri/[email protected]. Cette alternative a été vérifiée avec API ; l’exemple indépendant ci-dessus est celui qui a été testé dans le navigateur.
04
Esri Calcite — Configuration de l’agent du système de design
Point de départ de l’implémentation
Selon les conditions de licence actuelles, l’utilisation du package de composants nécessite un compte ArcGIS admissible. Si vous hébergez les composants vous-même, vérifiez les exigences relatives aux chemins d’accès des ressources.
sh
# Independent specimen: save the complete HTML example as index.html.
# Native alternative for an appropriately licensed project:
npm create vite@latest calcite-note -- --template vanilla
cd calcite-note
npm install
npm install @esri/[email protected]
# Replace src/main.js with the native input example.
npm run dev
Un prompt pour votre projet
Prompt pour l’agent IA
Créez un espace de travail ciblé pour l’inspection spatiale à partir des références Calcite. Assurez-vous que l’ID de l’objet sélectionné est cohérent dans la liste et le panneau d’inspection, affichez les états sous forme de texte et distinguez les notes locales de leur persistance dans un service. Commencez par l’interprétation autonome ou optez délibérément pour les composants natifs sous licence. Ne présentez pas le schéma d’origine comme une carte ArcGIS.
05
Esri Calcite — Sources et périmètre du système de design
Guide de l’application OpenDesign. L’exemple illustré est réalisé indépendamment et utilise des données fictives. L’utilisation actuelle de Calcite est régie par les conditions de licence Esri et nécessite un compte ArcGIS admissible ; l’exemple d’intégration native est une option pour les projets disposant des licences appropriées, et non l’environnement d’exécution de cet aperçu.
