SubWindowDesktop and Subwindow component
Subwindow Desktop and Subwindow component for Vaadin Flow
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); } }
Links
Compatibility
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