1

LayoutPanelを親LayoutPanel（RootLayoutPanel、画面、ブラウザページ）の中央に配置するにはどうすればよいですか？内側のパネルが固定サイズであると仮定すると、外側のパネルは柔軟性があり、サイズを変更します（ブラウザウィンドウを使用）。

Vaadinでは、1行のコマンドです。
(VerticalLayout)outerPane).setComponentAlignment(innerPane, Alignment.MIDDLE_CENTER);

GWTに相当するものは何ですか？
GWT Layout.Alignment列挙型は、BEGINENDSTRETCHのみを提供します。
不十分。画面中央の配置は、小さいフォーム、ダイアログボックス、警告メッセージ、ログイン画面などを表示するために不可欠です。

GWTフォーラムへの私の投稿の詳細
ありがとうございます

---更新（27.2.2012）---------------

提案された手法を使用するには（setWidgetLeftRight（）およびsetWidgetTopBottom（）を使用）、実際には、外部コンポーネントに対する内部コンポーネントのNW位置（x、y）を計算し、外部コンテナーまたは内部コンテナー（コンテンツの高さ）のサイズを変更するたびに計算する必要があります。

したがって、GWTがセンタリングをサポートしておらず、最新バージョンでもサポートしていないように思われる場合は、さらに多くのコーディングが必要になります。

outerComponent.setWidgetLeftRight(innerComponent, x, PX, x, PX);
outerComponent.setWidgetTopBottom(innerComponent, y, PX, y, PX);

x、yは次のように計算されます：
x =（w1 – w2）/ 2
y =（h1 – h2）/ 2
ここで、
w1-外部コンポーネントの幅（可変、簡単に取得できますか？）
h1-外部コンポーネントの高さ（可変、簡単）取得するには？）
w2-内側中心のコンポーネントの幅（固定）
h2-内側中心のコンポーネントの高さ（内容によって異なりますが、取得が難しい場合があります）

すべてできればピクセル（PX？）またはEMで。％と混合すると、より多くの変換を行う必要があります。

サイズ変更イベントが発生するたびに、座標を再計算する必要があります（w1、h1の変更）。

内部コンテンツを変更するたびに、座標を再計算する必要があります（h2が変更されます）。

変装したほぼ絶対的なレイアウト（AbsolutePanel）です。

CSSソリューション？このサーバーでいくつかの例を見つけましたが、解決済みとしてマークされたものはありません。垂直方向と水平方向の両方のセンタリングと柔軟な内部コンポーネントの高さはありません。

CSSベースのレイアウトソリューションを好まない理由：

  • クロスブラウザの問題が発生しやすい。GWTはここでは役に立ちません。
  • コードとCSSでレイアウトを混在させることは、設計上の悪い決定だと思います。CSSは、「装飾的な」宣言（フォントのサイズと色、余白、パディング）に残しておくのが最適です。
  • CSSレイアウトに関する私自身の悪い経験。すべてをまとめる前に、壊れやすく、デバッグが難しく、多くの頭痛の種があります。避けるのが最善です。私はGWTに大きな期待を寄せていました。

私はこのコードベースのソリューションについて考えています：

  • ウィジェットの新しいサブクラス？パネル？レイアウト？成分？（内部コンポーネント）
  • RequiredResizeexpectを実装し、onResize（）コールバックメソッドを実装します
  • 可変次元（w1、h1、h2）の実際の値を取得します。どのように？
  • 内部コンポーネントの新しい座標を設定します。どのように？

これらの前提に基づいてソリューションを提供する人を指します:)

4

2 に答える 2

1

使用してHorizo​​ntalAlignmentフィールドVerticalPanelを設定するか、使用する場合は、Google グループのスレッドに投稿した GWT ドキュメントのソリューションを適応させることができます。LayoutPanels

LayoutPanel p = new LayoutPanel(); 
Widget centercontent;
p.add(centercontent);
p.setWidgetLeftRight(centercontent, 5, EM, 5, EM);     // Center panel 
p.setWidgetTopBottom(centercontent, 5, EM, 5, EM);

これにより、以下のように左右上下に 5 つの em マージンを持つ中央パネルが作成されます (中央の白いパネルのみが表示されます)。EM はピクセルに似た固定サイズですが、ベース フォント サイズに依存します。基本フォント サイズ (本文用に定義されたサイズ) が 16 px に設定されている場合(変換情報については、こちら1 EM = 16 pxを参照してください)。

ここに画像の説明を入力

マージンに相対値を使用することもできます。

p.setWidgetLeftRight(centercontent, 5, PCT, 5, PCT);     //5 % left and right margin
p.setWidgetTopBottom(centercontent, 5, PCT, 5, PCT);     // 5 % top and bottom margin.

ただし、この方法では問題を完全に解決することはできません (さまざまなフォーム サイズ -> Google スレッドのスクリーンショットを参照)。中央パネルの垂直サイズとは無関係に、中央パネルには常に固定マージン (5 EM または 5 %) があるためです。 .
さらに、センター パネルのコンテンツが使用可能な画面サイズよりも高い場合はクリップされ、ブラウザのサイズを変更するとサイズが変更されます。

したがって、LayoutPanel 内にFlowPanel/を配置し、CSS スタイルを適用して自然なサイズ変更を可能にすることをお勧めします。HTMLPanel

于 2012-02-04T17:06:20.490 に答える
0

中央のパネルに ResizeListener を追加した場合はどうでしょうか (これが機能するかどうかはわかりません。今すぐ試してみます)。基本的に、ウィンドウのサイズが変更されるたびに、パネルはそれ自体を中央に配置します (親の高さに対する高さを計算することによって)。

編集

パネルに ResizeHandler を実装させ、次のようにすることで、最終的に必要なものを取得しました。

@Override public void onResize(ResizeEvent event) {

    // for my case, this is the first parent element with the full height.
    Widget parent = getParent().getParent();
    int height = parent.getOffsetHeight();

    // could make this more exact by including height of this panel.
    getElement().getStyle().setPaddingTop((int)((height - 80)/2), Unit.PX);
}

// my panel is not initially visible
@Override public void onAttach() { 
    super.onAttach();
    Scheduler.get().scheduleDeferred(new ScheduledCommand() {
        @Override public void execute() {
            onResize(null);
        }
    });
}
于 2013-04-08T11:44:16.453 に答える