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