web-dev-qa-db-ja.com

Horizo​​ntalPanel（GWT）のボタンを右揃えにする方法

シンプルなダイアログを実装しようとしています。ダイアログの右下に[OK]ボタンと[キャンセル]ボタンを配置したいのですが。ボタンをHorizo​​ntalPanelに埋め込み、水平方向の配置をRIGHTに設定しようとします。ただし、これは機能しません。ボタンを正しく配置するにはどうすればよいですか？ありがとうございました。これがスニペットです：

private Widget createButtonsPanel() {
    HorizontalPanel hp = new HorizontalPanel();
    hp.setCellHorizontalAlignment(saveButton, HasHorizontalAlignment.ALIGN_RIGHT);
    hp.setCellHorizontalAlignment(cancelButton, HasHorizontalAlignment.ALIGN_RIGHT);
    hp.add(saveButton);
    hp.add(cancelButton);       

    return hp;
}
javagwt
24
Keox

重要なのは、以下のようにsetHorizontalAlignmentbeforeを呼び出してボタンを追加することです。

final HorizontalPanel hp = new HorizontalPanel();
final Button saveButton = new Button("save");
final Button cancelButton = new Button("cancel");

// just to see the bounds of the HorizontalPanel
hp.setWidth("600px");
hp.setBorderWidth(2);

// It only applies to widgets added after this property is set.
hp.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_RIGHT);

hp.add(saveButton);
hp.add(cancelButton);

RootPanel.get().add(hp);

ボタンを互いにタイトにしたい場合-両方を新しいコンテナに入れ、右揃えされたHorizo​​ntalPanel内にコンテナを配置します。

29
zmila

このスレッドにもう1つヒントを追加します。UiBinderを使用してパネルをレイアウトしている場合、ウィジェットをパネルに追加する前に配置プロパティを設定する方法を理解するのに苦労します。さらに、パネルでBean属性を直接使用するなど...

<g:HorizontalPanel horizontalAlignment="ALIGN_RIGHT">
    ....
</g:HorizontalPanel>

... 動作しません。トリック？ <g:cell>要素で配置を設定する必要があるDockPanel、Horizo​​ntalPanel、またはVerticalPanelの子をラップします。

<g:HorizontalPanel>
    <g:cell width="800px" horizontalAlignment="ALIGN_RIGHT">
        <g:Button ui:field="closeButton" text="Close" />
    </g:cell>
</g:HorizontalPanel>

ほとんどの場合、これを水平パネルで使用する場合は、「幅」と位置合わせを設定する必要があり、逆も同様です。詳細は JavaDoc for CellPanel を参照してください。

14
Peter Wagener

Firebugを使用してHorizo​​ntalPanel自体の範囲をチェックアウトすることができます。あなたは必要かもしれません

hp.setWidth("100%");

Horizo​​ntalPanelは通常、コンテンツに合わせてサイズを調整します。そのため、ボタンをいくつか配置すると、テーブル自体が拡大しないため、ボタンは左揃えになります。

5
bikesandcode

動作するはずのUIBinderを使用した他の例を次に示します。

<g:VerticalPanel>
 <g:HorizontalPanel width="100%">
  <g:cell horizontalAlignment="ALIGN_RIGHT" width="100%">
   <g:Button ui:field="cancelButton" text="Cancel"/>
  </g:cell>
  <g:cell horizontalAlignment="ALIGN_RIGHT">
   <g:Button ui:field="okButton" text="Ok"/>
  </g:cell>
 </g:HorizontalPanel>
</g:VerticalPanel>
4
mrbang

setCellHorizontalAlignmentを含むパネルでHorizontalPanelを使用することもできます。それが私がすることです。

// doesn't necessarily have to be a vertical panel
VerticalPanel container = new VerticalPanel();
HorizontalPanel buttons = new HorizontalPanel();
// add the buttons
container.add(buttons);
container.setCellHorizontalAlignment(buttons, HasHorizontalAlignment.ALIGN_RIGHT);
2
Matt Moriarity

コントロールを右または左に揃える最良の方法は、次のように2行のCSSを記述することです。

.buttonToRight {
    float: right;
    right: 100%;
}

次のように、それらをコントロールに割り当てます。

HorizontalPanel hpButtons = new HorizontalPanel();
hpButtons.addStyleName("buttonToRight");
1
Arash moradabadi

ボタンの配置の例を見つけました： http://gwt.google.com/samples/Showcase/Showcase.html#CwDialogBox

0
Keox

UIBinderユーザーのために、@ Peter Wagenerの回答をもう少し拡張したいと思います。

@Peter Wagenerが言ったように、以下は機能しません（これはバグだと思います）。

<g:HorizontalPanel horizontalAlignment="ALIGN_RIGHT">
    ....
</g:HorizontalPanel>

ここでは、回避策の例を示しました（複数のボタン）。

<g:HorizontalPanel>
    <g:cell width="800px" horizontalAlignment="ALIGN_RIGHT">
        <g:Button ui:field="saveButton" text="Save" />
    </g:cell>
    <g:cell horizontalAlignment="ALIGN_RIGHT">
        <g:Button ui:field="closeButton" text="Close" />
    </g:cell>
</g:HorizontalPanel>

注意：

  1. 最初のセルには十分な幅が必要です。
  2. 残りのセルには幅を割り当てないでください。これにより、最初のボタンと2番目のボタンの間にギャップがなくなります。
0
Alex

かなり遅い回答ですが、（bikesandcodeがすでに上記で示唆しているように）設定幅が重要であることを記録のために言及したいだけです。それ以外の場合は機能しない可能性があります。

次は私のために働いた、

<g:HorizontalPanel width="100%">
   <g:cell horizontalAlignment="ALIGN_RIGHT">
      <g:Button ui:field="buttonOK" text="OK"/>
   </g:cell>
</g:HorizontalPanel>
0
aab10