pleku / resizablecsslayout Goto Github PK

I can't make this add-on work...

This is my code snippet:

public class FlotaConductores extends CustomComponent implements ClickListener, SucceededListener, Receiver, ProgressListener, StartedListener, FailedListener {

...

private VerticalLayout bodyContentConductores;

private HorizontalLayout layoutBotonesConductores;
private Button botonCargarFicheroConductores;
private Button botonBorrarConductor;
private Button botonAnadirConductor;

private ResizableCssLayout gridWrapper;
private Grid gridConductores;

...

public FlotaConductores(UI pUi){
    this.ui = pUi;

    this.navigator = ui.getNavigator();

    // Encontramos el directorio base de la aplicación
    basepath = VaadinService.getCurrent().getBaseDirectory().getAbsolutePath();

}

public VerticalLayout buildLayoutConductores(){
    bodyContentConductores = new VerticalLayout();
    bodyContentConductores.setMargin(true);
    bodyContentConductores.setSpacing(true);

    Grid grid = buildGridConductores();

    gridWrapper = new ResizableCssLayout(grid);
    gridWrapper.setResizable(true);
    gridWrapper.setHeight("100%");
    gridWrapper.setWidth("100%");
    gridWrapper.setCaption("Resize from grid's edges");

    bodyContentConductores.addComponent(gridWrapper);
    bodyContentConductores.addComponent(buildLayoutBotonesConductores());
    bodyContentConductores.setWidth("100%");

    return bodyContentConductores;
}

private Grid buildGridConductores() {

    PtDaoService ptDao = new PtDaoService();
    ptDao.obtenerConductores();

    containerConductoresSistema = new BeanItemContainer<Conductor>(Conductor.class, Flota.getInstance().getConductoresList());

    gridConductores = new Grid(containerConductoresSistema);
    gridConductores.setSizeFull();
    gridConductores.setSelectionMode(SelectionMode.MULTI);
    gridConductores.setImmediate(true);
    gridConductores.setWidth(100, Unit.PERCENTAGE);
    gridConductores.setHeight(100, Unit.PERCENTAGE);
    gridConductores.setColumnOrder("nombre", "email", "telefono", "domicilio");
    gridConductores.removeColumn("domicilioCoord");

    // Filtro
    final GridCellFilter filter = new GridCellFilter(gridConductores);
    filter.setTextFilter("nombre", false, false);
    filter.setTextFilter("email", false, false);
    filter.setTextFilter("telefono", false, false);
    filter.setTextFilter("domicilio", false, false);

    return gridConductores;
}

...

}

What am I doing wrong?

Hi,

While the code itself is compatible with Vaadin 8 there are some issues with the compiled code in release 1.1.0 when used with Vaadin 8.

If you extend ResizableCssLayoutState then you get a StackOverFlowError whenever you call getState(boolean) ... which is called indirectly in the constructor of ResizableCSSLayout.

Recompiling the addon against Vaadin 8 resolves this issue and allows you to extend ResizableCssLayout

This may be related to bridge methods created in the compiled class file for ResizableCssLayout. In Vaadin 7 CssLayout did not define a getState(boolean) method, so when ResizableCssLayout is compiled against the Vaadin 7 code base the compiled class file adds bridge methods because ResizableCssLayout overrides the return type of getState(boolean) casting the returned state to a ResizableCssLayoutState.

When user is drag resizing, pressing the esc-key should cancel the drag.

Could have an option to show cloned content inside the dragged element.
Or another option is to resize the actual content live?

In short, the component should stay in the same location always when resized, instead of bouncing around. Currently when keeping aspect ratio and resizing from the sides, the component "bounces around" since it doesn't consider that it is being resized in both dimensions because of keeping the ratio.

The cursor override when resizing is not working on Safari, instead it shows a text select cursor. Works fine on FF and Chrome on Mac.

Update the corresponding coordinates for AbsoluteLayout when the resize layout is positioned with bottom and or right coordinates (top & left already supported).

Example project does not compile with java 10

Might be visually nicer if using transform for the resizing.

The resize handles are behind the grid component in the demo, need bigger z-index.

Should be possible to say to ResizableCssLayout to keep the current aspect ratio of the component on resize - the user's DND always changes both width & height.

The component should regard the parent boundaries even when keeping the aspect ratio.

Enable touch support to make it possible to do resize with touch screen. At least android (chrome) and iOS (safari) should work, maybe even windows phone (IE).

When starting a resize with onMouseDown, the resize handle should always be in the same location, which is the current size. Holding the mouse down and then releasing it without moving should not resize the component.