With the vaadin plugin for eclipse I just created a vaadin project and added a new vaadin custom component, which I edited with the visual editor adding just one label at the top-left corner on an absolute layout.
public class DireccionesCC extends CustomComponent {
@AutoGenerated
private AbsoluteLayout mainLayout;
/**
* The constructor should first build the main layout, set the
* composition root and then do any custom initialization.
*
* The constructor will not be automatically regenerated by the
* visual editor.
*/
public DireccionesCC() {
buildMainLayout();
setCompositionRoot(mainLayout);
// TODO add user code here
}
@AutoGenerated
private AbsoluteLayout buildMainLayout() {
// common part: create layout
mainLayout = new AbsoluteLayout();
// top-level component properties
setWidth("100.0%");
setHeight("100.0%");
// label_1
Label label_1 = new Label();
label_1.setWidth("-1px");
label_1.setHeight("-1px");
label_1.setValue("Panel de DIRECCIONES");
label_1.setImmediate(false);
mainLayout.addComponent(label_1, "top:11.0px;left:15.0px;");
return mainLayout;
}
I then added that new custom component to the mainWindow as showed:
Window mainWindow = new Window("Personas Application");
mainWindow.addComponent(new DireccionesCC());
setMainWindow(mainWindow);
The label does not show in the window when I degub in tomcat …
What am I doing wrong ?
I then manually changed the DireccionesCC class with this
public class DireccionesCC extends Panel {
@AutoGenerated
private AbsoluteLayout mainLayout;
/**
* The constructor should first build the main layout, set the
* composition root and then do any custom initialization.
*
* The constructor will not be automatically regenerated by the
* visual editor.
*/
public DireccionesCC() {
buildMainLayout();
// setCompositionRoot(mainLayout);
// TODO add user code here
}
@AutoGenerated
private AbsoluteLayout buildMainLayout() {
// common part: create layout
mainLayout = new AbsoluteLayout();
// label_1
Label label_1 = new Label();
label_1.setWidth("-1px");
label_1.setHeight("-1px");
label_1.setValue("Panel de DIRECCIONES");
label_1.setImmediate(false);
this.addComponent(label_1);//, "top:11.0px;left:15.0px;");
return mainLayout;
}
}
AbsoluteLayout (the original composition root for the custom component) is by default 100% x 100% sized. And since there’s a CustomComponent wrapping that, 100% x undefined sized by default, the AbsoluteLayout is 0x0 size (100 percent from undefined is zero).
When you change the composition root to a Label (CustomComponent.addComponent does that when you call it for the first time), the Label has a 100% x undefined size by default, hence it shows.
So in order to see the original AbsoluteLayout, you either need to set the height of the CustomComponent or the AbsoluteLayout explicitly to some non-percentage height, or define the CustomComponent’s height 100 as well, and set the height of the parent of the CustomComponent to some defined height as well.
Might sound complicated, but all you need to do is this: mainLayout.setHeight(“200px”);
And for the future, you might want to use the “Analyze layouts” button in the debug window. It’ll show you these kinds of errors (add ?debug parameter to your application url).
Thank you Jouni, I think I understand, but isn’t it somehow easy for the UI designer to determine the minimun heigth in pixels for the absolute layout based on the components added to it ?
I am sorry, I am sure someone is working on it or waiting for a patch
I am starting now with vaadin and will try to make a complete application with many views, history management, i18n, persistence, mvp, etc.
I was convinced some time ago when I saw vaadin architecture, and now I will make something working to gain experience and show a demo where I am working to convince them that this framework will save us a lot of hadaches.
Not much information to go on in your post, but I’d venture a guess: most likely your custom component (or something in it) has zero size, either directly or based on its parent layout and how it is added there. Use the “AL” (analyze layouts) tool in the debug window to get more information (add “?debug” to your application URL) or check e.g. with Firebug whether the component is there but with zero size, and then check your layouts.
