автоматическая расстановка кнопок в зависимости от размера

Question

Я новичок в GWT, и поэтому мне нужна помощь со следующим:

Я работаю с UIBinder и мне нужно специально расположить три кнопки gwt с динамическими метками (см. Рисунок в приложении). Как мне это сделать? Я благодарен за любую помощь!

Answer 1

Как я уже сказал в своем комментарии, вы просто размещаете свои виджеты с помощью дополнительного стиля CSS, чтобы они плавали влево.В качестве контейнера GWT существует FlowPanel .

CSS:

.yourWidget {
  float: left;
  ..other styles..
}

.container {
  width: 300px;
  overflow: hidden;
}

Код:

YourButtonWidget w1 = new YourButtonWidget("Some long label");
w1.addStyleNames("yourWidget"):
YourButtonWidget w2 = new YourButtonWidget("Label");
w2.addStyleNames("yourWidget"):
YourButtonWidget w3 = new YourButtonWidget("Another Label");
w3.addStyleNames("yourWidget"):

FlowPanel container = new FlowPanel();
container.add(w1);
container.add(w2);
container.add(w3);

Очевидно, вы можете интегрировать стиль CSS как часть вашего виджета, представляющего вашу кнопку.Просто помните, что ваш виджет должен назначить ширину самому себе, или float: left; явно не будет работать.

ОБНОВЛЕНИЕ: Я только что прочитал ваш последний комментарийвам нужно будет просто разработать алгоритм для настройки ширины кнопок 1 и 2, чтобы заполнить все доступное пространство в контейнере.float: left; все равно будет работать, вам просто нужно определить размер кнопок.

С 3 кнопками это легко (где button1Width и button2Width являются динамическими, а button3Width фиксированными), вот как это работаетокончательная ширина (продолжение сверху):

int containerWidth = container.getElement().getOffsetWidth();
int button1Width = w1.getElement().getOffsetWidth();
int button2Width = w2.getElement().getOffsetWidth();
int button3Width = w3.getElement().getOffsetWidth();

if ( (button1Width + button2Width) > containerWidth ) {
  button1Width = containerWidth;
  if (( button2Width + button3Width ) > containerWidth) {
    button2Width = containerWidth;
  } else {
    button2Width = containerWidth - button3Width;
  }
} else {
  button2Width = containerWidth - button1Width;
}

w1.getElement().getStyle().setWidth(button1Width,Unit.PX);
w2.getElement().getStyle().setWidth(button2Width,Unit.PX);
w3.getElement().getStyle().setWidth(button3Width,Unit.PX);

Просто убедитесь, что вы выполняете эти корректировки после , когда вы присоединяете все к DOM, иначе ширина не будет доступна, очевидно.