neo.mjs 6.9.10 → 6.9.12

package/resources/data/deck/training/p/2022-12-31T23-18-55-655Z.md

@@ -0,0 +1,69 @@
+#Introduction
+
+In this lab, you'll refactor the app, making the table its own class, adding the map,
+
+
+#Steps
+
+??Move the table into its own class
+
+Create a new file named `apps/earthquakes/view/earthquakes/Table.mjs` with this content.
+
+<pre class="runnable text readonly">
+import Base from '../../../../node_modules/neo.mjs/src/table/Container.mjs';
+
+class Table extends Base {
+    static config = {
+        className: 'Earthquakes.view.earthquakes.Table',
+        ntype: 'earthquakes-table',
+        columns: [{
+            dataField: 'timestamp',
+            text: 'Date',
+            flex: 1,
+            renderer: data => data.value.toLocaleDateString(undefined, {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'})
+        }, {
+            dataField: 'humanReadableLocation',
+            text: 'Location',
+            flex: 1,
+        }, {
+            dataField: 'size',
+            text: 'Magnitude',
+            align: 'right',
+            flex: 1,
+            renderer: data => data.value.toLocaleString()
+        }]
+    }
+}
+
+Neo.applyClassConfig(Table);
+export default Table;
+</pre>
+
+??Review the code
+
+What's in the code? 
+
+- The class extends `Neo.table.Container`
+- It has an `ntype`, which we can use when creating an instance, or when debugging
+- Each column has `text` and `dataField` configs, and some have renderers
+
+??Use the new component
+
+Edit `apps/earthquakes/view/MainView` and look for the config block for the table. 
+
+- Import the new class: `import EarthquakesTable from './earthquakes/Table.mjs';`
+- Replace the `module: Table` with `module: EarthquakesTable`
+- Remove the `columns:[]` config
+- Leave the `store` config alone
+
+Save and refresh the browser, and your app should run as before. 
+
+You can confim that the  new class _is being loaded_ by using DevTools to try to open `earthquakes/Table` &mdash; if it
+was imported, it'll be listed.
+
+You can conrim that an instance _was created_ by using the DevTools console and searching for it via
+
+    Neo.first('earthquakes-table')
+
+That will return a component reference if there's a match.
+

package/resources/data/deck/training/p/2022-12-31T23-25-40-735Z.md

@@ -0,0 +1,21 @@
+Neo comes with a Google maps wrapper. Its key properties are:
+
+
+##center
+
+    {lat: 1.1234, lng:23.4456}
+
+<br>
+
+##markerStore
+
+A store whose records contain
+
+    {title: 'String', location:{lat: 1.1234, lng:23.4456}}
+
+<br>
+
+
+##zoom
+
+The Google Maps zoom level. It defaults to 8. 

package/resources/data/deck/training/p/2022-12-31T23-25-51-014Z.md

@@ -0,0 +1,7 @@
+`Neo.core.Base` is the Neo base class. It mixes in `Neo.core.Observable`.
+This means all Neo classes have the ability to fire events or configure
+event listeners.
+
+The API docs have an _events_ section for each class. 
+
+Tables fire a _select_ event. Google Maps components fire a _markerClick_ event

package/resources/data/deck/training/p/2023-01-01T17-49-18-429Z.md

@@ -0,0 +1,3 @@
+We can use DevTools and our debugging skills to inspect the store.
+
+<img height="400" src="resources/images/intro/InspectTheStore.png"/>

package/resources/data/deck/training/p/2023-01-01T18-44-07-034Z.md

@@ -0,0 +1,34 @@
+<pre class="runnable text readonly">
+import Base from '../../../../node_modules/neo.mjs/src/table/Container.mjs';
+
+class Table extends Base {
+    static config = {
+        className: 'Earthquakes.view.earthquakes.Table',
+        ntype: 'earthquakes-table',
+        columns: [{
+            dataField: 'timestamp',
+            text: 'Date',
+            flex: 1,
+            renderer: data => data.value.toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })
+        }, {
+            dataField: 'humanReadableLocation',
+            text: 'Location',
+            flex: 1,
+        }, {
+            dataField: 'size',
+            text: 'Magnitude',
+            align: 'right',
+            flex: 1,
+            // width: 100,
+            renderer: data => data.value.toLocaleString()
+        }]
+    }
+}
+
+Neo.applyClassConfig(Table);
+export default Table;
+
+</pre>
+
+Why isn't the store there? Because typically, the code _creating_ the table
+is responsible for providing the store.

package/resources/data/deck/training/p/2023-01-01T18-47-39-766Z.md

@@ -0,0 +1,15 @@
+Let's enhance the app to use a Google Map to show where the earthquakes occurred.
+
+<pre style="font-size:1.6em;">
+import GoogleMapsComponent from '../../../node_modules/neo.mjs/src/component/wrapper/GoogleMaps.mjs';
+...
+{
+    module: GoogleMapsComponent,
+    flex: 1,
+    center: {
+        lat: 64.8014187,
+        lng: -18.3096357
+    },
+    zoom: 6,
+}
+</pre>

package/resources/data/deck/training/p/2023-01-01T19-04-22-830Z.md

@@ -0,0 +1,4 @@
+But this design has a problem: even though the table is nicely
+reusable, the stores are duplicated. 
+
+Duplicating the store config is poor reuse and higher maintenance, and fetching the data twice is inefficient.

package/resources/data/deck/training/p/2023-01-01T21-11-58-025Z.md

@@ -0,0 +1,25 @@
+Configs can hold simple instance properties.
+
+<pre class="runnable readonly text">
+class Simple extends Base {
+    static config = {
+        className: 'Demo.view.component.Simple',
+        ntype: 'demo-simple-component',
+
+        foo: 1, // An instance field
+
+    }
+}
+...
+items: [{
+    module: Simple
+
+    tabButtonConfig: {iconCls: 'fa fa-home', text: 'Simple'},
+
+}, {
+    module: Simple
+    foo: 2, // This value is used for the instance
+
+    tabButtonConfig: {iconCls: 'fa fa-home', text: 'Simple'},
+}],
+</pre>

package/resources/data/deck/training/p/2023-01-01T21-12-37-340Z.md

@@ -0,0 +1,23 @@
+You can create get/set properties by using the underscore suffix.
+
+<pre class="runnable readonly text 300">
+class Simple extends Base {
+    static getConfig() {
+        return {
+            className: 'Demo.view.component.Simple',
+            ntype: 'demo-simple-component',
+
+            foo: 1, // An instance field
+
+            bar_: null, // A get/set field with lifecycle hooks
+
+        }
+    }
+}
+</pre>
+
+In the debugger console this shows up as a get/set property.
+
+<pre style="color:gray;">
+    <span style="color:DarkOrchid">bar</span>: (...)
+</pre>

package/resources/data/deck/training/p/2023-01-01T21-13-13-880Z.md

@@ -0,0 +1,8 @@
+When you use the underscore suffix, Neo generates the get/set, and it also generates
+lifecycle methods that let you intervene as the property is accessed or set.
+
+For example, if you define the property `foo_`, Neo will generate these methods.
+
+- `beforeSetFoo(value, oldValue)` — returns the value to be used for the set
+- `afterSetFoo(value, oldValue)`
+- `beforeGetFoo(value)` — returns a value

package/resources/data/deck/training/p/2023-01-01T21-14-45-740Z.md

@@ -0,0 +1,98 @@
+#Introduction
+
+In this lab, you'll generate a starter app.
+
+#Steps
+
+<details>
+<summary>Create the application</summary>
+
+Use a terminal window to navigate to the root of your Neo workspace, 
+and run the following command. **Important:** Rather than taking all defaults, you _must_ choose the GoogleMaps option.
+
+    npm run create-app-training
+
+Name the app `Yelp`.
+
+If you run the app you'll get a runtime error telling you the api key is missing.
+You add the API key in the next step.
+
+    Google Maps JavaScript API warning: NoApiKeys
+
+??Add the Google Maps API key
+
+Edit `apps/yelp/neo-config.json` and add an entry for _googleMapsApiKey_.
+
+<pre style="color:lightgray;">
+{
+    "appPath": "../../apps/yelp/app.mjs",
+    "basePath": "../../",
+    "environment": "development",
+    "mainPath": "../node_modules/neo.mjs/src/Main.mjs",
+    "mainThreadAddons": [
+        "DragDrop",
+        "GoogleMaps",
+        "Stylesheet"
+    ],
+    <span style="font-weight:bold;color:limegreen">"googleMapsApiKey": "AIzaSyCRj-EPE3H7PCzZtYCmDzln6sj7uPCGohA",</span>
+    "workerBasePath": "../../node_modules/neo.mjs/src/worker/"
+}
+</pre>
+
+Refresh your browser window and you should see the starter app without any warnings.
+</details>
+
+<details>
+<summary>Change `MainView` to be a panel</summary>
+
+Replace the entire contents of `MainView` with this code. 
+
+<pre class="runnable readonly text">
+import Base from '../../../node_modules/neo.mjs/src/container/Panel.mjs';
+import Controller from './MainViewController.mjs';
+import ViewModel from './MainViewModel.mjs';
+
+class MainView extends Base {
+    static config = {
+        className: 'Junk.view.MainView',
+
+        controller: {module: Controller},
+        model: {module: ViewModel},
+
+        headers: [{
+            dock: 'top',
+            html: 'banner'
+        }, {
+            dock: 'top',
+            html: 'filter'
+        }, {
+            dock: 'right',
+            html: 'details',
+            width: 300
+        }],
+        items: [{
+            html: 'tab container'
+        }]
+    }
+}
+
+Neo.applyClassConfig(MainView);
+
+export default MainView;
+</pre>
+
+We'll learn about panels later, but in a nutshell, a panel is a container
+that has a special `headers:[]` config that lets you add components to the
+top, right, bottom, or left edges of the container.
+
+What does the code do?
+
+- Changes the view to be a panel
+- Adds three docked headers which are placeholders for classes you'll create
+    - The banner at the top
+    - The filter container at the top
+    - The business details container at the right
+
+Verify that the app runs.
+
+</details>

package/resources/data/deck/training/p/2023-01-01T21-18-23-886Z.md

@@ -0,0 +1,26 @@
+<pre class="runnable readonly text 480">
+{
+    ntype : 'container',
+    style: {
+        marginTop: '30px'
+    },
+
+    layout: {
+        ntype: 'vbox',
+        align: 'start'
+    },
+
+    items: [{
+        module       : Button,
+        iconCls     : 'fa fa-home',
+        iconPosition: 'right',
+        text        : 'Right'
+    }, {
+        ntype       : 'button',
+        flex        : 1,
+        iconCls     : 'fa fa-play-circle',
+        iconPosition: 'bottom',
+        text        : 'Bottom'
+    }, SomeClass]
+}
+</pre>

package/resources/data/deck/training/p/2023-01-01T21-18-31-316Z.md

@@ -0,0 +1,19 @@
+`itemDefaults:{}` specifies an item config used for every item in 
+`items:[]`. Individual items are free to set their own values.
+
+<pre class="runnable readonly text 300">
+itemDefaults: {
+    module: Button,
+    handler: 'onButtonClick',
+    flex: 1
+},
+items: [{
+    style: { backgroundColor: 'red' },
+}, {
+    style: { backgroundColor: 'yellow' },
+}, {
+    style: { backgroundColor: 'lightblue' },
+}, {
+    module: Label // This is used instead of the default
+}]
+</pre>

package/resources/data/deck/training/p/2023-01-01T21-18-42-290Z.md

@@ -0,0 +1,23 @@
+Items are arranged according to a `layout`.
+
+- `layout:'fit'` 
+- `layout: 'card'`
+- `layout: 'vbox'`
+- `layout: 'hbox'`
+- `layout: 'flexbox'`
+
+When you need to provide more config details, use this form:
+
+    layout: {
+        ntype:'vbox',
+        align: 'stretch'
+    }
+
+
+The container base class imports all layouts, which means you
+can use `ntype` (and don't need to explicitly import the layout class).
+
+<span style="color: #bbbbbb;">And actually, in the case of layouts, you
+<i style="color: #bbbbbb;">must</i> use ntype. You do not specify layouts 
+using the <tt>module</tt> config.
+</span>

package/resources/data/deck/training/p/2023-01-01T21-19-57-020Z.md

@@ -0,0 +1,24 @@
+You can procedurally add or remove items.
+
+- `insert(index, item, [silent])`
+- `remove(component, [destroyItem], [silent])`
+- `removeAt(index, [destroyItem], [silent])`
+
+
+
+<pre class="runnable readonly text 100">
+this.add({
+    module: Button,
+    text: 'New Button'
+});
+</pre>
+
+<pre class="runnable readonly text 160">
+this.add([{
+    module: Button,
+    text: 'One'
+}, {
+    module: Button,
+    text: 'Two'
+}]);
+</pre>

package/resources/data/deck/training/p/2023-01-01T21-22-31-184Z.md

@@ -0,0 +1,13 @@
+Components and other classes fire _events_. Those events run a callback
+function called the event _listener_ or _handler_.
+
+For example, buttons fire _click_ events, tables
+fire  _select_ events, and stores fire _load_ events.
+
+The usual way to configure to an event is with the `listeners` config. 
+
+    listeners: {
+        select: 'onTableSelect'
+    },
+
+

package/resources/data/deck/training/p/2023-01-01T21-22-38-317Z.md

@@ -0,0 +1,17 @@
+The _listeners_ object is a name value pair, where the name is the 
+name of the event, and the value is either a function or the string
+name of the function in the view's controller (or controllers up the
+containment hierarchy). 
+
+    listeners: {
+        change: data=>console.log(data),
+        focusChange: data=>console.log(data)
+    },
+
+
+    listeners: {
+        change: 'onChange',
+        focusChange: 'onFocusChange'
+    },
+
+

package/resources/data/deck/training/p/2023-01-01T21-22-47-693Z.md

@@ -0,0 +1,20 @@
+You can also add listeners procedurally.
+
+<pre style="font-size: 14pt">
+this.getReference('mycomp').addListener(string, function);
+</pre>
+
+The string is the name of the event, the function is the callback function.
+
+The callback function could be an in-line function, or a reference to a function.
+
+
+<pre style="font-size: 14pt">
+this.getReference('mycomp').addListener('change', data=>console.log(data));
+</pre>
+
+
+
+<pre style="font-size: 14pt">
+this.getReference('mycomp').addListener('change', this.onChange.bind(this));
+</pre>

package/resources/data/deck/training/p/2023-01-01T21-23-17-716Z.md

@@ -0,0 +1,39 @@
+Internally, listeners are set up as a map, with event names as the key, and and array of
+function references as the value.
+
+<img src="resources/images/EventsInMemory.png"/>
+
+<!-- 
+<table>
+<tr><th>component.listeners</th><th></th><th>Config</th></tr>
+<tr>
+<td width="45%"><pre style="font-size:12pt">
+    {    
+        change: [  ,  ]
+        foo: [  ]
+    }
+
+</pre></td>
+<td width="5%"></td>
+<td width="45%"><pre style="font-size:12pt">
+    // Adds the "change" entry and adds 1st array element
+    listeners: {
+        change: data=>console.log(data)
+    }
+
+    // Uses existing "change" entry and adds 2nd array element
+    listeners: {
+        change: data=>console.log(data)
+    }
+
+    // Adds the "foo" entry and adds 1st array element
+    listeners: {
+        foo: data=>console.log(data)
+    }
+</pre>
+</td>
+<td><pre style="font-size:12pt">
+</pre></td>
+</tr>
+</table>
+-->

package/resources/data/deck/training/p/2023-01-01T21-23-28-532Z.md

@@ -0,0 +1,22 @@
+Many Neo classes are observable, and thus, have the `fire()` method.<small><sup>*</sup></small>
+
+From a view method:
+
+<pre style="font-size: 14pt;margin:0 0 3em 0;">
+this.fire('foo', {component:this, prop: 'whatever you want'})
+</pre>
+
+From a controller method:
+
+<pre style="font-size: 14pt;margin:0 0 3em 0;">
+this.component.fire('foo', {component:this, prop: 'whatever you want'})
+</pre>
+
+There's nothing stopping you from firing an event on anything (although
+there's probably never a reason to do that).
+
+<pre style="font-size: 14pt;margin:0 0 3em 0;">
+this.getComponent('myReference').fire('foo', {message: 'yo'});
+</pre>
+
+<small>* Document your events so people know how to use your Neo classes!</small>

package/resources/data/deck/training/p/2023-01-01T21-25-23-899Z.md

@@ -0,0 +1,3 @@
+You rarely create `Neo.component.Base` instances. Instead, you usually create
+richer component subclasses, like buttons and panels.
+

package/resources/data/deck/training/p/2023-01-01T21-25-59-742Z.md

@@ -0,0 +1 @@
+`Ext.component.Base` has a few properties relating to content:

package/resources/data/deck/training/p/2023-01-01T21-26-53-748Z.md

@@ -0,0 +1,12 @@
+Earlier, we made a big deal about how Neo components were _declarative_ — where
+the code is an abstraction that _describes_ what's being created.
+
+But the code has some procedural code. 
+
+There's _was_ some procedural in the store's fields[], but we moved that into
+a separate view model class.
+
+But the event handlers are in the main container. In a normal app you'd have
+a lot of event listeners with a lot of business logic in them. Except for the
+most trivial use cases, you don't want that logic in your views.
+ 

package/resources/data/deck/training/p/2023-01-01T23-38-42-863Z.md

@@ -0,0 +1,2 @@
+A panel is a special container that has a `headers:[]`.
+