neo.mjs 6.9.9 → 6.9.11

package/resources/data/deck/training/p/2023-01-10T02-21-54-303Z.md

@@ -0,0 +1,10 @@
+<a href="" target="_blank">Here are some examples.</a> 
+
+
+(They don't demo as well while screen charing because the
+meeting app will have its own frame rate.)
+
+Run the the prod version of one of the demos, like
+the <a href="https://neomjs.github.io/pages/node_modules/neo.mjs/dist/production/examples/component/coronaHelix/index.html" target="">COVID-19 Helix</a> example. Note the delta-updates per second information
+at the upper right. You're seeing 10,000 or 20,000 delta updates per
+second as you zoom in and out and pan.

package/resources/data/deck/training/p/2023-01-12T01-50-54-617Z.md

@@ -0,0 +1,74 @@
+#Introduction
+
+In this lab you'll add the Google map.
+
+#Steps
+
+??Add the import
+
+    import GoogleMapsComponent from '../../../node_modules/neo.mjs/src/component/wrapper/GoogleMaps.mjs';
+
+Save and refresh to make sure the import is working.
+
+??Add the map to the main view
+
+Add a second item to the main container's `items[]`
+
+    {
+        module: GoogleMapsComponent,
+        flex: 1,
+        center: {
+            lat: 64.8014187,
+            lng: -18.3096357
+        },
+        zoom: 6,
+    }
+
+??Bind the store
+
+The map component has a `markerStore` config. Add the code to bind that to
+the store. This will be very similar to what you did for the table. 
+
+??Solution — don't peek
+
+Here's the code, in case you need it.
+
+<pre style="border: thin solid gray; padding: 8px; ">
+import Viewport from '../../../node_modules/neo.mjs/src/container/Viewport.mjs';
+import EarthquakesTable from './earthquakes/Table.mjs';
+import ViewModel from './MainContainerViewModel.mjs';
+import GoogleMapsComponent from '../../../../node_modules/neo.mjs/src/component/wrapper/GoogleMaps.mjs';
+
+class MainContainer extends Viewport {
+    static getConfig() {
+        return {
+            className: 'Earthquakes.view.MainContainer',
+            layout: { ntype: 'vbox', align: 'stretch' },
+            autoMount: true,
+            model: {
+                module: ViewModel,
+            },
+            items: [{
+                module: EarthquakesTable,
+                flex: 1,
+                bind: {
+                    store: 'stores.earthquakes'
+                }
+            }, {
+                module: GoogleMapsComponent,
+                flex: 1,
+                center: {
+                    lat: 64.8014187,
+                    lng: -18.3096357
+                },
+                zoom: 6,
+            }],
+        }
+    }
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export default MainContainer;
+</pre>
+

package/resources/data/deck/training/p/2023-01-13T19-55-24-735Z.md

@@ -0,0 +1,14 @@
+
+<pre class="runnable readonly text 300">
+/**
+* The person's name. Null names are ignored.
+* @member {String} name_=''
+*/
+name_: '',
+
+...
+
+beforeSetName(name, oldName){
+    return (name == null)?oldName:name; // null or undefined are ignored.
+}
+</pre>

package/resources/data/deck/training/p/2023-01-13T20-08-27-068Z.md

@@ -0,0 +1,28 @@
+<pre class="runnable readonly text 240">
+/**
+* The number of ducks
+* @member {Integer} duckCount_=0
+*/
+duckCount_: 0,
+
+...
+
+beforeSetDuckCount(count){
+    return Math.round(count);
+}
+</pre>
+
+<pre class="runnable readonly text 260">
+/**
+* Store holding
+* @member {Store|Object} 
+*/
+store_: null,
+
+...
+
+beforeSetStore(store){
+    // Utility method that returns store if it's a Store instance, or a Store if store is a config
+    return ClassSystem.beforeSetInstance(store, Store); store]
+}
+</pre>

package/resources/data/deck/training/p/2023-01-13T20-23-38-411Z.md

@@ -0,0 +1,25 @@
+A side effect is a state change outside of setting the value.
+
+Another common use the afterSet method is to fire some kind of change event.
+
+<pre class="runnable readonly text 340">
+/**
+* Account balance
+* @member {Number} balance_=0
+*/
+balance_: 0,
+
+...
+
+afterSetBalance(balance){
+
+    if (balance < 0) this.status = this.OVERDRAWN; // Side-effect
+
+    this.fire('balanceChange', {
+        component: this,
+        balance
+    });
+
+}
+</pre>
+

package/resources/data/deck/training/p/2023-01-13T20-37-06-267Z.md

@@ -0,0 +1,13 @@
+<pre class="runnable readonly text 240">
+/**
+* Account balance
+* @member {Number} balance_=0
+*/
+balance_: 0,
+
+...
+
+beforeGetBalance(balance){
+    return this.governmentAudit?(balance * .8):balance; // Claim lower balances when audits are underway
+}
+</pre>

package/resources/data/deck/training/p/2023-01-13T21-05-57-708Z.md

@@ -0,0 +1,8 @@
+You rarely need `Neo.component.Base` instances — they're just too primitive.
+
+A `Neo.component.Base` might be used as a placeholder, to be replaced 
+later on with some other component type.
+
+However, if you need to code a custom component — where you specify
+your own DOM structure — then you'll extend `Ext.component.Base`.
+We'll see an example of that later.

package/resources/data/deck/training/p/2023-01-13T21-48-17-258Z.md

@@ -0,0 +1,20 @@
+Compont content is defined via a `_vdom` config, and by procedurally changing the `vdom` property.
+
+We'll go further in-depth with low-level components and vdom later in the course.
+
+<pre style="font-size: 14pt; padding: 8pt; border: solid thin lightgray">
+name_: '',
+
+_vdom: {
+    tag: 'div',
+    style: 'fontWeight:bold',
+    innerHTML: ''
+}
+
+...
+
+afterSetName(name, oldName) {
+    this.vdom.innerHTML = name;
+    this.update();
+}
+</pre>

package/resources/data/deck/training/p/2023-01-13T22-05-05-799Z.md

@@ -0,0 +1,14 @@
+<pre class="runnable readonly text 240">
+/**
+* An array of ducks
+* @member {[Duck]} ducks=[]
+*/
+ducks_: [],
+
+...
+
+beforeSetDucks(ducks){
+    return Neo.clone(ducks); // Use a defensive copy so we don't mess up the original array
+}
+</pre>
+

package/resources/data/deck/training/p/2023-01-13T22-08-30-863Z.md

@@ -0,0 +1,17 @@
+<pre class="runnable readonly text 300">
+/**
+* An array of ducks
+* @member {[Duck]} ducks=[]
+*/
+ducks_: [],
+
+...
+
+beforeSetDucks(ducks){
+    return Neo.clone(ducks); // Use a defensive copy so we don't mess up the original array
+}
+beforeGetDucks(ducks){
+    return Neo.clone(ducks); // Use a defensive copy so the other code doesn't mess up our copy
+}
+</pre>
+

package/resources/data/deck/training/p/2023-01-13T23-01-50-449Z.md

@@ -0,0 +1,4 @@
+The way Neo handles configs, and especially the creation of get/set methods, is _very important_.
+It's not hard to learn, but it play a huge role in how Neo works.
+
+Some of these examples are in `apps/componentBasics/`.

package/resources/data/deck/training/p/2023-01-14T00-33-05-958Z.md

@@ -0,0 +1,62 @@
+#Introduction
+
+In this lab you'll bind the map's center to the city.
+
+#Steps
+
+
+??Configure an in-line view model in the main view
+
+You'll need to import
+`src/model/Component.mjs', named something like `ViewModel`, then 
+configure the model:
+
+    model: {
+        module: ViewModel,
+        data: {},
+        stores: {}
+    }
+
+
+??Create a `center` property in the view model
+
+<pre style="color:lightgray">
+model: {
+    module: ViewModel,
+    data: {
+        <span style="color:firebrick">center: {
+            lat: lat: -27.1259626,
+            lng: -109.4088545
+        }</span>
+    },
+},
+</pre>
+
+??Watch the values change
+
+Just for the fun of it, and to gain insights into how view model changes occur, add
+a listener to the view model config.
+
+<pre style="color:lightgray">
+model: {
+    module: ViewModel,
+    <span style="color:firebrick">listeners: {
+        dataPropertyChange: data => console.log(data.key, data.value)
+    },</span>
+    data: {
+        center: {
+            lat: lat: -27.1259626,
+            lng: -109.4088545
+        }
+    },
+},
+</pre>
+
+??Bind the map center to that property
+
+Edit `Yelp.view.businessses.Tabs` and modify the map
+config to bind the center to the view model property.
+
+    bind: { center: data => data.center }
+
+Save and refresh, and you should see the map centered at the specified location.

package/resources/data/deck/training/p/2023-01-14T00-40-27-784Z.md

@@ -0,0 +1,229 @@
+#Introduction
+
+In this lab you'll fetch Yelp data based on the latitude and longitude corresponding
+to the city.
+
+#Steps
+
+??Define the store
+
+Edit the main view model. 
+
+Import `data/Store.mjs`.
+
+    import Store from '../../../node_modules/neo.mjs/src/data/Store.mjs';
+
+Add a config _businesses_ in the `stores` config block
+
+    stores: {
+        businesses: {
+            module: Store,
+            url:"https://nameless-tundra-27404.herokuapp.com/go/?fn=yelp&latitude=43.084&longitude=-89.546&term=pizza&limit=1",
+            responseRoot: 'businesses',
+            autoLoad: true
+        }
+    }
+
+Save and refresh then look in the debugger's Network tab. You should see the data being fetched.
+
+<img style="border: thin solid gray" src="resources/images/yelp/initialNetworkTraffic.png"></img>
+
+??Load the store procedurally
+
+Remove the `autoLoad:true,`.
+
+Edit the main view controller and add a statement to load the store.
+
+<pre style='color:lightgray; padding: 8px;'>
+doFetchYelpData() {
+    const model = this.getModel();
+    <span style="color:firebrick">model.stores.businesses.load();</span>
+}
+</pre>
+
+If you were to save and refresh, and look in network traffic, you'd see
+the url being run twice: once when the _center_ changed and once when
+the _category_ changed. (In theory we could buffer the method that calls
+the Yelp service, but for the lab we're not going to bother.)
+
+??Update search parameters dynamically
+
+Edit the main view model and replace the `url` with this value.
+
+    url:"https://nameless-tundra-27404.herokuapp.com/go/",
+
+That URL omits the query fields &mdash; we'll be adding those dynamically.
+
+Edit the main view controller and update the `load()` params to include 
+the _method_, _latitude_, and _longitude_, and _category.
+
+<pre style='color:lightgray; padding: 8px;'>
+doFetchYelpData() {
+    const model = this.getModel();
+    <span style="color:firebrick">const params = {
+        fn: 'yelp',
+        latitude: model.data.center.lat,
+        longitude: model.data.center.lng,
+        term: model.data.category
+    };
+    model.stores.businesses.load({ method: 'GET', params });</span>
+}
+</pre>
+
+Test this by saving, refreshing, then changing the city a few times. 
+With each city changes you should see a new call to the Yelp web service.
+
+<img style="border:thin solid gray" src="resources/images/yelp/CityChangesReflectedInTheFeed.png"></img>
+
+??Add two fields to the store's model config
+
+As you probably recall, the Google Maps component expects a store whose records specify
+a _title_, and a _position_. The Yelp feed has values that looks like this:
+
+    ...
+    "name": "Joe's Diner",
+    "coordinates": {
+        "latitude": 43.0753733442932,
+        "longitude": -89.5296266588608
+    },
+    ...
+
+Therefore, we need to add a two fields in the store's `fields:[]`.
+
+    model: {
+        fields: [{
+            name: 'title',
+            mapping: 'name'
+        }, {
+            name: 'position',
+            calculate: (data, field, item) => ({ lat: item.coordinates.latitude, lng: item.coordinates.longitude })
+        }]
+    },
+
+Save, refresh, then use the debugger console to verity that the records reflect those values.
+
+This should show the title of the first record.
+
+    Neo.findFirst({ntype:'yelp-main'}).model.stores.businesses.items[0].title;
+
+This should show the position (lat, lng) of the first record.
+
+    Neo.findFirst({ntype:'yelp-main'}).model.stores.businesses.items[0].position
+
+
+??Don't peek...
+
+You can peek. If you get stuck, or just to compare to another implementation, here's the 
+full store and controller logic in invisible writing. Highlight the code to read it.
+
+Your code may differ slightly to reflect your preferences for default city, etc., 
+but this code will show how the store is configured and how the controller dynamically 
+fetches the data.
+
+Here's the view model.
+
+<pre style="border:thin solid #dddddd; padding: 4px; color: white">
+
+import Base from '../../../node_modules/neo.mjs/src/model/Component.mjs';
+import Store from '../../../node_modules/neo.mjs/src/data/Store.mjs';
+
+class MainViewModel extends Base {
+    static config = {
+        className: 'Y.view.MainViewModel',
+
+        data: {
+            city: 'Oconomowoc, Wisconsin',
+            category: 'pizza',
+            center: {
+                lat: -27.1259626,
+                lng: -109.4088545
+            },
+        },
+        stores: {
+            businesses: {
+                module: Store,
+                url: "https://nameless-tundra-27404.herokuapp.com/go/",
+                responseRoot: 'businesses',
+                model: {
+                    fields: [{
+                        name: 'title',
+                        mapping: 'name'
+                    }, {
+                        name: 'position',
+                        calculate: (data, field, item) => ({lat: item.coordinates.latitude, lng: item.coordinates.longitude})
+                    }]
+                }
+            }
+        }
+
+    }
+}
+
+Neo.applyClassConfig(MainViewModel);
+
+export default MainViewModel;
+</pre>
+
+Here's the main view controller.
+
+<pre style="border:thin solid #dddddd; padding: 4px; color: white">
+import Base from '../../../node_modules/neo.mjs/src/controller/Component.mjs';
+
+class MainViewController extends Base {
+    static config = {
+        className: 'Y.view.MainViewController',
+    }
+
+    onComponentConstructed() {
+        const model = this.getModel();
+        this.onCityChange(model.data.city);
+        model.on('dataPropertyChange', data => {
+            if (data.key === 'city') this.onCityChange(data.value);
+            if (data.key === 'center') this.doFetchYData();
+            if (data.key === 'category') this.doFetchYData();
+        });
+    }
+    onCityChange(city) {
+        if (!city) return;
+        Neo.main.addon.GoogleMaps.geocode({address: city})
+            .then(data => this.getModel().data.center = data.results[0].geometry.location);
+    }
+
+    doFetchYData() {
+        const model = this.getModel();
+        console.log('Fetch Yelp data', model.data.center, model.data.category);
+        const params = {
+            fn: 'yelp',
+            latitude: model.data.center.lat,
+            longitude: model.data.center.lng,
+            term: model.data.category,
+            limit: 20,
+        };
+        model.stores.businesses.load({method: 'GET', params});
+    }
+
+
+}
+
+Neo.applyClassConfig(MainViewController);
+
+export default MainViewController;
+</pre>
+
+??Bind the store to the map
+
+You have the map center, and a store that holds the information the map expects.
+
+Edit `view/businesses/Tabs.mjs` and add an additional binding to the map:
+
+<pre style='color:lightgray'>
+bind: {
+    center: data => data.center,
+    <span style="color:firebrick">markerStore: 'stores.businesses'</span>
+},
+</pre>
+
+Save, refresh, then change the category a few times &mdash; the markers should
+update at the specification city. Change city and see the markers for that 
+location and category.
+

package/resources/data/deck/training/p/2023-01-14T00-41-59-081Z.md

@@ -0,0 +1,153 @@
+#Introduction
+
+In this lab you'll show Yelp information in a `Neo.table.Container`.
+
+#Steps
+
+??Import Table
+
+Edit `yelp/view/businesses/Tabs.mjs` and import _src/table/Container.mjs_ —
+make sure you use the correct relative path.
+
+??Make the second tab the table
+
+Configure the second tab to use imported `Neo.table.Container`. Configure the 
+button text to be _Table_, and use `iconCls:'fas fa-table-list'` (or any other icon
+you think looks good).
+
+If you save and refresh you should see the warning _Attempting to create a table.Container without defined columns..._. We'll fix that in the next step.
+
+??Start to configure the columns
+
+We want to show the business name, street address, telephone, star rating, and review count.
+
+Configure a `columns:[]` with five columns whose `text` is: _Name_, _Address_, _Telephone_, _Rating_, and _Reviews_.
+
+??Plan how to show the data
+
+Here's what a business looks like in the data feed: 
+
+    {
+        "name": "Pizza Brutta",
+        "review_count": 422,
+        "rating": 4.5,
+        "coordinates": {
+            "latitude": 43.06512,
+            "longitude": -89.41629
+        },
+        "location": {
+            "display_address": [
+                "1805 Monroe St",
+                "Madison, WI 53711"
+            ]
+        },
+        "display_phone": "(608) 257-2120"
+    }
+
+There are already two fields in each record. The fields match what the Google Maps component expects
+for its store: 
+
+- _title_, which is mapped to _name_
+- _position_, which uses a `calculate` to create a object with _lat_ and _lng_
+
+We need four more values: _address_, _telephone_, _rating_, and _reviews_.
+
+Some of those map directly to their value in the feed, some need a `mapping` config. 
+
+Showing `address` is a little trickier. We have two choices: we can configure a `calculate` 
+in the store model's `fields[]`, or code a table column renderer to get the value. 
+
+We'll try both techniques.
+
+??Add field definitions
+
+Edit the main view model `businesses` store config and add four fields:
+
+ - _reviews_, which is mapped to _review_count_
+ - _rating_
+ - _phone_, which is mapped to _display_phone_
+ - _address_, which is mapped to _location.display_address_
+
+We aren't using these in the table yet, but you can still verify that the store
+is getting the right data by getting a reference to the map and looking at its
+store items.
+
+    Neo.findFirst({ntype:'googlemaps'}).markerStore.items
+
+Each item should six properties that look like this:
+
+    {
+        "title": "Pizza Brutta",
+        "position": {
+            "lat": 43.06512,
+            "lng": -89.41629
+        },
+        "reviews": 422,
+        "rating": 4.5,
+        "telephone": "(608) 257-2120",
+        "address": [
+            "1805 Monroe St",
+            "Madison, WI 53711"
+        ],
+        "id": -1
+    }
+
+??Continue to configure the table
+
+Edit `yelp/view/businesses/Tabs.mjs` and add a `dataField` config for each column using 
+the corresponding value specified in store's `fields:[]`.
+
+Also specify `align:'right'` for ratings and review count.
+
+Of course, we won't see anything until you bind the table to the store. Configure the
+binding. This is the same as the map binding, except table has a _store_ rather than
+a _markerStore_.
+
+Save and refresh, and you should see data in the store. If you change the city or category
+the table should update accordingly.
+
+??Use renderers
+
+We need some renderers.
+
+Configure a renderer for the address.
+
+    renderer: data => data.value.join(', ')
+
+Configure a renderer for the review count.
+
+    renderer: data => new Intl.NumberFormat().format(data.value)
+
+Configure a renderer for the rating.
+
+    renderer: data => new Intl.NumberFormat('en-US', {minimumFractionDigits: 1})
+        .format(data.value)
+
+Save, refresh and try it out. You should see the renderers being used.
+
+??Use a calculated value in the store
+
+Go back to the main view model and modify the _address_ field config to use a `calculate`.
+
+    calculate: (record, field, data) => data.location.display_address.join(', ')
+
+Then remove the `renderer` from the table.
+
+??Calculating store values versus table renderers
+
+Is it better to calculate values as you populate a store, or is it better 
+to user renderer functions to do the calculation?
+
+Ideally, you want good data-view separation. In other words, you create your data stuctures 
+to use sensible primitive values, then have the UI display those in ways that makes sense 
+for a given part of the UI. That may mean formatting values. 
+
+Dates are a good example: stores will hold dates, but you don't want to store date strings, 
+because the view will decide how to format a date for that particular part of the UI. The
+same holds for numbers, which may or may not be displayed with thousands separators, etc. 
+
+In the case of the address — which Yelp provides as an array of address parts — it's a
+toss-up. An array of address parts seems more primitive and flexible, so maybe it's 
+preferable to have the view provide the renderer. But maybe not!
+
+