jsgui3-server 0.0.119 → 0.0.121

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

@@ -0,0 +1,280 @@
+const jsgui = require('jsgui3-client');
+const {controls, Control, mixins, Data_Value, Functional_Data_Type} = jsgui;
+const {dragable} = mixins;
+
+const {Checkbox, Date_Picker, Text_Input, Text_Field} = controls;
+
+const Active_HTML_Document = require('../../../controls/Active_HTML_Document');
+
+const {create_demo_ui_data_model} = require('./both');
+
+// Could do with further low / mid level fixes.
+//   Easy integration of validation status indicators would help too.
+
+// What gets validated, according to what???
+//   Will need to look again at what happens when set ((.)value) and .attempt_set is called.
+
+// Need to go further into the underlying framework to make sure everything works correctly.
+
+// Clarity about what gets validated according to what.
+//   Transferrance / syncing of data between different layers.
+
+const demo_ui_data_model = create_demo_ui_data_model();
+
+
+class Demo_UI extends Active_HTML_Document {
+
+    constructor(spec = {}) {
+        spec.__type_name = spec.__type_name || 'demo_ui';
+        super(spec);
+        const {context} = this;
+
+        if (!demo_ui_data_model.context) {
+            demo_ui_data_model.context = context;
+
+            // And register the control / data_model within the context...?
+
+            //context.register_data_model(demo_ui_data_model);
+            //  and then reconstitute / recombine / recohere on the client-side.
+
+        }
+
+        context.register_data_model(demo_ui_data_model);
+
+        console.log('demo_ui_data_model.__id', demo_ui_data_model.__id);
+        // 
+
+        console.log('client.js Demo_UI constructor context.map_data_models', context.map_data_models);
+
+
+        // At this point have access to the context, in terms of easily adding code.
+
+
+        //   Some kind of possible client-side and maybe server-side connecting with the context?
+
+        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);
+
+        // Making it deal with cohering the data models as they get made on the server and sent to the client.
+        //   So needs to render data model references.
+        //     Where possible / appropriate.
+
+        // And when a control's data.model is set, when rendering it render the data-jsgui-data-model-id or data-jsgui-data-model
+        //   attributes.
+
+        // Rendering data-model references in the HTML will be helpful.
+        //   Would need to have them created in the context uniformly / isomorplically.
+
+
+
+        // .has_own_data_model???
+        //   rather than creating one when getting .data
+        // .has_own_data perhaps?
+
+        // during the rendering part it could automatically render it's data-model-id??
+        //   and a separate view data model id????
+
+        // No, don't persist the view data model ids / references to the client (yet).
+
+        // 
+
+        // Get into the ctrl rendering then....
+
+        const compose = () => {
+            // Composition model would make it more concise here.
+            //   Then have some kind of data model coherence when a compositional model is being used???
+
+            // However, don't only want to support data things in that way.
+
+
+            const window = new controls.Window({
+                context: context,
+                title: 'jsgui3-html Shared data.model integer Mirrored Text_Input controls',
+                pos: [5, 5]
+            });
+            window.size = [480, 160];
+
+            const ti1 = new Text_Field({
+                context,
+
+                text: 'A',
+                data: {
+                    model: demo_ui_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(ti1);
+
+            console.log('ti1.data.model.__id', ti1.data.model.__id);
+            
+
+            const ti2 = new Text_Field({
+                context,
+
+                text: 'B',
+                data: {
+                    model: demo_ui_data_model
+                }
+
+
+                //label: {
+                //    text: 'A checkbox'
+                //}
+            })
+
+            window.inner.add(ti2);
+
+            console.log('ti2.data.model.__id', ti2.data.model.__id);
+
+            this.body.add(window);
+            
+            this._ctrl_fields = this._ctrl_fields || {};
+            this._ctrl_fields.ti1 = ti1;
+            this._ctrl_fields.ti2 = ti2;
+
+
+        }
+        if (!spec.el) {
+            compose();
+        }
+    }
+    activate() {
+        if (!this.__active) {
+            super.activate();
+
+            // What previous activation / recohesion of data should take place before here?
+            //   Want 'activate' to be fairly high level, with some things already set up as they should be by default automatically.
+
+            // Have the context activate put some things together, or the context pre-activate.
+
+            // Need activation to be as simple as possible to code at a higher level.
+
+
+
+            const {context, ti1, ti2} = this;
+
+            console.log('activate Demo_UI');
+
+            // See about improving low / mid level data model coherence.
+            //   Isomorphic of the (empty) app data model?
+            //     Or in its default / root state?
+
+            // Persistance and recoherence of data model on the client could help.
+            //   Keeping them within the context, and having them link with it?
+
+            // Though to start with, want to define them in an isomorphic way, out of context.
+
+
+
+            const activate_demo_ui_data_model = () => {
+                console.log('ti1.data.model === ti2.data.model', ti1.data.model === ti2.data.model);
+
+                if (ti1.data.model === ti2.data.model) {
+                    // With this working, seems more like a problem with Data_Value itself when it's not syncing properly.
+
+
+                    console.log('Nice! The data models are already shared.')
+                } else {
+
+                    // Should not need this code.
+                    //   Want decent low/mid level code to send the info to the client so the client can automatically reconstruct it.
+                    ///    Maybe a different function as standard to assign isomorphic things.
+
+
+
+
+                    //const dm = new Data_Value({context,
+                    //    data_type: Functional_Data_Type.integer});
+
+                    // Should be enough here....
+                    
+                    //field(dm, 'value');
+                    console.log('demo_ui_data_model', demo_ui_data_model);
+
+                    ti2.data.model = ti1.data.model = demo_ui_data_model;
+
+
+                }
+            }
+
+            activate_demo_ui_data_model();
+
+            context.on('window-resize', e_resize => {
+
+
+            });
+
+        }
+    }
+}
+
+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/11d) window, shared model mirrored integer text fields/server.js

@@ -0,0 +1,23 @@
+const jsgui = require('./client');
+
+const {Demo_UI} = jsgui.controls;
+const Server = require('../../../server');
+
+if (require.main === module) {
+    const server = new Server({
+        Ctrl: Demo_UI,
+        //debug: true,
+        'src_path_client_js': require.resolve('./client.js')
+    });
+    
+    server.one('ready', () => {
+        
+        server.start(8080, function (err, cb_start) {
+            if (err) {
+                throw err;
+            } else {
+                console.log('server started');
+            }
+        });
+    });
+}

package/examples/controls/12) window, Select_Options control/client.js

@@ -103,6 +103,23 @@ const Active_HTML_Document = require('../../../controls/Active_HTML_Document');
 
 
 
+
+Will be nice to allow for progressive enhancement compositional models.
+// An enhanced compositional model could work well.
+//   Also sync it with the hidden original composition.
+//   So it would need to add extra controls, but sync with the existing one(s).
+
+// .progressive_enhance()
+//   could be a decent syntax for the moment.
+//   maybe just would change the compositional model.
+//     or add the enhanced section to it....
+
+
+
+
+
+
+