<\/HEAD>
<\/P>
<\/P>
J'ai récemment écrit un article de blog<\/A> sur l'utilisation de Polymer<\/A> avec l'ArcGIS API for JavaScript 4.0 beta<\/A>.<\/P><\/P>
Vous pouvez en apprendre plus sur les Web Components
ici<\/A> et ici<\/A>.<\/P><\/P>
Les web components sont géniaux, car vous pouvez faire quelque chose comme ceci dans votre HTML.<\/P>
<\/P>
<body>
<my-awesome-component><\/my-awesome-component>
<\/body><\/PRE><\/P>Et vous pourriez avoir <my-awesome-component><\/SPAN> comme un élément d'interface utilisateur génial !<\/P><\/P>C'est super, non ? Oui, les web-components ne sont pas encore totalement supportés par tous les navigateurs. Mais pas de panique, pendant que les fournisseurs de navigateurs finalisent la spécification et les détails, nous pouvons simplement utiliser des bibliothèques géniales comme
Polymer<\/A>. La plupart des bibliothèques comme Angular<\/A>, Ember<\/A>, React<\/A> et même Dojo Djits<\/A> fournissent des composants d'une certaine sorte.<\/P><\/P>
Alors qu'est-ce qui est si génial avec Polymer ?<\/EM> Regardons un composant simple que nous voulons utiliser pour afficher l'étendue actuelle de la carte.<\/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.& nbsp.; type: Number,
 .& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.; computed: 'toFixed(2, ymin)'
 .& nbsp.& nbsp.; },
 .& nbsp.; xmaxc: {
 .& nbsp.; type: Number,
 .& nbsp.; computed: 'toFixed(2, xmax)'
 .; },
 .; ymaxc: {
 .; type: Number,
 .; computed: 'toFixed(2, ymax)'
};
'toFixed': function(n, x) {
return x.toFixed(n);
}
});
</script>
</dom-module>< /PRE >< P >< / P >< P > Alors regardons cela de plus prs . < / P >< P >< / P >< P > La racine de votre composant est un dom-module avec un id qui correspond l'id donn au constructeur Polymer. Ensuite, nous avons une section template. La section template contient les lments DOM rels de votre composant. C'est ici que vous pouvez lier des attributs votre composant Polymer en utilisant la syntaxe moustache {{bindingVariable}}. Ces variables lies sont dfinies dans le constructeur Polymer comme des proprits. Dans ces proprits, vous pouvez dfinir des
proprits calcules. Cela signifie que ce sont des proprits calcules bases sur d'autres proprits, dans ce cas simplifiant la pr9cision des nombres d'8etendue.< / P >< P >< / P >< P > La beaut9f de ces composants est que pour les mettre 9 jour, il suffit de mettre 9 jour les attributs de l'8l8ment DOM et les propri9t9s calcul9es s'occuperont du reste.< / P >< P >< / P >< PRE class= "lia-code-sample line-numbers language-none">class Component {
constructor(data) {
// ajouter le lien d'importation
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');
nod e.appendChild(el);
el.setAttribute('xmin', data.xmin)
el.setAttribute('ymin', data.ymin)
el.setAttribute('xmax', data.xmax)
el.setAttribute('ymax', data.ymax)
th is.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 > Maintenant, la fae facile d'utiliser cela avec l'ArcGIS API for JavaScript 4.0 beta est d'utiliser les < A href= "https:\/ \/developers.arcgis.com\ /javascript\ /beta\ /api-reference\ /esri-core-Accessor.html " rel= "nofollow noopener noreferrer " target= "_blank">Accessors</ A >. Vous pouvez creer un Mode qui extende Accessor et deinit l'Extent.< / P >< P >< / P >< PRE class= "lia-code-sample line-numbers language-none">import Accessor from 'esri/core/Accessor';
impor t Extent from 'esri/geometry/Extent';
class Model extends Accessor {
c lassMetadata : {
p roperties : {
extent : {
t ype : Extent
}
}
}
};
xport default Model;< / PRE >< P >< / P >< P > Puisque c'est un < A href= "http:\/ \/odoe.net\ /blog\ /fun-with-accessors-in-arcgis-js-4beta1\ / " rel= "nofollow noopener noreferrer " target= "_blank">Accessor</ A >, vous pouvez surveiller les changements sur le Mode et mettre e jour les valeurs du composant avec les changements.< / P >< P >< / P >< PRE class= "lia-code-sample line-numbers language-none">import Model from './Model';
impor t Component from './components/ViewProxy';
vclass Controller {
c onstructor(extent) {
t his.model = new Model({ extent : extent });
t his.view = new Component({
p osition : 'topright',
p xmin : this.model.extent.xmin,
p ymin : this.model.extent.ymin,
p xmax : this.model.extent.xmax,
p ymax : this.model.extent.ymax
});
t his.model.watch('extent', (val) => {
t his.view.update({
p xmin : val.xmin,
p ymin : val.ymin,
p xmax : val.xmax,
p ymax : val.ymax
});
t });
c }
v};
xport default Controller;< / PRE >< P >< / P >< P > C'est tout. Vous pouvez commencer e construire une multitude de composants reutilisables qui peuvent re composes ensemble pour creer une application entire si vous le souhaitez.< / P >< P >< / P >< P > Il existe actuellement un projet appele < A href= "https:\/ \/github.com\ /JamesMilnerUK\ /esri-polymer " rel= "nofollow noopener noreferrer " target= "_blank">esri-polymer</ A > sur github par James Milner d'Esri UK qui est vraiment cool. Il est base sur l'actuelle ArcGIS API for JavaScript 3.x, donc pas d'Accessors, mais il a suffisamment de composants pour permettre de monter une application sans recrire aucun JavaScript.< / P >< P >< / P >< P > C'est l'avenir du developpement web, mais oubliez l'avenir, vous pouvez faire ces choses maintenant.< / P >< P >< / P >< P > Pour plus d'astuces geodev, < A href= "http:\/ \/odoe.net\ /blog\ / " rel= "nofollow noopener noreferrer " target= "_blank">consultez mon blog</ A >.< /P>< \/BODY>< \/HTML>
