Crie Widgets Personalizados para seu Web App... uma introdução

RiccardoKlinger2

<\/HEAD>

Trabalhar com um GIS às vezes resulta em fluxos de trabalho, modelos e assim por diante bastante avançados. O próximo passo pode ser: Como compartilhar essas ferramentas para que outras partes e pessoas possam trabalhar com elas? Existem múltiplas abordagens para isso:<\/P>

• publicar Geoprocessamento como uma Ferramenta Web.<\/LI>
• ArcGIS JavaScript API<\/LI>
• Widgets para o Web AppBuilder<\/LI><\/UL>

  Neste post do blog, gostaria de descrever a última abordagem e criar um Widget personalizável para o Web AppBuilder.<\/P>

  Web AppBuilder Dev Edition<\/H3>Você pode se perguntar, por que eu preciso do Web AppBuilder Dev Edition<\/A> (abreviado: WAB)? Como vamos criar um widget, é sempre bom testar a solução antes de publicá-la como uma aplicação customizada no AGOL. Com o Web AppBuilder Dev Edition podemos usar widgets modelo e testar os widgets localmente em um servidor (ou um recurso que tenha um domínio decente...)<\/P>

  O WAB roda no

  Node.js<\/A>, mas está disponível apenas para Windows no momento.<\/P>

  Uma vez descompactado e configurado com sua conta ArcGIS (conecte-se ao Portal for ArcGIS, crie um App no seu Portal, registre o App com seu Portal), você está pronto para começar:<\/P>

  <\/P>

  <\/P>

  Siga os passos definidos na

  seção Comece aqui<\/A>.<\/P>

  O Propósito do Widget<\/H3>Para esta introdução, gostaria de criar um widget que mostre a escala assim como o nível atual de zoom de um mapa. Claro que é uma espécie de aprimoramento do Widget padrão Scalebar. Portanto, primeiro mostrarei a forma independente e depois descreverei o aprimoramento do widget Scalebar padrão para fazer o mesmo: Mostrar não apenas a Barra de Escala, mas também mostrar o nível de zoom assim como a escala do mapa subjacente.<\/P>A Estrutura de um Widget<\/H3>Um Widget consiste em vários arquivos que são descritos abaixo:<\/P>O arquivo JavaScript que define a função do widget (Widget.js<\/EM>)<\/LI>O arquivo template que define a interface do usuário do widget (Widget.html<\/EM>)<\/LI>O arquivo de configuração do widget (config.json<\/EM>)<\/LI>O arquivo manifesto do widget que é necessário para publicação (manifest.json<\/EM>)<\/LI>O arquivo de strings i18n<\/A> do widget para internacionalização das strings se necessário (nls\/strings.js<\/EM>)<\/LI>O arquivo de estilo do widget se você for um cara chique e gostar de bordas arredondadas, imagens de fundo, sliders e círculos (css\/style.css<\/EM>)<\/LI><\/UL>No final, a estrutura do seu widget deve parecer algo assim:<\/P><\/P>Como você pode ter notado, a estrutura também contém uma pasta chamada setting.<\EM> Como queremos personalizar o comportamento do nosso widget, precisamos definir algumas configurações e interagir com elas.<\/P>O Código<\/H3>Vamos passar pelos arquivos. Permitiremos que o usuário defina se ele ou ela gostaria de ver a escala, o nível de zoom ou ambos. Isso é feito no setting.html<\P>O Setting.html / Setting.js<\H4>Portanto, mostraremos duas Caixas de Seleção. Como eu gosto delas simples Vanilla (e não consegui fazer as caixas dijit funcionarem 😉) usamos caixas de seleção input HTML:<\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="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>Nível de Zoom 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 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"><</SPAn >input</SPAn > <SPAn class= "attr-name token">type</SPAn ><SPAn class= "attr-value token"><SPAn class= "punctuation token">=</SPAn ><SPAn class= "punctuation token">"</SPAn >checkbox<SPAn class= "punctuation token">"</SPAn ></SPAn > <SPAn class= "attr-name token">id</SPAn ><SPAn class= "attr-value token"><SPAn class= "punctuation token">=</SPAn ><SPAn class= "punctuation token">"</SPAn >ZoomSetCheckbox<SPAn class= "punctuation token">"</SPAn ></SPAn ><SPAn class= "punctuation token">></SPAn ></SPAn ><SPAn class= "token tag"><SPAn class= "token tag"><SPAn class= "punctuation token"></</SPAn >input</SPAn ><SPAn class= "punctuation token">></SPAn ></SPAn > &nbsp;&nbsp;&nbsp; <SPAn class= "token tag"><SPAn class= "token tag"><SPAn style-attr language-css token">< SPAN attr-name style >style=< SPAN attr-value >display:inline </ SPAN ></ SPAN ></ SPAN >< SPAN punctuation >></ SPAN >Mostrar Info Zoom < SPAN tag >< /p ></ SPAN > &nbsp; < SPAN tag >< /div ></ SPAN > &nbsp; < SPAN tag >< div  class =  row  &gt ; &nbsp;&nbsp;&nbsp; < SPAN tag >< input  type =  checkbox  id =  ScaleSetCheckbox  &gt ; < /input > &nbsp;&nbsp;&nbsp; < p style =  display:inline  &gt ; Mostrar Escala Aproximada < /p > &nbsp; < /div > < /div >< < EMOJI_1 > < span  class =  line-numbers-rows >< 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 >< < EMOJI_12 > < /span ></ span ></ CODE ></ PRE >< P >Mas como este é um widget e gostaríamos de armazenar as configurações padrão em um arquivo chamado config.json, precisamos conectar o setting.html com o arquivo de configuração usando o arquivo <EM>settings.js <\/EM>.<\/P><P>Portanto, não usaremos apenas os ids dos botões (cada widget pode ter itens com ids idênticos...), mas também conectores de dados:<\/P><PRE class="lia-code-sample line-numbers language-none"><CODE><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>Informação do Nível de Zoom<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"><<\/span>input<\/span> <span class="attr-name token">type<\/span><span class="attr-value token"><span class="punctuation token">=<\/span><span class="punctuation token">"<\/span>checkbox<SPAN class="punctuation token">"<\/span><\/span> <span class="attr-name token">id<\/span><span class="attr-value token"><span class="punctuation token">=<\/span><span class="punctuation token">"<\/span>ZoomSetCheckbox<SPAN class="punctuation token">"<\/span><\/span> <span class="attr-name token">data-dojo-attach-point<\/span><span class="attr-value token"><span class="punctuation token">=<\/span><span class="punctuation token">"<\/span>ZoomSetCheckbox<SPAN class="punctuation token">"<\/span><\/span><Span Class = "Punctuation Token "> > <\ / Span > <Span Class = "Token Tag "> <Span Class = "Token Tag "> <Span Class = "Punctuation Token "> < \/ <\ / Span > Input <\ / Span > <Span Class = "Punctuation Token "> > <\ / Span > <\ / Span > &nbsp;&nbsp;&nbsp; <Span Class = "Token Tag "> <Span Class = "Token Tag "> <Span Class = "Punctuation Token "> < p <\ / Span > <Span Class = "Style-Attr Language-Css Token "> <Span Class = "Attr-Name Token "> Style </ Span > </ Span > <Span Class = "Punctuation Token "> = " </ Span > <Span Class = "Attr-Value Token "> <Span Class = "Property Token "> Display </ Span > : Inline </ Span > <Span Class = "Punctuation Token "> " </ Span > </ Span > <Span Class = "Punctuation Token "> > </ Span > Mostrar Informação de Zoom <Span Class = "Token Tag "> <Span Class = "Token Tag "> <Span Class = "Punctuation Token "> < \ / p </ Span > </ Span > <Span Class = "Punctuation Token "> > </ Span > </ Span > &nbsp; <Span Class = "Token Tag "> <Span Class = "Token Tag "> <Span Class = "Punctuation Token "> < \ / div </ Span > </ Span > <Span Class = "Punctuation Token "> > </ Span > </ Span > &nbsp; <Span Class = "Token Tag "> <Span Class = "Token Tag "> <Span Class = "Punctuation Token "> < 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" ><</ span >input</ span >< span class= "attr-name token" >type</ span >< span class= "attr-value token" >< span class= "punctuation token" >=</ span >< span class= "punctuation token" >"</ span >checkbox<span class= "punctuation token" >"</ span ></ span >< span class= "attr-name token" >id</ span >< span class= "attr-value token" >< span class= "punctuation token" >=</ span >< span class= "punctuation token" >"</ span >ScaleSetCheckbox<span class= "punctuation token" >"</ span ></ span >< span class= "attr-name token" >data-dojo-attach-point</ span >< span class= "attr-value token" >< span class= "punctuation token" >=</ span >< span class= "punctuation token" >"</ span >ScaleSetCheckbox<span class= "punctuation token" >"</ span ></ span >< span Punctuation Token &gt ; &lt ; / input &gt ; &lt ; / SPAN &gt ; &nbsp;&nbsp;&nbsp; SPAN CLASS TOKEN STYLE - ATTR LANGUAGE - CSS TOKEN P STYLE DISPLAY : INLINE P SHOW APPROX. SCALE SPAN TOKEN TAG SPAN TOKEN TAG P P SPAN PUNCTUATION TOKEN GT SPAN &nbsp; SPAN TOKEN TAG SPAN TOKEN TAG SPAN PUNCTUATION TOKEN LT / DIV SPAN PUNCTUATION TOKEN GT SPAN SPAN TOKEN TAG SPAN TOKEN TAG SPAN PUNCTUATION TOKEN LT / DIV SPAN PUNCTUATION TOKEN GT SPAN ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<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>Agora podemos comunicar com os estados dos botões.<\/P>O arquivo setting.js tem duas funções principais: ler e gravar as configurações no arquivo config.json para que o widget sempre use as configurações corretas em um novo app.<\/P>As configurações no arquivo config.json<\/EM> devem ser definidas da seguinte forma:<\/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>
  Como é visível, o estado padrão do widget é habilitar ambas as checkboxes. Os estados da configuração podem ser definidos e lidos usando duas funções: getConfig e setConfig (baixe o zip no final do post para obter o script completo):<\/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>"configurações lidas do arquivo: "<\/SPAN>)<\/SPAN>;<\/SPAN>\n               console.<\/SPAN>log<\/SPAN>(<\/SPAN>config)<\/SPAN>;<\/SPAN>\n         \n    },\n getConfiginline;""<\/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>Você pode ver uma abordagem semelhante como no Setting.html<\/EM>: Usamos data-dojo-attach-points para acessar o elemento div e alterar o conteúdo deste div. Poderíamos fazer isso inline, mas mantemos a estrutura e definimos a parte JavaScript no 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> //como alteramos o div quando o mapa é movido "on.extent-change"<\/SPAN>
    'esri\/_map'<\/SPAN> //como interagimos com o mapa<\/SPAN>
]<\/Span>,<\/span>
  function<\/span>(<\/span>declare,<\/span> lang,<\/span> BaseWidget,<\/span> on,<\/span> Map)<\/span> {<\/span>
     return<\/span> declare<\/span>(<\/span>[<\/span>BaseWidget]<\/span>,<\/span> {<\/span>
          baseClass:<\/span> 'jimu-widget-zoomlevelinfo'<\/span>,<\/span>
          postCreate:<\/span> function<\/span>(<\/span>)<\/span> {<\/span>
               this<\/span>.<\/span>inherited<\/span>(<\/span>arguments)<\/span>;<\/span>
               this<\/span>.<\/span>own<\/span>(<\/span>on<\/span>(<\/span>this<\.map,</spa... (truncated for brevity) ... class="number token">1000<\/SPAN>)<\/SPAN>*<\/SPAN>1000<\/SPAN> ;<\/SPAN>
               }<\/SPAN> else<\/SPAN> {<\/SPAN>
                    dojo.<\/SPAN>destroy<\/SPAN>(<\/SPAN>this<\/SPAN>.<\/SPAN>scaleInfoDiv)<\/SPAN>;<\/SPAN>
               }<\/SPAN>
          }<\/SPAN>
     }<\/SPAN>)<\/SPAN>;<\/SPAN>
}<\/SPAN>)<\/SPAN>;<\/SPAN>
‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/PAN...