jsgui3-server 0.0.119 → 0.0.121

package/examples/controls/11b) window, shared Data_Object model mirrored text fields/client.js

@@ -0,0 +1,331 @@
+const jsgui = require('jsgui3-client');
+const {controls, Control, mixins, Data_Object} = jsgui;
+const {dragable} = mixins;
+
+const {field} = require('obext');
+
+const {Checkbox, Date_Picker, Text_Input, Text_Field} = controls;
+
+const Active_HTML_Document = require('../../../controls/Active_HTML_Document');
+
+// Will make Date_Picker use progressive enhancement.
+//   On activation would create a new element? Create a new sibling?
+//     May want code that checks for .el being changed.
+
+
+
+// Want the data sharing to be really simple and intuitive to set up.
+//   But not so simple the comlexities of data flow can't be expressed when needed.
+
+
+// Make it so sharing a data model is very easy.
+//   Sharing a single value, or referring to different values within it.
+
+// Be able to handle errors when the view model can't update the data_model for some reason(s).
+
+
+
+
+
+
+class Demo_UI extends Active_HTML_Document {
+
+
+
+    constructor(spec = {}) {
+        spec.__type_name = spec.__type_name || 'demo_ui';
+        super(spec);
+        const {context} = this;
+        
+        /*
+
+        const setup_demo_ui_data_model = () => {
+            this.data = {
+                model: new Data_Value({
+                    context
+                })
+            }
+            field(this.data.model, 'value');
+            context.register_control(this.data.model);
+        }
+        setup_demo_ui_data_model();
+
+        */
+
+        this.data.model.data_type = String;
+        
+
+        if (typeof this.body.add_class === 'function') {
+            this.body.add_class('demo-ui');
+        }
+
+        //console.log('this.body', this.body);
+        //console.log('this.body.add_class', this.body.add_class);
+
+
+        const compose = () => {
+
+            // Not so sure how to persist the (shared) data_models upon composition.
+            //   Maybe explicitly reassigning them on activation for the moment.
+            //   Could actually be necessary right now, but should look into supporting it automatically on
+            //     a lower level.
+
+            // Defining shared data models in the composition...
+            //   Should be able to persist that info to the data-jsgui properties in the HTML.
+            //   Also may be best to have some very explicit code that generates the app's Data_Model, or the page's Data_Model.
+
+            // Does seem like persisting the relationships between controls, the inner parts of them, and data_models is important.
+
+            
+
+
+
+
+
+            const window = new controls.Window({
+                context: context,
+                title: 'jsgui3-html Shared data.model Mirrored Text_Input controls',
+                pos: [5, 5]
+            });
+            window.size = [480, 160];
+            
+            const tf1 = new Text_Field({
+                context,
+                text: 'A', // label.text???
+                // name???
+
+                data: {
+                    model: this.data.model
+
+                    // model: [this.data.model, 'value'] // this seems better
+
+                    // model_property: 'value'
+                    // model_property: 'value2'  // for example
+                }
+                //label: {
+                //    text: 'A checkbox'
+                //}
+            });
+            window.inner.add(tf1);
+            const tf2 = new Text_Field({
+                context,
+
+                text: 'B',
+                data: {
+                    model: this.data.model
+                }
+                //label: {
+                //    text: 'A checkbox'
+                //}
+            })
+
+            window.inner.add(tf2);
+
+            this.body.add(window);
+
+            
+            this._ctrl_fields = this._ctrl_fields || {};
+            this._ctrl_fields.tf1 = tf1;
+            this._ctrl_fields.tf2 = tf2;
+
+
+        }
+
+
+        // Only after activate???
+        //   On a higher level will not need to pay as much attention to activation.
+
+
+
+
+        // Both after compose and activate, need to set up the
+
+        if (!spec.el) {
+            compose();
+        }
+
+
+    }
+
+    setup_inner_listeners() {
+        // Post compose or during activate.
+        const {tf1, tf2} = this;
+        
+        tf1.data.model.on('change', e => {
+            console.log('tf1 data model e', e);
+            const {name, old, value} = e;
+            if (name === 'value') {
+                
+            }
+        })
+        
+        tf2.data.model.on('change', e => {
+            console.log('tf2 data model e', e);
+            const {name, old, value} = e;
+            if (name === 'value') {
+                
+            }
+        })
+    }
+
+    // A lower level way of reconstructing models on the client would help.
+    //   Eg when a control gets composed, it could be specified that an internal control's
+    //    view model is the same as, or is synced with this control's view model.
+
+    // Do want to handle both syncing as well as using the same JS objects where appropriate.
+    //   Same objects will be best when one thing really is the other.
+
+    // Eg a Text_Field would have it's view data model value represented using a Text_Input.
+
+    // Late consider where in the namespacing things like
+    //  label text, label text font, label icon image url etc can go.
+    //    It's not the 'core' data model.
+
+    // Maybe presentation model???
+    //  .ui model does seem convenient and explicit.
+    //  ctrl.view.ui.label.text.font for example.
+    //  ctrl.view.ui.label.text.font.size, ctrl.view.ui.label.text.size could be synonyms.
+    //    Make the mid-level objects work so they provide a nice and flexible top level API.
+
+
+
+    // So within Text_Field, would use _ctrl_fields
+    //   could also assign / reassign the data models upon activation???
+
+    // Concise code at the high level would be OK for the moment, but really want this on mid level.
+
+    // Or could rely on syncing for the moment....?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    activate() {
+        if (!this.__active) {
+            super.activate();
+
+
+
+            const {context, tf1, tf2} = this;
+
+            console.log('activate Demo_UI');
+
+            // Want data model syncing and activation done for free.
+
+            const already_same_data_models_on_activation = this.data.model === tf1.data.model === tf2.data.model;
+            console.log('already_same_data_models_on_activation', already_same_data_models_on_activation);
+
+            if (!already_same_data_models_on_activation) {
+                console.log('Need to reassign the data_models of the two controls [tf1, tf2].');
+
+                // Probably need to have the specific code in Text_Field to handle data.model changing.
+
+                tf1.data.model = this.data.model;
+                tf2.data.model = this.data.model;
+
+            } else {
+                console.log('jsgui3 now supports client-side reconstruction of shared object models on a lower level.')
+            }
+
+            this.setup_inner_listeners();
+            
+
+            context.on('window-resize', e_resize => {
+                
+            });
+
+        }
+    }
+}
+
+// Include this in bundling.
+//  Want CSS bundling so that styles are read out from the JS document and compiled to a stylesheet.
+
+//controls.Demo_UI = Demo_UI;
+
+// A css file may be an easier way to get started...?
+//  Want to support but not require css in js.
+
+// But need to set up the serving of the CSS both on the server, and on the client.
+//  Ofc setting it up on the server first is important - then can that stage set it up in the doc sent to the client?
+
+// Including the CSS from the JS like before.
+//  Needs to extract the CSS and serve it as a separate CSS file.
+//  Should also have end-to-end regression tests so this does not break again in the future.
+//   The code was kind of clunky and got refactored away.
+//   
+
+// Would need to parse the JS files to extract the CSS.
+//  Maybe could do it an easier way??? Now that it's easy, want a faster way.
+
+
+Demo_UI.css = `
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    overflow-x: hidden;
+    overflow-y: hidden;
+    background-color: #E0E0E0;
+}
+
+.demo-ui {
+    
+    /* 
+
+    display: flex;
+    flex-wrap: wrap;
+    
+    flex-direction: column; 
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    min-height: 100vh;
+    */
+    
+}
+`;
+
+// But may want to remove them from that flex upon picking up / dropping them.
+//  Maybe best upon drop.
+
+// Maybe want other examples that use absolute positioning to position the items at the start?
+// 
+
+
+
+//controls.Square_Box = Square_Box;
+// could export jsgui with the updated controls....
+//  so that they are in the correct Page Context.?
+
+
+controls.Demo_UI = Demo_UI;
+
+module.exports = jsgui;
+
+/*
+module.exports = {
+    Square_Box: Square_Box,
+    Demo_UI: Demo_UI
+}
+*/
+
+// Then if window...?
+
+// Need to add the Square_Box control to the context or original map of controls...
+

package/examples/controls/{11b) window, shared model mirrored text fields → 11c) window, shared Data_Value model mirrored text fields}/client.js

@@ -1,5 +1,5 @@
 const jsgui = require('jsgui3-client');
-const {controls, Control, mixins, Data_Object} = jsgui;
+const {controls, Control, mixins, Data_Value} = jsgui;
 const {dragable} = mixins;
 
 const {field} = require('obext');
@@ -68,13 +68,17 @@ class Demo_UI extends Active_HTML_Document {
         //  Maybe adding the fields to the Data_Object is needed.
 
 
+
+
+
         const setup_demo_ui_data_model = () => {
+            console.log('client pre creare data.model as Data_Value')
             this.data = {
-                model: new Data_Object({
+                model: new Data_Value({
                     context
                 })
             }
-            field(this.data.model, 'value');
+            //field(this.data.model, 'value');
             context.register_control(this.data.model);
         }
         setup_demo_ui_data_model();
@@ -402,18 +406,24 @@ class Demo_UI extends Active_HTML_Document {
                     ///    Maybe a different function as standard to assign isomorphic things.
 
 
+                    // What about (just) using a Data_Value???
+                    // Data_Value_Model?
+                    // Data_Model_Value???
+
+                    // Just stick to Data_Value for now.
+
 
 
-                    const dm = new Data_Object({context});
-                    field(dm, 'value');
+                    const dm = new Data_Value({context});
+                    //field(dm, 'value');
                     ti1.data.model = dm;
                     ti2.data.model = dm;
 
                     // But then need to get them to reassign their data model change listeners....?
                     //   value change even....
 
-                    ti1.assign_data_model_value_change_handler();
-                    ti2.assign_data_model_value_change_handler();
+                    //ti1.assign_data_model_value_change_handler();
+                    //ti2.assign_data_model_value_change_handler();
 
 
                 }

package/examples/controls/11c) window, shared Data_Value model mirrored text fields/server.js

@@ -0,0 +1,118 @@
+const jsgui = require('./client');
+
+const {Demo_UI} = jsgui.controls;
+const Server = require('../../../server');
+
+
+// what would be the (best?) way to include the whole thing in one JS file?
+//  Maybe don't try that right now.
+//  maybe standardise on the dir, then client.js and server.js inside.
+
+
+
+// Want to exclude this from the client bundle.
+//  Some kind of marking to say that it's server-side only?
+
+// Need to include JSGUI3 js within the client document.
+//   Seems like an earlier code simplification removed this functionality?
+//   Just specifying a Ctrl for the server - and giving it the 'disk_path_client_js'.
+//     May as well fix that....
+
+
+// The server code may be tiny, it seems best not to abstract it away totally though.
+// At least not for the moment.
+
+
+
+
+
+if (require.main === module) {
+
+    // By default should include the JS and the CSS.
+    // By reference, serving them from their respective paths.
+
+
+    // This API is not working right now.
+
+    // A very simple syntax for running a single control would be great.
+
+    // Need to in the default (server) configuration build and serve the client-side app.
+    // Want to be able to make interactive apps quickly with minimal server side code that needs to be written as boilerplate to
+    // get the app running.
+
+    // Though maybe defining a webpage, that serves the client js, and renders the control on the server, and activates it on the client,
+    // would be the right approach.
+
+    // Want to make the code really explicit, in a simple way.
+
+
+    // eg { '/': Demo_UI }
+    // eg { '*': Demo_UI }
+    //  as at least it explicitly assigns it to the '/' route
+
+
+    // But worth keeping the '/' Ctrl property?
+    //  Could change it to explicitly setting the route(s).
+
+    // Do want it to build the client js on start.
+
+    // Could extract the CSS from the file itself, or maybe better reading it from the classes and objects that are loaded / referenced.
+    // All kinds of complex server program structures exist already, so could use Publishers if needed for some things.
+    //  But need to keep the surface-level API really simple.
+
+    // Maybe define a Webpage and maybe use / define an HTML_Webpage_Publisher for example too.
+    // The clearest code would be really explicit about what it does, but in terms of almost English idioms
+    //  and on the surface-level not spelling out in great detail what it's doing, but referencing objects and
+    //  instructions with clear purposes, though details could be obscure at the top level. Eg it's the publisher's responsibility
+    //  to include the CSS and JS that's needed to get it to run. A publisher is referenced and used, and it does its thing.
+
+    // The Server could automatically involk the use of a Publisher.
+    //  May be better to either require or recommend more explicit code, have them in the examples,
+    //  but also to document some shortcuts, defaults, and abbreviations (though they may omit some essential info, so not recommended for beginners)
+
+    // Could have a tabbed view for examples for 'explicit' and 'short' notations when there are multiple.
+
+    // jsgui3-html-suite may be of use, for some more extended controls that are built on top of jsgui3-html, but not specifically
+    // client or server.
+
+
+
+
+
+
+    const server = new Server({
+        Ctrl: Demo_UI,
+        //debug: true,
+        // Giving it the Ctrl and disk path client js should enable to server to get the JS-bundled CSS from the file(s).
+        //  Putting the JS files through proper parsing and into a syntax tree would be best.
+
+        //'js_mode': 'debug',
+        'src_path_client_js': require.resolve('./client.js'),
+        //debug: true // should not minify the js, should include the symbols.
+        //js_client: require.resolve('./square_box.js')
+    });
+    // A callback or event for when the bundling has been completed
+    //  a 'ready' event.
+
+    // then start the server....
+    // be able to choose the port / ports?
+    console.log('waiting for server ready event');
+    server.one('ready', () => {
+        console.log('server ready');
+
+        // server start will change to observable?
+
+        server.start(8080, function (err, cb_start) {
+            if (err) {
+                throw err;
+            } else {
+                // Should have build it by now...
+    
+                console.log('server started');
+            }
+        });
+    })
+
+    
+
+}

package/examples/controls/11d) window, shared model mirrored integer text fields/both.js

@@ -0,0 +1,17 @@
+const jsgui = require('lang-tools');
+const {Data_Value, Functional_Data_Type} = jsgui;
+const create_demo_ui_data_model = (context) => {
+    const res = new Data_Value({
+        context,
+        data_type: Functional_Data_Type.integer
+    });
+    if (context) {
+        context.register_control(res);
+    }
+
+    return res;
+    
+}
+module.exports = {
+    create_demo_ui_data_model
+}