[SOLVED] Open dialogs as content in other components

I have an dialog and into that i want to combine two other dialogs next to each other (its for a version comparison), so no editing in those.
Is there a good way to set the two other dialogs as content for my one dialog?

No. Just add the content of both dialogs to the new dialog side by side (horizontal layout / 50% each)

So i have to manually copy the components i add to the inner dialogs to set them as components for the layout?

I would recommend something else. Create a single dialog with different modes (left / right / both) allowing to toggle between them. Like normally seen in diff viewer

wdym with those modes?

Git diff as example where you have different modes to compare a diff - combined, side by side and so on. Don’t reinvent the wheel

Not sure I understand what kind of UI you’re trying to achieve. Maybe you could draw a picture?

My current interpretation is this:

  • There are two dialogs, each with different content, that are sometimes displayed separately/standalone.
  • Sometimes the contents in those two dialogs needs to be show side-by-side in a single dialog instead.

And if that’s correct, then

  • Implement the contents that goes into those dialogs as components (i.e. Flow UI classes, e.g. extending VerticalLayout or whatever)
  • When shown in separate dialogs, you place one of those components in that dialog.
  • When shown side-by-side, place those components in the same HorizontalLayout in a single Dialog.

No need to “manually copy” anything. Just change where those two components are placed.

Roughly something along the lines of

class ContentA extends VerticalLayout {

class ContentB extends VerticalLayout {

// and use them like:

ContentA a = new ContentA();
ContentB b = new ContentB();

Dialog dialogA = new Dialog(a);
Dialog dialogB = new Dialog(b);

HorizontalLayout sideBySide = new HorizontalLayout(a,b);
Dialog comboDialog = new Dialog(sideBySide);

Those dialogs have the exact same components that are filled via binder.

That’s actually really cool, i now did all the setup for the dialogs but instead of opening them, i get alle the components children and place them in left verticalLayout and right verticallayout.

Now i have the same dialogs next to each other, also without the header and footer.

And now i have two combo oxes on the top where i list all versions from those entities, after clicking on one i tell the binder of the dialog to read that bean and all the fields automatically change the values

Also for highlighting differences i loop through the both children of the right and left verticalLayout and compare the values if the component is a Textfield etc. and set a css class to set the color of that field


For someone who tries to do the same like me here

Here are some codefragments:

public class VersionDialog<T> extends Dialog {

    private List<T> versions;

    public VersionDialog(List<T> versions) {
        this.versions = versions;
        this.setHeaderTitle("Versionen vergleichen");
        this.getHeader().add(new Button(VaadinIcon.CLOSE.create(), buttonClickEvent -> this.close()));
        HorizontalLayout layout = new HorizontalLayout();
        ComboBox<String> version1ComboBox = new ComboBox<>("Vergleichsversion 1");
        ComboBox<String> version2ComboBox = new ComboBox<>("Vergleichsversion 2");
        VerticalLayout left = new VerticalLayout();
        VerticalLayout right = new VerticalLayout();
        layout.add(left, right);

        //add the versions to the corrosponding comboboxes

        CustomDialog<T> version1Dialog = new CustomDialog<T>((Class<T>) version1.getClass());

        CustomDialog<T> version2Dialog = new CustomDialog<T>((Class<T>) version2.getClass());

        VerticalLayout version1Layout = new VerticalLayout();
        VerticalLayout version2Layout = new VerticalLayout();
        version1Layout.getElement().getStyle().setBorder("1px solid grey");
        version1Layout.getElement().getStyle().set("border-radius", "0.5em");
        version2Layout.getElement().getStyle().setBorder("1px solid grey");
        version2Layout.getElement().getStyle().set("border-radius", "0.5em");

        version1ComboBox.addValueChangeListener(event -> {
            version1Dialog.updateDataObject(versionMap.get(event.getValue()), false);
            compareAndHighlight(version1Layout, version2Layout);
        version2ComboBox.addValueChangeListener(event -> {
            version2Dialog.updateDataObject(versionMap.get(event.getValue()), false);
            compareAndHighlight(version1Layout, version2Layout);

Maybe its helpful for someone with an similar problem (or me if i forget how i did it and search for a solution again xD)

Dialog currently does not have API to set position, nor does it have other features for sub Window. However with some CSS tweaks and JavaScript it is possible to extend it. I have a demo app at GitHub - TatuLund/mdi-demo: Exploring multi document interface with Vaadin 24

[SOLVED] Open dialogs as content in other components