Как макетировать виджеты с помощью DockLayoutPanel и UiBinder в GWT 2.0? - PullRequest
Новая
       46

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

16 голосов
/ 21 декабря 2009

Я пытаюсь получить простой макет, работающий под 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>

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

Ответы [ 3 ]

30 голосов
/ 22 декабря 2009

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

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

Проверяли ли вы использование режима стандартов? Это требуется для DockLayoutPanel.

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

2 голосов
/ 21 декабря 2009

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

В вашем классе 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);
 }
0 голосов
/ 21 декабря 2009

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

...