neo.mjs 6.9.10 → 6.9.11

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!
+
+

package/resources/data/deck/training/p/2023-01-14T13-50-28-199Z.md

@@ -0,0 +1,19 @@
+The component base class introduces many important properties.
+
+- `html:string` — for simple content or placeholder text
+
+
+- `height`, `minHeight`, `maxHeight`
+- `width`, `minWidth`, `maxWidth`
+
+- `style:{}` — sometimes convenient, although using css styles via `cls` is probably better
+- `cls:[string]` — a array of CSS class strings
+
+- `disabled:boolean`
+
+- `_vdom` — for low-level content
+
+
+- `mounted:boolean` — useful for `afterSetMounted`
+
+There are also drag-and-drop hooks, and many other properties.

package/resources/data/deck/training/p/2023-01-14T13-59-20-275Z.md

@@ -0,0 +1,6 @@
+Component also introduces a few events:
+
+- `focusEnter`
+- `focusChange`
+- `focusLeave`
+- `focusMove`

package/resources/data/deck/training/p/2023-01-14T14-03-29-456Z.md

@@ -0,0 +1,3 @@
+- `up(config)` — Finds a parent container using `Neo.find()` syntax
+
+- `addCls(str)`, `removeCls(str)`, `toggleCls(str)` 

package/resources/data/deck/training/p/2023-01-14T14-27-57-678Z.md

@@ -0,0 +1,7 @@
+You've seen that get/set properties (using the underscore suffix)
+have `afterSet...` methods.
+
+Recall that `Neo.component.Base` introduces some key properties. 
+Since these properties have `afterSet` methods, you can easily
+"detect" when those properties change by overriding the corresponding `afterSet`
+method.

package/resources/data/deck/training/p/2023-01-14T17-30-18-228Z.md

@@ -0,0 +1,33 @@
+To conditionally call the ancestor for `afterSet...` methods.<small><sup>*</sup></small>
+use the _optional chaining_ operator.
+
+    super.afterSetBar?.(value, oldValue);
+
+<pre class="runnable readonly text 280">
+class Simple extends Base {
+    static getConfig() {
+        return {
+            className: 'ComponentBasics.view.component.Simple',
+
+            bar_: null, // A get/set field
+
+        }
+    }
+    afterSetBar(value, oldValue) {
+        // Do important processing here.
+    }
+}
+</pre>
+
+<pre class="runnable readonly text 140">
+class ExtendsSimple extends Simple {
+    afterSetBar(value, oldValue) {
+        super.afterSetBar?.(value, oldValue);
+        // Do important processing here.
+    }
+}
+</pre>
+<br>
+<small>* The framework doesn't actually create the `beforeSet...`, 
+`afterSet...`, and `beforeGet...` methods. Instead, the framework
+conditionally calls the methods using the chaining operator.</small>

package/resources/data/deck/training/p/2023-01-14T18-28-39-316Z.md

@@ -0,0 +1 @@
+Used when the container has one item — the item fills the entire container.

package/resources/data/deck/training/p/2023-01-14T18-28-44-115Z.md

@@ -0,0 +1,4 @@
+Multiple child items, with one visible. The visible item
+fills the container.
+
+To change the visible item assign a value to `this.layout.activeIndex` 

package/resources/data/deck/training/p/2023-01-14T18-28-49-548Z.md

@@ -0,0 +1,18 @@
+    layout:{
+        ntype: 'vbox',
+        pack: 'start', // 'start', 'center', 'end', null
+        align: 'start', // 'start', 'center', 'end', 'stretch', null
+    }
+
+The _pack_ config species how items are packed on the major
+axis. 
+- _start_ — items at the top
+- _center_ — items at the top-to-bottom middle 
+- _end_ — items at the end
+
+The _align_ config specifies how items are justified on the minor
+axis. 
+- _start_ — items are left justified
+- _center_ — items ae center justified 
+- _end_ — items are right justified
+- _stretch_ — items take up the full width

package/resources/data/deck/training/p/2023-01-14T18-40-13-758Z.md

@@ -0,0 +1,10 @@
+Uses CSS flexbox. 
+
+    style: {
+        overflow: 'scroll', // For the container
+        alignContent: 'flex-start', // For the flexbox
+    },
+    layout: {
+        ntype: 'flexbox',
+        wrap: 'wrap', // nowrap, wrap, wrapreverse
+    },

package/resources/data/deck/training/p/2023-01-14T19-29-15-291Z.md

@@ -0,0 +1,12 @@
+The `style` config takes an object, with the names
+being a camel-case version of the style you're specifying.
+
+    style: { 
+        backgroundColor: 'red',
+        fontSize: '2em',
+    },
+
+
+The kinds of things you'd use style for should be done as CSS classes,
+but using `style:{}` might be handy until you get around to coding
+the CSS.