How to run component created with Visual Designer?

General
1

I have created a simpile component, just a button on the screen, and I am trying to figure out how to run that component. I can run it directly so I modified the java class that was created when I created my product, and I still can not run it.

Component code generated with Visual Designer
/**
* 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 TestComp() {
buildMainLayout();
setCompositionRoot(mainLayout);

    // TODO add user code here
}

@AutoGenerated
private AbsoluteLayout buildMainLayout() {
    // common part: create layout
    mainLayout = new AbsoluteLayout();
    mainLayout.setImmediate(false);
    mainLayout.setWidth("100%");
    mainLayout.setHeight("100%");
    
    // top-level component properties
    setWidth("100.0%");
    setHeight("100.0%");
    
    // button_1
    button_1 = new Button();
    button_1.setCaption("Button");
    button_1.setImmediate(false);
    button_1.setWidth("-1px");
    button_1.setHeight("-1px");
    mainLayout.addComponent(button_1, "top:20.0px;left:20.0px;");
    
    return mainLayout;
}

}

Code generate when project create and then modified by me.

package com.example.testapp;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@SuppressWarnings(“serial”)
@Theme(“testapp”)
public class TestappUI extends UI {

@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = TestappUI.class)
public static class Servlet extends VaadinServlet {
}

@Override
protected void init(VaadinRequest request) {
    final VerticalLayout layout = new VerticalLayout();
    layout.setMargin(true);
    setContent(layout);
    
    TestComp test = new TestComp();
    layout.addComponent(test);

//
// Button button = new Button(“Click Me”);
// button.addClickListener(new Button.ClickListener() {
// public void buttonClick(ClickEvent event) {
// layout.addComponent(new Label(“Thank you for clicking”));
// }
// });
// layout.addComponent(button);
}

}

Any help you can give me would be appreicated.

2

Hi,

It should go somewhat like that. One problem that I spot is that the CustomComponent is 100% high, but you put it inside a VerticalLayout with undefined size in the UI class. To fix that, give “layout.setSizeFull()” in the init() method.

Or, you could use the CustomComponent as the UI content with setContent().

There could be some other problems as well.

3

Thank you that helped a lot. Got the screen to run and display.

I am guessing that this is a lot like javaFX in that you have a main class which starts your application and then from there you load in different components to complete your application. Is that correct?

Thank you

4

Yes, I guess so, although JavaFX is also different in many ways.

Note that using the visual editor is rather different from how you otherwise build Vaadin UIs. Especially using AbsoluteLayout is normally rare - you normally compose the UI from VerticalLayout, HorizontalLayout, Panel, and so forth. Perhaps GridLayout in some cases. CssLayout if you want more flexibility or faster rendering.

As such, I’m not sure if the visual editor a good way to approach Vaadin. It may give you a quick start to familiarize yourself with the different components and their properties.

For one description of building the basic UI layout, I suggest reading this section:
4.2. Building the UI
.

5

N
ote that using the visual editor is rather different from how you otherwise build Vaadin UIs. Especially using AbsoluteLayout is normally rare - you normally compose the UI from VerticalLayout, HorizontalLayout, Panel, and so forth. Perhaps GridLayout in some cases. CssLayout if you want more flexibility or faster rendering.

That you only can use an AbsoluteLayout in the Visual Designer is a misconseption many apparently have. Actually, nothing prevents you to change the AbsoluteLayout to something else. Just click on the root layout, and under properties tab select the Layout Type you want to use. Visual Designer currently supports using AbsoluteLayout, VerticalLayout, HorizontalLayout and GridLayout as base for your component.

6

Ah, so it finally accepts also other root layouts, I had not noticed the change. Awesome, that’s how it should be. Perhaps it’s still rather confusing if the AbsoluteLayout is used as the default without asking. I’ll need to try how it works now.