Не могу заставить работать SplitLayoutPanel - GWT + UIBinder сводит меня с ума - PullRequest
Новая
       9

Не могу заставить работать SplitLayoutPanel - GWT + UIBinder сводит меня с ума

8 голосов
/ 22 марта 2010 
...
<g:VerticalPanel styleName="{style.mainVerticalPanel}">
    <g:SplitLayoutPanel>
    <g:north size="700">
        <g:VerticalPanel>
                <g:ScrollPanel styleName="{style.conversationPanelContainer}">
                    <g:FlexTable ui:field="conversationPanel" styleName="{style.conversationPanel}"></g:FlexTable>
                </g:ScrollPanel>
                <g:HorizontalPanel styleName="{style.messageTextAndSendPanel}">
                    <g:TextBox ui:field="messageText" styleName="{style.messageText}"></g:TextBox><g:Button ui:field="sendButton">Send</g:Button>
                </g:HorizontalPanel>
        </g:VerticalPanel>
    </g:north>
    <g:south size="300">
    <g:button>TestButton</g:button>
    </g:south>
    </g:SplitLayoutPanel>
</g:VerticalPanel>
...

Что-то не так с этим выглядит?Все, что я пытаюсь сделать, это сделать простую разделенную панель, но всякий раз, когда я запускаю это, все, что я получаю - это пустая страницаБез каких-либо вещей SplitPanel все работает нормально.То же самое происходит с DockLayoutPanel.

Ответы [ 2 ]

7 голосов
/ 22 марта 2010

ОК, все заработало (см. Предыдущие версии этого ответа для предыдущих попыток;)).

Мое решение основано на Пример почты . Рабочий код: 

public class SplitTest implements EntryPoint {

    private static TestUiBinder uiBinder = GWT.create(TestUiBinder.class);

    interface TestUiBinder extends UiBinder<SplitLayoutPanel, SplitTest> {
    }

    /**
     * This is the entry point method.
     */
    public void onModuleLoad() {
        SplitLayoutPanel outer = uiBinder.createAndBindUi(this);

        RootLayoutPanel.get().add(outer);
    }
}

UiBinder * .ui.xml: 

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
  xmlns:g="urn:import:com.google.gwt.user.client.ui">
  <ui:style>
    .conversationPanelContainer, .conversationPanel, .messageTextAndSendPanel, .messageText {
      font-weight: bold;
    }
  </ui:style>
    <g:SplitLayoutPanel>
    <g:north size="700">
        <g:VerticalPanel>
                <g:ScrollPanel styleName="{style.conversationPanelContainer}">
                    <g:FlexTable ui:field="conversationPanel" styleName="{style.conversationPanel}"></g:FlexTable>
                </g:ScrollPanel>
                <g:HorizontalPanel styleName="{style.messageTextAndSendPanel}">
                    <g:TextBox ui:field="messageText" styleName="{style.messageText}"></g:TextBox><g:Button ui:field="sendButton">Send</g:Button>
                </g:HorizontalPanel>
        </g:VerticalPanel>
    </g:north>
    <g:south size="300">
    <g:Button>TestButton</g:Button>
    </g:south>
    </g:SplitLayoutPanel>
</ui:UiBinder>

Обратите внимание на несколько вещей:

  • Прежде всего: у вас была ошибка в XML-шаблоне UiBinder: это <g:Button>, а не <g:button> (чувствительно к регистру)
  • Использование RootLayoutPanel вместо обычного RootPanel
  • Я все еще немного озадачен всей этой штукой LayoutPanel - в примере Mail они используют SplitLayoutPanel, вложенные в DockLayoutPanel, но только DockLayoutPanel явно добавлен к RootLayoutPanel - должен ли я понимать, что SplitLayoutPanel автоматически добавляется (чтобы он мог получать события изменения размера и т. д.)? Как насчет некоторых других виджетов, вложенных в основную панель LayoutPanel - их нужно явно добавлять в RootLayoutPanel или только если они являются корнем этого виджета / составного элемента или это даже невозможно? У меня действительно нет времени, чтобы заниматься этим дальше - я оставлю это как домашнее задание для кого-то другого;)

Кстати: я проверил этот код в режимах Quirks и Standards - я не вижу разницы, оба работают O_o (хотя это простое использование SplitLayoutPanel - более сложные примеры, вероятно, приведут к странное поведение в режиме Quirks и / или ошибки рендеринга)

2 голосов
/ 22 марта 2010

Какой тип документа вы используете? Эти панели работают только в стандартном режиме (по крайней мере, с некоторыми браузерами). Если вы используете режим причуд, часто случается, что вы получаете пустую страницу с этими панелями.

Проверьте ваш HTML-файл. В идеале он должен начинаться с: 

<!DOCTYPE html>

Или, альтернативно, другой тип документа, который приводит к стандартному режиму (но обязательно наберите его 100% дословно), см. http://hsivonen.iki.fi/doctype/

...