<\/HEAD>
<\/P>
<\/P>
Eu fiz um post no blog<\/A> recentemente sobre o uso do Polymer<\/A> com a ArcGIS API for JavaScript 4.0 beta<\/A>.<\/P><\/P>
Você pode ler mais sobre Web Components
aqui<\/A> e aqui<\/A>.<\/P><\/P>
Web components são incríveis, porque você pode fazer algo assim no seu HTML.<\/P>
<\/P>
<body>
<my-awesome-component><\/my-awesome-component>
<\/body><\/PRE><\/P>E você poderia ter <my-awesome-component><\/SPAN> como algum elemento incrível de interface do usuário!<\/P><\/P>Parece ótimo, certo? Sim, web-components ainda não são totalmente suportados em todos os navegadores. Mas não se preocupe, enquanto os fornecedores de navegador definem a especificação e detalhes, podemos usar bibliotecas incríveis como o
Polymer<\/A>. A maioria das bibliotecas como Angular<\/A>, Ember<\/A>, React<\/A> e até mesmo Dojo Djits<\/A> fornecem componentes de algum tipo.<\/P><\/P>
Então, o que há de tão bom no Polymer?<\/EM> Vamos olhar um componente simples que queremos usar para exibir a extensão atual do mapa.<\/P><\/P><dom-module id="extent-info">
<template>
<div class="extent-details well">
xmin: <span>{{xminc}}<\/span><br>
ymin: <span>{{yminc}}<\/span><br>
xmax: <span>{{xmaxc}}<\/span><br>
ymax: <span>{{ymaxc}}<\/span><br>
<\/div>
<template>
<style>
.extent-details {
margin: 1em;
}
</style>
<script>
var ExtentInfo = Polymer({
is: 'extent-info',
properties: {
xmin: Number,
ymin: Number,
xmax: Number,
ymax: Number,
xminc: {
type: Number,
 .& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp;.computed: 'toFixed(2, xmin)'
. nbsp.& nbsp.& nbsp.& nbsp.& nbsp.; },
. nbsp.& nbsp.& nbsp.& nbsp.; yminc: {
. nbsp.& nbsp.& nbsp.& nbsp.; type: Number,
. nbsp.& nbsp.& nbsp.& nbsp.; computed: 'toFixed(2, ymin)'
. nbsp.; },
. nbsp.; xmaxc: {
. nbsp.; type: Number,
. nbsp.; computed: 'toFixed(2, xmax)'
. nbsp.; },
. nbsp.; ymaxc: {
. nbsp.; type: Number,
. nbsp.; computed: 'toFixed(2, ymax)'
. nbsp.; }
. nbsp.; },
. nbsp.; toFixed: function(n, x) {
. nbsp.; return x.toFixed(n);
. nbsp.; }
. });
 . & lt;/script>
</dom-module>< /PRE >< P >< / P >< P >Então vamos conferir isso.< / P >< P >< / P >< P >A raiz do seu componente é um dom-module com um id que corresponde ao id dado ao construtor do Polymer. Depois temos uma seção template. A seção template contém os elementos DOM reais do seu componente. É aqui que você pode vincular atributos ao seu componente Polymer usando a sintaxe mustache {{bindingVariable}}. Essas variáveis vinculadas são definidas no construtor do Polymer como properties. Nestas propriedades, você pode definir
propriedades computadas. Ou seja, são propriedades que são calculadas com base em outras propriedades, neste caso simplificando a precisão dos números da extensão.< / P >< P >< / P >< P >A beleza desses componentes é que para atualizá-los, você simplesmente atualiza os atributos do elemento DOM e as propriedades computadas cuidam do resto.< / P >< P >< / P >< PRE class = "lia-code-sample line-numbers language-none" >class Component {
constructor(data) {
// adicionar link de importação
var href = require.toUrl('app/views/PolymerView/components/ExtentInfo.html');
var node = document.querySelector('.esriTop.esriRight');
var link = document.createElement('link');
link.setAttribute('href', href);
link.setAttribute('rel', 'import');
document.body.appendChild(link);
var el = document.createElement('extent-info');
node.appendChild(el);
el.setAttribute('xmin', data.xmin)
el.setAttribute('ymin', data.ymin)
el.setAttribute('xmax', data.xmax)
el.setAttribute('ymax', data.ymax)
this.element = el;
}
update(data) {
var el = this.element;
el.setAttribute('xmin', data.xmin)
el.setAttribute('ymin', data.ymin)
el.setAttribute('xmax', data.xmax)
el.setAttribute('ymax', data.ymax)
}
};
export default Component;< /PRE >< P >< / P >< P >Agora, a maneira fácil de usar isso com a ArcGIS API for JavaScript 4.0 beta é usando Accessors. Você pode criar um Model que estende Accessor e define a Extent.< / P >< P >< / P >< PRE class = "lia-code-sample line-numbers language-none" >import Accessor from 'esri/core/Accessor';
import Extent from 'esri/geometry/Extent';
class Model extends Accessor {
classMetadata: {
properties: {
extent: {
type: Extent
}
}
}
};
export default Model;< /PRE >< P >< / P >< P >Como é um Accessor, você pode observar mudanças no Model e atualizar os valores do componente com as mudanças.< / P >< P >< / P >< PRE class = "lia-code-sample line-numbers language-none" >import Model from './Model';
import Component from './components/ViewProxy';
// Controller conecta Model e view
class Controller {
constructor(extent) {
this.model = new Model({ extent: extent });
this.view = new Component({
position: 'topright',
xmin: this.model.extent.xmin,
ymin: this.model.extent.ymin,
xmax: this.model.extent.xmax,
ymax: this.model.extent.ymax
});
this.model.watch('extent', (val) => {
this.view.update({
xmin: val.xmin,
ymin: val.ymin,
xmax: val.xmax,
ymax: val.ymax
});
});
}
};
xport default Controller;< /PRE >< P >< / P >< P >É isso aí. Você pode começar a construir vários componentes reutilizáveis que podem ser compostos juntos para criar uma aplicação inteira se quiser.< / P >< P >< / P >< P >Atualmente existe um projeto chamado esri-polymer no github de James Milner da Esri UK que é muito legal. Ele é baseado na atual ArcGIS API for JavaScript 3.x, então sem Accessors, mas tem componentes suficientes que permitem montar uma aplicação sem escrever nenhum JavaScript.< / P >< P >< / P >< P >Este é o futuro do que está por vir no desenvolvimento web, mas dane-se o futuro, você pode fazer essas coisas agora.< / P >< P >< / P >< P >Para mais dicas e truques geodev, confira meu blog.< /P>< /BODY>< /HTML>
