Vytvořte vlastní widgety pro vaši webovou aplikaci... úvod

RiccardoKlinger2

<\/HEAD>

Práce s GIS někdy vede k poměrně pokročilým pracovním postupům, modelům a podobně. Dalším krokem může být: Jak tyto nástroje sdílet, aby s nimi mohly pracovat i jiné strany a lidé? Existuje několik přístupů, jak to udělat:<\/P>

• publikovat Geoprocessing jako Web Tool.<\/LI>
• ArcGIS JavaScript API<\/LI>
• Widgety pro Web AppBuilder<\/LI><\/UL>

  V tomto blogovém příspěvku bych rád popsal poslední přístup a vytvořil přizpůsobitelný Widget pro Web AppBuilder.<\/P>

  Web AppBuilder Dev Edition<\/H3>Můžete se ptát, proč potřebuji Web AppBuilder Dev Edition<\/A> (zkráceně: WAB)? Protože budeme vytvářet widget, je vždy dobré řešení otestovat před jeho publikováním jako vlastní aplikace na AGOL. S Web AppBuilder Dev Edition můžeme použít šablonové widgety a testovat widgety lokálně na serveru (nebo na zdroji, který má pěknou doménu...)<\/P>

  WAB běží na

  Node.js<\/A>, ale momentálně je dostupný pouze pro Windows.<\/P>

  Jakmile je rozbalený a nakonfigurovaný s vaším ArcGIS účtem (připojte se k Portal for ArcGIS, vytvořte aplikaci na vašem Portalu, zaregistrujte aplikaci u vašeho Portalu), jste připraveni začít:<\/P>

  <\/P>

  <\/P>

  Postupujte podle kroků definovaných v

  sekci Začínáme<\/A>.<\/P>

  Účel Widgetu<\/H3>Pro tento úvod bych rád vytvořil widget, který zobrazuje měřítko i aktuální úroveň přiblížení mapy. Samozřejmě je to jakési vylepšení standardního Scalebar Widgetu. Proto nejprve ukážu samostatný způsob a později popíšu vylepšení výchozího Scalebar widgetu, aby dělal totéž: Zobrazoval nejen měřítko, ale také úroveň přiblížení a měřítko podkladové mapy.<\/P>Struktura Widgetu<\/H3>Widget sám o sobě se skládá z několika souborů, které jsou popsány níže:<\/P>JavaScriptový soubor, který definuje funkci widgetu (Widget.js<\/EM>)<\/LI>Šablonový soubor, který definuje uživatelské rozhraní widgetu (Widget.html<\/EM>)<\/LI>Konfigurační soubor widgetu (config.json<\/EM>)<\/LI>Manifestový soubor widgetu potřebný pro publikování (manifest.json<\/EM>)<\/LI>Soubor s i18n<\/A> řetězci pro internacionalizaci textů, pokud je potřeba (nls\/strings.js<\/EM>)<\/LI>Stylový soubor widgetu, pokud jste fancy guy and like<\/A> zaoblování hranic, obrázky na pozadí, posuvníky a kruhy (css\/style.css<\/EM>)<\/LI><\/UL>Konečná struktura vašeho widgetu by měla vypadat nějak takto:<\/P><\/P>Jak jste si možná všimli, struktura také obsahuje složku nazvanou setting.<\EM> Protože chceme přizpůsobit chování našeho widgetu, musíme definovat některá nastavení a pracovat s nimi.<\/P>

  Kód<\/H3>Pojďme projít soubory. Umožníme uživateli definovat, zda chce vidět měřítko, úroveň přiblížení nebo obojí. To se provádí v setting.html<\/P>Setting.html \/ Setting.js<\/H4>Tedy zobrazíme dvě zaškrtávací políčka. Jelikož mám rád čisté Vanilla (a nepodařilo se mi rozchodit dijit checkboxes 😉<\span>) používáme HTML input checkboxes:<\P><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\SPAN>div<\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>>Úroveň přiblížení info<\div> &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>row<SPAN class="punctuation token">"</SPAN></SPAN>> &nbsp;&nbsp;&nbsp; <input type=checkbox id=ZoomSetCheckbox></input> &nbsp;&nbsp;&nbsp; <p style=display:inline>Zobrazit info o přiblížení<\p> &nbsp; <\div> &nbsp; <div class= row> &nbsp;&nbsp;&nbsp; <input type=checkbox id=ScaleSetCheckbox></input> &nbsp;&nbsp;&nbsp; <p style=display:inline>Zobrazit přibližné měřítko<\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>Ale protože se jedná o widget a chceme uložit výchozí nastavení do konfiguračního souboru nazvaného config.json, musíme propojit setting.htmls konfiguračním souborem pomocí soubor settings.js <\/EM>.<\/P>Proto nebudeme používat pouze id tlačítek (každý widget může mít položky se stejnými id...), ale také data konektory:<\/P><<\/SPAN>div<\/SPAN>><\/SPAN><\/SPAN>
  <<\/SPAN>div<\/SPAN> class<\/SPAN>=<\/SPAN>"<\/SPAN>title"<\/SPAN><\/SPAN>><\/SPAN><\/SPAN>Informace o úrovni přiblížení<\/<\/span>div<\/span>><\/span><\/span>
  <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>row"<\/span><\/span>><\/span><\/span>
    <<\/span>input<\/span> type<\/span>=<\/span>"<\/span>checkbox"<\/span><\/span> id<\/span>=<\/span>"<\/span>ZoomSetCheckbox(<\/SPAN>config)<\/SPAN>{<\/SPAN>
               this<\/SPAN>.<\/SPAN>config =<\/SPAN> config;<\/SPAN>
               this<\/SPAN>.<\/SPAN>ZoomSetCheckbox.<\/SPAN>checked =<\/SPAN> config.<\/SPAN>settings.<\/SPAN>ZoomSetCheckbox;<\/SPAN>
               this<\/SPAN>.<\/SPAN>ScaleSetCheckbox.<\/SPAN>checked =<\/SPAN> config.<\/SPAN>settings.<\/SPAN>ScaleSetCheckbox;<\/SPAN>
               console.<\/SPAN>log<\/SPAN>(<\/SPAN>"nastavení načtena ze souboru: "<\/SPAN>)<\/SPAN>;<\/SPAN>
               console.<\/SPAN>log<\/SPAN>(<\/SPAN>config)<\/SPAN>;<\/SPAN>
          }<\/SPAN>,<\/span>
     getConfig:<\/span> function(){
  settings = this.config.settings;
  <if> (this.ZoomSetCheckbox) {
  & & settings.ZoomSetCheckbox = this.ZoomSetCheckbox.checked;
  </if>
  <if> (this.ScaleSetCheckbox) {
  & & settings.ScaleSetCheckbox = this.ScaleSetCheckbox.checked;
  </if>
  this.config.settings = settings;
  console.log("nastavení zapsána do souboru: " + settings);
  console.log(Toto čte stavy tlačítek (this.XXXSetCheckbox) a zapisuje je do konfigurace pro každou aplikaci, ve které se používá, a načítá konfiguraci podle použitých nastavení.
Widget.html / Widget.js
Jak jsme pokryli nastavení v předchozím odstavci, zaměřme se na hlavní kód v souborech Widget.html a Widget.js.
Zobrazujeme pouze dva řádky ve widgetu: jeden řádek pro Zoom Level, jeden pro Scale. Proto je soubor Widget.html velmi krátký a sestává ze 2 řádků:

Úroveň přiblížení:
Přibližné měřítko: "<\/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>Můžete vidět podobný přístup jako v Setting.html<\/EM>: Používáme data-dojo-attach-points pro přístup k elementu div a změnu obsahu tohoto divu. Mohli bychom to udělat inline, ale držíme se struktury a definujeme část JavaScript v 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> // protože měníme div, když je mapa posunuta "on.extent-change"<\/SPAN>
    'esri\/_map'<\/Span> // protože interagujeme s mapou<\/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() {
 scale = esri.geometry.getScale(this.map);
 var json = this.config; // načíst konfiguraci
 if (json.settings.ZoomSetCheckbox) { // zobrazit Zoom Info nastaveno na true
 this.MapZoomInfo.innerHTML = this.map.getZoom(); // změnit vnitřní HTML s informacemi o Zoom
 } else {
 dojo.destroy(this.zoomInfoDiv); // odstranit div, aby to vypadalo čistě, pokud není požadováno
 }
 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> jinak<\/SPAN> {<\/SPAN>\n                    dojo.<\/SPAN>destroy<\/SPAN>(<\/SPAN>this<\/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 >< < EM O J I _ 1 9 > > < \/ S P A N > < S P A N > < < E M O J I _ 2 0 > > < \/ S P A N > < S P A N > < < E M O J I _ 2 1 > > < \/ S P A N > < S P A N > < < E M O J I _ 2 2 > > < \/ S P A N > < S P A N > < < E M O J I _ 2 3 > > < \/ S P A N > < S P A N > < < E M O J I _ 2 4 > > < \/ S P A N > < S P A N > < < E M O J I _ 2 5 > > < \/ S P A N > < S P A N > < < E M O J I _ 2 6 > > < \/ S P A N > < S P A N > < < E M O J I _ 2 7 > > < \/ S P A N > < S P A N > < < E M O J I _ 2 8 > > < \/ S P A N > < S P A N > < < E M O J I _ 2 9 > > < \/ S P A N > < S P A N > < < E M O J I _ 3 0 > > < \/ S P A N > < S P A N > < < E M O J I _ 3 1 > > < \/ S P A N > < S P A N >< << EMOJ I _32 >> </ SPAN >< SPAN >< << EMOJ I _33 >> </ SPAN ></ SPAN ></ CODE ></ PRE >< H3 id = "toc-hId--800563879" id = "toc-hId--800563879" > Manifest.json </ H3 >< P > Pro implementaci nové vlastní aplikace ve webové aplikaci musíme vytvořit soubor nazvaný < EM > manifest.json. </ EM>Tento soubor obsahuje základní informace o názvu a hlavních nastaveních:< /P >< PRE class = "lia-code-sample line-numbers language-none" >< CODE>{\n  "name": "ZoomLevelInfo",\n  "platform": "HTML",\n  "version": "2.8",\n  "wabVersion": "2.8",\n  "author": "Esri Deutschland GmbH // Riccardo Klinger",\n  "description": "Toto je widget pro zobrazení měřítka a úrovně přiblížení podkladové mapy.",\n  "copyright": "",\n  "license": "http://www.apache.org/licenses/LICENSE-2.0",\n  "properties": {\n  & nbsp; & nbsp; & nbsp; "inPanel": false, // protože je mimo panel\n  & nbsp; & nbsp; & nbsp; "hasUIFile": true, // máme soubor nastavení uživatelského rozhraní\n  & nbsp; & nbsp; & nbsp; "supportMultiInstance": false´// povolujeme pouze jednu instanci widgetu.\n  } \n}< SPAN class = "line-numbers-rows" >< SPAN >< << EMOJ I _34 >> </ SPAN >< SPAN >< << EMOJ I _35 >> </ SPAN >< SPAN >< << EMOJ I _36 >> </ SPAN >< SPAN >< << EMOJ I _37 >> </ SPAN >< SPAN >< << EMOJ I _38 >> </ SPAN >< SPAN >< << EMOJ I _39 >> </ SPAN >< SPAN >< << EMOJ I _40 >> </ SPAN >< SPAN >< << EMOJ I _41 >> </ SPAN >< SPAN >< << EMOJ I _42 >> </ SPAN >< SPAN >< << EMOJ I _43 >> </ SPAN >< SPAN >< << EMOJ I _44 >> </ SPAN >< SPAN >< << EMOJ I _45 >> </ SPAN >< SPAN >< << EMOJ I _46 >> </ SPAN >< SPAN >< << EMOJ I _47 >> </ SPAN >< SPAN >< << EMOJ I _48 >> </ SPAN ></ SPAN ></ CODE ></ PRE >< P>Nyní můžeme widget otestovat.< /P >< H3 id = "toc-hId-942246456" id = "toc-hId-942246456" > Testování widgetu </ H3 >< P>Při vytvoření hlavního widgetu bychom jej nyní měli otestovat v naší instalaci WAB Developer. Proto umístěte celou složku (v našem případě ZoomLevelInfo) do složky klientských widgetů WAB (v mém případě „C:\WebAppBuilderForArcGIS\client\stemapp\widgets“).< /P >< P>K testování restartujte Web AppBuilder a vytvořte novou aplikaci:< /P >< P >< IMG alt = "nová aplikace ve vývojové edici WAB" class = "image-8 jive-image j-img-original" src = "https://us.v-cdn.net/6038851/uploads/legacyfs/online/411070_2018-06-11%2016_10_22-vsdev2319%20-%20172.16.150.141%20-%20Remotedesktopverbindung.png" / >Nyní je widget součástí Web AppBuilderu a lze jej vybrat jako widget:< /P >< IMG alt = "" class = "image-9 jive-image j-img-original" src = "https://us.v-cdn.net/6038851/uploads/legacyfs/online/411077_2018-06-11%2017_21_13-vsdev2319%20-%20172.16.150.141%20-%20Remotedesktopverbindung.png" / > Hostování widgetu </ H3 >Pokud byly vaše testy úspěšné, můžete widget hostovat na serveru a implementovat jej v ArcGIS Online nebo ve vašem prostředí ArcGIS Enterprise (>10.5) jako vlastní widget. Pokud vlastníte portál, možná budete chtít také přidat složku uvnitř WAB portálu (v mém případě „C:\Program Files\ArcGIS\Portal\apps\webappbuilder\stemapp\widgets“).< /P > Stažení příkladu </ H3 >Pokud chcete použít příklad, použijte github zde. Nebo si jej stáhněte přímo níže.< /P >