Rychlý pohled na View Models

ReneRubalcava

<\/HEAD>

Tak minulý týden na DevSummit bylo předáno spousta solidních informací o nových funkcích a schopnostech ArcGIS API for JavaScript 4.0. Řeknu vám, je tu spousta skvělých věcí, na které se můžete těšit!<\/P>

<\/P>

Můžete získat docela dobrý přehled o verzi 4.0 prostřednictvím tohoto slide decku<\/A>.<\/P>

<\/P>

Jedním z opakujících se témat, které jsem si všiml, je zavedení View Models v API. Více o View Models a vývojářsky přívětivých widgetech si můžete přečíst

zde<\/A>. V podstatě View Models oddělují obchodní logiku Widgetu od jeho zobrazení.<\/P>

<\/P>

Abychom to zjednodušili, podívejme se na

widget Zoom<\/A>. Aby vývojáři lépe pochopili, jak se View Models používají, je ve SDK zahrnut zdrojový kód Widget View<\/A>. Můžete ho použít jako průvodce pro tvorbu vlastních widgetů. Pokud se podíváme na Zoom ViewModel<\/A>, je to docela jednoduché. Má dvě metody, zoomIn<\/EM> a zoomOut<\/EM>. To vám dává spoustu prostoru pro vytvoření vlastního rozhraní Zoom pro vaši aplikaci. Můžete mít jedno tlačítko, které bude zoomovat pouze dovnitř, když jsou vidět města, a možná přepnout na zoomování ven, když jsou viditelné obrysy budov. Jak jsem říkal, dává vám to velkou svobodu vytvářet rozhraní podle vašich představ.<\/P><\/P>Mám tento malý příklad používající React s View Models<\/A>. Můžete vidět vlastní komponentu Zoom zde<\/A>. Tady je část, která vykresluje komponentu.<\/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>Co toto dělá, je šedivění tlačítek zoomu, když dosáhnete minimálního nebo maximálního úrovně přiblížení. Živou ukázku můžete vidět 

zde<\/A>.<\/P>

<\/P>

Minulý týden jsem v jedné sekci hodně mluvil o integraci API s různými frameworky. Snímky z prezentace najdete

zde<\/A>. Velká část této integrace frameworků opravdu závisí na používání View Models k napájení vnitřní logiky JS API a jednoduše obaluje nové komponenty kolem View Models pro vytvoření nových rozhraní.<\/P>

<\/P>

Minulý týden byla opravdu skvělá sekce o tvorbě vlastních widgetů, kterou by měl každý zájemce o tvorbu widgetů prostudovat. Tady jsou

snímky<\/A>. Nejde jen o vlastní widgety, ale také o stylování a CSS věci, je to plné opravdu skvělých informací.<\/P>

<\/P>

Jsem docela nadšený z View Models v API 4.0<\/EM>. Představuji si lidi, kteří s View Models dělají opravdu skvělé věci, protože technicky nepotřebujete View pro svůj Widget. Můžete aktivovat metody View Model přes Arduino, které může být použito pro rozpoznávání hlasu. Možná použití nějaké VR technologie umožňující volat metody View Model pomocí gest nebo jiného mechanismu. Jak jsem říkal, View Models poskytují obchodní logiku interakce s MapView nebo SceneView, jak je použijete, záleží na vás<\/EM>.<\/P><\/P>Takže hackujte dál, vytvářejte skvělé aplikace a uvidíte, co dokážete!<\/P><\/P>Pro více tipů a triků z geodev světa navštivte

můj blog<\/A>!<\/P><\/BODY><\/HTML>

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