Как размещать виджеты с помощью DockLayoutPanel и UiBinder в GWT 2.0?

Я пытаюсь получить простой макет, работающий под GWT 2.0 с помощью UiBinder. Макет, который я пытаюсь получить, - это та, которая имитирует Java BorderLayout, где вы можете указать разные панели в северном, южном, восточном, западном и центральном направлениях; для этого я использую DockLayoutPanel. Я хотел бы получить верхний и нижний колонтитулы с фиксированной шириной. Оставшееся пространство видового экрана будет занимать виджет, назначенный в центр DockLayoutPanel.

Текущий файл .ui.xml, который у меня есть, это:

<g:DockLayoutPanel unit='EM'>
    <g:north size='2'>
        <g:HTML>HEADER</g:HTML> 
    </g:north>

    <g:south size='2'>
        <g:HTML>FOOTER</g:HTML> 
    </g:south>

    <g:center>
        <g:HTML>
            <div id='loginform'>Hello!</div>
        </g:HTML>
    </g:center>
</g:DockLayoutPanel>

Браузер отображает только HEADER в верхнем левом углу. Как я могу достичь макета, который я ищу? Кажется, что больше CSS вы должны знать, прежде чем сможете использовать панели макета GWT, но этот вид побеждает цель создания пользовательского интерфейса с ним.

Ответ 1

Это работает для меня ни с одним из хаков, предложенных Рафаэло.

Пример Javadoc на DockLayoutPanel использует 192 в качестве ширины для Запада. Это неправильно - автор, вероятно, думал, что использует PX, но он использовал EM. Поэтому, если вы уменьшите масштаб, вы увидите, что Центр находится далеко вправо.

Вы проверили свой режим стандартов? Это необходимо для DockLayoutPanel.

Кроме того, забыли упомянуть, что вы должны использовать RootLayoutPanel, когда вы добавляете DockLayout в свой класс начальной точки - не используйте RootPanel.

Ответ 2

Использование недавно созданных панелей макетов действительно довольно запутанно. Существует способ, чтобы макет занимал всю клиентскую область. Для файла ui.xml требуется немного кода Java.

В вашем классе EntryPoint добавьте определение UiBinder с аннотацией к ui.xml файлу, который объявляет макет:

@UiTemplate("LayoutDeclarationFile.ui.xml")
interface DockLayoutUiBinder extends
        UiBinder<DockLayoutPanel, TheEntryPointChildClass> {
}

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

в функции onModuleLoad, создайте экземпляр UiBinder, извлекает свой корень и напрямую добавляет его в DOM:

public void onModuleLoad() {
    DockLayoutPanel layout = uiBinder.createAndBindUi(this);
    // Make sure we use the whole client area
    Window.setMargin("0px");

    // Add the panel to the DOM
    RootLayoutPanel.get().add(layout);
 }

Ответ 3

Я попробовал ваш блок кода, а также блок образца на странице javadoc для DockLayoutPanel, и я получаю похожие результаты. Кажется, отображаются только данные в разделе Север панели DockLayoutPanel. Однако, когда я просматриваю страницу (используя firefox и safari на Mac), другие элементы находятся, но они нигде не отображаются. Похоже, может быть ошибка с этой панелью и UiBinder.