Quick Look at View Models

[ReneRubalcava]

So last week at DevSummit, there was a lot of solid information being dropped as to the new ArcGIS API for JavaScript 4.0 features and capabilities. Let me tell ya, there's a lot of cool stuff to look forward to!

You can get a pretty good overview of 4.0 via this slide deck.

One recurring theme I thought came up a lot is the introduction of View Models in the API. You can read more about View Models and developer friendly widgets here. Basically, View Models separate the business logic of the Widget from the View of the Widget.

To keep it simple, let's look at the Zoom widget. To give developers a better idea of how the View Models are used, the Widget View source code is included in the SDK. You can use this as a guide to build your own widgets. If we look at the Zoom ViewModel, it's pretty simple. It has two methods, zoomIn and zoomOut. That gives you a lot of room to build your own Zoom interface for your application. You could have a single button to only zoomIn when cities are visible and maybe switch to zoomOut when building footprints are visible. Like I said, it gives you a lot of freedom to build your interface as you want.

I have this little sample using React with View Models. You can see a custom Zoom component here. Here's the portion that renders the component.

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>
  );
}

What this does is gray out the zoom buttons when you hit the min/max zoom levels. You can see the live demo here.

I talked a lot about integrating the API with multiple frameworks in a session last week. You can see the slides here. A lot of this framework integration really hangs on using View Models to power the inner guts of the JS API and simply wraps new components around the View Models to create new interfaces.

There was a really great session on building your own widgets last week that everyone interested in building widgets should look over. Here are the slides. It doesn't only cover custom widgets, but styling and css stuff, it's full of really great info.

I'm pretty excited about View Models in the 4.0 API. I imagine people doing some really cool stuff with View Models because technically you don't need a View for your Widget. You could activate View Model methods via an Arduino that may be used for voice recognition. Maybe using some VR tech to allow you to call View Model methods via gestures or some other mechanism. Like I said, the View Models provide the business logic of interacting with a MapView or SceneView, how you use them is up to you.

So hack away, build some cool apps and see what you can do!

For more geodev tips and tricks, check out my blog!