Place one widget over another by bias

Support
#1

Hi guys.
I have some question. Can I place one widget over another?

I have next task: need to crop images for photo album. Album contains different pages with different background and different count of photos in different places. I have created frame for upload and crop image and want to place it on supposed by background places over Image widget what contains background for clear presentation of the result.

Example bellow.
ex

So I want create some new layout type, for example:

class BiasedLayout
{
   void Add(Component iComponent, float widthBiasPersentage, float heightBiasPersentage)
}

Where on Add method call container place component to position with
x = Container.width * widthBiasPersentage
y = Container.heigh * heightBiasPersentage

and recalculate position on resize operation…

But I’m not see the right path. Could you advise.

#2

Hi,

You can use AbsoluteLayout from Vaadin: AbsoluteLayout | Layout Components | Framework | Vaadin 7 Docs

AbsoluteLayout layout = new AbsoluteLayout();
// A component with coordinates for its top-left corner
TextField text = new TextField("Somewhere someplace");
layout.addComponent(text, "left: 50px; top: 50px;");

In order to integrate it to CUBA UI use unwrap method:

@Inject
BoxLayout box;
...
Layout vBox = (Layout) WebComponentsHelper.unwrap(box);
vBox.addComponent(layout);
#3

Sorry by long time answer.
Yes it works, thank you!