neo.mjs 6.9.10 → 6.9.11

package/resources/data/deck/training/p/2022-12-27T21-55-43-542Z.md

@@ -0,0 +1,84 @@
+Change the starter app's main view to show a table.
+
+<pre class="runnable javascript 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";
+
+class MainContainer extends Viewport {
+    static config = {
+        className: "Starter.view.MainContainer",
+        autoMount: true,
+        items: [{
+            module: Table,
+            flex: 1,
+            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,
+            },
+            columns: [{
+                dataField: "timestamp",
+                text: "Date",
+                renderer: (data) =>
+                    data.value.toLocaleDateString(undefined, {
+                        weekday: "long",
+                        year: "numeric",
+                        month: "long",
+                        day: "numeric",
+                    }),
+            }, {
+                dataField: "humanReadableLocation",
+                text: "Location",
+            }, {
+                dataField: "size",
+                text: "Magnitude",
+                align: "right",
+                width: 100,
+                renderer: (data) => data.value.toLocaleString(),
+            }],
+        }],
+        layout: {ntype: "fit"},
+    };
+
+    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);
+                });
+            },
+        });
+    }
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export default MainContainer;
+
+</pre>

package/resources/data/deck/training/p/2022-12-27T22-23-55-083Z.md

@@ -0,0 +1 @@
+<img height="580" src="resources/images/intro/InitialTable.png"/>

package/resources/data/deck/training/p/2022-12-27T22-24-07-886Z.md

@@ -0,0 +1,8 @@
+As we discussed before, the app is 
+- Class-based
+- Declarative
+
+The app 
+- Calls a web service
+- Populates a store
+- Shows store data in a table

package/resources/data/deck/training/p/2022-12-27T22-24-52-295Z.md

@@ -0,0 +1,8 @@
+Let's review the code and see how it _describes_ what it's doing. Even if you 
+knew nothing about Neo you could deduce what the code is doing.
+
+Note how the store defines the field types. This defines how values in the
+feed are converted as the store's records are created.
+
+And the table has column renderers which translate how the store values
+are shown to the user.

package/resources/data/deck/training/p/2022-12-27T22-25-03-853Z.md

@@ -0,0 +1,5 @@
+And it's class based. That means we can use inherited 
+methods. And we extend classes from the framework, or
+classes we define.
+
+We'll explore this more when we refactor some configs into reusable classes.

package/resources/data/deck/training/p/2022-12-27T22-43-58-924Z.md

@@ -0,0 +1,10 @@
+Note that the way we've coded the app, the grid is _not_ reusable.
+
+You can reuse any class config block by creating a new class that
+extends the component's class. In other words, if you want to 
+reuse a table, you create a new class that extends `Neo.container.Table`
+and uses the same config.
+
+Besides reuse, other good reasons to put your components into their own classes
+is make code more abstract, to isolate complexity, and to allow
+those to be tested in isolation. 

package/resources/data/deck/training/p/2022-12-27T22-44-28-881Z.md

@@ -0,0 +1,3 @@
+The store's model — which some people call the _record definition_ — 
+describes how values in the feed are translated into values in each record.
+

package/resources/data/deck/training/p/2022-12-27T22-44-41-791Z.md

@@ -0,0 +1,4 @@
+The `store` config specifies a URL, and a `model`.
+
+The store also has `autoLoad:true`, which means upon creation the 
+store immediatesly calls its url.

package/resources/data/deck/training/p/2022-12-27T22-45-21-032Z.md

@@ -0,0 +1,7 @@
+Now that the table is its own class
+- The main container code is cleaner
+- The table is reusable
+
+Since it's reusable, we can create a couple of instances in the main container. 
+To do that, just copy and paste the table's config, give both `flex:1`, and
+change the parent container's layout to `vbox`.

package/resources/data/deck/training/p/2022-12-27T22-49-22-078Z.md

@@ -0,0 +1,4 @@
+Neo has a feature that allows _shared, bindable, data_.
+
+A `Neo.model.Component` instance holds properties that can be values like
+strings, numbers, or even references, like component or store references.

package/resources/data/deck/training/p/2022-12-27T22-50-20-626Z.md

@@ -0,0 +1,4 @@
+A component model can have two sections: `data` and `stores`.
+
+<a href="http://localhost:8080/examples/model/twoway/" target="example">http://localhost:8080/examples/model/twoway/</a>
+

package/resources/data/deck/training/p/2022-12-28T16-58-55-192Z.md

@@ -0,0 +1,9 @@
+As we discussed before, any time you configure a class via a config
+you're free to create a class encapsulating the config properties.
+
+In other words, any time you have an `ntype` or `module` block, 
+you're free to create a new class that extends that type, and
+move the config to the new class `static getConfig` mehtod.
+
+Trivial classes might be done inline. Or to keep the view cleaner, 
+and more declarative, use a separate view model class.

package/resources/data/deck/training/p/2022-12-28T17-10-18-058Z.md

@@ -0,0 +1,15 @@
+The property's setter is run as the view model property changes.
+<pre class="runnable text readonly 200">
+{
+    module: Label,
+    bind: {
+        // Neo.component.Label.mjs has a text_ config.
+        // The value returned by the arrow function is assigned to label.text
+        text: data => \`The value of foo is "${data.foo || ''}"\`
+    }
+}
+</pre>
+
+See <a href="http://localhost:8080/ex/model/oneway/" target="example">
+examples/model/oneway/MainContainer.mjs
+</a>

package/resources/data/deck/training/p/2022-12-28T17-10-42-296Z.md

@@ -0,0 +1,40 @@
+Bindings are all about _setters_ — if the class has a `set` function you can bind to it.
+
+<div type="expander" caption="Your own setter">
+<pre>
+static getConfig() {
+    return {
+        // configs...
+    }
+}
+set foo(value) {
+    this.text = value;
+}
+</div>
+
+<div type="expander" caption="A configured setter">
+<pre>
+static getConfig() {
+    return {
+        // configs...
+        bar_: null
+    }
+}
+afterSetBar(value) {
+    this.text = value;
+}
+</div>
+
+<div type="expander" caption="Conclusion">
+<p>
+You wouldn't normally use a <code>set</code> function because creating a config 
+property is so easy, and it comes
+with the auto-generated _beforeSet_, _afterSet_, and _beforeGet_ methods.
+</p>
+</div>
+
+
+See <a href="http://localhost:8080/examples/model/setterversusconfig"
+    target="example">examples/model/setterversusconfig/MainContainer.mjs</a>
+
+    

package/resources/data/deck/training/p/2022-12-28T17-11-34-653Z.md

@@ -0,0 +1,41 @@
+#Introduction
+
+In this lab you'll have code the tab container which will hold the
+map, table, and thumbails.
+
+#Steps
+
+??Create `businesses/Tabs`
+
+Create a new class named `Yelp.view.businesses.Tabs` that extends `tab/container`.
+
+Give it the `ntype:'yelp-businesses-tabs',`.
+
+It needs *two* tabs, with the tab button text set to 'Map' and 'Table'.
+
+Remember that a tab is configured with the `tabButtonConfig`, and you'll use the
+`html` config as a placeholder to indicate that a map and a table will eventually
+be used. The generated class already has two tabs. 
+
+The first tab shoudl end up looking like this. 
+
+    {
+        ntype: 'component',
+        html: 'The map goes here',
+        tabButtonConfig: {
+            text: 'Map'
+        },
+    }
+
+
+
+??Use the new class
+
+Edit the main view. Import the new tabs class, and replace the item in the 
+`items:[]` to use the new class.
+
+Save, refresh, and verify that everything is working.
+
+??Use a map as the first tab item
+
+Now replace the tab's first item with a config for a Google map. You'll need

package/resources/data/deck/training/p/2022-12-29T01-43-32-431Z.md

@@ -0,0 +1,7 @@
+The previous example illustrates _one-way_ binding. 
+
+When the component model's property changes, the binding wakes up and the 
+arrow function is evaluated.
+
+We can see that in action by looking at the view's component model and
+updating the value — when that happens the bindings fire.

package/resources/data/deck/training/p/2022-12-29T15-56-54-485Z.md

@@ -0,0 +1,7 @@
+Neo launches three Web Workers: 
+
+- neomjs-app-worker
+- neomjs-data-worker
+- neomjs-vdom-worker
+
+<small>You can configure Neo to launch additional workers, such as a shared app worker.</small> 

package/resources/data/deck/training/p/2022-12-29T15-57-11-499Z.md

@@ -0,0 +1,7 @@
+A basic debugging (and coding!) task is getting a referernce to a component. 
+You can then see the component's state and run its methods.
+
+There are a few ways to get a component reference.
+- `Neo.manager.Component.items` <tt>// Returns [Component]</tt>
+- `Neo.find({property:'value'})` <tt>// Returns [{}] of instances<t/t>
+- `Neo.findFirst({property:'value'})` <tt>// Returns first instance</tt>

package/resources/data/deck/training/p/2022-12-29T16-00-13-223Z.md

@@ -0,0 +1,7 @@
+Let's do a little code inspection using
+- `Neo.manager.Component.items`, or
+- `Neo.find({'ntype':'tab-header-button'})`
+
+Look in the API docs to find the `ntype`.
+
+<img height="300" src="resources/images/intro/FindingNtype.png"/>

package/resources/data/deck/training/p/2022-12-29T18-34-25-826Z.md

@@ -0,0 +1,4 @@
+As a developer, your work is done in _neomjs-app-worker_. When you're debugging, 
+choose that worker in the DevTools JavaScript context dropdown.
+
+<img height="400" src="resources/images/DevToolsJavaScriptContext.png">

package/resources/data/deck/training/p/2022-12-29T18-36-08-226Z.md

@@ -0,0 +1,106 @@
+#Introduction
+
+In this lab you'll install the bookmarklet, and practice getting component references, 
+changing properties, and runing methods.
+
+#Steps
+
+?? Try `Neo.manager.Component.items`
+
+Run the starter app.
+
+In Chrome DevTools | Console, switch to the `neomjs-app-worker` context and
+on the console type `Neo.manager.Component.items`
+
+Expand the array and look for one of the tab buttons. The buttons will have 
+ids set to something like `neo-tab-header-button-1`. Expand the item and scroll
+down to the `text: (...)` property. 
+
+Click on the ellipses and enter a new string value. Once you hit Enter or lose
+focus you should see the tab reflect the change.
+
+Open `apps/starter/view/MainContainer.mjs` and inspect the code.
+
+?? Try `Neo.findFirst()`
+
+Get a reference to to the tab container via this statement:
+
+    tabContainer = Neo.findFirst('ntype', 'tab-container');
+
+Note that the statement assigns the reference to a variable. That'll make it easier
+to inspect it, and run methods on it.
+
+Now add a new tab: 
+
+    tabContainer.add({
+        tabButtonConfig: {
+            iconCls: 'fa fa-home',
+            text: 'Hi there!'
+        },
+        vdom: { innerHTML: 'Yet another tab.' }
+    })
+
+??Enable the Ctrl-right-click debugger
+
+Edit the starter's `index.html` and use this code.
+<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>
+
+Now edit `MainController.mjs` and add the method to detect the event and log the components.
+This is a _method_, so place it within the class definition.
+
+<pre class="runnable html 230">
+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>
+
+
+??Change the text in one of the tab buttons
+
+Refresh the app so the new main view method is in effect, then _Ctrl-right-click_
+on one of the tab buttons. It should be logged to the console. Drill-down to the `text` property
+and change the value.
+
+Clear the console and do another _Ctrl-right-click_, then right-click on the button component logged in 
+the console and choose _Store object as global variable_. It'll use a value like _temp1_.
+
+Rather than drilling-down, assign a new text value by entering `temp1.text = 'hi there'`.

package/resources/data/deck/training/p/2022-12-29T18-36-56-893Z.md

@@ -0,0 +1,112 @@
+#Introduction
+
+In this lab, you'll generate a starter app and run it.
+
+#Steps
+
+??Use the command-line to generate the app
+
+Using a terminal window, navigate to the root of your Neo workspace.
+
+If you use a code editor, just open the workspace, and open a terminal
+window in the editor. If you ever forget the command-line options, 
+just open `package.json` to see the list of scripts.
+
+From the workspace, run this command.
+
+    npm run create-app
+
+Name the app _Starter_ and choose the default response for everything.
+
+<img src="resources/images/intro/NpmRunCreateApp.png"/>
+
+<pre>
+</pre>
+
+??Inspect the application
+
+Open `apps/starter/view/MainContainer.mjs` and inspect the code.
+
+??Run the app
+ 
+ The command to start the server is `npm run server-start`. This starts a server
+ on port 8080 and launches a browser window at the root of the workspace. 
+
+ Click on the `apps` directory, then the `starter` directory, and you'll see the
+ running app.
+
+??Change the code and see the result
+
+You can change the code any way you dare, but as a suggestion:
+- Remove the `style`, `height`, and `width` configs for the tab container. 
+- Then add `style: { padding: '20px' },` to the main container. 
+
+You need to refresh the browser to see the result of code changes.
+
+<pre style="font-size: 80%; color:#cacaca;">
+import Component from '../../../node_modules/neo.mjs/src/component/Base.mjs';
+import TabContainer from '../../../node_modules/neo.mjs/src/tab/Container.mjs';
+import Viewport from '../../../node_modules/neo.mjs/src/container/Viewport.mjs';
+
+/**
+ * @class june-starter.view.MainContainer
+ * @extends Neo.container.Viewport
+ */
+class MainContainer extends Viewport {
+    static config = {
+        /**
+         * @member {String} className='june-starter.view.MainContainer'
+         * @protected
+         */
+        className: 'june-starter.view.MainContainer',
+        /**
+         * @member {Boolean} autoMount=true
+         */
+        autoMount: true,
+        <span style="color:red;">style: { padding: '20px' },</span>
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module: TabContainer,
+            <s style="color:red;">height: 300,</s>
+            <s style="color:red;">width : 500,</s>
+            <s style="color:red;">style : {flex: 'none', margin: '20px'},</s>
+
+            itemDefaults: {
+                module: Component,
+                cls   : ['neo-examples-tab-component'],
+                style : {padding: '20px'},
+            },
+
+            items: [{
+                tabButtonConfig: {
+                    iconCls: 'fa fa-home',
+                    text: 'Tab 1'
+                },
+                vdom: {
+                    innerHTML: 'Welcome to your new Neo App.'
+                }
+            }, {
+                tabButtonConfig: {
+                    iconCls: 'fa fa-play-circle',
+                    text: 'Tab 2'
+                },
+                vdom: {
+                    innerHTML: 'Have fun creating something awesome!'
+                }
+            }]
+        }],
+        /*
+         * @member {Object} layout={ntype:'fit'}
+         */
+        layout: {
+            ntype: 'fit'
+        }
+    }
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export default MainContainer;
+</pre>

package/resources/data/deck/training/p/2022-12-29T19-31-30-507Z.md

@@ -0,0 +1,31 @@
+Neo enables you to create scalable and high performant 
+browser-based apps.
+
+<div type="expander" caption="Normal Apps">
+<p>
+Normal browser apps run in as a single thread in one processer. 
+That means that apps that are processor-intensive — such as doing 
+massive dom updates — are limited by what the one processer can handle.
+</p>
+</div>
+
+<div type="expander" caption="Neo">
+<p>
+Neo uses three (or more) web workers — so three processors are used.
+One thread holds your app logic, one handles HTTP/Ajax calls, and
+one handles DOM updates.
+</p>
+<p>
+Furthermore, the DOM updates are intelligently handled via
+delta updates, rather than re-rendering large DOM hierarchies.
+Neo can handle tens of thousands of DOM updates _per second_.
+</p>
+</div>
+ 
+<div type="expander" caption="And there's more...">
+<p>
+There are other advantages, such as lazy loading any part of the
+running app, and multi-window apps, where a single app can be run
+in multiple browser window. 
+</p>
+</div>

package/resources/data/deck/training/p/2022-12-29T19-31-55-091Z.md

@@ -0,0 +1,14 @@
+The roots of graphical user interfaces started with research done at the Xerox Palo Alto 
+Research Center (PARC).
+
+Development tools and languages evolved to let developers write user interfaces by choosing
+from pallets of components to specify a hierarchy of of containers (like panels), and
+components within the container (like buttons and input widgets).<small><sup>*</sup></small>
+
+In this style of coding, components are high-level abstractions where developers configure the
+component, and the framework handles translating that to the low-level native calls.
+
+<br><br>
+<small>*
+Back in the 1980s and 1990s developers used tools like Delphi and PowerBuilder.</small>
+

package/resources/data/deck/training/p/2022-12-29T20-03-42-628Z.md

@@ -0,0 +1,9 @@
+Over time, web apps starting becoming more important, and this presented a problem for organizations.
+
+<b style="color:green">Should UI development be done by HTML/Web designers, or by traditional GUI developers?</b>
+
+And consequently...
+
+<b style="color:green">Should frameworks and languages be focused on HTML (and add features to integrate it with code), or should they focus on abstract components (and adding a layer 
+to render those into the DOM)?</b>
+

package/resources/data/deck/training/p/2022-12-29T20-21-20-669Z.md

@@ -0,0 +1,7 @@
+Native applications use the operating system as the run-time environement. 
+
+The runtime for a web app is the browser's JavaScript engine, and the rules of HTML and
+CSS.
+
+Normally, languages run at a higher level of abstraction — how many times
+have you had to write assembly or byte code?

package/resources/data/deck/training/p/2022-12-29T20-37-08-919Z.md

@@ -0,0 +1,46 @@
+Neo uses the JavaScript class system to define its classes, but also enhances
+the class system to auto-generate getters and settings (and setter life-cycle
+methods) — we'll discuss inheritance and the class system later.
+
+Your components extend classes from the framework, 
+and you're free to extend the classes you write. That means your code is 
+_extensible_ and _reusable_.
+
+<pre class="runnable text readonly">
+import Component from '../../../node_modules/neo.mjs/src/component/Base.mjs';
+import TabContainer from '../../../node_modules/neo.mjs/src/tab/Container.mjs';
+import Viewport from '../../../node_modules/neo.mjs/src/container/Viewport.mjs';
+
+class MainContainer extends Viewport {
+    static config = {
+        className: 'Starter.view.MainContainer',
+        ntype: 'main',
+        autoMount: true,
+        style: { padding: '20px' },
+        layout: { ntype: 'fit' },
+        items: [{
+            module: TabContainer,
+            itemDefaults: {
+                module: Component,
+                cls: ['neo-examples-tab-component'],
+                style: { padding: '20px' }
+            },
+            items: [{
+                tabButtonConfig: {
+                    iconCls: 'fa fa-home',
+                    text: 'Tab 1'
+                },
+                vdom: { innerHTML: 'Welcome to your new Neo App.' }
+            }, {
+                tabButtonConfig: {
+                    iconCls: 'fa fa-play-circle',
+                    text: 'Tab 2'
+                },
+                vdom: { innerHTML: 'Have fun creating something awesome!' }
+            }]
+        }]
+    }
+}
+Neo.applyClassConfig(MainContainer);
+export default MainContainer;
+</pre>