Aperçu rapide des View Models

ReneRubalcava

<\/HEAD>

La semaine dernière au DevSummit, beaucoup d'informations solides ont été partagées concernant les nouvelles fonctionnalités et capacités de l'ArcGIS API for JavaScript 4.0. Laissez-moi vous dire, il y a plein de choses intéressantes à attendre avec impatience !<\/P>

<\/P>

Vous pouvez obtenir un bon aperçu de la version 4.0 via ce diaporama<\/A>.<\/P>

<\/P>

Un thème récurrent qui m'a semblé revenir souvent est l'introduction des View Models dans l'API. Vous pouvez en lire plus sur les View Models et les widgets conviviaux pour les développeurs

ici<\/A>. En gros, les View Models séparent la logique métier du Widget de la Vue du Widget.<\/P>

<\/P>

Pour faire simple, regardons le widget

Zoom<\/A>. Pour donner aux développeurs une meilleure idée de l'utilisation des View Models, le code source de la Vue du Widget est inclus dans le SDK<\/A>. Vous pouvez l'utiliser comme guide pour créer vos propres widgets. Si nous regardons le Zoom ViewModel<\/A>, c'est assez simple. Il a deux méthodes, zoomIn<\/EM> et zoomOut<\/EM>. Cela vous donne beaucoup de liberté pour construire votre propre interface Zoom pour votre application. Vous pourriez avoir un seul bouton pour zoomer uniquement quand les villes sont visibles et peut-être passer à zoomOut quand les empreintes des bâtiments sont visibles. Comme je l'ai dit, cela vous donne beaucoup de liberté pour construire votre interface comme vous le souhaitez.<\/P><\/P>J'ai ce petit exemple utilisant React avec les View Models<\/A>. Vous pouvez voir un composant Zoom personnalisé ici<\/A>. Voici la partie qui rend le composant.<\/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>Ce que cela fait est de griser les boutons de zoom lorsque vous atteignez les niveaux de zoom min/max. Vous pouvez voir la 

démonstration en direct ici<\/A>.<\/P>

<\/P>

J'ai beaucoup parlé de l'intégration de l'API avec plusieurs frameworks lors d'une session la semaine dernière. Vous pouvez voir les <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