neo.mjs 6.9.10 → 6.9.12

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>

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

@@ -0,0 +1,43 @@
+
+The code is also _declarative_ — it describes what you're creating.
+It's also an abstraction, because it describes _what's_ in the user interface,
+but not _how_ it's rendered.
+
+<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>

package/resources/data/deck/training/p/2022-12-30T19-04-30-990Z.md

@@ -0,0 +1,8 @@
+Neo takes the _declarative_ approach, 
+where you configure high-level components. The details of rendering
+those to the run-time environment is handled by the framework (and 
+low-level code).
+
+Ultimately, components do need to translate into DOM and styling, and
+you may need to do that yourself occastionally, but
+Neo tries to make that the exception, rather than the rule.

package/resources/data/deck/training/p/2022-12-31T18-43-56-338Z.md

@@ -0,0 +1,7 @@
+<img style="float:left;margin-right:1em;" height="600" src="resources/images/intro/LookForSetters.png"/>
+
+Once you find the component, expand it and scroll down until you see the grayed-out 
+properties &mdash; those are the setter/getter properties.
+
+Choose whatever property you're interested in, and click on the ellipses. That
+runs the getter, and if you change the value you'll be running the setter. 

package/resources/data/deck/training/p/2022-12-31T18-51-50-682Z.md

@@ -0,0 +1 @@
+<img style="float:left;margin-right:1em;" height="600" src="resources/images/intro/ChangeText.png"/>

package/resources/data/deck/training/p/2022-12-31T18-54-04-176Z.md

@@ -0,0 +1,4 @@
+You can run methods too. And since there's no transpiling, anything you can put in your
+code will run on the command line.
+
+<img height="480" src="resources/images/intro/Add.png"/>

package/resources/data/deck/training/p/2022-12-31T22-11-55-555Z.md

@@ -0,0 +1,112 @@
+#Introduction
+
+In this lab, you'll generate a starter app, then modify it to use a table to
+show earthquakes in Iceland.
+
+#Steps
+
+??Create the application
+
+Use a terminal window to navidate to the root of your Neo project, and run the _create-app-training_
+scrip. Name the app _Earthquakes_. **Important:** Rather than taking all defaults, you _must_ choose the GoogleMaps main thread addon.
+
+    npm run create-app-training
+
+When you run the app you should get a runtime error telling you the api key is missing.
+
+    Google Maps JavaScript API warning: NoApiKeys
+
+??Add the Google Maps API key
+
+Edit `apps/earthquakes/neo-config.json` and add an entry for _googleMapsApiKey_.
+<pre style="color:lightgray;">
+{
+    "appPath": "../../apps/earthquakes/app.mjs",
+    "basePath": "../../",
+    "environment": "development",
+    "mainPath": "../node_modules/neo.mjs/src/Main.mjs",
+    "mainThreadAddons": [
+        "DragDrop",
+        "GoogleMaps",
+        "Stylesheet"
+    ],
+    <span style="font-weight:bold;color:blue">"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.
+
+??Add the table and store to the `MainView` 
+
+Look the main view. It has an empty `items:[]`. Change it so it has one item, which
+is the config for a table and store
+
+<pre class="runnable readonly">
+{
+    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(),
+    }],
+}
+</pre>
+
+If you were to save and refresh you'll get a runtime error 
+
+    ReferenceError: Table is not defined
+
+That's beause the new code references two classes: _Store_ and _Table_, and those haven't been imported. 
+
+??Add imports for `Store` and `Table`
+
+At the top of `MainView.mjs` add two imports:
+
+    import Table from "../../../node_modules/neo.mjs/src/table/Container.mjs";
+    import Store from "../../../node_modules/neo.mjs/src/data/Store.mjs";
+
+Save and refresh and the app should run.

package/resources/data/deck/training/p/2022-12-31T23-00-41-222Z.md

@@ -0,0 +1,6 @@
+Let's create another starter, but do something more sophisticated: We'll call
+a web service that returns information on earthquakes in Iceland, and show 
+that information in a table.
+
+Then we'll enhance and refactor the application to showcase some basic principles of Neo.
+