Visão Rápida sobre View Models

ReneRubalcava

<\/HEAD>

Então, na semana passada no DevSummit, houve muitas informações sólidas sendo apresentadas sobre os novos recursos e capacidades da ArcGIS API for JavaScript 4.0. Deixe-me dizer, há muitas coisas legais para esperar!<\/P>

<\/P>

Você pode obter uma visão geral bem boa do 4.0 através deste conjunto de slides<\/A>.<\/P>

<\/P>

Um tema recorrente que achei que apareceu bastante foi a introdução dos View Models na API. Você pode ler mais sobre View Models e widgets amigáveis para desenvolvedores

aqui<\/A>. Basicamente, os View Models separam a lógica de negócio do Widget da Visualização do Widget.<\/P>

<\/P>

Para manter simples, vamos olhar o widget

Zoom<\/A>. Para dar aos desenvolvedores uma ideia melhor de como os View Models são usados, o código fonte da Visualização do Widget está incluído no SDK<\/A>. Você pode usar isso como um guia para construir seus próprios widgets. Se olharmos para o Zoom ViewModel<\/A>, é bem simples. Ele tem dois métodos, zoomIn<\/EM> e zoomOut<\/EM>. Isso te dá muito espaço para construir sua própria interface de Zoom para sua aplicação. Você poderia ter um único botão para apenas zoomIn quando as cidades estiverem visíveis e talvez mudar para zoomOut quando as pegadas dos prédios estiverem visíveis. Como eu disse, isso te dá muita liberdade para construir sua interface como quiser.<\/P><\/P>Eu tenho este pequeno exemplo usando React com View Models<\/A>. Você pode ver um componente Zoom personalizado aqui<\/A>. Aqui está a parte que renderiza o 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>O que isso faz é deixar os botões de zoom cinza quando você atinge os níveis mínimos/máximos de zoom. Você pode ver a 

demonstração ao vivo aqui<\/A>.<\/P>

<\/P>

Eu falei muito sobre integrar a API com múltiplos frameworks em uma sessão na semana passada. Você pode ver os <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