vaadin 生成的页面不显示任何组件答案

【问题标题】：vaadin generated page doesnt show any componentvaadin 生成的页面不显示任何组件
【发布时间】：2012-12-19 11:10:50
【问题描述】：

我在一般的 vaadin 框架上有一个问题。

我创建了一个类扩展 vaadin 应用程序（MyFirst），之后我使用 vaadin 可视化设计器（MyFormApp）创建了一个自定义组件。

我确实实例化了自定义组件 MyFormApp，并将其添加到 MyFirst 的主窗口中。

部署应用后，vaadin生成的页面不显示任何组件。

我的代码：

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package com.example.vaadin;

import com.vaadin.Application;
import com.vaadin.ui.*;

/**
*
* @author anis.bouchenafa
*/
public class MyFirst extends Application{


private Button newContact = new Button("Add contact");
private Button search = new Button("Search");
private Button share = new Button("Share");
private Button help = new Button("Help");
private HorizontalSplitPanel horizontalSplit = new HorizontalSplitPanel();
private TextField tf = new TextField();

@Override
public void init() {
    //buildMainLayout();

    MyFirstApp a = new MyFirstApp();
   Window w = new Window("aness conf");
   w.addComponent(a);
   setMainWindow(w);


}

}

我的第二类是 MyFirstApp（自定义组件）：

package com.example.vaadin;



import com.vaadin.annotations.AutoGenerated;
import com.vaadin.ui.AbsoluteLayout;
import com.vaadin.ui.CustomComponent;
import com.vaadin.ui.LoginForm;

public class MyFirstApp extends CustomComponent {

@AutoGenerated
private AbsoluteLayout mainLayout;
@AutoGenerated
private LoginForm loginForm_2;

/*- VaadinEditorProperties=        {"grid":"RegularGrid,20","showGrid":true,"snapToGrid":true,"snapToObject":true,"movingGuides":false,"snappingDistance":10} */



/*- VaadinEditorProperties={"grid":"RegularGrid,20","showGrid":true,"snapToGrid":true,"snapToObject":true,"movingGuides":false,"snappingDistance":10} */

/**
 * 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 MyFirstApp() {
    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%");

    // loginForm_2
    loginForm_2 = new LoginForm();
    loginForm_2.setStyleName("v-loginform");
    loginForm_2.setImmediate(false);
    loginForm_2.setWidth("340px");
    loginForm_2.setHeight("-1px");
    mainLayout.addComponent(loginForm_2, "top:160.0px;left:200.0px;");

    return mainLayout;
}

}

在 servlet 执行后，浏览器上没有任何显示。

【问题讨论】：

标签： java tomcat servlets vaadin

【解决方案1】：

使用AbsoluteLayout，您需要为组件定义显示位置，例如：

mainLayout = new AbsoluteLayout();
mainLayout.setWidth("400px");
mainLayout.setHeight("350px");

更多信息，请参考： https://vaadin.com/book/-/page/layout.absolutelayout.html

【讨论】：

【解决方案2】：

好吧，你调用 buildMainLayout() 什么是视觉上是空的。它只包含一个 AbsoluteLayout 和一个 LoginForm()，其中没有任何组件。这就像生成一个无边框的 HTML 表格而不添加任何文本。

我认为你想添加的组件

private Button newContact = new Button("Add contact");
private Button search = new Button("Search");
private Button share = new Button("Share");
private Button help = new Button("Help");
private HorizontalSplitPanel horizontalSplit = new HorizontalSplitPanel();
private TextField tf = new TextField();

应该

在您的“MyFirstApp 类”中声明和初始化，并且
通过 addComponent() 添加到您的布局中

详细的布局（和其他基础知识）也在《Vaadin 之书》中进行了解释：

瓦丁之书： https://vaadin.com/book/-/page/intro.html

Vaadin 之书 - 布局： 布局：https://vaadin.com/book/-/page/layout.html

Vaadin 布局示例： http://demo.vaadin.com/sampler#Layouts

【讨论】：

【解决方案3】：

我在 Vaadin 7 中使用可视化编辑器时遇到了同样的问题。但是，如果您将 Layout 属性从 AbsoluteLayout 到任何其他布局，（即 GridLayout、HorizontalLayout 或 VerticalLayout）。组件显示。希望对您有所帮助。

【讨论】：