Получить виджет UiBinder для отображения встроенного, а не блочного

Я пытаюсь заставить мой виджет, определенный UiBinder, отображаться встроенным, но я не могу. Мой текущий код:

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g='urn:import:com.google.gwt.user.client.ui'>
  <ui:style>
    .section {
      border: 1px solid #000000;
      width: 330px;
      padding: 5px;
      display: run-in;
    }
  </ui:style>

  <g:HTMLPanel>
    <div class="{style.section}">
      <div ui:field="titleSpan" class="{style.title}" />
      <div class="{style.contents}">
        <g:VerticalPanel ui:field="messagesPanel" />
      </div>
    </div>
  </g:HTMLPanel>
</ui:UiBinder>

Это прекрасно работает с точки зрения того, как виджет выглядит внутри, но я хочу добавить кучу этих виджетов в FlowPanel и заставить их перемещаться при изменении размера окна. HTMLPanel - это div, но я не могу назначить атрибут отображения. Я не могу указать имя стиля, так как следующее выдает ошибку:

<g:HTMLPanel styleNames="{style.section}">

И я могу назначить дополнительный стиль, но он не применяет настройку отображения.

<g:HTMLPanel addStyleNames="{style.section}">

Это отображает границу и устанавливает размер, как и ожидалось, но он не течет. Firebug показывает, что стили в div: граница, ширина и отступы, но не отображаются.

Есть ли способ сделать виджет в UiBinder, чтобы он отображался встроенным, а не блочным? И если да, могу ли я сделать его совместимым с наличием внутри VerticalPanel (могу ли я сделать это, не делая весь виджет чистым HTML без каких-либо виджетов GWT)?

PS: я видел вопрос 2257924, но в последнее время на него не было ответов, и он, похоже, сосредоточен на получении тега, а не на встроенном макете. Меня не волнует непосредственно , если я могу просто получить тег верхнего уровня для моего виджета, чтобы он был встроенным, я счастлив.


gwt uibinder
person Steve Armstrong    schedule 19.03.2010    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Кажется, ваша проблема вызвана использованием display: run-in вместо более «стандартного» display: inline. IE и Firefox не поддерживают run-in, и кажется, что Firebug обрезает стиль при добавлении.

Попробуйте изменить стиль на display: inline (или inline-block, если вам нужны некоторые свойства блока, такие как ширина, но остерегайтесь особенности IE + inline-block).

person Igor Klimer    schedule 20.03.2010

arrow_upward
2
arrow_downward

Это должно быть <g:HTMLPanel styleName="{style.section}">, а не <g:HTMLPanel styleNames="{style.section}"> - styleNames - это опечатка (которая появляется в документах UiBinder, поэтому я уверен, что вы ее оттуда взяли). styleName - это правильное использование.

Кроме того, Игорь Климер прав, что вы должны использовать display: inline или display: inline-block, а не display: run-in.

Как правило, вы можете узнать доступные имена атрибутов, выполнив поиск методов setXXX в UIObject, а имя атрибута — просто XXX. Итак, UIObject имеет метод setStyleName, доступ к которому осуществляется с помощью атрибута с именем styleName.

person aem    schedule 22.03.2010