Skip to content
GeoViewer 5

ThemeEditor

ThemeEditor

Nom fonctionnel: Éditeur de thème

À quoi sert ce widget ?

Personnalise l’apparence du viewer pour aligner l’interface avec la charte et les usages.

Conseil: un viewer “trop outillé” devient vite bruyant. Activez ce widget uniquement s’il sert un parcours utilisateur clair.

Quand l’activer

  • Quand vous devez simplifier le parcours utilisateur.
  • Quand vous voulez adapter le viewer à plusieurs profils (langue, thème, action).
  • Quand la lisibilité des commandes est un enjeu métier.

En clair

  • Côté utilisateur: Une interface claire réduit les erreurs de manipulation et accélère la prise en main.
  • Côté intégration: Contrôlez les conteneurs, les libellés i18n et la cohérence visuelle globale.

Prise en main

Accéder au widget

  • Ouvrez le widget depuis la toolbar ou le conteneur dédié.
  • Vérifiez sa position dans l’interface pour éviter les conflits de lisibilité.

Le configurer sans se tromper

  • Configurez titre, icône, langue ou apparence selon le contexte.
  • Validez le comportement attendu en desktop et mobile.

Ce que l’utilisateur voit

  • Sélecteur de thème et variables de style configurables.
  • Prévisualisation immédiate de l’impact visuel.
  • Paramètres utiles pour l’accessibilité et la charte graphique.

Parcours utilisateur (le plus courant)

  • Ajustez les couleurs et contrastes selon le public cible.
  • Vérifiez la lisibilité des widgets clés après modification.
  • Conservez un thème validé pour les environnements officiels.

Exemples concrets

  • Ajouter un bouton d’action métier dans une toolbar existante.
  • Basculer de langue pour un public multilingue.
  • Adapter l’habillage visuel via un thème dédié.

Configuration (aperçu)

OptionTypeDéfautDescription
widgetIdstring-Identifiant unique de l’instance ThemeEditor.
activebooleanfalseActive l’ouverture du widget au démarrage.
inToolbarboolean ou objet ou stringselon widgetDéfinit si le widget est visible dans une toolbar, et sous quelle forme.
containerstring ou objetselon widgetChoisit le conteneur de rendu (drawer, dialog, floating, toolbar-tabs, hidden).

Pour le détail complet (et toujours à jour), utilisez la référence technique et le schéma ci-dessous.

Liens techniques et code

Exemple minimal (copier-coller)

{
    "widgetId": "theme-editor",
    "widgetClass": "ThemeEditor",
    "active": false,
    "inToolbar": true,
    "config": {}
}

Exemple avancé

{
    "widgetId": "theme-editor-advanced",
    "widgetClass": "ThemeEditor",
    "active": true,
    "handleOpenAtStartup": false,
    "inToolbar": {
        "type": "button",
        "toolbarId": "default-toolbar",
        "order": 10
    },
    "onActivate": {
        "deactivate": {
            "classes": []
        }
    },
    "config": {}
}

Points d’attention

  • Un widget UI mal positionné peut devenir invisible pour l’utilisateur.
  • Des libellés non traduits dégradent fortement l’expérience.
  • L’ordre des actions en toolbar influence la compréhension du parcours.

Dépannage

SymptômeVérification rapide
Le widget n’apparaît pas au bon endroit.Vérifiez inToolbar, container et viewer.containers.
Le texte affiché n’est pas traduit.Vérifiez les clés i18n et la langue active.

FAQ

Peut-on personnaliser les icônes et titres ?

Oui, via icon, title et les clés i18n quand le widget le permet.

Comment éviter une toolbar surchargée ?

Priorisez les actions clés et regroupez par famille.

Captures à ajouter

  • (Capture à ajouter) /assets/screenshots/TODO/theme-editor-01.png: widget ouvert avec configuration standard.
  • (Capture à ajouter) /assets/screenshots/TODO/theme-editor-02.png: interaction principale et résultat attendu.

Liens PDF source

  • Aucun PDF de référence détecté automatiquement pour ce widget.

Aller plus loin