Ajouter un rembourrage à vos éléments

ReneRubalcava

<\/HEAD>

<\/P>

Une autre fonctionnalité intéressante qui fait partie de l'ArcGIS API for JavaScript 4.0beta1<\/A> est ce concept de view padding<\/A>. À première vue, vous vous demandez peut-être exactement ce que fait le view padding.<\/P>

<\/P>

Voici un exemple<\/A> tiré de la documentation qui illustre bien ce que fait réellement le view padding. En regardant cet exemple, vous voyez Liberty Island et un élément DOM avec du texte à droite.<\/P>

<\/P>

Ce qui peut ne pas sembler évident<\/EM>, c'est que le centre de la carte a été défini comme l'emplacement de Liberty Island, mais en définissant le view padding, la vue<\/EM> décalera le centre de la carte de la quantité de ce rembourrage<\/STRONG>. Rappelez-vous,

c'est la vue qui contrôle comment la carte est dessinée<\/A>. Cela vous permet d'ajouter des barres latérales, des pieds de page ou des en-têtes à votre carte, tout en pouvant utiliser autant que possible la carte. Pensez-y presque comme un cadre autour de la carte où chaque côté peut être redimensionné selon les besoins.<\/P>

<\/P>

Peut-être avez-vous déjà créé des panneaux latéraux dans votre application qui prennent beaucoup d'espace, couvrent la carte dans certaines situations alors qu'ils n'en ont pas besoin, ou vous redimensionnez la carte pour permettre au panneau latéral de s'adapter. Maintenant, vous avez une autre option : ajuster simplement le padding de la vue pour compenser cela pour vous<\/EM>.<\/P><\/P>Cela signifie également que vous pouvez ajuster comment la carte et les éléments UI interagissent lorsqu'une mise à jour se produit. Peut-être souhaitez-vous redimensionner le panneau latéral lorsqu'il n'est pas utilisé, donc vous voudrez probablement ajuster le view padding en même temps.<\/P><\/P>Vous pourriez faire cela en modifiant un peu l'exemple ci-dessus.<\/P><\/P>require([
  "esri\/
Map",
  "esri\/
views\/
SceneView",
  "esri\/
widgets\/
Search",
  "dojo\/
on",
  "dojo\/
domReady!"
], function(
  Map,
  SceneView,
  Search,
  on
) {
  \/\/_Cre9er la carte
  var map = new Map({
    basemap: "topo"
  });

  \/\/_Cre9er la vue et de9finir le view padding 320 px
  var view = new SceneView({
    container: "viewDiv",
    map: map,
    center: [-118, 34],
    zoom: 9,
    padding: {
      right: 320
    }
  });
 
  view.then(function() {
    var searchWidget = new Search({
      view: view
    }, "searchDiv");
    searchWidget.startup();
  });
 
  var resize = document.getElementById("resize");
  on(resize, "click", function() {
    if (view.padding.right === 320) {
      view.padding = { right: 18 };
    } else {
      view.padding = { right: 320 };
    }
  });

  \/\/_Utiliser le view.padding pour mettre jour le css
  var updatePadding = function(padding) {
    var right = padding.right + "px";
    var paddingRight = document.querySelector("#padding").style;
    paddingRight.width = right;
    paddingRight.visibility = "visible";
  };
 
  updatePadding(view.padding);
 
  \/\/_ surveiller les mises jour du view padding
  view.watch('padding', function(val) {
    updatePadding(val);
  });
});<\/PRE><\/P>Dans ce cas, nous surveillons un clic sur un bouton et ajustons le view padding, ce qui redimensionnera à son tour le panneau latéral. Ce n'est pas trop difficile accomplir dans la beta EsriJS.<\/P><\/P>Vous pouvez voir une

demo de cette application ici<\/A>.<\/P>

<\/P>

Le view padding dans la version beta actuelle est l'une de ces petites touches agréables de l'API qui vous offre beaucoup de flexibilité en tant que développeur. Il vous permet d'tre cratif avec votre interface utilisateur et comment cela impacte l'interaction des utilisateurs avec la carte. Alors amusez-vous bien avec cela<\/EM>.<\/P><\/P>Pour plus d'astuces geodev,

consultez mon blog<\/A>.<\/P><\/BODY><\/HTML>