9

私はVaadin6でプロジェクトを行っています。その中で、コンポーネントをグリッドレイアウトに統合しました。これで画像を添付しました。それは私のプロジェクトのレイアウトに似ています。それは日食に似ています。したがって、レイアウトには、左右に2つのサイドパネルがあります。中央と下部のパネル。そして、画像の赤い色はボタンです。それらを押すと、パネルが最小化されます。中央のパネルを拡張して、最小化されたパネルの領域を占有するようにします。パネルをグリッドレイアウトに統合しました。グリッドレイアウトでコンポーネントを展開する方法を教えてもらえますか？

'R'を最小化すると; 「C」と「B」はその領域を占める必要があります。

'B'を最小化すると; 「C」はその領域を占める必要があります。

'L'を最小化すると; 「C」と「B」はその領域を占める必要があります。 レイアウト

4

4 に答える 4

6

これは、追加のアドオンを使用しない実際の例です。水平および垂直レイアウトを使用できます。

public class TestUI extends UI {

    Panel L = new Panel();
    Panel C = new Panel();
    Panel B = new Panel();
    Panel R = new Panel();

    Button bL = new Button("Toggle L", new CloseButtonHandler(L));
    Button bC = new Button("Toggle C", new CloseButtonHandler(C));
    Button bB = new Button("Toggle B", new CloseButtonHandler(B));
    Button bR = new Button("Toggle R", new CloseButtonHandler(R));

    @Override
    protected void init(VaadinRequest request) {
        L.setWidth("80px");
        L.setHeight("100%");
        L.setContent(new Label("L"));
        R.setWidth("80px");
        R.setHeight("100%");
        R.setContent(new Label("R"));
        B.setHeight("80px");
        B.setWidth("100%");
        B.setContent(new Label("B"));
        C.setHeight("100%");
        C.setHeight("100%");
        C.setContent(new Label("C"));

        VerticalLayout vl = new VerticalLayout();
        vl.addComponent(C);
        vl.addComponent(B);
        vl.setExpandRatio(C, 1);
        vl.setSizeFull();

        HorizontalLayout hl = new HorizontalLayout();
        hl.addComponent(L);
        hl.addComponent(vl);
        hl.addComponent(R);
        hl.setExpandRatio(vl, 1);
        hl.setSizeFull();

        CssLayout root = new CssLayout();
        root.addComponent(bL);
        root.addComponent(bC);
        root.addComponent(bB);
        root.addComponent(bR);
        root.addComponent(hl);
        root.setSizeFull();

        setContent(root);
    }

    private class CloseButtonHandler implements ClickListener {
        private Panel layout;

        public CloseButtonHandler(Panel layout) {
            this.layout = layout;
        }

        @Override
        public void buttonClick(ClickEvent event) {
            layout.setVisible(!layout.isVisible());
        }
    }
}

例は Vaadin 7 用ですが、コンセプトは Vaadin 6 でも機能するはずです。

于 2013-03-11T15:49:18.650 に答える
4

Raffel の回答は、この質問に対する最善かつ最速の解決策です。しかし、私はそれを実装する際にいくつかのプロジェクト構造の問題を抱えていました.

私は私のやり方でそれをしました。グリッド レイアウトでコンポーネントのサイズを変更するのは難しいようです。そこで、縦と横のレイアウトに移行しました。

「VL」と呼ばれる縦型レイアウトで「C」と「B」を設定します。そして、「L」と「VL」と「R」を「HL」と呼ばれる水平レイアウトに設定します。そして、必要な場所に切り替えるボタンを追加しました。トグルボタンを押すたびに、レイアウトが非表示になります。私はそれを再定義することによってそれを達成しました 

 setExpandRatio();

トグル ボタンが押されると、そのコンポーネントの setExpandRation() を再定義しました。ボタンをもう一度押すと、 setExpandRatio() を古い値にリセットします。このアイデアは、すべてのサイズのモニターでうまく機能します。

于 2013-03-14T04:53:06.093 に答える
2

BorderLayoutアドオンを使用するともっと運がいいと思います。GridLayoutでできないと言っているわけではありませんが、もっと手間がかかると思います。デモをご覧ください。

デモの場合と同様に、最小化ボタンがクリックされたときに位置を「復元」ボタンに置​​き換えることができます（レイアウト部分の復元については言及していませんが、最小化とともに計画に含まれていたと思いますか？）。したがって、フルサイズのレイアウト（たとえば、R、または東）で[最小化]をクリックすると、東の位置が復元ボタンに置​​き換えられ、それ自体がレイアウトRに置き換えられます。

于 2013-03-11T11:47:41.023 に答える
2

VerticalLayouts と Horizo​​ntalLayouts を使用する方法でこれを実装しようとします。テストされていない例:

HorizontalLayout root = new HorizontalLayout();
root.setSizeFull();

Component l = ...
l.setWidth("200px");
l.setHeight("100%");
root.addcomponent(l);

VerticalLayout cb = new VerticalLayout();
cb.setSizeFull();

Component c = ...
c.setSizeFull();
cb.addComponent(c);
cb.setExpandRatio(c, 1);

Component b = ...
b.setWidth("100%");
l.setHeight("200px");
cb.addComponent(b);

root.addcomponent(cb);
root.setExpandRatio(cb, 1);

Component r = ...
r.setWidth("200px");
r.setHeight("100%");
root.addComponent(r);

次に、レイアウトからコンポーネントを削除するか、非表示に設定することで、非表示を実装できます。

于 2013-03-11T15:14:55.213 に答える