jsgui3-server 0.0.120 → 0.0.121

package/examples/controls/13) window, shared model mirrored lat_long/server.js

@@ -0,0 +1,50 @@
+const jsgui = require('./client');
+
+const {Demo_UI} = jsgui.controls;
+const Server = require('../../../server');
+
+
+// A single lat long that shows the validation status would help.
+// Could have a number of how many items in there have failed validating.
+//   Eg count of inner failed validations.
+//   Then each of the controls for the inner failed validations would display it with their own indicator.
+
+
+
+
+if (require.main === module) {
+
+    const server = new Server({
+        Ctrl: Demo_UI,
+        //debug: true,
+        'src_path_client_js': require.resolve('./client.js')
+        //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/14) window, control compositional model/client.js

@@ -0,0 +1,328 @@
+const jsgui = require('jsgui3-client');
+const {controls, Control, mixins} = jsgui;
+const {dragable} = mixins;
+
+
+const {Checkbox} = controls;
+
+const Active_HTML_Document = require('../../../controls/Active_HTML_Document');
+
+// Maybe better to include it within an Active_HTML_Document.
+
+// Is currently a decent demo of a small active control running from the server, activated on the client.
+//   This square box is really simple, and it demonstrates the principle of the code for the draggable square box not being all that complex
+//   compared to a description of it.
+
+// A container with reorderable internal draggable items could help.
+
+// would be nice to be able to have all code in 1 file...???
+//  Though the sever code should be separate.
+
+
+// Relies on extracting CSS from JS files.
+// Usage of windows should be very easy on this level.
+
+// Want more demos for some specific features, such as lists.
+//   Putting a bunch of different examples within a tabbed view would help.
+//   Want quite a lot to be possible without client-side js when it can be done that way.
+//     Progressive enhancement.
+
+
+
+
+// Could change the checkbox so that it internally uses compositional models, and that this works the same.
+//   Though first let's directly work on compositional models.
+
+
+
+
+class Demo_UI extends Active_HTML_Document {
+    constructor(spec = {}) {
+        spec.__type_name = spec.__type_name || 'demo_ui';
+        super(spec);
+        const {context} = this;
+
+        // Make sure it requires the correct CSS.
+        //  Though making that 'effortless' on the server may help more.
+
+
+        // Maybe can't do this here???
+
+        // Does not have .body (yet) on the client.
+        //   simple way to get the client to attach the body of the Active_HTML_Document?
+        //     maybe with jsgui-data-controls?
+        //   Though automatically having the .body property available on the client without sending extra HTTP
+        //     plumbing will help.
+
+        // .body will not be available before activation.
+
+
+        // .body should not be a normal function....?
+        //   a getter function would be better.
+
+
+        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);
+
+        // And create a compositional model here???
+
+
+        // Want to be able to better specify the content of controls that are made here.
+
+        // Also define some kind of content model?
+        //   have .content for the moment, want to keep this, but maybe move it (sometime)
+
+        // .ui.content.model even????
+
+        // Or in the spec, giving the compositional model(s).
+
+
+        // Need to get into representational models too.
+        //   How data can be represented on controls.
+
+        // And then being able to have the most suitable, or the specified controls, chosen.
+
+        // And the window itself using the compositional model???
+        //   Though we need to really use some kind of content.compositional.model??
+        //   .compositional.content.model?????
+        //   .view.ui.compositional.content.model???
+
+
+        // Specifying the inner content properly....
+        //   Using compositional models that work with inner content....
+
+        // Do want to see about using compositional models for shorter code.
+        //   Also more advanced compositional models, with things like repeats / loops.
+        //   Be able to express the compositional model of a grid efficiently in the abstract way.
+        //     Repeated rows, repeated cells in columns.
+
+        // See about making more concise controls using the new compositional model functionality.
+        //   Maybe focus on a small number of simple ones for the moment.
+        //   Like Text_Field, Text_Input.
+
+        // Def seems worth moving towards using the compositional model(s) system.
+        // Also the ctrl.data.model system.
+        // And a ctrl.view.ui.data.representation.model system.
+        //   Being able to get the data in the data.model represented in the controls in the compositional model.
+
+        // Want it to have very concise syntax to use controls with appropriate data.
+        //   This should make for a very convenient high level API for jsgui.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        // A version that uses the compositional model for the window would help!
+
+
+
+        const compose = () => {
+            // put 20 of them in place.
+
+            // Then how to arrange them...?
+
+
+            // Want to be able to include the content here easily, whether using a compositional model (on the surface) or not.
+            //   Getting into finer implementation details on compositional models, and specifying them in the spec will help.
+
+            // Need to facilitate a variety of features to make the compositional model system really useful, and integrate it with
+            //  the data model system.
+
+
+
+
+
+            const window = new controls.Window({
+                context: context,
+                title: 'jsgui3-html Checkbox Control',
+                pos: [10, 10]
+            });
+            
+            // Let's just have a control here for the moment.
+            //   Give it a compositional model too....
+
+            // Maybe shortcut to the 'composition' or 'comp' in the spec.
+            //   However, want to try explicitly setting its compositional model for the moment.
+            const ctrl_using_compositional_model = new Control({context});
+            const setup_using_controls_with_specs = () => {
+                ctrl_using_compositional_model.view.ui.compositional.model = [[Control, {
+                    size: [64, 128],
+                    background: {
+                        color: '#6655CC'
+                    }
+                }], [Control, {
+                    size: [64, 128],
+                    background: {
+                        color: '#DD55CC'
+                    }
+                }]];
+                
+            }
+
+            setup_using_controls_with_specs();
+
+
+            console.log('ctrl_using_compositional_model.view.ui.compositional.model', ctrl_using_compositional_model.view.ui.compositional.model);
+
+
+            window.inner.add(ctrl_using_compositional_model);
+
+
+            /*
+
+
+            
+
+            const checkbox = new Checkbox({
+                context,
+                label: {
+                    text: 'A checkbox'
+                }
+            })
+
+            window.inner.add(checkbox);
+            */
+
+            this.body.add(window);
+
+
+
+            
+
+
+        }
+        if (!spec.el) {
+            compose();
+        }
+    }
+    activate() {
+        if (!this.__active) {
+            super.activate();
+            const {context} = this;
+
+            //console.log('activate Demo_UI');
+            // listen for the context events regarding frames, changes, resizing.
+
+            context.on('window-resize', e_resize => {
+                //console.log('window-resize', e_resize);
+
+                // Make all internal controls go absolute in terms of position
+                //   Remove them from their containers too?
+                //   Ie their containing divs?
+
+                // Would be nice to do this really simple with a fn call or very simple piece of code.
+                // Like get absolute position, set position to be absolute, move to that position.
+                // Maybe something within jsgui3-client helps with this, this is more about what needs to be done on the client.
+                //   Though recognising perf implications, it's (more) OK to include client-side functionality in jsgui3-html.
+
+
+
+
+
+
+            });
+
+        }
+    }
+}
+
+// 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/14) window, control compositional model/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.on('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');
+            }
+        });
+    })
+
+    
+
+}