Adicionando Espaçamento aos Seus Itens

ReneRubalcava

<\/HEAD>

<\/P>

Outro recurso interessante que faz parte da ArcGIS API for JavaScript 4.0beta1<\/A> é esse conceito de view padding<\/A>. À primeira vista, você pode estar se perguntando exatamente o que o view padding faz.<\/P>

<\/P>

Aqui está um exemplo<\/A> dos documentos que demonstra bem o que o view padding realmente faz. Olhando para este exemplo, você vê Liberty Island e um elemento DOM com algum texto à direita.<\/P>

<\/P>

O que pode não parecer óbvio<\/EM> é que o centro do mapa foi definido como a localização de Liberty Island, mas ao definir o view padding, o view<\/EM> deslocará o centro do mapa pela quantidade desse padding<\/STRONG>. Lembre-se,

é o view que controla como o mapa é desenhado<\/A>. Isso permite que você adicione barras laterais, rodapés ou cabeçalhos ao seu mapa, mas ainda assim possa utilizar o máximo possível do mapa. Pense nisso quase como uma moldura ao redor do mapa onde cada lado pode ser redimensionado conforme necessário.<\/P>

<\/P>

Talvez você já tenha feito painéis laterais em sua aplicação que ocupam muito espaço, cobrem o mapa em certas situações quando não precisam, ou você redimensiona o mapa para permitir que a barra lateral caiba. Agora você tem outra opção para simplesmente ajustar o padding do view para compensar isso para você<\/EM>.<\/P><\/P>Isso também significa que você pode ajustar como o mapa e os elementos da interface interagem quando algo é atualizado. Talvez você queira redimensionar o painel lateral quando não estiver em uso, então provavelmente desejará ajustar o view padding ao mesmo tempo.<\/P><\/P>Você poderia fazer isso ajustando um pouco o exemplo acima.<\/P><\/P>require([\n  "esri\/Map",\n  "esri\/views\/SceneView",\n  "esri\/widgets\/Search",\n  "dojo\/on",\n  "dojo\/domReady!"\n], function(\n  Map,\n  SceneView,\n  Search,\n  on\n) {\n  \/\/_Create the map_\n  var map = new Map({\n    basemap: "topo"\n  });\n\n  \/\/_Create the view set the view padding to be 320 px_\n  var view = new SceneView({\n    container: "viewDiv",\n    map: map,\n    center: [-118, 34],\n    zoom: 9,\n    padding: {\n      right: 320\n    }\n  });\n  \n  view.then(function() {\n    var searchWidget = new Search({\n      view: view\n    }, "searchDiv");\n    searchWidget.startup();\n  });\n  \n  var resize = document.getElementById("resize");\n  on(resize, "click", function() {\n    if (view.padding.right === 320) {\n      view.padding = { right: 18 };\n    } else {\n      view.padding = { right: 320 };\n    }\n  });\n\n  \/\/_Using the view.padding to update the css_\n  var updatePadding = function(padding) {\n    var right = padding.right + "px";\n    var paddingRight = document.querySelector("#padding").style;\n    paddingRight.width = right;\n    paddingRight.visibility = "visible";\n  };\n  \n  updatePadding(view.padding);\n  \n  \/\/_ watch for view padding updates_\n  view.watch('padding', function(val) {\n    updatePadding(val);\n  });\n});<\/PRE><\/P>Nesse caso, estamos observando um clique de botão e ajustando o view padding, que por sua vez redimensionará o painel lateral. Isso não é muito difícil de realizar na beta do EsriJS.<\/P><\/P>Você pode ver uma

demonstração desta aplicação aqui<\/A>.<\/P>

<\/P>

O view padding na versão beta atual é um daqueles pequenos detalhes agradáveis da API que oferece muita flexibilidade para você como desenvolvedor. Ele permite que você seja criativo com sua interface de usuário e como isso impacta a interação dos usuários com o mapa. Então divirta-se com isso<\/EM>.<\/P><\/P>Para mais dicas e truques geodev,

confira meu blog<\/A>.<\/P><\/BODY><\/HTML>