Как правильно выровнять кнопки на горизонтальной панели (GWT)

Question

Я пытаюсь реализовать простой диалог. Я хотел бы, чтобы кнопки OK и отмены были выровнены прямо внизу диалога. Я встраиваю кнопки в HorizontalPanel и пытаюсь установить горизонтальное выравнивание на 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;
}

Answer 1

Смысл в том, чтобы позвонить setHorizontalAlignment до , добавив свои кнопки, как показано ниже:

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);

Если вы хотите, чтобы ваши кнопки были плотно соединены - поместите их обе в какой-то новый контейнер, а затем поместите контейнер в правую горизонтальную панель

Answer 2

Добавление еще одного совета к этой теме: если вы используете UiBinder для разметки своих панелей, у вас возникнут проблемы с выяснением того, как установить свойство выравнивания до добавления каких-либо виджетов на панель. Кроме того, используя атрибут bean непосредственно на панели, например ...

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

... не работает. Трюк? Оберните все дочерние элементы DockPanel, HorizontalPanel или VerticalPanel, для которых необходимо установить выравнивание, в элемент <g:cell>:

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

Обратите внимание, что в большинстве случаев вам, вероятно, потребуется установить «ширину», а также выравнивание, если вы используете это на горизонтальной панели, и наоборот. Подробнее см. Javadoc для CellPanel .

Answer 3

Вот еще один пример использования 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>

Answer 4

Возможно, вы захотите использовать Firebug для проверки экстентов самой HorizontalPanel. Вам может понадобиться

hp.setWidth("100%");

Горизонтальная панель, как правило, масштабируется под содержимое, поэтому, если вы поместите в нее пару кнопок, она будет выровнена по левому краю, поскольку сама таблица не расширяется.

Answer 5

Вы также можете использовать 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);

Answer 6

Лучший способ выровнять элементы управления вправо или влево - написать две строки CSS следующим образом:

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

и затем назначьте их элементу управления следующим образом:

HorizontalPanel hpButtons = new HorizontalPanel();
hpButtons.addStyleName("buttonToRight");

Answer 7

Для пользователей 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. Не назначайте ширину остальным ячейкам, чтобы между первой и второй кнопкой не было зазора.

Answer 8

Довольно поздно, чтобы ответить, но просто хочу упомянуть для записи, что настройка ширины важна (как bikesandcode уже предлагал выше), иначе она может не работать.

Следующее сработало для меня,

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

Answer 9

Я нашел пример для выравнивания кнопок: http://gwt.google.com/samples/Showcase/Showcase.html#CwDialogBox

Answer 10

Попробуйте сначала добавить кнопки, а затем вызвать hp.setHorizontalAlignment("your aligment here").

Удачи!