Maak aangepaste widgets voor je webapp... een introductie

RiccardoKlinger2

<\/HEAD>

Werken met een GIS resulteert soms in behoorlijk geavanceerde workflows, modellen enzovoort. De volgende stap kan zijn: Hoe kunnen deze tools gedeeld worden zodat andere partijen en mensen ermee kunnen werken? Er zijn meerdere benaderingen om dit te doen:<\/P>

• Geoprocessing publiceren als een Web Tool.<\/LI>
• ArcGIS JavaScript API<\/LI>
• Widgets voor de Web AppBuilder<\/LI><\/UL>

  In deze blogpost wil ik de laatste benadering beschrijven en een aanpasbare Widget maken voor de Web AppBuilder.<\/P>

  Web AppBuilder Dev Edition<\/H3>Je vraagt je misschien af, waarom heb ik de Web AppBuilder Dev Edition<\/A> (kort: WAB) nodig? Omdat we een widget gaan maken is het altijd goed om de oplossing te testen voordat je deze publiceert als een aangepaste applicatie op AGOL. Met de Web AppBuilder Dev Edition kunnen we template widgets gebruiken en de widgets lokaal testen op een server (of een resource met een nette domeinnaam...)<\/P>

  WAB draait op

  Node.js<\/A> maar is momenteel alleen beschikbaar voor Windows.<\/P>

  Zodra het is uitgepakt en geconfigureerd met je ArcGIS-account (verbinden met Portal for ArcGIS, een app maken op je Portal, de app registreren bij je Portal) ben je klaar om te beginnen:<\/P>

  <\/P>

  <\/P>

  Volg de stappen die zijn gedefinieerd in de

  Get started sectie<\/A>.<\/P>

  Het Doel van de Widget<\/H3>Voor deze introductie wil ik een widget maken die zowel de schaal als het huidige zoomniveau van een kaart toont. Natuurlijk is het enigszins een verbetering van de standaard Scalebar Widget. Daarom zal ik eerst de standalone manier laten zien en later de verbetering van de standaard Scalebar widget beschrijven om hetzelfde te doen: Niet alleen de Scalebar tonen maar ook het zoomniveau evenals de schaal van de onderliggende kaart weergeven.<\/P>De Structuur van een Widget<\/H3>Een widget zelf bestaat uit verschillende bestanden die hieronder worden beschreven:<\/P>Het JavaScript-bestand dat de widgetfunctie definieert (Widget.js<\/EM>)<\/LI>Het templatebestand dat de gebruikersinterface van de widget definieert (Widget.html<\/EM>)<\/LI>Het configuratiebestand van de widget (config.json<\/EM>)<\/LI>Het manifestbestand van de widget dat nodig is voor publicatie (manifest.json<\/EM>)<\/LI>Het i18n<\/A>-stringsbestand van de widget voor internationalisering van strings indien nodig (nls\/strings.js<\/EM>)<\/LI>Het stijlbestand van de widget als je een fancy guy and like<\/A> border-rounding, achtergrondafbeeldingen, sliders en cirkels (css\/style.css<\/EM>)<\/LI><\/UL>Aan het einde zou de structuur van je widget er ongeveer zo uit moeten zien:<\/P><\/P>Zoals je misschien hebt gemerkt bevat de structuur ook een map genaamd setting.<\EM> Omdat we het gedrag van onze widget willen aanpassen, moeten we enkele instellingen definiëren en ermee interacteren.<\/P>

  De Code<\/H3>Laten we door de bestanden gaan. We laten de gebruiker bepalen of hij/zij wel of niet de schaal, het zoomniveau of beide wil zien. Dit wordt gedaan in setting.html<\/P>De Setting.html \/ Setting.js<\/H4>Daarom tonen we twee selectievakjes. Omdat ik het graag gewoon Vanilla houd (en ik kreeg de dijit-selectievakjes niet aan het werk  😉<\span>) gebruiken we HTML input selectievakjes:<\P><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\SPAN>div<\SPAN></SPAN></SPAN> &nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\SPAN>div</SPAN> <SPAN class="attr-name token">class</SPAN>=<SPAN class="punctuation token">"</SPAN>title<SPAN class="punctuation token">"</SPAN></SPAN>><\DIV> Zoom Level Info<SPAN class=\token tag\"><SPAN class=\token tag\"><SPAN class=\punctuation token\"></</SPAN>div</SPAN>></SPAN> &nbsp; <DIV class=\row\"> &nbsp;&nbsp;&nbsp; <INPUT type=\checkbox\ id=\ZoomSetCheckbox\></INPUT> &nbsp;&nbsp;&nbsp; <p style=\display:inline\">Toon Zoom Info</p> &nbsp; </DIV> &nbsp; <DIV class=\row\"> &nbsp;&nbsp;&nbsp; <INPUT type=\checkbox\ id=\ScaleSetCheckbox\></INPUT> &nbsp;&nbsp;&nbsp; <p style=\display:inline\">Toon Geschatte Schaal</p> &nbsp; </DIV> </DIV> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<span class=\line-numbers-rows\"><span‍ </span><span‍ </span><span‍ </span><span‍ </span><span‍ </span><span‍ </span><span‍ </span><span‍ </span><span‍ </span><span‍ </span><span‍ </span></span>Aangezien dit een widget is en we graag de standaardinstellingen willen opslaan in een configuratiebestand genaamd config.json, moeten we het setting.html verbinden met het configuratiebestand met behulp van het settings.js <\/EM>bestand.<\/P>Daarom zullen we niet alleen de ids van de knoppen gebruiken (elk widget kan items hebben met identieke ids...) maar ook data connectors:<\/P><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/SPAN>div<\/SPAN><SPAN class="punctuation token">><\/SPAN><\/SPAN> &nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/SPAN>div<\/SPAN> <SPAN class="attr-name token">class<\/SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=<\/SPAN><SPAN class="punctuation token">"<\/SPAN>title<SPAN class="punctuation token">"<\/SPAN><\/SPAN><SPAN class="punctuation token">><\/SPAN><\/SPAN>Zoom Level Info<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><\/<\/SPAN>div<\/SPAN><SPAN class="punctuation token">><\/SPAN><\/SPAN> &nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/SPAN>div<\/SPAN> <SPAN class="attr-name token">class<\/SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=<\/SPAN><SPAN class="punctuation token">"<\/SPAN>row<SPAN class="punctuation token">"<\/SPAN><\/SPAN><SPAN class="punctuation token">><\/SPAN><\/SPAN> &nbsp;&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/SAMPLINGinput<\/SAMPLING> <SAMPLINGtype<\/SAMPLING>=<SAMPLING"checkbox"<SAMPLINGid=\"ZoomSetCheckbox\" data-dojo-attach-point=\"ZoomSetCheckbox\"><SAMPLINGinput><SAMPLINGp style=\"display:inline\">Toon Zoom Info<SAMPLINGp> &nbsp; <SAMPLINGdiv class=\"row\"> &nbsp;&nbsp;&nbsp; <SAMPLINGinput type=\"checkbox\" id=\"ScaleSetCheckbox\" data-dojo-attach-point=\"ScaleSetCheckbox\"><SAMPLINGinput> &nbsp;&nbsp;&nbsp; <SAMPLINGp style=\"display:inline\">Toon Geschatte Schaal<SAMPLINGp> &nbsp; <SAMPLINGdiv> <SAMPLINGdiv><EMOJI_0><span class=\"line-numbers-rows\"><span><EMOJI_1></span><span><EMOJI_2></span><span><EMOJI_3></span><span><EMOJI_4></span><span><EMOJI_5></span><span><EMOJI_6></span><span><EMOJI_7></span><span><EMOJI_8></span><span><EMOJI_9></span><span><EMOJI_10></span><span><EMOJI_11></span></span>Nu kunnen we communiceren met de staten van de knoppen.<\/P>Het setting.js bestand heeft twee hoofdfuncties: het lezen en schrijven van de instellingen naar het config.json bestand zodat de widget altijd de juiste instellingen gebruikt in een nieuwe app.<\/P>De instellingen in het config.json<\/EM> bestand moeten als volgt worden ingesteld:<\/P>{ "settings": { "ZoomSetCheckbox": true, "ScaleSetCheckbox": true } }<EMOJI_12><span class=\"line-numbers-rows\"><span><EMOJI_13></span><span><EMOJI_14></span><span><EMOJI_15></span><span><EMOJI_16></span><span><EMOJI_17></span><span><EMOJI_18></span></span>Zoals zichtbaar is, is de standaardstatus van de widget om beide selectievakjes in te schakelen. De staten van de config kunnen worden ingesteld en gelezen met behulp van twee functies: getConfig en setConfig (download het zipbestand aan het einde van het bericht om het volledige script te krijgen):<\/P>define([ 'dojo/_base/declare', 'jimu/BaseWidgetSetting' ],
function(declare, BaseWidgetSetting) {
return declare([BaseWidgetSetting], {
startup: function() {
this.inherited(arguments);
console.log(this.config);
this.setConfig(this.config);
},
setConfig: function() { class="punctuation token">(<\/SPAN>config)<\/SPAN>{<\/SPAN>\n               this<\/SPAN>.<\/SPAN>config =<\/SPAN> config;<\/SPAN>\n               this<\/SPAN>.<\/SPAN>ZoomSetCheckbox.<\/SPAN>checked =<\/SPAN> config.<\/SPAN>settings.<\/SPAN>ZoomSetCheckbox;<\/SPAN>\n               this<\/SPAN>.<\/SPAN>ScaleSetCheckbox.<\/SPAN>checked =<\/SPAN> config.<\/SPAN>settings.<\/SPAN>ScaleSetCheckbox;<\/SPAN>\n               console.<\/SPAN>log<\/SPAN>(<\/SPAN>"instellingen gelezen uit bestand: "<\/SPAN>)<\/SPAN>;<\/SPAN>\n               console.<\/SPAN>log<\/SPAN>(<\/SPAN>config)<\/SPAN>;<\/SPAN>\n         \n    getConfig:<\/SPAN> function<\/SPAN>(<\/span>
){\n  & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; settings = < /span > < span class= "keyword token" > this < /span > . config < span class= "punctuation token" > . < /span > settings < span class= "punctuation token" > ; < /span > \n  & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; if < span class= "punctuation token" > ( < /span > this < span class= "punctuation token" > . < /span > ZoomSetCheckbox < span class= "punctuation token" > ) { < /span > \n  & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; settings < span class= "punctuation token" > . < /span > ZoomSetCheckbox < span class= "operator token" > = < /span > this < span class= "punctuation token" > . < /span > ZoomSetCheckbox < span class= "punctuation token" > . < /span > checked < span class= "punctuation token" > ; < /span > \n  & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;}\n  & nbsp; & nbsp; & nbsp; & nbsp;if (this.ScaleSetCheckbox) {\n  & nbsp; & nbsp; & nbsp; & nbsp; settings.ScaleSetCheckbox = this.ScaleSetCheckbox.checked ;\n }\n }\n if (this.ScaleSetCheckbox) {\n }\n }\n }\n }\n }\n }\n }\n }\n }\n }\n }\n }\n }\n }\n }\n }\n
This leest de status van de knop (this.XXXSetCheckbox) en schrijft deze in de config voor elke app waarin het wordt gebruikt en leest de configuratie volgens de gebruikte instellingen.
De Widget.html / Widget.jsZoals we de instellingen in de bovenstaande paragraaf hebben behandeld, laten we ons concentreren op de hoofdcode in de Widget.html en Widget.js.We tonen slechts twee regels in de widget: één regel voor het Zoomniveau, één voor de Schaal. Daarom is het bestand Widget.html erg kort en bestaat uit 2 regels:<div class="ZoomLeveLInfo">\n <div data-dojo-attach-point="zoomInfoDiv">Niveau Zoom: <p style=display: inline;" data-dojo-attach-point="MapZoomInfo"></p>






Ongeveer Schaal: token">"<\/SPAN><\/SPAN> data-dojo-attach-point<\/SPAN>=<\/SPAN>"<\/SPAN>scaleInfo"<\/SPAN><\/SPAN>><\/SPAN><\/SPAN><\/<\/SPAN>p<\/SPAN>><\/SPAN><\/SPAN><\/<\/SPAN>div<\/SPAN>><\/SPAN><\/SPAN>
<\/<\/SPAN>div<\/SPAN>><\/SPAN><\/SPAN>
‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN><\/SPAN><\/CODE><\/PRE>Je kunt een vergelijkbare aanpak zien als in de Setting.html<\/EM>: We gebruiken data-dojo-attach-points om toegang te krijgen tot het div-element en de inhoud van deze div te wijzigen. We zouden dit inline kunnen doen, maar we houden ons aan de structuur en definiëren het JavaScript-gedeelte in de Widget.js.<\/EM><\/P>define<\/SPAN>(<\/SPAN>[<\/SPAN>
    'dojo\/_base\/_declare'<\/SPAN>,<\/SPAN>
    'dojo\/_base\/_lang'<\/SPAN>,<\/SPAN>
    'jimu\/_BaseWidget'<\/SPAN>,<\/SPAN>
    'dojo\/_on'<\/SPAN>,<\/SPAN> // omdat we de div wijzigen wanneer de kaart wordt verschoven "on.extent-change"<\/SPAN>
    'esri\/_map'<\/Span> // omdat we met de kaart interageren<\/Span>
]<\/Span>,<\/Span>
  function<\/Span>(<\/Span>declare,<\/Span> lang,<\/Span> BaseWidget,<\/Span> on,<\/Span> Map)<\/Span> {<\/Span>
     return<\/Span> declare<\/Span>(<\/Span>[<\/Span>BaseWidget],
          baseClass: 'jimu-widget-zoomlevelinfo',
          postCreate: function(){
            this.inherited(arguments);
            this.own(on(this.map, 'extent-change', lang.hitch(this, this._zoomInfo)));
            this._zoomInfo();
     ,
   startup: function() {
   this.inherited(arguments);
},
_zoomInfo: function() {
var scale = esri.geometry.getScale(this.map);
var json = this.config; // lees de config
if (json.settings.ZoomSetCheckbox) { // toon Zoom Info ingesteld op true
this.MapZoomInfo.innerHTML = this.map.getZoom(); // wijzig de inner HTML met de Zoom Info
} else {
dojo.destroy(this.zoomInfoDiv); // verwijder de div zodat het er schoon uitziet als het niet gewenst is
}
if (json.settings.ScaleSetCheckbox) {
this.scaleInfo.innerHTML = "1:" + Math.round(this.map.getScale() / class="number token">1000<\/SPAN>)<\/SPAN>*<\/SPAN>1000<\/SPAN> ;<\/SPAN>\n               }<\/SPAN> anders<\/SPAN> {<\/SPAN>\n                    dojo.<\/SPAN>destroy<\/SPAN>(<\/SPAN>dit<\/SPAN>.<\/SPAN>scaleInfoDiv)<\/SPAN>;<\/SPAN>\n               }<\/SPAN>\n          }<\/SPAN>\n     }<\/SPAN>)<\/SPAN>;<\/SPAN>\n}<\/SPAN>)<\/SPAN>;<\/SPAN>\n‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/Span?>Het Manifest.json?P?Om de nieuwe custom app in een webapp te implementeren moeten we een bestand maken genaamd manifest.json.<\/em>?Dit bestand bevat de basisinformatie over de naam en de belangrijkste instellingen:{\n  "name": "ZoomLevelInfo",\n  "platform": "HTML",\n  "version": "2.8",\n  "wabVersion": "2.8",\n  "author": "Esri Deutschland GmbH \/ Riccardo Klinger",\n  "description": "Dit is een widget om schaal en zoomniveau van de onderliggende kaart te tonen.",\n  "copyright": "",\n  "license": "http:\/\/www.apache.org\/licenses\/LICENSE-2.0",\n  "properties": {\n   "inPanel": false, \/ as het off-panel is\n   "hasUIFile": true, \/ we hebben een instellingen ui-bestand\n   "supportMultiInstance": falseb4 \/ we staan slechts één instantie van de widget toe.\n  } \n}&lt<EMOJI_34&gt><\/span>?span>&lt<EMOJI_35&gt><\/span>?span>&lt<EMOJI_36&gt><\/span>?span>&lt<EMOJI_37&gt><\/span>?span>&lt<EMOJI_38&gt><\/span>?span>&lt<EMOJI_39&gt><\/span>?span>&lt<EMOJI_40&gt><\/span>?span>&lt<EMOJI_41&gt><\/span>?span>&lt<EMOJI_42&gt><\/span>?span>&lt<EMOJI_43&gt><\/span>?span>&lt<EMOJI_44&gt><\/span>?span>&lt<EMOJI_45&gt><\/span>?span>&lt<EMOJI_46&gt><\/span>?span>&lt<EMOJI_47&gt><\/span>?span>&lt<EMOJI_48&gt><\/span><?pre?>Nu kunnen we de widget testen.?H3 id=“toc-hId-942246456” id=“toc-hId-942246456”?>De Widget Testen?P?Nu we de hoofdwidget hebben gemaakt, moeten we deze nu testen in onze WAB Developer-installatie. Plaats daarom de hele map (in ons geval ZoomLevelInfo) in de client widget-map van de WAB (in mijn geval "C:\WebAppBuilderForArcGIS\client\stemapp\widgets").?P?Voor de test, start Web AppBuilder opnieuw op en maak een nieuwe applicatie aan:?P??P?De widget maakt nu deel uit van de Web AppBuilder en kan als widget worden geselecteerd:?P??H3 id=“toc-hId--1609910505” id=“toc-hId--1609910505”?>De Widget Host?P?Als je tests succesvol waren, kun je de widget hosten op een server en implementeren in ArcGIS Online of je ArcGIS Enterprise (>10.5) omgeving als een custom widget. Als je eigenaar bent van het portal, wil je misschien ook de map toevoegen binnen de WAB van het portal (in mijn geval "C:\Program Files\ArcGIS\Portal\apps\webappbuilder\stemapp\widgets").?H3 id=“toc-hId-132899830” id=“toc-hId-132899830”?>Download het Voorbeeld?P?Als je het voorbeeld wilt gebruiken, gebruik github hier. Of download het direct hieronder.?P?<\\BODY?><\\HTML>