Korte blik op View Models

ReneRubalcava

<\/HEAD>

Vorige week op DevSummit werd er veel degelijke informatie gedeeld over de nieuwe ArcGIS API for JavaScript 4.0 functies en mogelijkheden. Laat me je vertellen, er staat veel coole dingen te wachten!<\/P>

<\/P>

Je kunt een behoorlijk goed overzicht van 4.0 krijgen via deze slide deck<\/A>.<\/P>

<\/P>

Een terugkerend thema dat vaak naar voren kwam is de introductie van View Models in de API. Je kunt meer lezen over View Models en ontwikkelaarsvriendelijke widgets

hier<\/A>. In principe scheiden View Models de businesslogica van de Widget van de View van de Widget.<\/P>

<\/P>

Om het simpel te houden, laten we kijken naar de

Zoom<\/A> widget. Om ontwikkelaars een beter idee te geven van hoe de View Models worden gebruikt, is de Widget View broncode opgenomen in de SDK<\/A>. Je kunt dit gebruiken als gids om je eigen widgets te bouwen. Als we kijken naar de Zoom ViewModel<\/A>, is het vrij eenvoudig. Het heeft twee methoden, zoomIn<\/EM> en zoomOut<\/EM>. Dat geeft je veel ruimte om je eigen Zoom-interface voor je applicatie te bouwen. Je zou een enkele knop kunnen hebben om alleen in te zoomen wanneer steden zichtbaar zijn en misschien overschakelen naar uitzoomen wanneer gebouwcontouren zichtbaar zijn. Zoals ik al zei, het geeft je veel vrijheid om je interface te bouwen zoals jij wilt.<\/P><\/P>Ik heb dit kleine voorbeeld met React en View Models<\/A>. Je kunt een aangepaste Zoom-component zien hier<\/A>. Hier is het gedeelte dat de component rendert.<\/P>

<\/P>

render() {
  let btnstyle = this.state.updating ? 'zoom-btns' : 'zoom-btns view-busy';
  let maxstate = this.state.maxZoomed ? 'button raised grey narrow disable' : 'button raised grey narrow';
  let minstate = this.state.minZoomed ? 'button raised grey narrow disable' : 'button raised grey narrow';
  return (
    <div className={btnstyle}>
      <div className={maxstate} onClick={this.zoomIn}>
        <div className=\"center\"><i className=\"material-icons\">add<\/?i><\/?div>
      <\/?div>
      <div className={minstate} onClick={this.zoomOut}>
        <div className=\"center\"><i className=\"material-icons\">remove<\/?i><\/?div>
      <\/?div>
    <\/?div>
  );
}<\/PRE><\/P>Wat dit doet is dat het de zoomknoppen grijs maakt wanneer je de min- of max-zoomniveaus bereikt. Je kunt de 

live demo hier<\/A> zien.<\/P>

<\/P>

Ik heb vorige week veel gesproken over het integreren van de API met meerdere frameworks in een sessie. Je kunt de <A href="http:\/\/odoe.github.io\/presentations\/2016-devsummit-frameworks\/#\/

DavidWilton

Very keen on this approach, great to see the esri js team promoting this framework in their code.

Interested to know what the "esri/widgets/Widget" widget.createSubclass functionality adds above dojo declare which it appears to be used in place of. Currently appears to be an undocumented function:

Widget | API Reference | ArcGIS API for JavaScript