1

Vaadin 7 でコンポーネントをレイアウトする可能性に戸惑っています - 直観ではレイアウトだけを使用するように指示されていますが、便利なパネルまたはコンポーネントもあります。

静的な左側のメニューと上部のバー (一定のサイズ、各ページに表示される) を持つビューを作成する必要があります。コンテンツを変更する唯一のものは、スクロール可能な中央コンポーネントです。

したがって、私のデザインは次のとおりです。

  • すべてを組み立てるカスタムコンポーネント。上部と左側のメニューの絶対サイズです。
  • 左側のメニューは垂直レイアウト、上部のメニューは水平レイアウト
  • パネルはスクロールをサポートするはずなので、中間コンポーネントのパネル。

パネル内に、ページに収まらないコンテンツを含む CssLayout を配置しました。予想される動作は、スクロール バーがあることです (できればブラウザー上ですが、パネル上にあると思います)。しかし実際には、画面に収まる部分だけが表示され、残りはカットされます。CssLayout は sizeFull でパネルのデフォルトですが、他の組み合わせも試してみましたが、何も役に立ちませんでした。

レイアウトを組み合わせて、(必要に応じて) 中央のパネルをスクロール可能にし、上と左のパネルを絶対サイズで表示するにはどうすればよいですか?

どうもありがとう、

4

1 に答える 1

0

Vaadin 7 & 8 では、通常、実装の 1 つを使用して、サブクラスLayout内でウィジェットを配置します。UIたとえば、VerticalLayout、HorizontalLayout、およびGridLayout。ピクセルの配置には、 を使用しますAbsoluteLayout。もちろん、これらは互いに入れ子にすることができます。ただし、実行時に過度に複雑な HTML/CSS になる可能性があるため、ネスティングに夢中にならないでください。

ドキュメントが言うように、Panelクラスは特別なコンテナです。単一のコンポーネントのみを含み、通常は. は、そのプロパティを表示する境界線とタイトル バーを表示します。これはサブウィンドウのようなものです。LayoutPanelcaption

あなたが言及したように、 aPanelはスクロールをサポートしています。ただし、 で定義された Web ページLayoutはスクロールもサポートしていることに注意してください。

TextFieldウィジェットのスタックを表示する完全なサンプル アプリを次に示しますVerticalLayout。

package com.basilbourque.example;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

import javax.servlet.annotation.WebServlet;
import java.time.Instant;

/**
 * This UI is the application entry point. A UI may either represent a browser window
 * (or tab) or some part of an HTML page where a Vaadin application is embedded.
 * <p>
 * The UI is initialized using {@link #init(VaadinRequest)}. This method is intended to be
 * overridden to add component to the user interface and initialize non-component functionality.
 */
@Theme ( "mytheme" )
public class MyUI extends UI {

    @Override
    protected void init ( VaadinRequest vaadinRequest ) {
        final VerticalLayout layout = new VerticalLayout();

        for ( int i = 1 ; i <= 100 ; i++ ) {
            TextField textField = new TextField( String.format( "%3d" , i ) );
            textField.setWidth( 17 , Unit.EM );  // Widen the field to fully display our contents.
            textField.setValue( Instant.now().toString() );
            layout.addComponents( textField );
        }

        setContent( layout );
    }

    @WebServlet ( urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true )
    @VaadinServletConfiguration ( ui = MyUI.class, productionMode = false )
    public static class MyUIServlet extends VaadinServlet {
    }
}

ここに画像の説明を入力

ネスティングのアイデアVerticalLayoutやHorizontalLayout、ナビゲーション パネル、ボタン/ツールバーなどについては…

  • Vaadin 7 & 8: まったく適切で、良いアイデアです。場合GridLayoutによっては、それにも意味があります。
  • Vaadin 10: これもいいアイデアかもしれません。または、CSS3 の新しい機能である flexboxとGrid Layoutを使用して探索することもできます。

CssLayout内部の問題についてはPanel、私はどちらもほとんど使用していません。の特定の幅と高さを適切に定義していないことに問題があると思われますCssLayout。詳細とコードを投稿していないため、推測することしかできません。

于 2018-08-05T18:42:54.260 に答える