View Modelsのクイックレビュー

ReneRubalcava

<\/HEAD>

先週のDevSummitでは、新しいArcGIS API for JavaScript 4.0の機能や能力について多くの有益な情報が提供されました。正直言って、楽しみなことがたくさんあります！<\/P>

<\/P>

4.0の概要はこのスライドデッキ<\/A>でかなりよくわかります。<\/P>

<\/P>

私が特に何度も出てきたと思ったテーマの一つは、APIにおけるView Modelsの導入です。View Modelsや開発者に優しいウィジェットについては

こちら<\/A>で詳しく読むことができます。基本的に、View Modelsはウィジェットのビジネスロジックをウィジェットのビューから分離します。<\/P>

<\/P>

簡単にするために、

Zoom<\/A>ウィジェットを見てみましょう。View Modelsの使い方を開発者によりよく理解してもらうために、ウィジェットビューのソースコードがSDKに含まれています<\/A>。これをガイドとして自分のウィジェットを作成できます。Zoom ViewModel<\/A>を見ると、とてもシンプルです。zoomInとzoomOutという2つのメソッドがあります。これにより、自分のアプリケーション用に独自のZoomインターフェイスを構築する余地が大いにあります。例えば、都市が見えているときだけzoomInする単一ボタンを持ち、建物のフットプリントが見えているときにはzoomOutに切り替えることも可能です。繰り返しますが、自分のインターフェイスを自由に構築できる大きな自由度があります。<\/P>

<\/P>

私はReactとView Modelsを使ったこの小さなサンプル

があります<\/A>。カスタムZoomコンポーネントはこちら<\/A>で見ることができます。以下はそのコンポーネントをレンダリングする部分です。<\/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>これは最小・最大ズームレベルに達したときにズームボタンをグレーアウトします。

ライブデモはこちら<\/A>です。<\/P>

<\/P>

先週のセッションではAPIを複数のフレームワークと統合する話も多くしました。<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