Portal-like layout

I’m an expert user of ExtJs and GXT. Now I’m trying to port an internal application on vaadin with the goal to use it in a new project. One of the component I need to implement is a “Portal-like” layout, a kind of SortableLayout defined in the sampler where the positions are predefined (i.e. GridLayout) and the drag-and-drop action produce a swap of the components involved.

An example explaining what I mean may be found here:

Do anybody solved this problem? any hint on how to make it?

Many thanx in advance

There is no such Vaadin layout available at the moment as far as I know. The development version of the Visual Designer does such component rearranging and much more, but is also much more complex and not designed to be used as a part of a running end user application.

The layout in your example is not really like a GridLayout but more like a HorizontalLayout containing VerticalLayouts (components in different columns can have different heights). You could try to implement this with Vaadin drag&drop, putting your components in panels and following an approach similar to that in the
example in Sampler
. I am not sure if you run into complications when doing this e.g. with some events being “caught” before they reach the components, though.

Not a solution, but a bit more far reaching brainstorming idea. In future one could use wysiwyg editor components to build editable portal-like, but more flexible, screen layouting functionality.

this unfinished app
where wysiwyg editor has been embedded to a web app. You can add vertical layout to screen, drag components to it and even re-arrange them. This approach could give really powerful editing capabilities to administrators of your portal-like application without actual software development.

Of course - for a production application one probably wants to re-shape the editor UI to better fit to the application, but the underlying editability of layouts and components would make building such application easy.