Howdy.
I just released a new Vaadin add-on component called
ResizableCssLayout
. It enables the user to resize a CssLayout from all the corners and sides with drag and drop. The add-on is licensed under the Apache License 2.0.
All further development suggestions and ideas are welcome, please post them here on this thread. There are no currently known issues, but when you find some please share them here or in
GitHub
.
Cheers!
Hi,
great Addon, nearly what I need. In my case I would have an additional requirement. May be you can tell me if this is somehow possible or maybe you have an idea.
I need a resize wrapper for Components/Layouts (just like your addon) but I need to use it in a GridLayout and resize the Component over the inside grid-borders and snapping to the grid (you could compare it to the Android Homescreen Widgets).
Do you have an idea on how to accomplish this?
Thank you very much in advance!
Hi. Thanks for the input, sorry for taking a long time to repply…
I understand what you mean, I’ve had a similar feature request in another project where we didn’t eventually do the actual implementation. There are several ways to accomplish this, none trivial I’m afraid, and most require some client side coding.
A way to achieve it with pure server side could be to extend a CssLayout/AbsoluteLayout and then control the drag resizing in the server side to make the ResizableCssLayout snap to correct size on the ResizeEndEvent. So basically you cancel the resize, and then give the component the size you want. You just basically need to know the size of the parent layout in pixels so you can control the distributing of width/height to different components. Should be possible to do this with GridLayout too, but also might not be since it is a different animal with the slots…
I wonder did you accomplish what you were after ? I think this is a common use case for many Vaadin applications, and I might consider implementing another add-on for this use case… 
(No promises though)
Hi, no problem for the reply time, its the same for me
Thank you very much for the information and suggestions. I think the stuff is even more complicated, because in a GridLayout you might also have to find an algorithm for moving components that would potentially overlap the component you resize. And this of course recursively also for the components that by consequence overlap the moved component and so on.
Unfortunately the task was postponed due to other priorities in the project and I do not know when I will get the time to do it.
Of course and addon would be great, looking forward to maybe some day finding one in the directory if it doesn’t happen in time, I will try it on my own as soon/if we still will need it. Of course I will share my experiences then.
Hi JDC,
Even i need the same in my case that to resize Component that placed in the GridLayout cell i am using this(ResizableCssLayout) Addon but when i resize its not occupying the columns and rows but the component size is getting increase in pixels.Not able to find the how many cells the resized component is Occupying.Please help me regarding this.
Hi,
I do not know if I did understand you correctly. But I did not investigate anymore until now, because we didn’t need this until now. But I already searched around for different JavaScript Libraries that would fulfill my needs and found this one:
http://troolee.github.io/gridstack.js/
This is exactly what I thought about and what I need. Maybe it is possible to write a Vaadin wrapper for it and to generate an addon. But I do currently not have the time to investigate, so do not wait for it and better try to find a solution on your own.
Hi,
i think there is a problem with ResizableCssLayout (1.1.0) and the latest Vaadin release (7.6.8):
When i add a ResizableCssLayout to my app it works just like a normal CssLayout.
ResizableCssLayout layout = new ResizableCssLayout();
ayout.setAllLocationsResizable();
layout.setResizable(true);
layout.setAutoAcceptResize(true);
// add Components
this.addComponent(layout);
I tried to compare the demo with my app and it seems that there are some parts missing (Chrome, Developer Tools):
Hi,
i was able to solve that problem.
It was just a bug in my widgetset.gwt.xml:
Usually i just add the new add-on to pom.xml, recompile the widgetset and everything works just fine. This time i had to add
manually and recompile again.
Now everything works just fine.
Hi Pekka,
I am trying to use your ResizableCSSLayout in a project im working on. We have decided to use Percentage Widths throughout our application, So I have extended the ServerSide Class ResizableCssLayout. And overriden some fo the Events that are fired.
On a resize i have my new events fired and i am able to maintain a serverside model of the various resizable CssLayouts that have been added to the AbsoluteLayout. I have overriden the moveLeft and moveRight methods to calculate a new percentage width for the resized component.
It all worked beautifully until i then resized my screen.
It appears that the client side code in ResizableVCssLayout’s ResizeHandler’s acceptResize method sets the size of the element to a Width in Pixels.
No problem i thought. I will simply use my serverside model to re-apply the percentage width that i know that cssLayout should have. However when i try set the cssLayouts width server side, while the server side objects width details are updated, the css-layout element in the dom retains a fixed width in pixels.
I have tried to figure out why the element does not get modified back to a percentage width.
Is there anywhere else in the client side code that would be preventing this? alternatively do you know how I can apply a percentage width from the server side model to the cssLayout?
FWIW: Simply removing the CssLayout Component and recreating a new one with the desired percentage width will achieve the desired behaviour, but surely we should be able to re-use the existing component.
Cheers
Paul
Hi Pekka!
I tried following your suggestions, but I’m using Vaadin 8.1.4. The ResizableCssLayout works fine until I try to add a ResizeListener. That gives the folllowing error:
java.lang.NoSuchMethodError: com.vaadin.pekka.resizablecsslayout.ResizableCssLayout.addListener(Ljava/lang/Class;Ljava/lang/Object;Ljava/lang/reflect/Method;)V
at com.vaadin.pekka.resizablecsslayout.ResizableCssLayout.addResizeListener(ResizableCssLayout.java:456)It doesn’t make any sense to me, because I can see that the same AbstractClientConnector.addListener method is unchanged between Vaadin7 and Vaadin8.
Any idea what could be wrong and how to solve it?
Hey Robert,
You may want to check out wether there is an issue with bridging methods… i had a similar issue because resizable is compiled against vaadin 7. I pulled a copy of the code and compiled it against Vaadin 8 and my situation worked. (looking at the code it looked like it should work… but bridging methods… meh)
see https://github.com/pleku/resizablecsslayout/issues/14
it might be worth trying that for you.