neo.mjs 6.9.10 → 6.9.12

package/resources/data/deck/training/p/2023-02-05T17-44-53-815Z.md

@@ -0,0 +1,195 @@
+#Introduction
+
+In this lab you'll change the detail view to be a tab panel,
+then use the `vdom` property to render content. 
+
+#Steps
+
+??Change the details container to be a tab container
+
+Import `src/tab/Container.mjs` and Import `src/component/Base.mjs`.
+
+Change the view to extend tab container. 
+
+Code an items array. Since we'll be needing references to the 
+two items, each has a `reference`. Note the `vdom` and padding 
+on the first item. You'll be dynamically updating the vdom 
+in the `afterSetBusiness()` method.
+
+    items: [{
+        module: Component,
+        reference: 'view',
+        tabButtonConfig: {
+            text: 'View'
+        },
+        style: {
+            padding: '8px'
+        },    
+        vdom: {
+            cn: [{
+                tag: 'h2',
+                innerHTML: 'foo'
+            }]
+        }
+    }, {
+        reference: 'form',
+        tabButtonConfig: {
+            text: 'Edit'
+        }
+    }]
+
+Save and refresh, and you should see the _foo_ in the detail container.
+
+??Update the field when a record is set
+
+Change the detail view's `afterSetBusiness()` method to update the `vdom`.
+
+    afterSetBusiness(business){
+        if (!business) return;
+        const view = this.getReference('view');
+        view.vdom.cn[0].innerHTML = business.title;
+        view.update();
+    }
+
+<b>Important: </b>The `update()` method tells Neo to apply vdom changes to the DOM.
+Any time you change a set of vdom properties you need to run `update()`.
+
+You don't need the first item's `innerHTML:'foo'` property any more, so you can 
+remove that from the first item's config.
+
+Save, refresh, and confirm that the title is shown as the business is set.
+
+??Use a convenience function
+
+Neo has a convenience method that lets you abstract the vdom a little.
+
+Edit the detail view's first item, and add a `id` to the element showing the title.
+
+    vdom: {
+        cn: [{
+            tag: 'h2',
+            id: 'title'
+        }]
+    }
+
+The util method lets you find the node using the id (or using a more complex selector).
+Use the utility method, replacing the statement referencing the vdom hierarchy.
+
+<pre>
+    <s>view.vdom.cn[0].innerHTML = business.title;</s>
+    Neo.util.VDom.findVdomChild(view.vdom, 'title').vdom.innerHTML = business.title;
+</pre>
+
+
+We'll be updating several vdom nodes, so we can create a more convenient way of 
+calling the function.
+
+Code a new class member.
+
+    findVdomChild = Neo.util.VDom.findVdomChild
+
+Then use it in the after set method. Here's how that part of the code will look afterwards.
+
+<pre style="color:gray; padding: 8px; border: thin solid lightgray;">
+findVdomChild = Neo.util.VDom.findVdomChild;
+
+afterSetBusiness(business){
+    if (!business) return;
+    const view = this.getReference('view');
+    this.findVdomChild(view.vdom, 'title').vdom.innerHTML = business.title;
+    view.update();
+}
+</pre>
+
+??Add the thumbnail
+
+The Yelp businesses store doesn't have a field value for the image. Add this
+to the main view model _businesses_ store `fields:[]`.
+
+    {
+        name: 'imageUrl',
+        mapping: 'image_url'
+    }
+
+Then back in the details view, update the vdom as follows.
+
+    vdom: {
+        tag: 'div',
+        cn: [{
+            tag: 'h2',
+            id: 'title'
+        }, {
+            tag: 'img',
+            id: 'thumbnail',
+            style: {
+                width: '100%'
+            }
+        }]
+    }
+
+Then modify the `afterSetBusiness()` method to update the element's `src`.
+
+    this.findVdomChild(view.vdom, 'thumbnail').vdom.src = business.imageUrl;
+
+??Add the address
+
+Depending on how you left the store's `address` config, you may need to change two things.
+
+First, in the businesses store config and make sure the address field is defined like this.
+
+    {
+        name: 'address',
+        mapping: 'location.display_address'
+    }, 
+
+Second, look at the address column in the table and make sure it uses a renderer.
+
+    {
+        text: 'Address',
+        dataField: 'address',
+        renderer: data => data.value.join(', ')
+    }
+
+Now edit the details view and a `vdom` child element between the _h2_ and the _img_ to 
+be a div that shows the address. 
+
+    vdom: {
+        tag: 'div',
+        cn: [{
+            tag: 'h2',
+            id: 'title'
+        }, {
+            tag: 'div',
+            id: 'address',
+            cn: []
+        }, {
+            tag: 'img',
+            id: 'thumbnail',
+            style: {
+                width: '100%' // It would be better to do this via css
+            }
+        }]
+    }
+
+Then modify the `afterSetBusiness()` method to update the _address_ element's
+`cn` to be an array of items, one per item in the address array. Each item should
+be a _div_ with its `innerHTML` set to that part of the address.
+
+Hint: The business record's `address` property is an array, and the `cn` is 
+also an array. Maybe there's a easy way to map the address array into a new
+array you assign to `cn`? How would you code it? Give it a few minutes
+of thought and try it. If you get stuck, that code is given in the next lab step.
+
+??Here's the code for showing the address
+
+Here's one way to code it. How does this compare to your solution?
+
+    this.findVdomChild(view.vdom, 'address').vdom.cn = business
+        .address
+        .map(item => ({tag: 'div', innerHTML: item}));
+
+??One last point...
+
+The view tab will become more and more complicated as we add content.
+It should be refactored into its own view class to isolate that complexity.
+We won't bother, but on a project that would be the right thing to do.

package/resources/data/deck/training/p/2023-02-05T17-45-40-114Z.md

@@ -0,0 +1,92 @@
+#Introduction
+
+In this lab you'll add the form as the second tab.
+
+#Steps
+
+??Make the second tab a form
+
+You'll add a <b>Save</b> button, and in the handler log the contents
+of the form. This simulates the set of data you'd send to the back-end.
+
+Import `src/form/Container.mjs`, and use it as the second item.
+
+Configure the form to use vbox, along with some other configs.
+
+    {
+        module: Form,
+        reference: 'form',
+        tabButtonConfig: {
+            text: 'Edit'
+        },
+        style: {
+            padding: '8px'
+        },
+        itemDefaults: {
+            labelWidth: 80,
+            flex: 'none'
+        },
+        layout: {
+            ntype: 'vbox',
+            pack: 'start',
+            align: 'stretch'
+        },
+        items: []
+    }
+
+??Add two fields
+
+Add two fields to the `items:[]`. 
+
+Add a text field. You'll need to import `src/form/field/Text.mjs` and 
+use that module. Configure the field with `labelText:'Name'`
+and `name:'name'`. 
+
+Add a number field. You'll need to import `src/form/field/Number.mjs` 
+and use that module. Configure the field with `labelText:'Rating'`, 
+`name:'rating'`, 
+along with `minValue:1`, `maxValue:5`, and `stepSize:0.5`.
+
+The `name` config isn't required, but it makes it easier to 
+initialize, as you'll see in the next step.
+
+??Initialize the form with values from the record
+
+In the `afterSetBusiness()` method add code to update the form with 
+values from the record.
+
+    const form = this.getReference('form');
+    form.setValues({
+        name: business.title,
+        rating: business.rating
+    });
+
+If you save and refresh, then choose businesses, you should see the 
+form updating to reflect the selected record.
+
+??Add a <b>Save</b> button
+
+Add _two_ new items to the form's `items:[]`. One to take up available 
+room at the bottom of the form, and the other a save button.
+
+    {
+        flex: 1
+    }, {
+        module: Button,
+        text: 'Save',
+        handler: data => data.component.up({ntype: 'yelp-business-details'}).onSaveClick()
+    }
+
+As you can see, the button calls an `onSaveClick()` event. Add that as a new member
+of the view, and log the values in the form.
+
+    onSaveClick() {
+        const form = this.getReference('form');
+        form.getValues().then(data => {
+            console.log(data);
+            // Send the data to the back-end.
+        });
+    }
+
+Note that in a real-world app you _might_ code a couple of events in the view, but
+beyond a trivial view, you'll create a view controller and put those events there!

package/resources/data/deck/training/p/2023-02-05T18-12-14-489Z.md

@@ -0,0 +1,60 @@
+#Introduction
+
+In this lab you'll create the details container.
+
+#Steps
+
+??Plan your work
+
+The detail component you're creating in this lab will show details about the selected 
+business. 
+
+Conceptually, the details view "reflects details for the specified business," 
+so you'll set it up with a _business_ property, just like you did for the tab container.
+Main will detect the _businessChange_ event, then pass the business to the details
+view by assigning the business record to the detail view's property.
+
+The details view will be contained within the main container, off to the right. We have a 
+choice about how to lay things out: we could have main arrange its items via _hbox_ layout, 
+with two items in its `items:[]` — the tab container and the details view — 
+or we could make the details view another docked item, docked on the right. We'll do the latter.
+
+Main already listens to the _businessChange_ event. You'll modify that code to have it pass the 
+business to the details view you're creating in this lab.
+
+??Create the panel
+
+Use the `create-class` script to create a class named `Yelp.view.business.Details`
+that extends `container.Base`.
+
+Add a `ntype:'yelp-business-details',` config to the new class. We can use
+that when we create an instance in the main view, and it might come in handy
+when debugging.
+
+??Create a <kbd>business_</kbd> property
+
+Continue editing `business/Details.mjs` and create a <kbd>business_:null,</kbd> 
+property, and a corresponding `afterSetBusiness(business)` method that logs 
+the passed business.
+
+??Use the class in the main view
+
+Import the new details view, and modify the corresponding entry in the `items:[]`
+to create the details view. Configure it with `reference: 'details'`.
+
+??Update the business as the user selects items on the map
+
+The main view controller is detecting changes to the business 
+from the tabs view. Modify that code to pass the information onto the details
+view. 
+
+    onBusinessChange(business){
+        this.getReference('details').business = business;
+    }
+
+Note that the code no longer needs the console log it had, so we'll 
+delete it to avoid consusion with the console log in the details view.
+
+Save and refresh, and and as you choose map markers you should
+see the log emanating from the details view.
+

package/resources/data/deck/training/p/2023-02-06T00-14-54-457Z.md

@@ -0,0 +1,9 @@
+
+
+    {
+        module: NumberField,
+        labelText: 'Rating',
+        maxValue: 5,
+        minValue: 1,
+        stepSize: 0.5
+    }

package/resources/data/deck/training/p/2023-06-28T18-03-14-313Z.md

@@ -0,0 +1,8 @@
+I'm too lazy to do anything that isn't extremely easy. So even typing `Neo.findFirst({... `
+is a burden.
+
+What's easier is just clicking on a component, and instantly logging the component and its 
+containment hierarchy.
+
+But a regular click is too commonly used for things like buttons, 
+so we'll choose something more uncommon — _Ctrl-right-click_.

package/resources/data/deck/training/p/2023-06-28T18-26-17-290Z.md

@@ -0,0 +1,7 @@
+1. Put the event code in `index.html`
+1. Copy the code and paste the Neo.mjs method to `MainContainer.mjs`
+2. Refresh the app
+1. Ctrl-right-click on one of the tab buttons — the component and hierarchy is logged
+
+If you need one of those references in a variable — for example, to run a method on it —right-click on the component logged in the console and choose _Store object as global variable_. 
+(Make sure you are viewing the app worker context, or _Store object as global variable_ won't work.)

package/resources/data/deck/training/p/2023-06-28T21-16-24-034Z.md

@@ -0,0 +1,40 @@
+A _right-click_ fires the _contextmenu_ event.
+
+Somewhere, somehow, we need to have the main thread add a DOM event that 
+listens to _contextmenu_, detect if _Ctrl_ is being pressed, then let 
+our Neo app know.
+
+We could put the code that does that in a bookmarklet, but then we'd have to re-run
+it every time the browser refreshes. Instead, we'll put that code in `index.html`. 
+
+<pre class="runnable html">
+&lt;!DOCTYPE HTML>
+&lt;html>
+&lt;head>
+    &lt;meta name="viewport" content="width=device-width, initial-scale=1">
+    &lt;meta charset="UTF-8">
+    &lt;title>Starter&lt;/title>
+&lt;/head>
+&lt;body>
+    &lt;script src="../../src/MicroLoader.mjs" type="module">&lt;/script>
+    &lt;script>
+        new MutationObserver((mutationsList, observer) => {
+            for (let mutation of mutationsList) {
+                for (let addedNode of mutation.addedNodes) {
+                    if (addedNode.className && addedNode.className.includes('neo-viewport')) {
+                        addedNode.addEventListener("contextmenu", function (e) {
+                            if (!(e.ctrlKey || e.metaKey)) return;
+                            e.stopPropagation();
+                            e.preventDefault();
+                            const event = new Event('neo-debug-item-select', {bubbles: true});
+                            e.target.dispatchEvent(event);
+                        });
+                        observer.disconnect(); // We found the viewport so we're finished listening
+                    }
+                }
+            }
+        }).observe(document.body, {childList: true, subtree: false});
+    &lt;/script>
+&lt;/body>
+&lt;/html>
+</pre>

package/resources/data/deck/training/p/2023-06-28T21-16-34-972Z.md

@@ -0,0 +1,16 @@
+Here's the corresponding method that listens to the custom event. You place this in your main view.
+
+<pre class="runnable text  readonly 280">
+afterSetMounted(value, oldValue) {
+    super.afterSetMounted(value, oldValue);
+    if (!value) return;
+    this.addDomListeners({
+        "neo-debug-item-select": event => {
+            event.path.forEach(item => {
+                const component = Neo.getComponent(item.id);
+                if (component) console.log(component);
+            });
+        }
+    });
+}
+</pre>

package/resources/data/deck/training/p/2023-06-28T21-28-28-379Z.md

@@ -0,0 +1,4 @@
+To do this we need two pieces:
+- Main thread code to detect a mouse event and fire a custom event
+- Neo.mjs code to detect the custom event and <code>console.log()</code> the component and its containment hierarchy 
+

package/resources/data/deck/training/p/2023-06-29T23-15-10-411Z.md

@@ -0,0 +1,5 @@
+A few key concepts we'll be discussing:
+- Class-based coding
+- Component (view) models
+- Events
+- Controllers