1

Vaadin 7 を試しているところですが、開始直後に壁に直面することに少し不満を感じています。Swing を経験した私は、Vaadin のレイアウトが非常にシンプルで、他のコンポーネントと同じであることに満足しました (クラス階層によると、実際にはコンポーネントです)。しかし、最初の Window をビルドする際に問題に直面しました。それでは、そのような構成の CustomComponent があるとしましょう:

VerticalLayout
|
--TextArea
|
--Button

コードは次のようになります。

public class SOComplicatedComponent extends CustomComponent {

    private VerticalLayout mainLayout;
    private TextArea textArea;
    private Button button;

    public SOComplicatedComponent() {
        buildMainLayout();
        setCompositionRoot(mainLayout);
    }

    private VerticalLayout buildMainLayout() {
        // common part: create layout
        mainLayout = new VerticalLayout();
        mainLayout.setWidth("100%");
        mainLayout.setHeight("100%");

        // top-level component properties
        setWidth("100.0%");
        setHeight("100.0%");

        // textArea
        textArea = new TextArea();
        textArea.setValue("hey, this button is supposed to be under me!");
        textArea.setSizeUndefined();
        mainLayout.addComponent(textArea);

        //button
        button = new Button("Ooops");
        button.setSizeUndefined();
        mainLayout.addComponent(button);

        return mainLayout;
    }

}

次に、次の方法でウィンドウを作成しています。

public class MyUI extends UI{

    @Override
    protected void init(VaadinRequest request) {
        ...
        Window window = new Window("Help me SO", new SOComplicatedComponent());
        addWindow();
    }
}

その結果、TextArea と Button が重なっているウィンドウが表示されます。ウィンドウのサイズを変更すると、コンテンツが伸びてレイアウトが正常になるのですが、コンテンツのサイズに合わせてウィンドウが自動的に収まるようになっているはずですよね。

よし、決戦の時間だ

質問

Button を Window の TextArea の下に配置し、Window のサイズを自動的にコンテンツに合わせます。Vaadin 7でそれを達成する最も適切な方法は何ですか?

ありがとう

4

1 に答える 1

3

この特定の例では、別個のウィンドウは必要ありません。Vaadin 7 では、ウィンドウは実際にはメイン UI の子ウィンドウです。あなたのコメントによると、フローティングウィンドウが必要です。それは素晴らしいことですが、UI には、たとえ空であっても、実際には何らかのコンテンツが必要です (そうしないと、レンダリングが少し奇妙に見えます)。だから、あなたは単にできるはずです

public class MyUI extends UI {

  @Override
  protected void init(VaadinRequest request) {
    // You need to have some content on the UI, even if it's empty - otherwise it looks odd
    // Here, I'm just adding an empty layout
    VerticalLayout content = new VerticalLayout();
    content.setSizeFull();
    setContent(content);

    // Adding a child window, and centering it for kicks
    Window window = new Window("Help me SO", new SOComplicatedComponent());
    window.center();
    addWindow(window);

  }
}

AbsoluteLayoutでは、コンポーネントの場所を指定する必要があります。単純な垂直レイアウト (つまり、ボタンの上の TextField) の場合、通常、VerticalLayoutを使用します。

また、 setSizeFull は、「このコンポーネントがそのコンテナで許可されているすべてのスペースを取るようにする」ことを意味します。これは、親が子コンポーネントを必要なだけ大きくし、大きくしないようにしたい場合に少し混乱します。CustomComponent にも「setSizeUndefined」を使用したいと思います。したがって、すべてをまとめると、次のようになります。

public class SOComplicatedComponent extends CustomComponent {

  private VerticalLayout mainLayout;
  private TextArea textArea;
  private Button button;

  public SOComplicatedComponent() {
    buildMainLayout();
    setCompositionRoot(mainLayout);
  }

  private VerticalLayout buildMainLayout() {
    // common part: create layout
    mainLayout = new VerticalLayout();
    mainLayout.setSpacing(true);
    mainLayout.setMargin(true);

    // top-level component properties
    /* CSA : SizeUndefined means "take as much space as my content needs" */
    setSizeUndefined();

    // textArea
    textArea = new TextArea();
    textArea.setValue("hey, this button is supposed to be under me!");
    textArea.setSizeUndefined();
    mainLayout.addComponent(textArea);

    //button
    button = new Button("Ooops");
    button.setSizeUndefined();
    mainLayout.addComponent(button);

    return mainLayout;
  }

}

私にとって、それは次のようにレンダリングされます: サンプル画像

于 2013-05-07T08:33:37.233 に答える