neo.mjs 6.18.0 → 6.18.2

package/apps/portal/view/home/parts/MainNeo.mjs

@@ -1,36 +1,39 @@
-import Button    from '../../../../../src/button/Base.mjs';
-import Container from '../../../../../src/container/Base.mjs';
+import BaseContainer from './BaseContainer.mjs';
+import Button        from '../../../../../src/button/Base.mjs';
 
 /**
  * @class Portal.view.home.parts.MainNeo
- * @extends Neo.container.Base
+ * @extends Portal.view.home.parts.BaseContainer
  */
-class MainNeo extends Container {
+class MainNeo extends BaseContainer {
     static config = {
         /**
          * @member {String} className='Portal.view.home.parts.MainNeo'
          * @protected
          */
         className: 'Portal.view.home.parts.MainNeo',
-
-        cls: ['page', 'landing-page'],
+        /**
+         * @member {String[]} cls=['portal-home-main-neo']
+         */
+        cls: ['portal-home-main-neo'],
 
         layout: {ntype: 'vbox', align: 'center', pack: 'center'},
         /**
          * @member {Object[]} items
          */
         items: [{
-            module: Container,
-            cls   : ['vector'],
-            flex  : 'none',
+            ntype: 'container',
+            cls  : ['vector'],
+            flex : 'none',
         }, {
-            cls : 'neo-h1',
+            cls : ['neo-h1'],
             flex: 'none',
-            html: 'The High-Performance Web Framework for Next Generation Interfaces'
+            html: 'The High-Performance Web Framework for Next Generation Interfaces',
+            vdom: {tag: 'h1'}
         }, {
-            module: Container,
-            cls   : ['button-group'],
-            flex  : 'none',
+            ntype: 'container',
+            cls  : ['button-group'],
+            flex : 'none',
 
             items: [{
                 module : Button,

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.18.0'
+         * @member {String} version='6.18.2'
          */
-        version: '6.18.0'
+        version: '6.18.2'
     }
 
     /**

package/examples/model/dialog/EditUserDialog.mjs

@@ -46,14 +46,7 @@ class EditUserDialog extends Dialog {
             labelText : 'Lastname:',
             labelWidth: 110,
             listeners : {change: 'onLastnameTextFieldChange'}
-        }],
-        /**
-         * @member {Object} wrapperStyle={height: '300px',width : '400px'}
-         */
-        wrapperStyle: {
-            height: '300px',
-            width : '400px'
-        }
+        }]
     }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.18.0",
+    "version": "6.18.2",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/data/deck/learnneo/pages/Events.md

@@ -53,27 +53,31 @@ A `Neo.controller.Component` is a simple class associated with a component class
 instance of its associated controller is automatically created. 
 
 <pre data-neo>
-import Container  from '../../../../src/container/Base.mjs';
-import Controller from '../../../../src/controller/Component.mjs';
-import TextField  from  '../../../../src/form/field/Text.mjs';
+import Base from '../../../../src/controller/Component.mjs';
 
-class MainViewController extends Controller {
+class MainViewController extends Base {
     static config = {
-        className: 'Example.view.MainViewController'
+        className: 'Example.view.MainViewController',
     }
     onChange(data) {
-        Neo.Main.log({value: data.value})
+        Neo.Main.log({value: data.value});
     }
+
 }
 Neo.setupClass(MainViewController);
 
 
+import Container from '../../../../src/container/Base.mjs';
+import TextField from '../../../../src/form/field/Text.mjs';
+
 class MainView extends Container {
     static config = {
-        className : 'Example.view.MainView',
+
         controller: MainViewController,
-        layout    : {ntype:'vbox', align:'start'},
-        items     : [{
+        className: 'Example.view.MainView',
+
+        layout   : {ntype:'vbox', align:'start'},
+        items: [{
             module   : TextField,
             labelText: 'Name',
             listeners: {
@@ -85,6 +89,8 @@ class MainView extends Container {
 Neo.setupClass(MainView);
 </pre>
 
+
+
 (It's important to keep in mind that in Neo.mjs, all class definitions are coded in their own
 source file: one class per file. In the examples we're putting all the relevant classes together
 to make it easier to see the source code for every class being used. But in an 

package/resources/data/deck/learnneo/pages/GuideEvents.md

@@ -1,4 +1,4 @@
-As you read in the Getting Started > Events topic, components, stores, and many other objects fire events.
+As you read in the <a href="#/learn/Events">Getting Started > Events</a> topic, components, stores, and many other objects fire events.
 
 
 <pre data-neo>
@@ -32,12 +32,12 @@ Neo.setupClass(MainView);
 
 ### In-line
 
-The event listener function can be coded in-line. Normally, you want event handlers to be in a view's controller, 
-but for very simple situation it can be convenient to use this syntax.
+The event listener function can be coded in-line. Normally you want event handlers to be in a view's 
+controller, but for very simple situation it can be convenient to use this syntax.
 
 <pre data-neo>
 import Container from '../../../../src/container/Base.mjs';
-import Button from '../../../../src/button/Base.mjs';
+import TextField from '../../../../src/form/field/Text.mjs';
 
 class MainView extends Container {
     static config = {
@@ -45,10 +45,10 @@ class MainView extends Container {
         layout   : {ntype:'vbox', align:'start'},
 
         items: [{
-            module   : Button,
-            text: 'Button',
-            listeners: { 
-                click: button => Neo.Main.log('Click!');
+            module   : TextField,
+            labelText: 'Name',
+            listeners: {
+                change: data => Neo.Main.log({value:data.value})
             }
         }]
     }
@@ -59,12 +59,12 @@ Neo.setupClass(MainView);
 ### As a view method
 
 You can also use the `up.` qualifier to specify a method in the component's parent view. Like the
-in-line syntax above, using `up.` might be convenient for simple event handlers, or when you 
-simply haven't gotten around to definining a view's controller.
+in-line syntax you saw above, using the `up.` syntax might be convenient for simple classees, 
+or when you simply haven't gotten around to defining a view's controller.
 
 <pre data-neo>
 import Container from '../../../../src/container/Base.mjs';
-import Button from '../../../../src/button/Base.mjs';
+import TextField from '../../../../src/form/field/Text.mjs';
 
 class MainView extends Container {
     static config = {
@@ -72,16 +72,15 @@ class MainView extends Container {
         layout   : {ntype:'vbox', align:'start'},
 
         items: [{
-            module   : Button,
-            text: 'Button',
-            listeners: {
-                click: 'up.onButtonClick'
+            module   : TextField,
+            labelText: 'Name',
+            listeners: { 
+                change: 'up.foo'
             }
         }]
     }
-
-    onButtonClick(){
-        Neo.Main.log(arguments);
+    foo(data){
+        Neo.Main.log({value:data.value})
     }
 }
 Neo.setupClass(MainView);
@@ -89,12 +88,136 @@ Neo.setupClass(MainView);
 
 ### As a controller method
 
+Despite the examples above, the most correct way of setting up event handlers is to use a controller.
+Any view class can specify a controller &mdash; wWhen the view is created a controller instance is
+also created. 
+
+<pre data-neo>
+import Controller from '../../../../src/controller/Component.mjs';
+
+class MainViewController extends Controller {
+    static config = {
+        className: 'Example.view.MainViewController'
+    }
+    foo(data){
+        Neo.Main.log({value:data.value})
+    }
+}
+Neo.setupClass(MainViewController);
+
+
+import Container from '../../../../src/container/Base.mjs';
+import TextField from '../../../../src/form/field/Text.mjs';
+
+class MainView extends Container {
+    static config = {
+        controller: {
+            module: MainViewController
+        },
+        className: 'Example.view.MainView',
+        layout   : {ntype:'vbox', align:'start'},
+
+        items: [{
+            module   : TextField,
+            labelText: 'Name',
+            listeners: { 
+                change: 'foo'
+            }
+        }]
+    }
+}
+Neo.setupClass(MainView);
+</pre>
+
 ## Adding listeners procedurally
 
 Event listeners are normally specified declaratively, via the `listeners: {}` config. But occasionally you need to add
 a listener proccedurally.
 
-Any obversable class has an `addListener` method. There's also an easier to type version called `on`.
+Any obversable class has an `addListener` method, along with an easier-to-type version called `on`.
+
+<pre data-neo>
+import Controller from '../../../../src/controller/Component.mjs';
+
+class MainViewController extends Controller {
+    static config = {
+        className: 'Example.view.MainViewController'
+    }
+    foo(data){
+        Neo.Main.log({value:data.value})
+    }
+    onComponentConstructed(){
+        debugger
+    }
+}
+Neo.setupClass(MainViewController);
+
+
+import Container from '../../../../src/container/Base.mjs';
+import TextField from '../../../../src/form/field/Text.mjs';
+
+class MainView extends Container {
+    static config = {
+        controller: {
+            module: MainViewController
+        },
+        className: 'Example.view.MainView',
+        layout   : {ntype:'vbox', align:'start'},
+
+        items: [{
+            module   : TextField,
+            labelText: 'Name',
+            listeners: { 
+                change: 'foo'
+            }
+        }]
+    }
+}
+Neo.setupClass(MainView);
+</pre>
+
+The method specified in `on()` doesn't have to be an arrow function; you can use a controller function.
+
+<pre data-neo>
+import Controller from '../../../../src/controller/Component.mjs';
+
+class MainViewController extends Controller {
+    static config = {
+        className: 'Example.view.MainViewController'
+    }
+    foo(data){
+        Neo.Main.log('foo' + {value:data.value}
+    }
+
+    // This is a controller lifecycle method run after the controller's view has been constructed
+    onComponentConstructed(){
+        // Note the use of this.getReference() -- that's used to get a component reference with the specified name
+        this.getReference('nameTextfield').on('change', this.foo, this)
+    }
+}
+Neo.setupClass(MainViewController);
+
+
+import Container from '../../../../src/container/Base.mjs';
+import TextField from '../../../../src/form/field/Text.mjs';
+
+class MainView extends Container {
+    static config = {
+        controller: {
+            module: MainViewController
+        },
+        className: 'Example.view.MainView',
+        layout   : {ntype:'vbox', align:'start'},
+
+        items: [{
+            module   : TextField,
+            reference: 'nameTextfield', // This component can be fetched using this.getReference('nameTextfield')
+            labelText: 'Name'
+        }]
+    }
+}
+Neo.setupClass(MainView);
+</pre>