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

Ответ 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);

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

Ответ 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.

Ответ 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>

Ответ 4

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

hp.setWidth("100%");

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

Ответ 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);

Ответ 6

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

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

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

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

Ответ 7

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

Ответ 8

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

После меня работали,

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

Ответ 9

Для пользователей 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>

Примечание:

• Первая ячейка должна иметь достаточно большую ширину.
• Не назначайте какую-либо ширину остальным ячейкам, чтобы между первой и второй кнопками не было пробелов.

Ответ 10

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

Удачи!