Hi,
Do we have anything similar https://vaadin.com/elements/-/element/vaadin-board#features, that Vaadin just introduced but woking only on Vaadin 8.x. ?
Hi,
Unfortunately, we have no layout similar to Vaadin Board. I recommend that you try to integrate Responsive Layout Vaadin add-on Vaadin Add-on Directory It has version for Vaadin 7: 1.3.4
- Add com.jarektoro:responsive-layout:1.3.4 to web module dependencies using Project Properties - Edit - Advanced
- Unwrap cuba layout to add Vaadin components to its content:
public class ExtAppMainWindow extends AppMainWindow {
@Inject
private VBoxLayout targetBox;
@Override
public void init(Map<String, Object> params) {
super.init(params);
ResponsiveLayout responsiveLayout = new ResponsiveLayout();
responsiveLayout.setSizeFull();
ResponsiveRow row = responsiveLayout.addRow();
Button deleteButton = new Button("",FontAwesome.TRASH);
deleteButton.addStyleName(ValoTheme.BUTTON_DANGER);
deleteButton.setSizeFull();
Button commentButton = new Button("",FontAwesome.COMMENT);
commentButton.addStyleName(ValoTheme.BUTTON_PRIMARY);
commentButton.setSizeFull();
Button editButton = new Button("", FontAwesome.EDIT);
editButton.addStyleName(ValoTheme.BUTTON_FRIENDLY);
editButton.setSizeFull();
row.addColumn().withDisplayRules(12,6,4,4).withComponent(deleteButton);
row.addColumn().withDisplayRules(12,6,4,4).withComponent(commentButton);
row.addColumn().withDisplayRules(12,6,4,4).withComponent(editButton);
Layout layout = targetBox.unwrap(Layout.class);
layout.addComponent(responsiveLayout);
}
}
And you will see 3 responsive columns that collapses to two / one if you change width of a browser window.
1 Like
Hi Yuriy,
Thanks for the tip!
Hi
Is there any possibilities to have similar behavior in FieldGroup as responsive option?
Mortoza
Currently no, we will try to find generic way to perform responsive layout in FieldGroup, but is not yet included to the road map. If you want to use responsive features you can simply use components and layouts without FieldGroup, use TextField, LookupField and other components directly, write CSS manually or use the add-on mentioned above.
Thanks for the comments.
I am trying to use this Vaadin responsive layout add-on, followed your code to start with but having nullpointer exception
here is my full code, did you select the package incorrectly?
import com.haulmont.cuba.gui.components.*;
import com.jarektoro.responsivelayout.ResponsiveLayout;
import com.jarektoro.responsivelayout.ResponsiveRow;
import com.vaadin.server.FontAwesome;
import com.vaadin.ui.*;
import com.vaadin.ui.themes.ValoTheme;
import javax.inject.Inject;
import java.util.Map;
public class Dashboard extends AbstractWindow {
@Inject
private VBoxLayout targetBox;
@Override
public void init(Map<String, Object> params) {
super.init(params);
ResponsiveLayout responsiveLayout = new ResponsiveLayout();
responsiveLayout.setSizeFull();
ResponsiveRow row = responsiveLayout.addRow();
com.vaadin.ui.Button deleteButton = new com.vaadin.ui.Button("", FontAwesome.TRASH);
deleteButton.addStyleName(ValoTheme.BUTTON_DANGER);
deleteButton.setSizeFull();
com.vaadin.ui.Button commentButton = new com.vaadin.ui.Button("",FontAwesome.COMMENT);
commentButton.addStyleName(ValoTheme.BUTTON_PRIMARY);
commentButton.setSizeFull();
com.vaadin.ui.Button editButton = new com.vaadin.ui.Button("", FontAwesome.EDIT);
editButton.addStyleName(ValoTheme.BUTTON_FRIENDLY);
editButton.setSizeFull();
row.addColumn().withDisplayRules(12,6,4,4).withComponent(deleteButton);
row.addColumn().withDisplayRules(12,6,4,4).withComponent(commentButton);
row.addColumn().withDisplayRules(12,6,4,4).withComponent(editButton);
Layout layout = targetBox.unwrap(Layout.class);
layout.addComponent(responsiveLayout);
}
}
Error message
java.lang.NullPointerException
at com.company.web.dashboard.Dashboard.init(Dashboard.java:47)
at com.haulmont.cuba.gui.WindowManager.init(WindowManager.java:1043)
at com.haulmont.cuba.gui.WindowManager.initWrapperFrame(WindowManager.java:1032)
at com.haulmont.cuba.gui.WindowManager.createWindow(WindowManager.java:423)
at com.haulmont.cuba.gui.WindowManager.openWindow(WindowManager.java:591)
at com.haulmont.cuba.web.WebWindowManager.openWindow(WebWindowManager.java:139)
at com.haulmont.cuba.gui.config.MenuCommand$ScreenCommand.run(MenuCommand.java:181)
at com.haulmont.cuba.gui.config.MenuCommand.execute(MenuCommand.java:76)
at com.haulmont.cuba.web.sys.SideMenuBuilder.lambda$createMenuBarCommand$0(SideMenuBuilder.java:183)
at com.haulmont.cuba.web.gui.components.mainwindow.WebSideMenu$MenuItemImpl.lambda$setCommand$0(WebSideMenu.java:432)
at com.haulmont.cuba.web.toolkit.ui.CubaSideMenu.lambda$new$c68c7f49$1(CubaSideMenu.java:81)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:498)
at com.vaadin.server.ServerRpcManager.applyInvocation(ServerRpcManager.java:158)
at com.vaadin.server.ServerRpcManager.applyInvocation(ServerRpcManager.java:119)
at com.vaadin.server.communication.ServerRpcHandler.handleInvocation(ServerRpcHandler.java:444)
at com.vaadin.server.communication.ServerRpcHandler.handleInvocations(ServerRpcHandler.java:409)
at com.vaadin.server.communication.ServerRpcHandler.handleRpc(ServerRpcHandler.java:274)
at com.vaadin.server.communication.UidlRequestHandler.synchronizedHandleRequest(UidlRequestHandler.java:90)
at com.vaadin.server.SynchronizedRequestHandler.handleRequest(SynchronizedRequestHandler.java:41)
at com.vaadin.server.VaadinService.handleRequest(VaadinService.java:1422)
at com.vaadin.server.VaadinServlet.service(VaadinServlet.java:385)
Thanks for your help.
Mortoza
You have to define vbox with id “targetBox” somewhere in your screen. Please debug your code if you see NullPointerException. Often that means you missed something and variable that you used is null.
oops… thanks.
Do I have to use only Vaadin component inside this layout? I tried to use my CUBA component but it seems not allowed, see the attached image! Any workaround?
Obtain component implementation using method and add the result to Vaadin layout:
com.vaadin.ui.Component vaadinImpl = componet.unwrapComposition(com.vaadin.ui.Component.class);
Hi Yuriy
Thanks, I shall need little more help here, sorry for asking for that details.
when I am using vaadin addon layout and want to add CUBA button instead of Vaadin button in this example, what will be the change here? I didn’t find much details in the documentation!
it worked, thank you