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.
Vous voulez vous aussi réaliser des applications Web cartographiques et dynamiques? N'hésitez pas à souscrire à un plan gratuit ArcGIS for Developers pour développer vos propres applications cartographiques 2D ou 3D ! Cet article résume ce que vous obtiendrez. Et pour en savoir sur l'API c'est ici.
Pour accéder directement à l'application, cliquez ici.
Vous voulez vous aussi réaliser des applications Web cartographiques et dynamiques? N'hésitez pas à souscrire à un plan gratuit ArcGIS for Developers pour développer vos propres applications cartographiques 2D ou 3D ! Cet article résume ce que vous obtiendrez. Et pour en savoir sur l'API c'est ici.
Aucun commentaire:
Enregistrer un commentaire