neo.mjs 6.9.9 → 6.9.11

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:[]`.
+

package/resources/data/deck/training/p/2023-01-03T02-07-19-014Z.md

@@ -0,0 +1,143 @@
+#Introduction
+
+In this lab, you'll use a component model to hold the store config.
+
+#Steps
+
+??Look at network traffic 
+
+Before doing anything, refresh the app and look at network traffic. Note the two 
+calls to the earthquakes data feed. 
+
+In this lab you'll refactor the code to put the store in a component model, 
+and as a result you'll only only see one call.
+
+??Modify the `model` block
+
+At the start of the main container's config add a new block that 
+configures the component model. 
+
+<pre style="color:lightgray;">
+    const config = {
+        className: 'Earthquakes.view.MainView',
+
+        model: {
+            module: ViewModel,
+            <span style="color:blue;">stores: {}</span>
+        },
+        items: [{
+            module: EarthquakesTable,
+        ...
+</pre>
+
+Then copy the store config to the component model's `stores` block.
+
+<pre style="color:lightgray;">
+    config = {
+        className: 'Earthquakes.view.MainView',
+        model: {
+            module: ViewModel,
+            <span style="color:blue;">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
+                }
+            },
+        }</span>,
+        items: [{
+            module: EarthquakesTable,
+    ...
+</pre>
+
+Save your changes.
+
+At this point you have the same store config _two_ times: 
+- In the component model's `stores` config
+- In the grid's `store` config
+
+If you refresh the browser and look at network traffic you'll see
+_two_ calls to the `apis.is` web service.
+
+??Add the binding to the table
+
+In the main container, remove the `store` config from the table.
+Then a new config for the table:
+
+    bind: {
+        store: 'stores.earthquakes'
+    }
+
+Refresh and verify that it's working. If you look at network traffic you should
+see a single call to the `apis.is` web service.
+
+??Refactor the model into its own class
+
+**If you used the _create-app-training_ build script, you already have a view model
+and can skip this step.**
+
+IF you don't, define a new source file `MainViewModel.mjs` with this code.
+
+<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: {}
+    }
+}
+
+Neo.applyClassConfig(MainViewModel);
+export default MainViewModel;
+</pre>
+
+??Use the view model
+
+**If you used the _create-app-training_ build script, you already have a view model
+and can skip this step.**
+
+In the main container, import the view model:
+
+    import ViewModel from './MainContainerViewModel.mjs';
+
+Then simply change the `model` config to use `module: ViewModel,`.
+Leave the rest of the `model` config alone.
+
+At this point you're creating an instance of the new view model, but it 
+doesn't really have anything in it. The config from the main container 
+is being applied to it, which means if you save and refresh, everything
+should still work.
+
+??Move the store config to view model
+
+In the main container cut the `stores` config from the view model block, 
+and paste that in the `MainContainerModel`, replacing the `stores` block there.
+
+Refresh and everything should still work.
+
+Note how much cleaner the main view is. Classes should be simple. Complexity
+should be factored out by creating new classes. There should also be a clean
+separation of concerns, where stores and other view model setup is done in
+a view model class, the view should be a declarative description of the view,
+and event handling should be done in a separate controller &mdash; which we'll talk about soon.

package/resources/data/deck/training/p/2023-01-04T01-52-23-454Z.md

@@ -0,0 +1,76 @@
+<pre class="runnable text readonly">
+import Table from "../../../node_modules/neo.mjs/src/table/Container.mjs";
+import Viewport from "../../../node_modules/neo.mjs/src/container/Viewport.mjs";
+import Store from "../../../node_modules/neo.mjs/src/data/Store.mjs";
+import Foo from "./earthquakes/Table.mjs";
+import ComponentModel from '../../../node_modules/neo.mjs/src/model/Component.mjs';
+
+class MainContainer extends Viewport {
+    static config = {
+        className: "Earthquakes.view.MainContainer",
+        autoMount: true,
+
+        model: {
+            module: ComponentModel,
+            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,
+                }
+            }
+        },
+        items: [{
+            flex: 1,
+            module: Foo,
+            bind: {store: 'stores.earthquakes'},
+        }, {
+            flex: 1,
+            module: Foo,
+            bind: {store: 'stores.earthquakes'},
+        }],
+        layout: {ntype: "vbox"},
+    };
+
+    afterSetMounted(value, oldValue) {
+        super.afterSetMounted(value, oldValue);
+        if (!value) return;
+        this.addDomListeners({
+            "neo-debug-item-select": (event) => {
+                console.log('');
+                event.path.forEach((item) => {
+                    const component = Neo.getComponent(item.id);
+                    if (component) console.log(component);
+                });
+            },
+        });
+    }
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export default MainContainer;
+
+</pre>

package/resources/data/deck/training/p/2023-01-06T23-21-12-009Z.md

@@ -0,0 +1,127 @@
+#Introduction
+
+In this lab you'll create a container to hold the _city_ and _category_. 
+Eventually, you'll pass that information to the Yelp data feed to get 
+a list of matching businesses.
+
+#Steps
+
+??Create the filter container
+
+Use the command line to navigate to the Neo workspace and generate
+the filter class.
+
+    npm run create-class
+
+Name the class `Yelp.view.businesses.Filter`, and have it extend `container.Base`.
+
+Give it `ntype:'yelp-filter'` and add a the property `html:'This is the new filter container',`.
+The `html` property is just a placeholder; later we'll be adding input fields for city
+and category.
+
+When you're finished the file should look like this:
+
+<pre class="runnable readonly text 280">
+import Base from '../../../../node_modules/neo.mjs/src/container/Base.mjs';
+class Filter extends Base {
+    static config = {
+        className: 'Yelp.view.businesses.Filter',
+        ntype: 'yelp-filter',
+        html: 'This is the new filter container',
+        items: []
+    }
+}
+
+Neo.applyClassConfig(Filter);
+
+export default Filter;
+</pre>
+
+The `html` config is just a way to make it easier to see that we're
+using the new component. Once we start using the filter container in
+the main view we'll remove that property.
+
+
+??Use the filter container
+
+Then edit the main view and 
+- Import `FilterPanel`
+- Change the second top docked item config
+    - Use `module:FilterPanel`
+    - Remove the `html` config
+
+Save and refresh and you should see that the new filter container is being used.
+
+??Plan your work
+
+Don't change `Filter.mjs` yet, but think about the changes you'll be
+making.
+
+The filter container needs two text fields, arranged horizontally.
+
+- An import for the text field component
+- A `layout` config for the container
+- Two field component configs in the `items:[]` 
+
+If you were to go to the API docs for `Neo.form.field.Text` you'd see 
+these key configs:
+
+- `labelText`
+- `labelWidth`
+-  `clearable`
+
+When you code, make small changes and refresh frequently.
+
+Now that it's clear what we need to do, we can start coding...
+
+??Remove the `html` property
+
+Before doing anything, edit `Filter.mjs` and delete the `html` config.
+
+??Import the text field component
+
+Add an import `TextField` that imports `form/field/Text.mjs`. Be careful 
+to code the relative path correctly. The Neo framework is at the same
+relative location as the base class, so only the path at the end will differ.
+
+??Add the city text field
+
+Add a text field config to `items:[]`.
+
+    items: [{
+        module: TextField,
+        clearable: true,
+        width: 220,
+        labelText: 'City',
+        labelWidth: 40
+    }]
+
+Save and verify that you see the new text field.
+
+??Add a category text field
+
+Add a second item for the category field. It'll be a copy-and-paste
+of the city config, but you'll have to modify the label and widths.
+
+Save, refresh, and modify the code until it until it looks the way you want.
+
+??Separate the two components
+
+The components touch, so add a `style` to the city field to give it a right margin.
+
+    style: { marginRight: '16px' },
+
+??Use `itemDefaults`
+
+Note that the text fields share a couple of properties: they are of the
+same type, and they both use `clearable:true`. Sharing common configs is
+what `itemDefaults` is designed to do. 
+
+Add a new config to the filter contaner, and remove the corresponding properties 
+in the child items.
+
+    itemDefaults: {
+        module: TextField,
+        clearable: true,
+    },
+

package/resources/data/deck/training/p/2023-01-06T23-21-31-685Z.md

@@ -0,0 +1,81 @@
+#Introduction
+
+In this lab you'll have the filter container fire
+_cityChange_ and _categoryChange_ events.
+
+#Steps
+
+??Fire _cityChange_
+
+We need to fire an event when city changes. 
+
+Within the `Filter` class, how do we know when that property has changed? Via the `afterSetCity()` method.
+
+What information should we pass when firing the event? When you design your own classes
+it's up to you. The question is: what would be useful to the listener? In a change event 
+you'd typically send three three things:
+    - The component firing the event
+    - The new value
+    - The old value
+
+Edit `yelp/src/view/businesses/Filter.mjs` and modify the `afterSetCity()` method to have
+a second param — the old value. Then add a statement to fire an event.
+
+    afterSetCity(city, oldCity) {
+        console.log(city);
+        if (!this.rendered) return;
+        this.getReference('city').value = city;
+        this.fire('cityChange', {
+            component: this,
+            city,
+            oldCity
+        });
+    }
+
+??Test the event in the debugger
+
+You can procedurally add an event handler via the `on()` method.
+
+Use the Chrome console to add a listener. 
+
+    Neo.findFirst({ntype:'yelp-filter'}).on('cityChange', data=>console.log('listener', data))
+
+Then enter a city in the text field. After a moment you should see your log message.
+
+??Have the main view listen for the change
+
+Now that you know your event is getting fired, edit the main view and add a listener there.
+
+<pre style="border: thin solid gray; padding: 8px; color: lightgray;">
+headers: [{
+    module: Banner,
+    dock: 'top',
+}, {
+    dock: 'top',
+    module: Filter,
+    <span style="color:#b91010;">listeners: {
+        cityChange: data => console.log(data)
+    }</span>
+}, {
+    dock: 'right',
+    html: 'details',
+    width: 300
+}],
+</pre>
+
+??Test the main view listener
+
+When you run your app and enter a city you should see its value being logged from the main view.
+
+<img src="resources/images/yelp/OnCityChangeEvent.png"></pre>
+
+??Fire _categoryChange_
+
+Now do the same thing for category. 
+
+- Fire the event from `Yelp.view.businesses.Filter#afterSetCategory'
+- Test it
+- Add the listener in the main view
+
+When you're finished, you should see both city and category changes being logged
+from the main view.

package/resources/data/deck/training/p/2023-01-06T23-21-59-596Z.md

@@ -0,0 +1,36 @@
+#Introduction
+
+In this lab you'll use the city to update the center.
+
+#Steps
+
+??Create a main view model property `city`
+
+We want a default city, and we want the filter to reflect it.
+
+- Define a new data property `city:'Oconomowoc, Wisconsin'` in the main view model
+- In the main view, bind the filter's `city` to the new property
+
+You should see that as the city fields's initial value.
+
+??Do the same for category.
+
+- Define a new data property `category:'pizza'`
+- Bind the filter's `category` to that property
+
+??Use two-way binding to reflect user changes to city and category
+
+In the main view, change each binding to be two-way bound.
+
+For city it's coded like this. Do the same for category.
+
+    city: { twoWay: true, value: data => data.city }
+
+Test it by running the app, entering a city and category, then using the 
+the Chrome debugger to confirm that the main view model reflects the values.
+
+    Neo.findFirst({ntype:'yelp-main'}).model.data.city
+
+    Neo.findFirst({ntype:'yelp-main'}).model.data.category
+
+