How to insert a child view within a div of the parent layout? Vaadin 10 / Flow

Question

How to insert a child view within a div of the parent layout? Vaadin 10 / Flow

Navigation

#1 by (0 votes)

0

I have a component that implements RouterLayout like this:

@Tag("side-menu")
@HtmlImport(value = "src/components/side-menu.html")
public class SideMenu extends PolymerTemplate<TemplateModel> implements RouterLayout {

    @Id("menu")
    private PaperListBox listBox = new PaperListBox();

    public SideMenu() {

        listBox.addMenu(new PaperItem("tutorial", TutorialView.class));
        listBox.addMenu(new PaperItem("icons", IconsView.class));

    }
}

I direct a secondary view of the main design:

@Route(value=IconsView.VIEW_ROUTE, layout = SideMenu.class)
public class IconsView extends Div {

    public static final String VIEW_ROUTE = "icons";

    public IconsView() {
        add(new Label("ICONS VIEW"));
    }

}

But the result overwrites all the contents of the file side-menu.html

Base format of the model side-menu.html

<side-menu>
    <div>App Name</div>
    <div id="menu"></div>
    <div id=contenido><!-- Es aqui donde quiero mostrar mi vista view Icons --></div>
</side-menu>

But the result is this:

<side-menu>
    <div>
       <label>ICONOS VIEW</label>
    </div>
</side-menu>

The expected result should be something like this:

<side-menu>
    <div>App Name</div>
    <div id="menu"></div>
    <div id=contenido>
       <div>
          <label>ICONOS VIEW</label>
        </div>
    </div>
</side-menu>

java vaadin10

asked by Carlos Laspina 29.06.2018 в 18:36

source

1 answer

Do not enter a debug point when I try to make the OnValueChanged event in a HiddenField? Error in django urls

score 0 · Answer 1

The vaadin documentation says this :

You can add child components to templates using the Component or    Element API, but because PolymerTemplate uses the shadow DOM the   shadow tree is rendered instead of the elements children that are in   the light DOM.

This means that the template needs to have a <slot></slot> to mark   The place where the light DOM elements should be rendered.

That summarizing a bit the Spanish would be something like:

You can add child components to models using the API   Components or Elements. But since the PolymerTemplate interface uses the   shadowDOM (the shadowDOM tree is drawn instead of the child elements)   which is in the lightDOM

This means that you need to add the tag to   mark / indicate the place where the lightDOM should draw the elements

I found a solution for this composite design:

I just needed to modify the side-menu.html model and add the <slot> tag like this:

<side-menu>
    <div>App Name</div>
    <div id="menu"></div>
    <slot></slot>
</side-menu>

And then the view when it is loaded, is drawn inside the <slot> tag defined in the model.