Как кодировать независимое от разрешения приложение GWT?

Question

Я вижу, что лучший способ сделать разрешение приложения независимым - использовать правильные макеты, как описано здесь http://www.sencha.com/helpcenter/index.jsp?topic=/com.extjs.gxt.help/html/reference/layouts/fitlayout.html. Однако, как используется в примере, кажется, что размер панели выходит далеко за рамки того, что мы видим в окне браузера, как показано ниже:

Код приведен ниже, IndexPage - это Composite, ширина / высота которого не задана, и компоненты отображаются следующим образом:

public class Gallery implements EntryPoint {
public void onModuleLoad() {

    Viewport v = new Viewport();
    v.setLayout(new FitLayout());

    v.add(new IndexPage(), new FitData(5));

    RootPanel.get().add(v);

    }
}

Как правильно решить эту проблему?

Answer 1

Одно решение довольно простое ... Вы можете обернуть ScrollPanel за пределы виджета:

public class Gallery implements EntryPoint {
public void onModuleLoad() {

Viewport v = new Viewport();
v.setLayout(new FitLayout());

ScrollPanel sp = new ScrollPanel();
sp.setHeight("100%");
sp.setWidget(new IndexPage());

v.add(sp, new FitData(5));

RootPanel.get().add(v);

}

Итак, вы получите ScrollBars.

Answer 2

Ваша IndexPage слишком велика для области просмотра.Так что же делать?Это может только переполнить / скрыть или прокрутить.По умолчанию он переполняется, но вы можете использовать setScrollMode , чтобы изменить это.

Альтернатива - уменьшить IndexPage.Как?Обычно вы хотите добавить прокрутку где-нибудь внутри страницы (например, позволяя прокрутить левую панель и правую панель по отдельности).Волшебного автоопределения нет, вам придется решить, где вы хотите располагать полосы прокрутки (или, возможно, разрешить переполнение содержимого), а затем установить ScrollContainers вручную.Затем вы можете задать этим элементам высоту 100% (возможно, снова используя FitLayout в родительском контейнере), чтобы заполнить любое пустое пространство.