Rechercher dans le blog

Personnalisez votre UI avec des widgets

L'API ArcGIS pour JavaScript version 4 fournit une interface pour la configuration de présentations simples de l'interface utilisateur. Les vues fournissent une API d'interface utilisateur qui permet de placer des composants, widgets ou éléments DOM (Document Objet Model) dans des coins. Cela marche aussi bien en 2D qu’en 3D.
Prenons l’application suivante par exemple:


Il est courant de voir les CSS suivantes pour le positionnement:

.search,
.logo {
  position: absolute;
  right: 15px;
}
.search {
  top: 15px;
}
.logo {
  bottom: 30px;
}
Cela fonctionne, mais peut devenir fastidieux à gérer lorsque vous avez plus de composants ou si des modifications apportées au widget ou aux dimensions de la vue nécessitent la mise à jour du CSS de positionnement. L’API UI facilite cette tâche en éliminant ces problèmes de positionnement. Le CSS de l'extrait précédent n'est pas requis si vous utilisez l'API UI et sera remplacé par le suivant:

view.ui.add(search, "top-right");
view.ui.add(logo, "bottom-right");

Cela place les composants dans les coins supérieur et inférieur droit. Plusieurs composants peuvent être ajoutés et le positionnement et l’espacement seront automatiquement pris en charge.

Les widgets par défaut

La classe DefaultUI expose les composants de widget par défaut disponibles dans MapView ou SceneView. Cette classe fournit également une API simple permettant d'ajouter, de déplacer et de supprimer des widgets et d'autres composants HTML de l'interface utilisateur de la vue.
Généralement, vous n'avez pas besoin de charger cette classe avec require () car une instance par défaut est disponible dans la propriété interface utilisateur de SceneView et MapView.
Lorsque vous ajoutez ou déplacez des composants dans l'interface utilisateur de la vue, vous pouvez spécifier une position. Les positions disponibles sont indiquées dans l'image ci-dessous.


Par défaut, certains composants de widget sont disponibles dans MapView ou SceneView. Les widgets par défaut sont représentés sous la forme d'un tableau de chaînes de caractères, documenté dans la propriété components de la classe DefaultUI.

Voici les composants par défaut dans chaque vue:

MapView: ["attribution", "zoom"]
SceneView: ["attribution", "navigation-toggle", "compass", "zoom"]

Le tableau peut être modifié pour afficher uniquement les widgets que vous souhaitez voir visibles dans votre application:

view.ui.components = (["attribution", "compass", "zoom"]); //remove  ”navigation-toggle” from the SceneView
view.ui.components = (["attribution"]); //remove all default UI components except Attribution

Attention cependant, lorsque vous utilisez un fond de carte ArcGIS Online dans vos applications, il est indispensable d’ajouter les attributions adaptées, celles des fournisseurs de données. Le widget est inclus par défaut sur l’UI. Pour en savoir plus.

Les méthodes

Des méthodes, telles que add () et move () peuvent être utilisées pour placer des widgets dans des positions spécifiques de l'interface utilisateur. Si les positions des composants doivent changer de manière dynamique dans votre application, l'interface utilisateur vous permet donc de déplacer et de supprimer des composants:
view.ui.move(logo, "bottom-left");
view.ui.remove([compass, "zoom"]);
Avec la méthode add et les widgets par défaut on peut alors les placer sur l’interface utilisateur:

// Adds multiple components of various types to different view positions
view.ui.add([
  {
    component: compassWidget,
    position: "top-left",
    index: 0
  }, {
    component: "infoDiv",
    position: "bottom-left"
  }, {
    component: searchWidget,
    position: "top-right",
    index: 0
  }, {
    component: legendWidgetDomNode,
    position: "top-right",
    index: 1
  }
]);

La classe Widget pour ajouter d’autres widgets

Au-delà des widgets par défaut qui héritent de la classe DefaultUI, il est possible d’ajouter d’autres widgets comme les widgets de recherche Search, géosignet Bookmarks etc. Ils héritent de la classe widgets et il faut donc les rentrer en paramètre dans le require().

On peut alors imaginer que lorsque l’on zoome suffisamment, certains widgets disparaissent ou inversement. Grâce aux événements JavaScript il existe de nombreux moyens de rendre votre UI dynamique. Ce code sur mon github résume les points clés de cet article.

La présentation de chaque widget est distincte de ses propriétés, méthodes et données. Cette séparation de la logique principale et de la présentation rend chaque widget très personnalisable, vous pouvez utiliser les widgets tels quels, les styliser avec CSS ou personnaliser complètement l'interface utilisateur. Bien que l’API soit construite sur Dojo, ses widgets ne dépendent pas entièrement de la structure Dijit de Dojo. La séparation de la logique principale et de la présentation vous permet donc de créer plus facilement de nouveaux widgets et de personnaliser les widgets existants avec tout framework tiers, tel que Bootstrap, React ou jQuery.
La conception de la classe widget permet aux développeurs de créer de nouveaux widgets et de modifier les widgets existants avec un framework tiers. La séparation de la présentation et de la logique d'un widget signifie également que les développeurs peuvent utiliser la logique sans devoir restituer ses composants d'interface utilisateur. La création de widgets personnalisés fera l’objet d’un prochain article, en attendant vous pouvez consultez cette page.

Je reviendrais également dans un prochain article sur certains widgets prêt à l’emploi que l’on peut ajouter à notre interface utilisateur comme Histogram, le TimeSlider qui permet de donner une composante temporelle à notre application ou Expand  qui est un bouton pour ouvrir un widget comme une légende.

Pour accéder directement à l'application, cliquez ici.

Aucun commentaire:

Enregistrer un commentaire