Devenir tactile

ReneRubalcava

<\/HEAD>

<\/P>

Avez-vous déjà travaillé avec votre belle et brillante carte web mobile et essayé de faire un dessin ou de sélectionner un élément à l'écran pour vous rendre compte que vous ne pouvez pas dire où vos doigts gros<\/SPAN> ont touché la carte ? Ne serait-ce pas génial si vous pouviez d'une manière ou d'une autre obtenir un retour sur la façon dont vous interagissez avec la carte ? Je vais vous révéler un secret, c'est assez facile à faire<\/EM>.<\/P><\/P>Toucher et ressentir<\/H2>Il y a quelque temps, un utilisateur m'a dit qu'il avait du mal à savoir s'il cliquait sur la carte là où il pensait. Les écrans tactiles des appareils mobiles peuvent parfois être capricieux et j'ai vu certains appareils plus lents se tromper jusqu'à un pouce sur l'endroit où vous pensiez toucher l'écran.<\/P><\/P>Pour gérer cela, j'ai créé un TouchWidget<\/A>. Ce que fait ce widget est simplement d'écouter les événements de clic sur la carte et d'ajouter un petit cercle, puis après environ une demi-seconde, de supprimer le marqueur. L'idée n'est pas trop difficile, mais cela peut être un peu brusque de simplement afficher et masquer un marqueur. Vous pouvez donc utiliser certains des modules graphiques dans Dojo<\/A> pour rendre la transition un peu plus agréable. Voici un petit tutoriel sympa<\/A> sur le travail avec les animations Dojo.<\/P>

Voici le code source pour le 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('Vous devez fournir un objet map pour utiliser TouchWidget');
      }
      if (this.map.loaded) {
        this._init();
      } else {
        on.once(this.map, 'load', hitch(this, '_init'));
    },
    \/\/- méthodes du widget
    _fxArgs: function(graphic) {
      return {
        node: graphic.getNode(),
        duration: this.delay,
        easing: easing.expoOut
    } ;
 } ,
& nbsp ; _fxToCombine : function ( graphicOuter , graphicInner ) { 
& nbsp ; & nbsp ; return [ 
& nbsp ; & nbsp ; & nbsp ; coreFx.fadeOut ( this._fxArgs ( graphicOuter ) ) , 
& nbsp ; & nbsp ; & nbsp ; coreFx.fadeOut ( this._fxArgs ( graphicInner ) ) 
& nbsp ; & nbsp ; ] ; 
& nbsp ; } , 
& nbsp ; _onAspectAfterEnd : function ( graphicOuter , graphicInner ) { 
& nbsp ; & nbsp ; return lang.hitch ( this , function () { 
& nbsp ; & nbsp ; & nbsp ; this.touchLayer.remove ( graphicOuter ) ; 
& nbsp ; & nbsp ; & nbsp ; this.touchLayer.remove ( graphicInner ) ; 
& nbsp ; & nbsp ; } ) ; 
& nbsp ; } , 
& nbsp ; _onTimeOut : function ( graphicOuter , graphicInner ) { 
& nbsp ; & nbsp ; return hitch ( this , function () { 
& nbsp ; & nbsp ; & nbsp ; var combined = this._fxToCombine ( graphicOuter , graphicInner ) ; 
& nbsp ; & nbsp ; & nbsp ; var f = fx.combine ( combined ) ; 
& nbsp ; & nbsp ; & nbsp ; this.own ( aspect.after ( f , 'onEnd' , hitch ( this , this._onAspectAfterEnd ( graphicOuter , graphicInner ) ) ) ) ; 
& nbsp ; & nbsp ; & nbsp ; f.play () ; 
& nbsp ; & nbsp ; } ) ; 
& nbsp ; } , 
& nbsp ; _onTouchClick : function ( e ) { 
& nbsp ; & nb sp;; var graphicOuter = new Graphic(e.mapPoint, this._symOuter); 
& nb sp;; var graphicInner = new Graphic(e.mapPoint, this._symInner); 
& nb sp;; this.touchLayer.add(graphicOuter); 
& nb sp;; this.touchLayer.add(graphicInner); 
& nb sp;; setTimeout(hitch(this, this._onTimeOut(graphicOuter, graphicInner)), this.delay); 
& nb sp;; }, 
& nb sp;; \ /\ / private methods
& nb sp;; _init: function() { 
& nb sp;; \ tthis.map.addLayer(this.touchLayer); 
& nb sp;; \ tthis.set('loaded', true); 
& nb sp;; \ tthis.emit('load', {}); 
& nb sp;; \ t// set up touch handlers
& nb sp;; \ tthis.own(on(this.get('map'), a11yclick.click, hitch(this, '_onTouchClick'))); 
& nb sp;; } 
});
define([
'this code block is very long and complex and contains code that should remain unchanged as it is programming code and not natural language text to translate. The user did not specify to translate code comments or code itself so I will keep the code block as is in the translation.'

<\/P>

Ce que fait ce widget est de configurer un symbole graphique intérieur et extérieur. La taille de ces symboles peut être définie via les paramètres passés au widget. Il ajoute également sa propre couche pour afficher ces fonctionnalités afin que vous n'ayez pas à vous soucier des conflits avec ce qui peut se passer sur la GraphicsLayer par défaut de la carte.<\/P>

<\/P>

Animation des nœuds<\/H2>La bibliothèque dojo/fx ne sait pas ce qu'est un Graphic de la bibliothèque Esri, vous devrez donc obtenir le nœud DOM réel du Graphic pour interagir avec lui. Vous pouvez le faire via la méthode graphic.getNode()<\/STRONG>. Maintenant vous pouvez configurer un délai en utilisant setTimeout<\/STRONG> pour supprimer en douceur le marqueur tactile de la carte. Vous devez simplement transmettre les graphiques dans cette chaîne de méthodes afin qu'ils soient correctement éliminés.<\/P><\/P>Vous pouvez voir comment ce TouchWidget fonctionne dans cette démo<\/A>.<\/P>

<\/P>

N'hésitez donc pas à toucher vos cartes et à devenir plus interactif. Consultez <A href="http:\/\/odoe.net\/blog\/