neo.mjs 6.9.10 → 6.9.11

package/resources/data/deck/training/p/2023-01-06T23-46-45-783Z.md

@@ -0,0 +1,33 @@
+<pre style="font-size: 11pt; border: thin solid blue; padding: 4px; ">
+{
+  "businesses": [{
+      "id": "nsw3tlB-hwz4KbPYcuaSww",
+      "image_url": "https://s3-media1.fl.yelpcdn.com/bphoto/2QtMzHr1ZNoflLzXKRza9A/o.jpg",
+      "is_closed": false,
+      "url": "https://www.yelp.com/biz/novanta-madison?adjust_creative=hAlq2S6c7S0nxZcdmjtkhA&utm_campaign=yelp_api_v3&utm_medium=api_v3_business_search&utm_source=hAlq2S6c7S0nxZcdmjtkhA",
+      "review_count": 328,
+      "categories": [
+        {"alias": "pizza", "title": "Pizza"},
+        {"alias": "italian", "title": "Italian"},
+        {"alias": "mediterranean", "title": "Mediterranean"}
+      ],
+      "rating": 4.5,
+      "coordinates": {"latitude": 43.0753733442932, "longitude": -89.5296266588608},
+      "transactions": ["delivery", "pickup"],
+      "price": "$$",
+      "location": {
+        "address1": "8452 Old Sauk Rd",
+        "address2": "",
+        "address3": "",
+        "city": "Madison",
+        "zip_code": "53562",
+        "country": "US",
+        "state": "WI",
+        "display_address": ["8452 Old Sauk Rd", "Madison, WI 53562"]
+      },
+      "phone": "+16088317740",
+      "display_phone": "(608) 831-7740",
+      "distance": 1639.6643113166895
+    }]
+}
+</pre>

package/resources/data/deck/training/p/2023-01-08T00-45-11-144Z.md

@@ -0,0 +1,50 @@
+The model config is kind of long, and it distracts from the 
+primary purpose of the main container, which is to describe
+the view.
+
+Therefore, we should refactor the component model into its own class, 
+just like we did for the table.
+
+Just before, that means creating a new `.mjs` file to hold the
+new class, extending the corresponding class, copying and pasting
+the config block, and adding whatever imports might be needed.
+
+<pre class="runnable text readonly">
+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: 'Earthquakes.view.MainViewModel',
+        data: {},
+        stores: {
+            earthquakes: {
+                module: Store,
+                model: {
+                    fields: [{
+                        name: 'humanReadableLocation'
+                    }, {
+                        name: 'size',
+                        ntype: 'data-field-float',
+                    }, {
+                        name: 'timestamp',
+                        type: 'Date'
+                    }, {
+                        name: 'title',
+                        calculate: (data, field, item) => item.humanReadableLocation
+                    }, {
+                        name: 'position',
+                        calculate: (data, field, item) => ({ lat: item.latitude, lng: item.longitude })
+                    }]
+                },
+                url: 'https://apis.is/earthquake/is',
+                responseRoot: 'results',
+                autoLoad: true
+            }
+        }
+    }
+}
+
+Neo.applyClassConfig(MainViewModel);
+export default MainViewModel;
+</pre>

package/resources/data/deck/training/p/2023-01-08T01-06-31-267Z.md

@@ -0,0 +1,41 @@
+#Introduction
+
+In this lab you'll add a couple of event handlers.
+
+#Steps
+
+??Add a listener to a table event
+
+Tables fire a _select_ event, passing an object that contains a
+reference to the corresponding row.
+
+Add this table config:
+
+    listeners: {
+        select: (data) => {
+            console.log(data.record);
+        }
+    }
+
+Save and refresh, then click on a table row. If you look at the 
+debugger console you'll see the record being logged.
+
+Just for fun, expand the logged value and look for the _size_ property.
+If you recall, that's a value from the feed, and one of the things we
+configured in the store's `fields:[]`.
+
+In the console, click on the ellipses by _size_ and enter a new value, like
+_2.5_. (Don't enter a larger value, or you may destroy that part of Iceland.)
+
+After changing the value you should immediately see it reflected in the table row.
+
+??Add a listener to a map event
+
+Now add a _markerClick_ listener to the Google Map.
+
+    listeners: {
+        markerClick: data => {
+            console.log(data.data.record); 
+        }
+    },
+

package/resources/data/deck/training/p/2023-01-08T01-24-21-088Z.md

@@ -0,0 +1,95 @@
+#Introduction
+
+In this lab, you'll use a component controller to hold the event handlers.
+
+#Steps
+
+??Define the event handler methods
+
+Edit `MainContainerController.mjs` the add two instance methods: 
+- `onTableSelect`
+- `onMapMarkerClick` 
+
+Each method takes a single `data` param and each method has 
+one statement, which is the `console.log()` you already coded in the main container.
+
+??You already knew this, but here's what the controller class looks like
+
+<pre style="color:blue; padding: 8px; border: thin solid gray; font-size:80%;">
+import ComponentController from '../../../node_modules/neo.mjs/src/controller/Component.mjs';
+
+/**
+* @class Earthquakes.view.MainContainerController
+* @extends Neo.controller.Component
+*/
+class MainContainerController extends ComponentController {
+    static config = {
+        /**
+        * @member {String} className='Earthquakes.view.MainContainerController'
+        * @protected
+        */
+        className: 'Earthquakes.view.MainContainerController'
+    }
+
+    onMapSelect(data){
+        console.log(data);
+    }
+    onTableSelect(data){
+        console.log(data);
+    }
+}
+
+Neo.applyClassConfig(MainContainerController);
+
+export default MainContainerController;
+</pre>
+
+??Have the table select event handler change the map selection
+
+It would be nice for the map to reflect the table selection. We might
+be able to do that using a binding, but since we're discussing controllers
+and event handlers, we'll update the map's selection in the controller.
+
+To do that, in `onTableSelect`, we need to 
+- Get a reference to the map
+- Assign the selected record to the map's `selection` property
+
+Neo has a easy way to get a reference to some component in the view:
+the `reference` config. 
+
+To use that feature, first edit `MainContainer`, and add `reference: 'myMap` to the map config.
+<pre style="color:lightgray; padding: 8px; border: thin solid gray; font-size:80%;">
+{
+    module: GoogleMapsComponent,
+    <span style="color:blue;">reference: 'myMap',</span>
+    flex: 1,
+    center: {
+        lat: 64.8014187,
+        lng: -18.3096357
+    },
+    zoom: 6,
+    bind: {
+        markerStore: 'stores.earthquakes',
+    },
+    listeners: {
+        select: 'onMapSelect'
+    }
+}
+</pre>
+
+Then edit `MainContainerController` and in the `onTableSelect` method add this statement.
+
+    this.getReference('myMap').selection = data.record;
+
+Save your changes, then click on a few table rows &mdash; you should see the corresponding
+map marker become highlighted.
+
+<img src="resources/images/earthquakes/TableSyncsMap.png"></img>
+
+??To reiterate: Neo.findFirst should not be used in your app logic
+
+In the debugging labs you learned that `Neo.findFirst()` provides a handy debugging technique
+for getting a component reference. *That should only be used for debugging, and should
+never be used in your app logic.* 
+
+If you need a reference, use `this.getReference()`.

package/resources/data/deck/training/p/2023-01-08T01-25-12-557Z.md

@@ -0,0 +1,11 @@
+What's the goal of this somewhat lengthy topic?
+
+- To touch on fundamental Neo concepts
+- To do some coding without emphasizing syntax details
+
+Most of these labs are copy-and-paste because we're focusing
+on _what_ it's doing on rather than _how_. 
+
+As we progress through the training we'll spend more and
+more time on syntax and _how_, and you'll be more and more
+proficient at writing your own code.

package/resources/data/deck/training/p/2023-01-08T01-46-50-723Z.md

@@ -0,0 +1,25 @@
+Controllers are a little easier to set up than view or model
+classes, because for views and models we're overriding
+the configs in the base class. But controllers simply hold event
+handlers; these are instance functions.
+
+<pre class="runnable text readonly">
+import Base from '../../../node_modules/neo.mjs/src/controller/Component.mjs';
+
+class MainViewController extends Base {
+    static config = {
+        className: 'MyApp.view.MainViewController',
+    }
+
+    /**
+    * This is an example of a button's click handler
+    */ 
+    onClick() {
+        console.log('click');
+    }
+}
+
+Neo.applyClassConfig(MainViewController);
+
+export default MainViewController;
+</pre>

package/resources/data/deck/training/p/2023-01-08T02-09-07-802Z.md

@@ -0,0 +1,18 @@
+<div type="expander" caption="Object literals">
+<p>
+It's very easy to drop an ending `}` or `]` or otherwise have problems with object literals.
+One way to help with that is to have some kind of source code "linter" installed. (There are
+many options, like JSLint.) A linter will tell you if there's something structural problem
+with your source code.
+</p>
+</div>
+
+<div type="expander" caption="Imports">
+<p>
+The import path can be complicated, and the relative path will change depending on whether
+the source file is nested sub-directories.
+</p>
+<p>
+Some code editors, like WebStorm, will detect bad import paths.
+</p>
+</div>

package/resources/data/deck/training/p/2023-01-08T02-09-19-678Z.md

@@ -0,0 +1,66 @@
+<div type="expander" caption="Very Very Fast">
+<p>
+Neo uses three (or more) web workers to parallel process app logic, DOM changes, and backend calls.
+</p>
+<p>
+Furthermore, DOM changes are applied as _deltas_, which means updates are especially fast.
+</p>
+<p>
+Another interesting benefit of the web worker approach is that Neo allows multi-window applications.
+</p>
+</div>
+
+<div type="expander" caption="Declarative">
+<p>
+Most of the "code" you write is in the form of an object literal that describes what you're creating.
+</p>
+<p>
+That declarative object literal is what's returned by `static getConfig()`.
+</p>
+</div>
+
+<div type="expander" caption="Class Based">
+<p>
+The mjs class system is used, making it easy to override methods and extend classes. 
+</p>
+<p>
+Any Neo class can be extended, making your code modular, reusable, and extensible.
+</p>
+</div>
+
+<div type="expander" caption="Changing Content via Simple Assignments">
+<p>
+You change content by assigning values to properties, or by running methods.
+</p>
+<pre>
+panel.title = 'My new title';
+panel.add({
+    ntype: button,
+    text: 'Button
+});
+</pre>
+</p>
+</div>
+
+<div type="expander" caption="Shared, Bindable, Data">
+<p>Data can be shared within the view hierarchy via _view models_.</p>
+<p>The view model data can also be _bound_ to properties.</p>
+</pre>
+</div>
+
+<div type="expander" caption="Events">
+<p>
+All Neo objects are _observable_, and thus, can fire events.
+</p>
+<p>
+Your code _listens_ to those events via `listeners` config. (You can also add listeners procedurally.)
+</p>
+</div>
+
+<div type="expander" caption="Debugging">
+<p>
+It's easy to get component references in the browser's debugger. And since updating Neo classes is
+as easy as assigning values to properties, you can easily inspect, update, debug, and otherwise
+exercise your application when debugging.
+</p>
+</div>

package/resources/data/deck/training/p/2023-01-08T02-11-26-333Z.md

@@ -0,0 +1,29 @@
+In English there's an expression: _don't lose the forest for the trees_.
+
+<div type="expander" caption="">
+<table>
+	<tr>
+	<th style="text-align: center; background-color: #eeeeee">Forest</th>
+	<th>&nbsp;</th>
+	<th style="text-align: center; background-color: #eeeeee">Trees</th>
+	</tr>
+	<tr><td>&nbsp;</td></tr>
+	<tr>
+		<td style="text-align: center;">
+        <img src="resources/images/MortonArboretumForest.jpg" width="400" />
+		</td>
+		<td>&nbsp;</td>
+		<td style="text-align: center;">
+<img src="resources/images/MortonArboretumTrees.jpg" width="400" />
+		</td></tr>
+
+<tr><td>&nbsp;</td></tr>
+		<tr>
+		<td style="text-align:center; font-size: 2.5em;"><i style="color: blue;">Ah, I see.</i></td>
+		<td/>
+		<td style="text-align:center; font-size: 2.5em;"><i style="color: blue;">I'm lost!</i></td>
+		</tr>
+	</table></div>
+
+
+For now, just focus on high-level concepts, and don't worry about the details.

package/resources/data/deck/training/p/2023-01-08T17-22-48-841Z.md

@@ -0,0 +1,14 @@
+The button `handler` config is convenience syntax for adding a click listener.
+
+
+    {
+        ntype: 'button',
+        text: 'Hi',
+        listeners: {
+            click: data => alert('Hi!')
+        }
+    }, {
+        ntype: 'button',
+        text: 'Yo',
+        handler: data => alert('Yo!')
+    }

package/resources/data/deck/training/p/2023-01-08T20-46-11-806Z.md

@@ -0,0 +1,5 @@
+The `Neo.data.Model` config describes the records.
+
+As with any other Neo class, you're free to define your
+own `Neo.data.Model` sub-class in cases when you need
+to reuse the record configuration.

package/resources/data/deck/training/p/2023-01-08T20-47-23-682Z.md

@@ -0,0 +1,5 @@
+Stores are a collection of records. 
+
+Stores have a `model` config which configures a `Neo.data.Model`. 
+
+The `Neo.data.Model` describes the records that will populate the store.

package/resources/data/deck/training/p/2023-01-08T20-47-32-064Z.md

@@ -0,0 +1,13 @@
+- `autoLoad:true` — runs the specified URL at time of creation
+
+
+- `load({})`
+
+
+The load method takes a parameter optionally used to specify:
+
+- _url_
+- _params_
+- _headers_
+- _method_
+- _responseType_

package/resources/data/deck/training/p/2023-01-08T20-48-03-791Z.md

@@ -0,0 +1,18 @@
+Neo stores can be configured with an array of `Neo.collection.Sorter`. 
+
+    {
+        ntype: 'store',
+        sorters: [{
+            property: 'prop',
+            direction: 'ASC' // Anything else is descending
+        }]
+    }
+
+
+
+    {
+        ntype: 'store',
+        sorters: [{
+            sortBy: (a, b) => // Quicksort return value -1, 0, 1
+        }]
+    }

package/resources/data/deck/training/p/2023-01-08T20-48-32-466Z.md

@@ -0,0 +1,9 @@
+Stores have a few ways to find records:
+
+- `store.find(property, value); // [record]`
+
+
+- `store.findBy((rec=>rec.property === value)); // [record]`
+
+
+- `store.map[id]; // record`

package/resources/data/deck/training/p/2023-01-08T20-48-51-322Z.md

@@ -0,0 +1,20 @@
+Under the covers, Neo uses the singleton `Neo.RecordFactory` to create
+the records in a store. 
+
+
+<div class="expander" caption="Records">
+<p>
+A store's records are `Record` instances, which use a 
+dynanically-created class that has get/set properties 
+for every field in defined in the store's `Neo.data.Model`.
+Field changes are automatically communicated to the store.
+</p>
+</div>
+
+<div class="expander" caption="Setting values">
+<p>
+Records have a `set()` and `setSilent()` methods that let you set 
+multiple field values at once. (If you only need to change one
+you'd just assign a value directly to the property.)
+</p>
+</div>

package/resources/data/deck/training/p/2023-01-08T20-57-36-333Z.md

@@ -0,0 +1,2 @@
+A toolbar is a container that manages its layout, and adds some css classes 
+to make it easier to style its items.

package/resources/data/deck/training/p/2023-01-08T20-57-51-136Z.md

@@ -0,0 +1,5 @@
+- `text`
+- `badge`
+- `badgePosition:string` // top-right (default), bottom-right, bottom-left, top-left
+
+- `handler: string|fn` // The name of a controller function or a function

package/resources/data/deck/training/p/2023-01-09T00-35-40-671Z.md

@@ -0,0 +1,3 @@
+There are also some methods relating to sorting:
+
+- `store.doSort()

package/resources/data/deck/training/p/2023-01-10T01-29-38-148Z.md

@@ -0,0 +1,10 @@
+Neo UI code is written using JavaScript _modules_ — `.msj` files.
+
+That's the file type for JavaScript that uses the class system,
+along with the ability to hide and share information via _import_
+and _export_.
+
+Neo code is _declarative_, where the code describes high-level
+things like _stores_, _panels_ or _tables_, without having to 
+worry about how those are rendered in HTML.
+

package/resources/data/deck/training/p/2023-01-10T01-43-12-166Z.md

@@ -0,0 +1,31 @@
+#Introduction
+
+In this lab, you'll generate a Neo.mjs workspace and run the starter app.
+
+#Steps
+
+<details>
+<summary>Use the command-line to generate the workspace</summary>
+
+Use a terminal window to navigate to some parent folder, 
+then run 
+
+    npx neo-app@latest
+
+You'll be propted for a workspace name, starter app name, etc &mdash; accept the default for everything.
+As the command finishes it starts a server and opens a browser window.
+</details>
+
+<details>
+<summary>Inspect the workspace</summary>
+
+The workspace contains a local copy of the API docs, an `apps` directory (where your apps are found), 
+and some other directories.
+</details>
+
+<details>
+<summary>Run the starter app</summary>
+
+By default, an app named `myapp` was created. You can run it by entering the `apps` directory and 
+clicking `myapp`. It's a folder containing an `index.html` along with the source code for the app.
+</details>

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>