[Qute] how to include templates dynamically

[armando-ota]

Hi everyone ...

I have created different component classes Component1,Component2 and Component3 for convenience and my OneColumnLayoutPage class which I want to show my components in.
The catch is that I want to make this dynamically. The list of component templates will be loaded from "somewhere else", rather then have them hard-coded in HTML template of my OneColumnLayoutPage/index.html

Controller code:

public class OneColumnLayoutPage extends Controller {

  @CheckedTemplate
  static class Templates {
    public static native TemplateInstance index(List<String> names);
  }

  @Path("/")
  public TemplateInstance index() {
     //for the sake of the example I made a hard coded list. In real life project I will load this list from "some" backend ...
    List<String> names = List.of("Component1/index","Component2/index","Component3/index");
    return Templates.index(names);
  }

}

Template code:

{#include main.html }
    <h1>One Column Layout page</h1>
    <section class="component-wrapper">
    {#for tplName in tplNames}
        <div>{tplName}</div>
        <div>{#include tplName /}</div> <!-- render my component -->
    {/for}
    </section>
{/include}

Real example of this case would be:

• your project has different layout pages with different containers where components can be rendered into:

  • Layout page 1: single column layout with header and footer
  • Layout page 2: two column layout with header and footer
  • Layout page 3: three column layout with header and footer
  • Layout page 4: single column

• your application has different components:

  • Component 1
  • Component 2
  • ...
  • Component n

• Each page layout section can have multiple components in.

In real life project you would create different kind of variations of Page layouts and components that page shows and you really really don't want to change that in the code. You are required to create this dynamically (hence WYSIWYG CMS)

[quarkus-bot[bot]]

/cc @mkouba (qute)

[mkouba]

So if I understand it correctly it's the {#include tplName /} part that does not work because we always treat the fir param (template id) as a string literal (i.e. it's not evaluated), right? TBH this is a use case we haven't encountered yet.

We cannot change the behavior of the {#include} section since it could break existing apps but we could either introduce a new section ({#includeDynamic}?) that would treat the first param as an expression, or introduce a config param (_dynamic or some better name?) that would be used to change the default behavior, i.e. something like {#include tplName _dynamic /}.

[armando-ota]

Thank you for the reply...
how about ?
{include:tplname}
since {inject: x} and {cdi: y} already work in a "get value from defined variable" way

[mkouba]

Well, {cdi:y} etc. is a different syntax element - it's an output expression with a namespace. Output expressions have a different purpose - just output a string to the template. {#include} is a section (note the #).

[armando-ota]

yeah {#include tplName _dynamic /} makes sense.

[mkouba]

I've created #41050