Mixing Vue and XML problems

62 views
Skip to first unread message

Taher Alkhateeb

unread,
Oct 8, 2019, 9:34:53 AM10/8/19
to moqui
Hello Everyone,

We have a simple problem that seem beyond our reach at the moment. I want to make "part" of a page dynamic. This is proving to a bit of a challenge. Here are the issues we're struggling with:

1) Vue does not work unless we specify render-modes="vue,js" which is confusing since "all" should by default include both of these.
2) A screen works perfectly well using the sample form the example component [1] [2]. However, if I include that screen in any other regular XML screen it stops working

Is it not possible to mix client rendered and server rendered screen elements? The error that we're facing when we include the screen instead of rendering it directly is that vue says the variable being used is not yet declared.

Any ideas?

David E Jones

unread,
Oct 8, 2019, 11:59:45 AM10/8/19
to Moqui Framework

Hi Taher,

How would I go about reproducing what you are seeing? I can't find any such details in this message, so can't say where you're running into issues or what might be done about it.

-David


--
You received this message because you are subscribed to the Google Groups "Moqui Ecosystem" group.
To unsubscribe from this group and stop receiving emails from it, send an email to moqui+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/moqui/1407598000.2688602.1570541691637.JavaMail.zimbra%40pythys.com.

Taher Alkhateeb

unread,
Oct 8, 2019, 5:08:04 PM10/8/19
to moqui
Hi David,

Thank you for looking into this. Here is the repeat pattern:

Scenario 1: change the render-modes
a- First create a screen [1] that is a top level screen (all screens above are server-static having nothing but <subscreents ...>
b- Create a js file [2]
c- Create a vuet template [3]
d- Observe how it renders normally showing you "The message is: Hello There"
e- Now keep everything the same, but change FROM render-modes="js,vuet" TO render-modes="all"
f- Observe how it no longer renders and shows "The message is:".

Scenario 2: include as a sub screen
- follow the above steps a to c
- include this screen in another screen [4]
- Observe how again it does not work and shows "The message is:". In other words, you cannot include a "vue,js" screen inside an "all" screen (I think ?)

That is what I mean by being unable to mix modes. I'm not sure if this makes sense or should I elaborate some more?

[1]
<?xml version="1.0" encoding="UTF-8"?>
<screen xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="http://moqui.org/xsd/xml-screen-2.1.xsd"
        render-modes="js,vuet">
    <widgets>
        <render-mode>
            <text type="js" location="component://pysurance/screen/dynamic/Items.js"/>
            <text type="vuet" location="component://pysurance/screen/dynamic/Items.vuet"/>
        </render-mode>
    </widgets>
</screen>

[2]
define("Items", {
    data: function () {
        return { msg: "Hello There"}
    },
});
[3]
<p class="h2">The message is: {{ msg }}</p>

[4]
<?xml version="1.0" encoding="UTF-8"?>
<screen xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="http://moqui.org/xsd/xml-screen-2.1.xsd"
        render-modes="all">
    <widgets>
        <label text="Testing"/>
        <include-screen location="component://pysurance/screen/Pysurance/Dashboard.xml"/>
    </widgets>
</screen>

Cheers,
--
Taher Alkhateeb

From: "David E Jones" <d...@dejc.com>
To: "moqui" <mo...@googlegroups.com>
Sent: Tuesday, 8 October, 2019 18:59:18
Subject: Re: [moqui] Mixing Vue and XML problems

David E Jones

unread,
Oct 9, 2019, 1:50:51 AM10/9/19
to Moqui Framework
On Tue, Oct 8, 2019 at 2:08 PM Taher Alkhateeb <ta...@pythys.com> wrote:
Hi David,

Thank you for looking into this. Here is the repeat pattern:

Scenario 1: change the render-modes
a- First create a screen [1] that is a top level screen (all screens above are server-static having nothing but <subscreents ...>
b- Create a js file [2]
c- Create a vuet template [3]
d- Observe how it renders normally showing you "The message is: Hello There"
e- Now keep everything the same, but change FROM render-modes="js,vuet" TO render-modes="all"
f- Observe how it no longer renders and shows "The message is:".

That is correct. If a screen does not explicitly have a 'js' render mode the code in WebrootVue.js will not try to retrieve the 'js' version of the screen and interpret it as a Vue Component (ie that is required). There is no other way to know that a screen is intended to be rendered this way by the WebrootVue SPA shell.

If, or hopefully when, this stuff gets documented rather than just having an example that should be included.
 
Scenario 2: include as a sub screen
- follow the above steps a to c
- include this screen in another screen [4]
- Observe how again it does not work and shows "The message is:". In other words, you cannot include a "vue,js" screen inside an "all" screen (I think ?)

I wouldn't refer to this as a sub screen (I interpret that as a child of the screen), the screen-include is an interesting bit and would be the issue. I never tried something like that, certainly not how it is intended to be used. As a general warning not everything you can do will always work, or at least behave like you hope it might.

In this case the framework renders the requested screen using the render mode determined by the client (html or vuet or js,vuet as the main ones supported by the existing webroot app wrapper screens). Because the main screen does not have an explicit 'js' render mode it won't ever try to request it that way. A screen include tries to render the included screen in the same render mode, which in this scenario would be 'vuet' so it would only do the vuet rendering and never request the separate js file.
 
That is what I mean by being unable to mix modes. I'm not sure if this makes sense or should I elaborate some more?

Thank you, much more clear. Hopefully the above clarifies why these 2 scenarios don't work.

Are these based on something you need? If so what were you trying to get to happen?

-David

 

Taher Alkhateeb

unread,
Oct 9, 2019, 4:36:17 AM10/9/19
to moqui
Hi David,

Things are much more clear to me too. My problem is not yet solved though and I'm not sure how to go about it. The problem statement is really as follows:

- I have a screen that is for the most part rendered by the server and makes all kinds of stuff.
- I have a small dynamic portion to essentially add on the fly new rows for a form whenever a plus button is clicked for example.
- I cannot use vue as described in this thread because the screen is XML based in the render mode
- I cannot also use something like jQuery because the entire page DOM is controlled with vue.

So essentially, I cannot have a server rendered page with some partial dynamic content like an expanding form for example.

Any suggestions for a different solution are very appreciated.

Cheers,
--
Taher Alkhateeb

From: "David E Jones" <d...@dejc.com>
To: "moqui" <mo...@googlegroups.com>
Sent: Wednesday, 9 October, 2019 08:50:22

David E Jones

unread,
Oct 26, 2019, 1:40:47 PM10/26/19
to Moqui Framework

Hi Taher,

There are various technical limits on mixing client rendered and server rendered elements in a single screen. Until there is some sort of fully client rendered alternative to the current XML Screens the various widgets and actions and such all run server-side. 

It might seem it wouldn't be hard to create fully client rendered output from existing XML Screen definitions, and there is some work in that direction with things like an automatic transition added to each screen to run actions and get results in a JSON response and an experimental fully client rendered form-list, but there are limits to this. One example is the many places where inline expressions are allowed and these are all in Groovy which often doesn't work in JavaScript running on the client side. Another is we still don't have full number formatting and such on the client side, there are some notes about this in the WebrootVue.js file especially related to the experimental/partial support for fully client rendered form-list. In other words this is one approach that could go further with screens and widgets on screens flagged as supporting full client rendering in spite of the limits in the server-render oriented XML Screen design. The better approach will be some sort of eventual support for alternative screen definitions that are designed to be fully client rendered, basically as a dev time and effort saving tool like XML Screen.

One approach you might try is to have a server rendered XML screen with a dynamic-container element to pull in a client rendered section of the screen. Otherwise just build the whole screen as client rendered and use the existing Vue components to save effort but otherwise just realize that building highly interactive client rendered screens just plain takes more effort. That might improve with some sort of client rendered XML Screen alternative, but it will always somewhat the case.

-David


To view this discussion on the web visit https://groups.google.com/d/msgid/moqui/1934657388.3737761.1570610175196.JavaMail.zimbra%40pythys.com.
Reply all
Reply to author
Forward
0 new messages