EsriJS com ReactJS (atualizado)

ReneRubalcava

<\/HEAD>

<\/P>

Não faz muito tempo, eu fiz um post no blog<\/A> sobre o uso da ArcGIS JavaScript API com ReactJS<\/A> para widgets. Tenho conversado com algumas pessoas sobre React ultimamente, então pensei em revisitar o assunto aqui. A maior pergunta que você pode fazer é por que usar React<\/A>? Pessoalmente, acho que React tem uma API realmente elegante. Quando você começa a usá-lo e começa a perceber como é fácil compor seus componentes que formam a interface do usuário, eu acho que é aí que o React realmente brilha<\/EM>. Um recurso interessante do React é o uso de um DOM virtual<\/A>. Basicamente, se você atualizar o estado da sua aplicação na raiz, ele irá renderizar novamente todo o DOM da aplicação. Parece que seria lento, mas não é. Pode ser<\/EM>, se você fizer algo bobo como tentar criar um editor JSON muito grande<\/STRONG> **ahem**<\/EM>. Você pode ler mais sobre como as atualizações ocorrem aqui<\/A>.<\/P>

<\/P>

É tudo apenas DOM<\/H2>Se você está familiarizado com trabalhar com Dijits e o ciclo de vida do Dijit<\/A>, os componentes React têm um ciclo de vida semelhante<\/A>. Em ambos os casos é benéfico conhecê-los. React usa uma sintaxe opcional chamada JSX<\/A>. É importante lembrar que JSX é totalmente opcional<\/EM>. Algumas pessoas ficam muito preocupadas com a mistura de DOM com JavaScript, mas não é o caso. JSX é simplesmente usado para ajudar você a definir sua estrutura DOM. Ainda precisa ser compilado para JavaScript puro para funcionar no navegador e existem ferramentas<\/A> para isso<\/A>.<\/P>

<\/P>

Widgets para as massas<\/H2>O código-fonte da aplicação de exemplo está disponível aqui<\/A>. Não vou detalhar toda a aplicação, mas quero destacar os widgets.<\/P>

<\/P>

Primeiro, há um widget chamado Locator que simplesmente exibe as coordenadas do mapa do cursor.<\/P>

\/** @jsx React.DOM *\/
define([
  'react',
  'dojo/topic',
  'helpers/NumFormatter'
], function(
  React,
  topic,
  format
) {
  var fixed = format(3);
  var LocatorWidget = React.createClass({
    getInitialState: function() {
      return {
        x: 0,
        y: 0
      };
    },
    componentDidMount: function() {
      this.handler = this.props.map.on('mouse-move', function(e) {
        this.update(e.mapPoint);
      }.bind(this));
    },
    componentWillUnMount: function() {
      this.handler.remove();
    },
    update: function(data) {
      this.setState(data);
      topic.publish('map-mouse-move', data);
    },
    render: function() {
      return (
        <div className='well'>
          <label>x: {fixed(this.state.x)}</label>
          <br/>
&nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp: <label>y: {fixed(this.state.y)}</label>
 
  );
  }
});
return LocatorWidget;
});

Então este componente é bem simples. Ele apenas exibirá as coordenadas e usa

dojo/topic para publicar essas coordenadas para a aplicação. Eu já falei sobre dojo/topic antes. O próximo componente é um pouco mais interessante. Ele tem um botão que ativará uma ferramenta de desenho e um rótulo que exibirá a distância sendo desenhada.< /P>< /P>\/** @jsx React.DOM *\/
define([
  'react',
  'esri/toolbars/draw',
  'esri/geometry/geometryEngine',
  'dojo/topic',
  'dojo/on',
  'helpers/NumFormatter'
], function(
  React,
  Draw, geomEngine,
  topic, on,
  format
) {
  var fixed = format(3);
  var DrawToolWidget = React.createClass({
    getInitialState: function() {
      return {
        startPoint: null,
        btnText: 'Desenhar Linha',
        distance: 0,
        x: 0,
        y: 0
      };
    },
    componentDidMount: function() {
      this.draw = new Draw(this.props.map);
      this.handler = this.draw.on('draw-end', this.onDrawEnd);
      this.subscriber = topic.subscribe(
        'map-mouse-move', this.mapCoordsUpdate
      );
    },
    componentWillUnMount: function() {
      this.handler.remove();
      this.subscriber.remove();
    },
    onDrawEnd: function(e) {
      this.draw.deactivate();
      this.setState({
        startPoint: null,
        btnText: 'Desenhar Linha'
      });
    },
    mapCoordsUpdate: function(data) {
       this.setState(data);
       // não tenho certeza se gosto dessa verificação condicional
       if (this.state.startPoint) {
         this.updateDistance(data);
       }
    },
    updateDistance: function(endPoint) {
       var distance = geomEngine.distance(this.state.startPoint, endPoint);
       this.setState({ distance: distance });
    },
    drawLine: function() {
       this.setState({ btnText: 'Desenhando...' });
       this.draw.activate(Draw.POLYLINE);
       on.once(this.props.map, 'click', function(e) {
         this.setState({ startPoint: e.mapPoint });
         // muito hacky, mas a interação Draw.LINE é estranha de usar
         on.once(this.props.map, 'click', function() {
           this.onDrawEnd();
         }.bind(this));
       }.bind(this))
    },
    render: function() {
       return (
        
          
             {this.state.btnText}
          
          
          
             Distância: {fixed(this.state.distance)}
          
        
       );
    }
});
return DrawToolWidget;
});Este componente é um pouco mais complexo, mas ele usará o geometryEngine para calcular a distância entre o ponto inicial e o ponto final em linha reta. Eu faço uma certa gambiarra feia para parar a interação de desenho após um único segmento de linha, porque desenhar uma única linha com a ferramenta Draw é um comportamento um pouco estranho (na minha opinião). Se você quisesse rastrear a distância total dos segmentos da polilinha enquanto são desenhados, isso é um pouco mais complexo e você precisaria atualizar o ponto inicial com o último ponto final e acumular as distâncias conforme avança. Parece uma boa função reduce. Vou deixar esse exercício para você. Se eu gastasse mais tempo nisso, talvez separasse parte da lógica que acontece aqui em métodos auxiliares e talvez limpasse alguns listeners, mas como está, funciona muito bem.<\/P><\/P>A última coisa que você precisa fazer é realmente renderizar esses componentes na página.<\/P><\/P>\/\** @jsx React.DOM *\/\ndefine([\n  'react',\n  'dojo/query',\n  'dojo/dom',\n  'dojo/dom-construct',\n  '.\/components\/Locator',\n  '.\/components\/DrawTools'\n], function(\n  React,\n  query, dom, domConstruct,\n  Locator, DrawTools\n) {\n  var createContainer = function() {\n    var c = query('.widget-container');\n    if (c.length) {\n      return c.shift();\n    }\n    var container = domConstruct.create('div', {\n      className: 'widget-container'\n    }, dom.byId('map_root'), 'first');\n    return container;\n  };\n  var addContainer = function(map) {\n    React.render(\n      <div>\n        <Locator map={map} \/>\n        <DrawTools map={map} \/>\n      <\/div>,\n      createContainer());\n  };\n  return {\n    addContainer: addContainer\n  };\n});<\/PRE>Aqui é onde o React vai renderizar os componentes no elemento DOM definido na página e eu posso passar o mapa para meus widgets como propriedades. Eu realmente não discuti props ou propTypes, mas você pode ler mais sobre como eles funcionam aqui. Também aqui está um bom artigo sobre Propriedades vs Estado.<\/P><\/P>Comece a hackear<\/H2>Você pode ver uma demonstração desta aplicação em ação aqui. Caso tenha perdido, o código-fonte está aqui.<\/P>Como você pode ver, este é apenas mais um exemplo de ser capaz de integrar qualquer biblioteca ou framework de sua escolha em suas aplicações ArcGIS API for JavaScript. Existem certas partes do Dojo que você precisa usar (e algumas são muito úteis, como dojo/topic), mas além disso não é tão difícil misturar suas bibliotecas JavaScript. React não é um framework completo, e os desenvolvedores do FB serão os primeiros a dizer isso, mas ele faz muito bem o papel do V no MVC. Então hackeie à vontade pessoal e acima de tudo aproveite!<\/P><\/P>Para mais dicas e truques geodev, confira meu blog.<\/P><\/BODY><\/HTML>