EsriJS met ReactJS (bijgewerkt)

ReneRubalcava

<\/HEAD>

<\/P>

Nog niet zo lang geleden schreef ik een blogpost<\/A> over het gebruik van de ArcGIS JavaScript API met ReactJS<\/A> voor widgets. Ik heb de laatste tijd met een paar mensen over React gesproken, dus dacht ik dat ik het onderwerp hier misschien opnieuw zou behandelen. De grootste vraag die je je misschien stelt, is waarom React gebruiken<\/A>? Persoonlijk vind ik dat React een erg elegante API heeft. Wanneer je het begint te gebruiken en ontdekt hoe gemakkelijk het is om je componenten samen te stellen die de gebruikersinterface vormen, denk ik dat dat is wanneer React echt uitblinkt<\/EM>. Een leuke eigenschap van React is het gebruik van een virtuele DOM<\/A>. In principe, als je de status van je applicatie bij de root bijwerkt, zal het de gehele DOM van de applicatie opnieuw renderen. Het klinkt alsof het traag zou zijn, maar dat is het echt niet. Het kan wel zijn<\/EM>, als je iets doms doet zoals proberen een zeer grote<\/STRONG> JSON-editor te maken **ahem**<\/EM>. Je kunt hier meer lezen over hoe de updates plaatsvinden hier<\/A>.<\/P>

<\/P>

Het is allemaal gewoon DOM<\/H2>Als je bekend bent met het werken met Dijits en de Dijit levenscyclus<\/A>, hebben React-componenten een vergelijkbare levenscyclus<\/A>. In beide gevallen is het nuttig om ze te leren kennen. React gebruikt een optionele syntaxis genaamd JSX<\/A>. Het is belangrijk om te onthouden dat JSX volledig optioneel is<\/EM>. Sommige mensen raken helemaal in paniek over het mengen van DOM met JavaScript, maar dat is niet het geval. JSX wordt simpelweg gebruikt om je te helpen je DOM-structuur te definiëren. Het moet nog steeds worden gecompileerd naar pure JavaScript om in de browser te kunnen werken en er zijn tools<\/A> voor dat<\/A>.<\/P>

<\/P>

Widgets voor de massa's<\/H2>De broncode voor de voorbeeldapplicatie is hier beschikbaar<\/A>. Ik zal niet de hele applicatie in detail bespreken, maar ik wil wel de widgets benadrukken.<\/P>

<\/P>

Allereerst is er een widget genaamd Locator die eenvoudigweg de kaartcoördinaten van de cursor weergeeft.<\/P>

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

Deze component is dus vrij eenvoudig. Hij toont alleen coördinaten en gebruikt

dojo/topic om die coördinaten aan de applicatie te publiceren. Ik heb eerder over dojo/topic gesproken. De volgende component is iets interessanter. Hij heeft een knop die een tekenhulpmiddel activeert en een label dat de afstand toont die wordt getekend.< / P >< P >< / P >< PRE class = "lia-code-sample line-numbers language-none " > \/** @jsx React.DOM * \/
define([
'react',
'esri/toolbars/draw',
'esri/geometry/geometryEngine',
'd dojo/topic',
'd dojo/on',
'helpers/NumFormatter'
], function(
React,
Draw, geomEngine,
topic, on,
format
) {
var fixed = format(3);
var DrawToolWidget = React.createClass({

getInitialState: function() {

return {

startPoint: null,
a btnText: 'Lijn tekenen',
a distance: 0,
a x: 0,
a y: 0
a };
},
componentDidMount: function() {
this.draw = new Draw(this.props.map);
this.handler = this.draw.on('draw-end', this.onDrawEnd);
this.subscriber = topic.subscribe(
'topic.subscribe(
'topic.subscribe(
'topic.subscribe(
'topic.subscribe(
'topic.subscribe(
'topic.subscribe(
'topic.subscribe(
'topic.subscribe(
'topic.subscribe(
'topic.subscribe(
'topic.subscribe(
'topic.subscribe(
'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: 'Lijn tekenen'});},mapCoordsUpdate: function(data) {this.setState(data);// weet niet zeker of ik deze conditionele controle leuk vind
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: 'Bezig met tekenen...' });this.draw.activate(Draw.POLYLINE);on.once(this.props.map, 'click', function(e) {this.setState({ startPoint: e.mapPoint });// erg hacky, maar Draw.LINE interactie is vreemd om te gebruiken
on.once(this.props.map, 'click', function() {this.onDrawEnd();}.bind(this));}.bind(this))},render: function() {return ({this.state.btnText}Afstand: {fixed(this.state.distance)}9;
}
});
return DrawToolWidget;
});Deze component is iets uitgebreider, maar hij maakt gebruik van de geometryEngine om de afstand tussen het startpunt en het eindpunt in een rechte lijn te berekenen. Ik doe wat lelijke hacky-ness om de tekeninteractie na een enkel lijnsegment te stoppen, omdat enkel tekenen met de Draw tool een beetje vreemd gedrag is (naar mijn mening). Als je de totale afstand van de polyline-segmenten tijdens het tekenen wilde bijhouden, is dat iets ingewikkelder en zou je het startpunt moeten bijwerken met het laatste eindpunt en de afstanden accumuleren terwijl je verder gaat. Klinkt als een mooie reduce-functie. Die oefening laat ik aan jou over. Als ik hier meer tijd aan zou besteden, zou ik misschien wat van de logica die hier gebeurt in hulpfuncties scheiden en misschien wat luisteraars opruimen, maar zoals het nu is werkt het vrij goed.<\/P><\/P>Het laatste wat je moet doen is deze componenten daadwerkelijk op de pagina weergeven.<\/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>Dit is waar React de componenten zal renderen naar het gedefinieerde DOM-element op de pagina en ik kan de map doorgeven aan mijn widgets als eigenschappen. Ik heb niet echt props of propTypes besproken, maar je kunt meer lezen over hoe ze werken hier. Ook hier is een mooie uitleg over Properties vs State.<\/P><\/P>Begin met hacken<\/H2>Je kunt een demo van deze applicatie in actie zien hier. Voor het geval je het gemist hebt is de broncode hier.<\/P>Zoals je kunt zien is dit gewoon weer een voorbeeld van hoe je elke bibliotheek of framework naar keuze kunt integreren in je ArcGIS API for JavaScript-applicaties. Er zijn bepaalde delen van Dojo die je moet gebruiken (en sommige zijn erg handig, zoals dojo/topic), maar daarbuiten is het niet zo moeilijk om je JavaScript-bibliotheken te mixen en matchen. React is geen volledig framework, en de FB-ontwikkelaars zullen dat als eerste zeggen, maar het doet wel heel goed de V in MVC. Dus ga lekker hacken mensen en vooral veel plezier ermee!<\/P><\/P>Voor meer geodev tips en trucs, bekijk mijn blog.<\/P><\/BODY><\/HTML>