neo.mjs 6.9.9 → 6.9.11

package/resources/data/deck/training/p/2023-01-20T15-34-58-813Z.md

@@ -0,0 +1,75 @@
+#Introduction
+
+In this lab you'll detect changes to city and category.
+When city changes you'll geocode it to find its latitude and longitude.
+
+#Steps
+
+??Remove the view model listener in the main view
+
+To avoid being overwhelmed with `console.log()` output, edit
+the main view and remove the `listeners` config in the 
+view model config. From now on on the view model listening logic
+will be set up in the main view controller.
+
+??Detect view model property changes
+
+In the main view controller override the `onComponentConstructed()` method. The method
+should check for changes to _city_ and if so, call a new method `onCityChange(city)`.
+
+    onComponentConstructed() {
+        const model = this.getModel();
+        this.onCityChange(model.data.city);
+        model.on('dataPropertyChange', data => {
+            if (data.key === 'city') this.onCityChange(data.value);
+        });
+    }
+    onCityChange(city) {
+        if (!city) return;
+        // The code to geocode the city goes here.
+        console.log(city);
+    }
+
+Save, change the city, and look for the console log in the debugger console.
+
+??Geocode the city
+
+Use the following call to `Neo.main.addon.GoogleMaps.geocode`. The details of the
+call and the response aren't important right now, although if you're curious you
+can read <a href="https://developers.google.com/maps/documentation/geocoding/requests-geocoding" target="_blank">the Google Maps geocoding API</a>. 
+
+<pre style='padding: 4px; font-size: 13.5pt; border: thin solid gray; color:lightgray'>
+onCityChange(city) {
+    if (!city) return;
+    <span style='color:firebrick'>Neo.main.addon.GoogleMaps.geocode({ address: city })
+        .then(data => this.getModel().data.center = data.results[0].geometry.location);</span>
+}
+</pre>
+
+
+
+??Stub out a method that will eventually be fetching Yelp data
+
+Add this method.
+
+    doFetchYelpData() {
+        const model = this.getModel();
+        console.log('Fetch yelp data', model.data.center, model.data.category);
+    }
+
+And modify `onComponentConstructed()` to check for changes to _center_ and _category_.
+
+<pre style='padding: 4px; border: thin solid gray; color:lightgray'>
+onComponentConstructed() {
+    const model = this.getModel();
+    this.onCityChange(model.getData('city'));
+    model.on('dataPropertyChange', data => {
+        if (data.key === 'city') this.onCityChange(data.value);
+        <span style='color:firebrick'>if (data.key === 'center') this.doFetchYelpData();
+        if (data.key === 'category') this.doFetchYelpData();</span>
+    });
+}
+</pre>
+
+Save, refresh, and verify that `doFetchYelpData()` is logging changes to the map center
+(via changes to city), and category. 

package/resources/data/deck/training/p/2023-01-21T16-33-20-458Z.md

@@ -0,0 +1,33 @@
+Some components, such as `Neo.table.Container`, have a `store` config.
+
+<pre style="padding: 8px; border: thin solid lightgray; font-size: 11pt; ">
+{
+    module: EarthquakesTable,
+    listeners: {
+        select: 'onTableSelect'
+    },
+    store: {
+        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
+    }
+}
+</pre>

package/resources/data/deck/training/p/2023-01-21T16-45-28-263Z.md

@@ -0,0 +1,28 @@
+
+<pre style="padding: 8px; border: thin solid lightgray; font-size: 13pt; ">
+class MainViewModel extends Base {
+    static getConfig() {
+        return {
+            className: 'Earthquakes.view.MainViewModel',
+            data: {},
+            stores: {
+                earthquakes: {
+                    module: Store,
+                    model: {
+                        ...
+                    },
+                    ...
+                }
+            }
+        }
+    }
+}</pre>
+
+<pre style="padding: 8px; border: thin solid lightgray; font-size: 13pt; ">
+{
+    module: EarthquakesTable,
+    bind: {
+        store: 'stores.earthquakes'
+    },
+}
+</pre>

package/resources/data/deck/training/p/2023-01-21T16-56-25-452Z.md

@@ -0,0 +1,3 @@
+You may also define the store as a class. You might do this if you need to create multiple instances.
+Once you've defined the type you can use it the same way you'd create any store — in a config or a view model
+

package/resources/data/deck/training/p/2023-01-21T17-28-31-493Z.md

@@ -0,0 +1,6 @@
+Finally, you can procedurally create a store via Neo.create(). But it's always preferable to create a store — or any object — declaratively.
+
+    const store = Neo.create({
+        module : Store,
+    });
+    this.getReference('mytable').store = store;

package/resources/data/deck/training/p/2023-01-21T19-49-51-918Z.md

@@ -0,0 +1,13 @@
+If the record's value isn't a simple conversion from the value in the feed
+you can provide a `calculate` method. For example:
+
+    {
+        name: 'position',
+        calculate: (record, field, data) => ({ lat: data.latitude, lng: data.longitude })
+    }
+
+- _record_ is the record instance
+- _field_ is the field config
+- _data_ is the value from the data feed
+
+You can use `calculate` to convert a value from the feed, or to define a new record value.

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

@@ -0,0 +1,15 @@
+A recod config contains a `fields:[]` that describes the record's fields.
+
+The field config can have these values:
+
+| Config Property | Description                                                        | 
+|-----------------|--------------------------------------------------------------------|
+|`name`           | Required. The name of the feed value.                              |
+|`type`           | Date/html/string                                                   |
+|`mapping`        | The path to feed property.                                         |
+|            |                                                                    |
+|`calculate`      | A function used to calculate the value of the field.               |
+|            |                                                                    |
+|`maxLength`      | Limits values to the specific length.                              |
+|`minLength`      | Limits values to the specific length.                              |
+|`nullable`       | Flags whether the value can be null/undefined.                     |

package/resources/data/deck/training/p/2023-01-21T20-35-54-947Z.md

@@ -0,0 +1,20 @@
+
+<pre>
+model: {
+    fields: [{
+        name: 'humanReadableLocation'
+    }, {
+        name: 'size',
+        <s>ntype: 'data-field-float'</s>, // Not supported yet 
+    }, {
+        name: 'timestamp',
+        type: 'Date'
+    }, {
+        name: 'title',
+        mapping: 'humanReadableLocation'
+    }, {
+        name: 'position',
+        calculate: (rec, field, data) => ({lat: data.latitude, lng: data.longitude })
+    }]
+},
+</pre>

package/resources/data/deck/training/p/2023-01-21T20-54-47-603Z.md

@@ -0,0 +1,39 @@
+In <a href="https://nameless-tundra-27404.herokuapp.com/go/?fn=yelp&latitude=43.084&longitude=-89.546&term=pizza&limit=1" target="_blank">the Yelp data feed</a> the array of values is nested in _businesses_.
+
+The url has three query fields we'll change dynamically.
+
+    latitude=43.084&longitude=-89.546&term=pizza
+<div class="expander" caption="Data">
+<pre style='color:lightgray'>
+{
+    "id": "nsw3tlB-hwz4KbPYcuaSww",
+    <span style="color:firebrick">"name": "Novanta"</span>,
+    <span style="color:firebrick">"image_url": "https://s3-media1.fl.yelpcdn.com/bphoto/2QtMzHr1ZNoflLzXKRza9A/o.jpg"</span>,
+    <span style="color:firebrick">"coordinates": {"latitude": 43.0753733442932,"longitude": -89.5296266588608}</span>,
+    <span style="color:firebrick">"rating": 4.5</span>,
+    "location": {
+        <span style="color:firebrick">"display_address": [ "8452 Old Sauk Rd", "Madison, WI 53562" ]</span>,
+        "address1": "8452 Old Sauk Rd",
+        "address2": "",
+        "address3": "",
+        "city": "Madison",
+        "zip_code": "53562",
+        "country": "US",
+        "state": "WI"
+    },
+    "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": 329,
+    "categories": [
+        {"alias": "pizza", "title": "Pizza"},{"alias": "italian","title": "Italian"},
+        {"alias": "mediterranean","title": "Mediterranean"}
+    ],
+    "transactions": ["pickup","delivery"],
+    "price": "$$",
+    "phone": "+16088317740",
+    "display_phone": "(608) 831-7740",
+    "distance": 1639.6643113166895,
+    "alias": "novanta-madison"
+}
+</pre>
+</div>

package/resources/data/deck/training/p/2023-01-21T20-56-28-184Z.md

@@ -0,0 +1,25 @@
+`responseRoot` specifies the value in the feed that holds the array of items
+used to populate the store. 
+
+For example, the Yelp feed returns a single object which contains a _businesses_
+property whose value is the array of businesses. Therefore, the store that reads
+it should specify 
+
+`responseRoot: businesses`.
+
+    {
+    "businesses": [
+        {
+        "id": "nsw3tlB-hwz4KbPYcuaSww",
+        "alias": "novanta-madison",
+        "name": "Novanta",
+        "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": 329,
+        "categories": [
+            {
+            "alias": "pizza",
+            "title": "Pizza"
+            },
+        ...

package/resources/data/deck/training/p/2023-01-21T20-57-32-927Z.md

@@ -0,0 +1,4 @@
+
+- `url`
+- `autoLoad`
+- `responseRoot`

package/resources/data/deck/training/p/2023-01-21T23-13-33-394Z.md

@@ -0,0 +1,6 @@
+We've done a lot of talking, but the resulting code is pretty simple.
+
+- Fewer than 20 (yes, twenty) lines of procedural code 
+- A simple store config, with two fields
+- A well-encapsulated `Filter` class
+- A simple, declaratively defined, main view and tabs

package/resources/data/deck/training/p/2023-01-28T19-11-37-464Z.md

@@ -0,0 +1,24 @@
+Grids show a store's data as a table of rows and columns.
+
+<pre style="font-size: 14pt;color:gray;">
+items: [{
+    module: Table,
+    store: {
+        module: Store,
+        model: {
+            fields: [{ name: <span style="color:blue;">'name'</span> }, { name: <span style="color:blue;">'hp'</span> }, { name: <span style="color:blue;">'attack'</span> }, { name: <span style="color:blue;">'defense'</span> }]
+        },
+        data: [
+            { <span style="color:blue;">"name"</span>: "Bulbasaur" , "pokedex": 1 , <span style="color:blue;">"hp"</span>: 45 , <span style="color:blue;">"defense"</span>: 49 , <span style="color:blue;">"attack"</span>: 49 , <span style="color:blue;">"speed"</span>: 45 },
+            { <span style="color:blue;">"name"</span>: "Ivysaur"   , "pokedex": 2 , <span style="color:blue;">"hp"</span>: 60 , <span style="color:blue;">"defense"</span>: 63 , <span style="color:blue;">"attack"</span>: 62 , <span style="color:blue;">"speed"</span>: 60 },
+            { <span style="color:blue;">"name"</span>: "Venusaur"  , "pokedex": 3 , <span style="color:blue;">"hp"</span>: 80 , <span style="color:blue;">"defense"</span>: 83 , <span style="color:blue;">"attack"</span>: 82 , <span style="color:blue;">"speed"</span>: 80 },
+        ]
+    },
+    columns: [
+        { dataField: <span style="color:blue;">'name'</span>   , text: 'Name' },
+        { dataField: <span style="color:blue;">'hp'</span>     , text: 'HP' },
+        { dataField: <span style="color:blue;">'attack'</span> , text: 'Attack' },
+        { dataField: <span style="color:blue;">'defense'</span>, text: 'Defense' },
+    ],
+}]
+</pre>

package/resources/data/deck/training/p/2023-01-28T20-43-41-188Z.md

@@ -0,0 +1,9 @@
+Neo implements Tables as a `Neo.table.header.Toolbar` followed by a `Neo.table.View`.
+
+You don't reference these directly — they are created automatically using
+the configs you provide for the table.
+
+If needed, you can provide header configs via `headerToolbarConfig`
+
+
+And you can provide view configuration via `viewConfig`.

package/resources/data/deck/training/p/2023-01-28T20-53-56-476Z.md

@@ -0,0 +1,8 @@
+Each item in `columns:[]` configures a column.
+
+- `text` — the column title 
+- `dataField`  —  the record value
+- `width`
+- `align`
+
+- `renderer`

package/resources/data/deck/training/p/2023-01-28T20-58-43-776Z.md

@@ -0,0 +1,10 @@
+
+By default, Neo simply shows the `dataField` value for the record, but you can provide
+your own value by configuring a `renderer` function.
+
+An object is passed to the function.
+
+- dataField
+- index
+- record
+- value — the `record[dataField]` value

package/resources/data/deck/training/p/2023-01-28T22-18-41-259Z.md

@@ -0,0 +1,33 @@
+<pre style="font-size: 13pt; color: gray; ">
+{
+    module: Table,
+    store: {
+        module: Store,
+        model: { fields: [{ name: 'timestamp', type: 'Date' }, { name: 'humanReadableLocation' }, { name: 'quality' }] },
+        data: [
+            { "timestamp": "2017-10-13T12:07:24.000Z", "latitude": 63.976, "longitude": -21.949, "depth": 1.1, "size": 0.6, "quality": 58.73, "humanReadableLocation": "6,1 km SV af Helgafelli" },
+            { "timestamp": "2017-10-13T09:50:50.000Z", "latitude": 65.124, "longitude": -16.288, "depth": 7.2, "size": 0.9, "quality": 78.51, "humanReadableLocation": "6,1 km NA af Herðubreiðartöglum" },
+        ]
+    },
+    columns: [
+        { dataField: 'humanReadableLocation', text: 'Location' },
+        {
+            dataField: 'timestamp', 
+            text: 'Date', 
+            <span style="font-weight: bold; color: #b91010">renderer: data => new Intl.DateTimeFormat('en-US', {
+                year: 'numeric', month: 'long', day: 'numeric', weekday: 'long',
+                hour: 'numeric', minute: 'numeric', second: 'numeric',
+                hour12: false,
+                timeZone: 'America/Los_Angeles'
+            }).format(data.value)</span>
+        },
+        {
+            dataField: 'quality', 
+            text: 'quality', 
+            <span style="font-weight: bold; color: #b91010">renderer: data => new Intl.NumberFormat('en-US', {
+                minimumFractionDigits: 3
+            }).format(data.value)</span>
+        },
+    ]
+}
+</pre>

package/resources/data/deck/training/p/2023-01-28T22-24-34-808Z.md

@@ -0,0 +1,24 @@
+You can use the _record_ reference to include other values from the record.
+
+<pre style="font-size: 14pt; color: gray; ">
+{
+    module: Table,
+    store: {
+        module: Store,
+        model: {
+            fields: [{ name: 'name' }, { name: 'hp' }, { name: 'attack' }, { name: 'defense' }, { name: 'pokedex' }]
+        },
+        data: [
+            { "name": "Bulbasaur", "pokedex": 1, "hp": 45, "defense": 49, "attack": 49, "speed": 45 },
+            { "name": "Ivysaur", "pokedex": 2, "hp": 60, "defense": 63, "attack": 62, "speed": 60 },
+            { "name": "Venusaur", "pokedex": 3, "hp": 80, "defense": 83, "attack": 82, "speed": 80 },
+        ]
+    },
+    columns: [
+        { text: 'Name', <span style="font-weight: bold; color: #b91010">renderer: data => `${data.record.name} (${data.record.pokedex})`</span> }, // Ivysaur (2)
+        { dataField: 'hp', text: 'HP' },
+        { dataField: 'attack', text: 'Attack' },
+        { dataField: 'defense', text: 'Defense' }
+    ]
+}
+</pre>

package/resources/data/deck/training/p/2023-01-29T16-25-24-528Z.md

@@ -0,0 +1,44 @@
+<table>
+<tr>
+<td><ul>
+<li>RowModel (default)
+<li>CellModel
+<li>ColumnModel
+</ul></td>
+<td><ul>
+<li>CellRowModel
+<li>CellColumnModel
+<li>CellColumnRowModel
+</ul></td>
+<td>
+</tr>
+</table>
+
+<pre style="font-size:13pt; color: gray">
+{
+    module: Table,
+    store: {
+        module: Store,
+        model: {
+            fields: [{ name: 'name' }, { name: 'hp' }, { name: 'attack' }, { name: 'defense' }, { name: 'pokedex' }]
+        },
+        data: [
+            { "name": "Bulbasaur", "pokedex": 1, "hp": 45, "defense": 49, "attack": 49, "speed": 45 },
+            { "name": "Ivysaur", "pokedex": 2, "hp": 60, "defense": 63, "attack": 62, "speed": 60 },
+        ]
+    },
+    <span style="font-weight: bold; color: #b91010">selectionModel: {
+        module: CellModel
+    },</span>
+    columns: [
+        { text: 'Name', renderer: data => `${data.record.name} (${data.record.pokedex})` },
+        { dataField: 'hp', text: 'HP' },
+        { dataField: 'attack', text: 'Attack' },
+        { dataField: 'defense', text: 'Defense' }
+    ],
+}
+</pre>
+
+
+
+

package/resources/data/deck/training/p/2023-01-29T21-14-32-588Z.md

@@ -0,0 +1,12 @@
+The selection model has an `items[]` property that holds the 
+_row id_ for each record. 
+
+Call the table's view `getRecordByRowId()` method to get the corresponding record.
+
+    onSelectedItemsClick(data) {
+        const table = this.getReference('table');
+        const view = table.getView();
+        const records = table.selectionModel.items
+            .map(rowId => view.getRecordByRowId(rowId));
+        console.log(records);
+    }

package/resources/data/deck/training/p/2023-01-31T19-24-53-504Z.md

@@ -0,0 +1,8 @@
+A form container is a simple container with some convenience methods for gathering
+field values and testing validation.
+
+- `getFields()` 
+- `getField()` — get a field using its id or name
+- `getValues()`
+- `isValid()`
+- `reset()`

package/resources/data/deck/training/p/2023-01-31T20-33-55-855Z.md

@@ -0,0 +1,11 @@
+Conceptually, a field represents a name/value pair that can be sent to 
+the backend via a form submit or Ajax call.
+
+    {
+        module: Text,
+        labelText: 'First Name',
+
+        name: 'fname', // Typically, the name sent to the backend
+        value: 'Homer', 
+
+    }, 

package/resources/data/deck/training/p/2023-01-31T20-34-30-261Z.md

@@ -0,0 +1,7 @@
+A `Neo.form.Container` is a simple container that can hold any
+component, including fields
+
+Fields are input components, such as text fields, checkboxes, and select fields.
+
+A form has convenience methods for setting and getting field values, and testing validation.
+

package/resources/data/deck/training/p/2023-01-31T20-52-53-367Z.md

@@ -0,0 +1,43 @@
+<div class="expander" caption="config">
+<p>
+<kbd>name          </kbd><br>
+<kbd>value\_        </kbd><br>
+<br>
+<kbd>labelText\_        </kbd><br>
+<kbd>subLabelText\_     </kbd><br>
+<kbd>labelPosition\_     </kbd><br>
+<kbd>placeholderText\_     </kbd><br>
+<br>
+<kbd>clearable\_    </kbd><br>
+<br>
+<kbd>maxLength\_     </kbd><br>
+<kbd>minLength\_     </kbd><br>
+<br>
+<kbd>readOnly\_      </kbd><br>
+<kbd>required\_      </kbd><br>
+<br>
+<kbd>inputPattern\_  </kbd>&mdash; A regular expression that limits keyboard input<br>
+<kbd>validator     </kbd><br>
+</p>
+</div>
+
+
+<div class="expander" caption="Methods">
+<p>
+<kbd>clearToOriginalValue()</kbd><br>
+<kbd>isEmpty()        </kbd><br>
+<kbd>isValid()        </kbd><br>
+<kbd>validate()        </kbd><br>
+
+</p>
+</div>
+
+<div class="expander" caption="Events">
+<p>
+<i>change</i><br>
+<i>clear</i><br>
+<i>changeClearToOriginalValue</i><br>
+
+</p>
+</div>
+

package/resources/data/deck/training/p/2023-02-04T15-18-35-682Z.md

@@ -0,0 +1,20 @@
+The `Clear` and `CopyToClipboard` triggers might be used directly, 
+but the others are used via the corresponding pre-configured
+component.<small><sup>*</sup></small>
+
+`Neo.form.field.trigger.*`
+
+
+- `Clear`
+- `CopyToClipboard`
+
+
+- `Date`
+- `Search`
+- `SpinDown`
+- `SpinUp`
+- `Time`
+
+
+<br><br>
+<small>* Many triggers require setting up trigger click event handlers.</small>

package/resources/data/deck/training/p/2023-02-04T15-49-47-597Z.md

@@ -0,0 +1,14 @@
+Most validation configs have a corresponding message
+which is used when the validation fails. 
+
+
+| Validation Config   | Validation Error           |
+| ------------------- | -------------------------- |
+| `maxLength`         | `errorTextMaxLength`<small><sup>*</sup></small>|
+| `minLength`         | `errorTextMinLength`       |
+| `required`          | `errorTextRequired`        |
+| `validator`         |                            |
+
+<br>
+<br>
+<small>* Text is limited to the max length.</small>

package/resources/data/deck/training/p/2023-02-04T18-58-57-808Z.md

@@ -0,0 +1 @@
+<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="1000" height="600" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2F2Xzb3mL9nwSprFN3lMweja%2FNeo.form.field-Hierarchy%3Fnode-id%3D0%253A1%26t%3DxfeBL4RWaRZGyAic-1%2Fhide-ui" allowfullscreen></iframe>

package/resources/data/deck/training/p/2023-02-04T20-07-11-288Z.md

@@ -0,0 +1 @@
+<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="1000" height="600" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FVz2o2oFk8mFdwJ7nQIzmK0%2FNeo.form.field.Picker%3Fnode-id%3D0%253A1%26t%3DlAG8QtmPJatN3LP2-1" allowfullscreen></iframe>

package/resources/data/deck/training/p/2023-02-04T20-09-50-169Z.md

@@ -0,0 +1 @@
+<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="1000" height="600" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FW4rsTDe84bUaVe9Fa8HuRV%2FNeo.form.field.*%3Fnode-id%3D0%253A1%26t%3D7Y1XOS0oVKMWmYnI-1" allowfullscreen></iframe>

package/resources/data/deck/training/p/2023-02-04T20-19-42-740Z.md

@@ -0,0 +1,8 @@
+| Config              | Methods                    | Events             |
+| ------------------- | -------------------------- | -------------------|
+| `name`              | `isValid()`                | _change_           |
+| `value_`            | `reset()`                  |                    |
+|                | `validate()`               |                    |    
+|                     |                            |                    |
+
+

package/resources/data/deck/training/p/2023-02-04T20-23-56-013Z.md

@@ -0,0 +1,12 @@
+    {
+        module: TextField,
+        labelText: 'First Name',
+        name: 'fname',
+    }, 
+
+
+Text fields let the user type input.
+
+The `Neo.form.field.Text` class is an important base class. There
+are many kinds of field, including search fields, passwords fields,
+and many others.

package/resources/data/deck/training/p/2023-02-04T20-28-12-391Z.md

@@ -0,0 +1,20 @@
+Use the _validator_ config function for non-trivial validation.
+
+The function receives a reference to the field.
+Return `true` for a valid field, or an error string for an invalid field.
+
+
+The function can be in-line, or a string which names a controller method.
+
+    {
+        module: Text,
+        labelText: 'Name',
+        validator: field => field.value.match(/^\w+$/)?true:'Special characters are not allowed',
+    }, 
+
+
+    {
+        module: Text,
+        labelText: 'Name',
+        validator: 'nameValidator'
+    }, 

package/resources/data/deck/training/p/2023-02-05T00-20-32-554Z.md

@@ -0,0 +1,16 @@
+- `Neo.form.field.Date`
+- `Neo.form.field.Time`
+- `Neo.form.field.Select`
+    - `Neo.form.field.Chip`
+    - `Neo.form.field.Color`
+
+A picker is a base class that introduces a `tigger:[]` config. 
+
+A trigger is a widget docked on the right of a field. A text
+field can configure any set of triggers that are needed.
+(A _clearable_ text field is just a text field with a `Clear` trigger
+dynamically added.)
+
+Picker sub-classes are components that are pre-configured to use
+one of the `Neo.form.field.trigger.*` triggers. 
+