Ficando sensível

ReneRubalcava

<\/HEAD>

<\/P>

Você já esteve trabalhando com seu mapa web móvel bonito e brilhante e tentando fazer algum tipo de desenho ou selecionar um item na tela só para perceber que não consegue dizer onde seus dedos gordos<\/SPAN> tocaram no mapa? Não seria legal se você pudesse de alguma forma obter algum feedback sobre como está interagindo com o mapa? Vou contar um segredo sujo, é bem fácil de fazer<\/EM>.<\/P><\/P>Sensível ao toque<\/H2>Há algum tempo, um usuário comentou que tinha problemas para saber se estava clicando no mapa onde pensava estar. As telas sensíveis ao toque em dispositivos móveis podem ser complicadas às vezes e eu já vi alguns dispositivos mais lentos estarem errados em até uma polegada de onde você achava que estava tocando na tela.<\/P><\/P>Para lidar com isso, eu criei um TouchWidget<\/A>. O que esse widget faz é simplesmente escutar eventos de clique no mapa e adicionar um pequeno círculo, depois de meio segundo mais ou menos, apagar o marcador. A ideia não é muito difícil, mas pode ser um pouco chocante apenas mostrar e esconder um marcador. Então você pode usar alguns dos módulos gráficos do Dojo<\/A> para tornar a transição um pouco mais agradável. Aqui está um tutorial legal<\/A> sobre como trabalhar com animações Dojo.<\/P>

Aqui está o código fonte do TouchWidget<\/P>

define([
  'esri\/layers\/GraphicsLayer',
  'esri\/graphic',
  'esri\/symbols\/SimpleMarkerSymbol',
  'dojo\/on', 'dojo\/fx', 'dojo\/_base\/fx', 'dojo\/fx\/easing',
  'dojo\/aspect', 'dojo\/_base\/Color',
  'dojo\/_base\/declare', 'dojo\/_base\/lang',
  'dijit\/_WidgetBase', 'dijit\/a11yclick'
], function(
  GraphicsLayer, Graphic, SimpleMarkerSymbol,
  on, fx, coreFx, easing, aspect, Color,
  declare, lang, _WidgetBase, a11yclick
  ) {
  'use strict';
  var hitch = lang.hitch;
  return declare([_WidgetBase], {
    postCreate: function() {
      this.set('delay', this.settings.delay || 500);
      this._symInner = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, this.settings.innerSize, null, new Color(this.settings.innerColor));
      this._symOuter = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, this.settings.outerSize, null, new Color(this.settings.outerColor));
      this.touchLayer = new GraphicsLayer();
    },
    startup: function() {
      if (!this.map) {
        this.destroy();
        throw new Error('Must provide a map object to use TouchWidget');
      }
      if (this.map.loaded) {
        this._init();
      } else {
        on.once(this.map, 'load', hitch(this, '_init'));
    },
    \/\/- métodos do widget
    _fxArgs: function(graphic) {
      return {
        node: graphic.getNode(),
        duration: this.delay,
        easing: easing.expoOut
 &nbsp.&nbpsp;};
&nbsp.&nbpsp;}},
&nbpsp;}},
&nbpsp;}},
&nbpsp;}},
&nbpsp;}},
&nbpsp;}},
&nbpsp;}},
&nbpsp;}},
&nbpsp;}},
&nbpsp;}},
&nbpsp;}},
define([
'touchLayer.remove(graphicOuter);\ntouchLayer.remove(graphicInner);\});\},\_onTimeOut:function(graphicOuter,graphicInner){return hitch(this,function(){var combined=this._fxToCombine(graphicOuter,graphicInner);var f=fx.combine(combined);this.own(aspect.after(f,'onEnd',hitch(this,this._onAspectAfterEnd(graphicOuter,graphicInner))));f.play();});},\_onTouchClick:function(e){var graphicOuter=new Graphic(e.mapPoint,this._symOuter);var graphicInner=new Graphic(e.mapPoint,this._symInner);this.touchLayer.add(graphicOuter);this.touchLayer.add(graphicInner);setTimeout(hitch(this,this._onTimeOut(graphicOuter,graphicInner)),this.delay);},\/_private methods\_init:function(){this.map.addLayer(this.touchLayer);this.set('loaded',true);this.emit('load',{});\/_set up touch handlersthis.own(on(this.get('map'),a11yclick.click,hitch(this,'_onTouchClick')));}});});<\/PRE><\/P>O que este widget está fazendo é configurar um símbolo gráfico interno e externo. O tamanho desses símbolos pode ser definido via os parâmetros passados para o widget. Ele também adiciona sua própria camada para exibir esses recursos para que você não precise se preocupar com conflitos com o que pode estar acontecendo na GraphicsLayer padrão do mapa.<\/P><\/P>

Animando nós<\/H2>A biblioteca dojo/fx não sabe o que é um Graphic da biblioteca Esri, então você precisará obter o nó DOM real do Graphic para interagir. Você pode fazer isso através do método graphic.getNode()<\/STRONG>. Agora você pode configurar um atraso usando setTimeout<\/STRONG> para remover graciosamente o marcador de toque do mapa. Você só precisa passar os gráficos nessa cadeia de métodos para que sejam descartados corretamente.<\/P><\/P>Você pode ver como este TouchWidget funciona em esta demonstração<\/A>.<\/P>

<\/P>

Então sinta-se à vontade para tocar seus mapas e torná-los mais interativos. Confira <A href="http:\/\/odoe.net\/blog\/