Code generator - how do I start

[Equilibrier]

Hi Klaus,

Unwillingly (by mistake) managed to put the basics of an own MVVM UI logic arhitecture in js-scripts and that brings me the possibility to implement something similar to your Luiza framework for "continuous model driven development" in my version of QuantUX.

So I could use the prototype code to auto-implement the production app code as well. I really want to try this as well. So I need to make a React code generator based on the JS scripts, based on some basis MVVM code (wrote by me, so I already have it) and --(1)-- based on the css&html contents of each screen (the "expanded model" (inherits already taken care of) as we talked about).

I will like to implement React code generator in complete MVVM form and also in "naive" form (only react components with css & html, so "empty logic" screens), so that the user (me) can choose upon taking the prototype logic from quantUX or not (or making it himself in React, but having the screens already implemented manually, one by one, using this "naive" export for each screen). So --(2)-- I also have to do some buttons/panels for this export thing, and I have bad experience with your code in the settings panel or in the right (design) panel, so it isn't straightforward to add something of a functional UI element in there.

I really need some support for the (1) and (2) points above. Can you help me, please ?

[KlausSchaefers]

Hi,

you basically need to get the quant-ux file and convert it to a kind of DOM-like tree. So you need to take the "flat" quant-ux model, expand it, and then turn it into a nested tree. Once this is done, you have to render it recursively down. You can find the related code here:

https://github.com/KlausSchaefers/vue-low-code/blob/master/src/qux/Luisa.vue

The relevant method is

 treeModel () {
          if (this.model) {
              let model = this.responsiveModel
              let transformer = new ModelTransformer(model, this.mergedConfig, this.selected)
              let tree = transformer.transform()
              this.setGlobalCSS(tree, this.selected)
              this.setGlobalFonts(model, this.mergedConfig)
              return tree
          }
  },

The packages are:

https://github.com/KlausSchaefers/vue-low-code/tree/master/src/qux/transformer https://github.com/KlausSchaefers/vue-low-code/tree/master/src/qux/web/css

The export dialog is a good place to add this functionality:

https://github.com/KlausSchaefers/quant-ux/blob/master/src/canvas/toolbar/dialogs/ExportDialog.vue

Or you can try the download section:

https://github.com/KlausSchaefers/quant-ux/blob/master/src/canvas/toolbar/components/CSSExporter.vue

Cheers,

Klaus

[Equilibrier]

Ok, it seems tough for me right now to fully understand Luiza's code (which seems like a separate project) for what I wanted. Couldn't I just hook up in the quant-ux editing-perspective's rendering flow and "steal" that dom out of there somehow ? Or maybe just use the already wrote functions from the quant-ux project ?!...

For this approach, my questions would be: -- where is the entry point from which you download the model deltas from mongo and build the first (unexpanded) model ? (BaseController doesn't seem to be the entrypoint for this) -- where is the place where you expand the model ? (I see lots of uses for the "createInheritedModel(m)" function) -- where is the place from where I can get the dom of the rendered expanded-model ? (is it something related to renderScreen() from RenderMixin.vue ? it returns a div; or maybe renderScreen from ExportImages.vue, without that domtoimage processing ?)

[Equilibrier]

Tried to use the RenderMixin to obtain a dom of a rendered screen and place it into the export tab I defined for my exports. But although the dom is there (I recognize some UI elements) the output is a blank container, look:

Do you have an idea why this is not working and my screen is not properly displayed ? Am I missing something important in here ? The styles are there, in the dom nodes, so inline styles.

[KlausSchaefers]

Hi, there is the preview widget which you should use:

import Preview from 'page/Preview'

    var preview = this.$new(Preview);
    preview.setJwtToken(this.jwtToken);
    preview.setScreenPos({w:this.previewWidth, h:height});
    preview.setModel(this.model);
    preview.setScreen(screenID);
    preview.placeAt(div);

...

Or take a look here:

https://github.com/KlausSchaefers/quant-ux/blob/master/src/page/ScreenList.vue

[Equilibrier]

It doesn't seem to work for me. It is empty for whatever reason. Will dig some more. I was studying the way you render screens in simulator and saw some instructions in Dialogs.vue showDesktopSimulator and in Simulator.vue startSimulator and I assume your Preview.vue -er does this on a lightweight version but it just didn't worked for me. See the above images, those small containers should have had the full screen dom, provided by the previewer, but it doesn't. Thanks anyway!

[KlausSchaefers]

Hi, Preview is basically the "static" version of the simulator. It just does not wire the event listeners. You may need to create a DIV around the Preview and size it properly. The preview will then rescale the model.

Please note that Quant-UX renders a flat, ugly HTML. All elements are positioned absolute and the CSS is inline. Also, the design is not responsive. Luisa does a much better Job here and creates separate CSS and properly nested and responsive. I strongly advice you to base you work on Luisa. If you want to generate code, maybe start with a simple Node.js application that works as a CLI. Later, you could still wrap it in a WebService if needed.