Kurzer Überblick über View Models

ReneRubalcava

<\/HEAD>

Letzte Woche auf dem DevSummit wurden viele fundierte Informationen zu den neuen Funktionen und Möglichkeiten der ArcGIS API for JavaScript 4.0 vorgestellt. Ich sage euch, es gibt eine Menge cooler Sachen, auf die man sich freuen kann!<\/P>

<\/P>

Eine ziemlich gute Übersicht über 4.0 bekommt man über dieses Slide Deck<\/A>.<\/P>

<\/P>

Ein wiederkehrendes Thema, das mir oft auffiel, ist die Einführung von View Models in der API. Mehr über View Models und entwicklerfreundliche Widgets kannst du

hier<\/A> lesen. Grundsätzlich trennen View Models die Geschäftslogik des Widgets von der Ansicht des Widgets.<\/P>

<\/P>

Um es einfach zu halten, schauen wir uns das

Zoom<\/A>-Widget an. Um Entwicklern eine bessere Vorstellung davon zu geben, wie die View Models verwendet werden, ist der Widget View Quellcode im SDK enthalten<\/A>. Du kannst dies als Leitfaden verwenden, um deine eigenen Widgets zu erstellen. Wenn wir uns das Zoom ViewModel<\/A> ansehen, ist es ziemlich einfach. Es hat zwei Methoden, zoomIn<\/EM> und zoomOut<\/EM>. Das gibt dir viel Spielraum, um deine eigene Zoom-Oberfläche für deine Anwendung zu erstellen. Du könntest eine einzelne Schaltfläche haben, die nur zoomIn ausführt, wenn Städte sichtbar sind, und vielleicht zu zoomOut wechseln, wenn Gebäudefundamente sichtbar sind. Wie gesagt, es gibt dir viel Freiheit, deine Oberfläche so zu gestalten, wie du möchtest.<\/P><\/P>Ich habe dieses kleine Beispiel mit React und View Models<\/A>. Du kannst eine benutzerdefinierte Zoom-Komponente hier<\/A> sehen. Hier ist der Teil, der die Komponente 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>Was das bewirkt, ist, dass die Zoom-Schaltflächen ausgegraut werden, wenn du die minimalen oder maximalen Zoomstufen erreichst. Die 

Live-Demo findest du hier<\/A>.<\/P>

<\/P>

Ich habe letzte Woche in einer Session viel darüber gesprochen, wie man die API mit mehreren Frameworks integriert. Die <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