Mix het door elkaar

ReneRubalcava

<\/HEAD>

<\/P>

Heb je ooit een applicatie gestart met wat custom widgets en begin je te merken dat je widget misschien een beetje onhandelbaar<\/STRONG> begint te worden? Misschien is het gegroeid van 50 regels code naar 100, misschien 200, 1000<\/EM>? Wees niet beschaamd, afhankelijk van je behoeften kunnen sommige widgets veel vereisen om de klus te klaren, en dat is waar we allemaal voor gaan toch? De klus klaren<\/EM>.<\/P><\/P>Neem een stap terug en kijk eens hoe je die widget misschien kunt opsplitsen. Doe je dingen zoals het toevoegen van graphics aan de map op basis van bepaalde widget-gebeurtenissen? Luister je naar kaartactiviteit om wat analyse te doen met behulp van de huidige kaartuitbreiding en een andere service die mogelijk niet in de kaart is geladen? Misschien moet je gewoon de huidige locatie van de gebruiker naar een FeatureService sturen elke keer dat een widget wordt geactiveerd, maar wil je deze functionaliteit over alle widgets heen gebruiken? Ik ken je use case niet, maar als je een stap terug kunt doen en je widget kunt opdelen in kleinere stukjes, kunnen we het misschien gemakkelijker maken om te beheren.<\/P><\/P>Splits het gedrag op<\/H2>Een goede manier om naar widgetcompositie te kijken is door te kijken naar het gedrag dat je nodig hebt in je widget. Laten we bijvoorbeeld eens kijken naar de altijd beroemde dijit\/_WidgetBase<\/A> die je waarschijnlijk hebt gebruikt om je eigen widgets te bouwen. Wanneer je een _WidgetBase<\/STRONG> uitbreidt, krijg je een set gedragingen, vooral de dijit levenscyclus, wat een set methoden is die je kunt overschrijven om je widget tijdens de creatie op te bouwen. Voor meer details over custom widgets en de dijit levenscyclus kun je deze video op mijn blog<\/A> bekijken. Je krijgt ook nog een andere set gedrag, namelijk de set\/_get<\/STRONG> methoden voor attributen van dojo\/_Stateful<\/A>, waarmee je veranderingen kunt volgen.<\/P>

<\/P>

Als je wilt dat deze widget een getemplate HTML-string gebruikt om zijn gebruikersinterface te definiëren, kun je de

dijit\/_TemplatedMixin<\/A> uitbreiden die één eenvoudige eigenschap voor je toevoegt, de templateString<\/STRONG>. Die ene eigenschap stelt je in staat om een hele UI rond je widget te bouwen. Dat is best krachtig als je erover nadenkt.<\/P><\/P>

Gedraag je voorbeeldig<\/H2>Dus hoe zou je mixins precies kunnen gaan integreren in je eigen projecten? Laten we aannemen dat je merkt dat je in je widgets constant de mogelijkheid toevoegt om de kaart opnieuw te centreren wanneer er iets gebeurt. Een manier om dit te bereiken is door dat gedrag uit te splitsen in een mixin. Ik weet niet of het conventie is, maar ik merk in de dijit bibliotheek<\/A> dat mixins worden voorafgegaan door een underscore, dus laten we een mixin maken genaamd _RecenterMixin<\/STRONG>.<\/P><\/P>Dat zou er ongeveer zo uit kunnen zien:<\/P>define([\n  'dojo\/_base\/_declare'\n], function(declare) {\n  return declare(null, {\n    \/\/- deze mixin werkt onder de aanname\n    \/\/- dat je een map hebt toegewezen aan je widget.\n    \/\/- het gaat ook uit van een map die is geïnitialiseerd met\n    \/\/- een centrum en zoomniveau\n    recenter: function() {\n      var map = this.get('map');\n      var params = map._mapParams;\n      if (params.center) {\n        map.centerAt(params.center);\n      }\n    }\n  });\n});<\/PRE><\/P>Nu kun je dus een widget maken die deze mixin uitbreidt en gewoon de recenter-methode aanroepen wanneer dat nodig is. Ik kan het gebruiken in een widget die BasemapGallery<\/A> omsluit en de kaart opnieuw centreert wanneer de basemap wordt gewijzigd.<\/P>

define([\n  'dojo\/_base\/_declare',\n  'dojo\/_base/lang',\n  'dojo\/dom',\n  'dojo/dom-construct',\n  'esri/domUtils',\n  'esri/dijit/BasemapGallery',\n  'dijit/_WidgetBase',\n  'dijit/_TemplatedMixin',\n  '.\/_RecenterMixin',\n  'dojo/text!.\/_templates/BasemapSwitcher.html'\n], function(\n  declare, lang, dom, domConstruct,\n  esriDomUtils, BasemapGallery,\n  _WidgetBase, _TemplatedMixin,\n  _RecenterMixin,\n  template\n) {\n  return declare([_WidgetBase, _TemplatedMixin, _RecenterMixin], {\n    templateString: template,\n    postCreate: function() {\n      var node = dom.byId('map_root');\n      esriDomUtils.hide(this.domNode);\n      domConstruct.place(this.domNode, node);\n      var map = this.get('map');\n      this.gallery = new BasemapGallery({\n        map: map,\n        showArcGISBasemaps: true\n      }, this.bmNode);\n      this.gallery.startup();\n      this.gallery.on('selection-change', lang.hitch(this, function() {\n        this.recenter(); \/\/ MIXIN MAGIC\n   </span>}));</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>