Vista rápida de View Models

ReneRubalcava

<\/HEAD>

La semana pasada en DevSummit, se compartió mucha información sólida sobre las nuevas características y capacidades de ArcGIS API for JavaScript 4.0. ¡Déjame decirte, hay muchas cosas geniales por venir!<\/P>

<\/P>

Puedes obtener una buena visión general de la versión 4.0 a través de esta presentación de diapositivas<\/A>.<\/P>

<\/P>

Un tema recurrente que pensé que surgió mucho es la introducción de View Models en la API. Puedes leer más sobre View Models y widgets amigables para desarrolladores

aquí<\/A>. Básicamente, View Models separan la lógica de negocio del Widget de la Vista del Widget.<\/P>

<\/P>

Para mantenerlo simple, veamos el widget

Zoom<\/A>. Para dar a los desarrolladores una mejor idea de cómo se usan los View Models, el código fuente de la Vista del Widget está incluido en el SDK<\/A>. Puedes usar esto como guía para construir tus propios widgets. Si miramos el Zoom ViewModel<\/A>, es bastante simple. Tiene dos métodos, zoomIn<\/EM> y zoomOut<\/EM>. Eso te da mucho espacio para construir tu propia interfaz Zoom para tu aplicación. Podrías tener un solo botón para hacer zoomIn solo cuando las ciudades sean visibles y tal vez cambiar a zoomOut cuando las huellas de edificios sean visibles. Como dije, te da mucha libertad para construir tu interfaz como quieras.<\/P><\/P>Tengo este pequeño ejemplo usando React con View Models<\/A>. Puedes ver un componente Zoom personalizado aquí<\/A>. Aquí está la parte que renderiza el componente.<\/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>Lo que esto hace es deshabilitar los botones de zoom cuando alcanzas los niveles mínimos/máximos de zoom. Puedes ver la 

demostración en vivo aquí<\/A>.<\/P>

<\/P>

Hablé mucho sobre integrar la API con múltiples frameworks en una sesión la semana pasada. Puedes ver las <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