Directory

← Back

SubWindowDesktop and Subwindow component

Subwindow Desktop and Subwindow component for Vaadin Flow

Author

Rating

Popularity

100+

SubwindowDesktop/Subwindow components

This components let you correctly implement an MDI interface.

No more windows floating over menu bar or other components.

First you define the SubWindowDesktop and add the SubWindows to it.

The SubWindows will float only inside it.

Features:

  • fire events for onMove, onClose, onMinimize, onMaximize and onRestore.
  • fire events for updatePosition and updateSize
  • set default window state for new windows.
  • hide windows buttons.
  • add components to the title bar.
  • stay on top.
  • add component to desktop
  • add a subwindow icon.

Theme:

Now is posible to customize the componente theme using CssImport. Add a line like this to the view @CssImport(value = "./styles/subwindow-custom.css",themeFor = "sub-window")

and in the subwindow-custom.css change what you need.

.subwindow-header {
    background-color:  cornflowerblue !important;
}

Theme variables

Subwindow:

--subwindow-bg: subwindow background color: #fff. --subwindow-border-radius: 2px.

--subwindow-header-bg: none --subwindow-header-color: none

--subwindow-header-bottomline-width: 1px --subwindow-header-bottomline-style: solid --subwindow-header-bottomline-color: #718191

--subwindow-resize-color: #666666

--subwindow-focus-lost-bg: #b3b3b340

Desktop:

--subwindow-desktop-bg: #f6f6f6 --subwindow-desktop-bar-bg: #e0e0e0

--subwindow-desktop-bar-label-width: 150px the label width for each subwindow shown.

--subwindow-desktop-bar-label-top-width: 3px --subwindow-desktop-bar-label-top-style: solid --subwindow-desktop-bar-label-top-color: #666666

--subwindow-desktop-bar-label-top-hover-width: 3px --subwindow-desktop-bar-label-top-hover-style: solid --subwindow-desktop-bar-label-top-hover-color: #0066ff

--subwindow-desktop-bar-label-top-focus-width: 3px --subwindow-desktop-bar-label-top-focus-style: solid --subwindow-desktop-bar-label-top-focus-color: #0066ff

Available at MavenCentral:

  • groupId: com.github.mdre
  • artifactId: flowsubwindow

Sample code

@Route("")
@BodySize(height = "100vh", width = "100vw")
@Viewport("width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes")
public class VaadinFlowLabView extends VerticalLayout {

    public VaadinFlowLabView() {
        setClassName("app-view");
        setSizeFull();
        
        Label hello = new Label("Hello Material!");
        add(hello);

        Button button = new Button("Click me", event -> {
            hello.setText("Clicked!");
            hello.setClassName("clicked");
        });
        button.setThemeName("primary");
        add(button);
        
        HorizontalLayout hl = new HorizontalLayout();
        hl.setSizeFull();
        hl.setMargin(false);
        hl.setSpacing(false);
        add(hl);
        
        SubWindowDesktop swd = new SubWindowDesktop();
        swd.setSizeFull();
        hl.add(swd);
        
        SubWindow sw = new SubWindow("sw1");
        swd.add(sw);
        sw.setHeight("150px");
        sw.setWidth("300px");
        
        VerticalLayout vlsw1 = new VerticalLayout();
        TextField tf1 = new TextField("TF Label");
        vlsw1.add(tf1);
        sw.setContent(vlsw1);
        
        SubWindow sw2 = new SubWindow("SubWindow 2");
        swd.add(sw2);
        sw2.setHeight("250px");
        sw2.setWidth("300px");

        SubWindow sw3 = new SubWindow("subwindow 3");
        swd.add(sw3);
        sw3.setWidth("300px");
        sw3.setHeight("150px");
        
        VerticalLayout vlsw = new VerticalLayout();
        vlsw.setSizeFull();
        Button btn = new Button("Button");
        btn.setThemeName("contained primary");
        vlsw.add(new Label("Label"),btn);
        TextField tf2 = new TextField("TF2");
        vlsw.add(tf2);
        
        sw2.setContent(vlsw);
    }
}

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Released
2020-10-14
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 14+
Vaadin 12+ in 0.3.0
Polymer 3.0+ in 1.0.0
Vaadin 10+ in 0.9.0
Browser
Firefox
Google Chrome

SubWindowDesktop and Subwindow component - Vaadin Add-on Directory

Subwindow Desktop and Subwindow component for Vaadin Flow SubWindowDesktop and Subwindow component - Vaadin Add-on Directory
## SubwindowDesktop/Subwindow components This components let you correctly implement an MDI interface. No more windows floating over menu bar or other components. First you define the SubWindowDesktop and add the SubWindows to it. The SubWindows will float only inside it. ### Features: - fire events for onMove, onClose, onMinimize, onMaximize and onRestore. - fire events for updatePosition and updateSize - set default window state for new windows. - hide windows buttons. - add components to the title bar. - stay on top. - add component to desktop - add a subwindow icon. ### Theme: Now is posible to customize the componente theme using CssImport. Add a line like this to the view ```@CssImport(value = "./styles/subwindow-custom.css",themeFor = "sub-window")``` and in the `subwindow-custom.css` change what you need. ``` .subwindow-header { background-color: cornflowerblue !important; } ``` ### Theme variables #### Subwindow: --subwindow-bg: subwindow background color: #fff. --subwindow-border-radius: 2px. --subwindow-header-bg: none --subwindow-header-color: none --subwindow-header-bottomline-width: 1px --subwindow-header-bottomline-style: solid --subwindow-header-bottomline-color: #718191 --subwindow-resize-color: #666666 --subwindow-focus-lost-bg: #b3b3b340 #### Desktop: --subwindow-desktop-bg: #f6f6f6 --subwindow-desktop-bar-bg: #e0e0e0 --subwindow-desktop-bar-label-width: 150px the label width for each subwindow shown. --subwindow-desktop-bar-label-top-width: 3px --subwindow-desktop-bar-label-top-style: solid --subwindow-desktop-bar-label-top-color: #666666 --subwindow-desktop-bar-label-top-hover-width: 3px --subwindow-desktop-bar-label-top-hover-style: solid --subwindow-desktop-bar-label-top-hover-color: #0066ff --subwindow-desktop-bar-label-top-focus-width: 3px --subwindow-desktop-bar-label-top-focus-style: solid --subwindow-desktop-bar-label-top-focus-color: #0066ff ## Available at MavenCentral: * groupId: com.github.mdre * artifactId: flowsubwindow
Source Code

SubWindowDesktop and Subwindow component version 0.3.0

SubWindowDesktop and Subwindow component version 0.8.0
Added fire events for listeners.

SubWindowDesktop and Subwindow component version 0.8.1
added setResizable(Boolean b)

SubWindowDesktop and Subwindow component version 0.8.2
solved the null tooltip. Add a triangle to show the resize control. Add a method to resize de resize control.

SubWindowDesktop and Subwindow component version 0.8.3
Fix the issue of bringToFront when create a subwindow from a subwindow.

SubWindowDesktop and Subwindow component version 0.9.0
Add theme.

SubWindowDesktop and Subwindow component version 0.9.1
fix FF error.

SubWindowDesktop and Subwindow component version 0.9.5

SubWindowDesktop and Subwindow component version 0.9.6
Fix incorrect maximized state report.

SubWindowDesktop and Subwindow component version 1.0.0
First version compatible with Flow 14+. Compiled with jdk 11.

SubWindowDesktop and Subwindow component version 1.0.2
package build fixes.

SubWindowDesktop and Subwindow component version 1.0.3
What's news: - add stayOnTop attribute - add addComponent to desktop background

SubWindowDesktop and Subwindow component version 1.0.4
- Add a subwindow icon on the left. - Add updatePosition and updateSize event. - Add support to the with CssImport

SubWindowDesktop and Subwindow component version 1.0.5.4

Online