3

ユーザーの画面サイズに合わせて gridLayout に問題があります。3 列 2 行の gridLayout を作成したいのですが、最初の行にはメニューが含まれ、2 番目の行はパネルを使用した本文になり、最初の列はX 2 番目の行にはツリーが含まれますが、必要な結果が得られません。このコードはパネルを表示しますが、フル サイズではありません。

@Override
public void init() {

    Window main = new Window("My App");
    main.setSizeFull();
    setMainWindow(main);

    VerticalLayout root = new VerticalLayout();
    main.setContent(root);
    main.getContent().setSizeFull();

    GridLayout grid = new GridLayout(3, 2);

    main.addComponent(grid);

    grid.setColumnExpandRatio(0, 0.13f);
    grid.setColumnExpandRatio(1, 0.86f);
    grid.setColumnExpandRatio(2, 0.0f);


    grid.setHeight(100, Sizeable.UNITS_PERCENTAGE);
    grid.setWidth(100,Sizeable.UNITS_PERCENTAGE);


    grid.addComponent(new Label("menu"), 0, 0, 0, 1);
    grid.addComponent(new Label("tree"), 1, 0, 1, 0);

    Panel pan = new Panel();
    pan.setWidth(100, Sizeable.UNITS_PERCENTAGE);
    pan.setHeight(100, Sizeable.UNITS_PERCENTAGE);

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

    body.addComponent(pan);

    grid.addComponent(body, 1, 1, 1, 1);

}
4

1 に答える 1

7

質問の詳細に入る前に、Vaadin でコンポーネントがどのように拡張されているかを理解するのに役立つツールを紹介したいと思います。

  • アプリケーションの実行に使用するアドレスの末尾に「?debug」を追加します (例: localhost/app/?debug")
  • ボタンが上にある小さなウィンドウが表示されます。
  • C を押してクリアしてから AL を押してレイアウトを分析します
  • コンポーネントのツリーが結果として表示されます。プラス記号を押すと、そのツリーを参照できます
  • コンポーネント (ラベル、パネルなど) を押すたびに、そのコンポーネントが画面上で強調表示されます。

これにより、以下の私のコードには、画面全体を拡大するレイアウト、グリッドの最後の 2 つのセルで拡大するパネル、および幅が拡大するラベルがあることがわかります。

デバッグ モードは、Vaadin の本に記載されています。

コンポーネントは正しく展開されていると思いますが、間違った場所にあります。vaadin の本で GridLayout がどのように機能するかを確認してください。次のコードは、座標を変更し、ラベルを追加して、パネルが実際にグリッドの正しいセルを取得していることを示します。また、配置のために VerticalLayout をパネルに追加する方が、その逆よりも論理的に思えます。

@Override
public void init() {


    Window main = new Window("My App");
    main.setSizeFull();
            setMainWindow(main);

            VerticalLayout root = new VerticalLayout();
    main.setContent(root);
    main.getContent().setSizeFull();

    GridLayout grid = new GridLayout(3, 2);

    main.addComponent(grid);

    grid.setColumnExpandRatio(0, 0.13f);
    grid.setColumnExpandRatio(1, 0.86f);
    grid.setColumnExpandRatio(2, 0.0f);


    grid.setHeight(100, Sizeable.UNITS_PERCENTAGE);
    grid.setWidth(100,Sizeable.UNITS_PERCENTAGE);


            grid.addComponent(new Label("menu"), 0, 0, 2, 0);

            grid.addComponent(new Label("tree"), 0, 1);

            Panel pan = new Panel();
    pan.setWidth(100, Sizeable.UNITS_PERCENTAGE);
    pan.setHeight(100, Sizeable.UNITS_PERCENTAGE);




    VerticalLayout body = new VerticalLayout();
    body.setSizeFull();
    pan.addComponent(body);

    Label bodyLabel= new Label("body panel taking the 2 columns of the last row");
    bodyLabel.setSizeUndefined();


    body.addComponent(bodyLabel);
    body.setComponentAlignment(bodyLabel, Alignment.MIDDLE_CENTER);

    grid.addComponent(pan, 1,1 , 2, 1);

         }
于 2012-06-05T17:53:34.190 に答える