Полный макет страницы GWT как обычная веб-страница

Question

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

Я просто хочу сделать этот макет:

Я работаю над этим пару часовбез результата: (

Макет должен заполнить весь браузер, но без полосы прокрутки! Заголовок должен содержать изображение и метку. Меню - это объект меню из gwt, и содержимое меняется, в зависимости отlistitem был нажат

Помощь пожалуйста ....

Answer 1

Используя UiBinder, вы можете использовать две вложенные панели DockLayout для достижения этого макета.Я сам не проверял, но что-то подобное должно работать (добавьте DockLayoutPanel в RootLayoutPanel)

<g:DockLayoutPanel unit='PX'>
  <g:north size='100'>
    <g:HTMLPanel>PUT HERE LABEL AND IMAGE </g:HTMLPanel>
  </g:north>
  <g:center>
     <g:DockLayoutPanel unit='PX'>
         <g:north size='30'>
              MENU 
             </g:north>
         <g:center>
               MAIN BODY
         </g:center>
     </g:DockLayoutPanel>
  </g:center>
  <g:west size='130'>
    <g:ListBox>
    </g:ListBox>
  </g:west>
</g:DockLayoutPanel>

Answer 2

Исходя из личного опыта и в соответствии с собственными рекомендациями Google, я бы посоветовал заглянуть в UIBinder .

Кроме того, я бы рекомендовал вставить несколько «буферов переполнения» между вашими панелями.То есть, у вас есть 100px, выделенных для вашей самой нижней панели.Уменьшите его размер, скажем до 96, с учетом +/- 2px пространства между ним и следующей панелью.Это позволит компенсировать любые ошибки в размерах / разметке между различными компьютерами и браузерами при небольших затратах.

Answer 3

Я только что протестировал следующее решение, и оно выглядит и работает именно так, как вы описали. Я использовал uiBinder, но это не обязательно использовать. код пользовательского интерфейса 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>
    .important {
        font-weight: bold;
    }
    .header_bar{
        position:absolute;
        top:0px;
        left:0px;
        height: 100px;
        right:0px;
        background-color: red;
    }

    .left_bar{
        position:absolute;
        top:100px;
        left:0px;
        bottom:0px;
        width: 130px;
        background-color: green;
    }

    .menu_bar{
        position:absolute;
        top:100px;
        left:130px;
        height: 30px;
        right:0px;
        background-color: yellow;
    }
    .content{
        position:absolute;
        top:130px;
        left:130px;
        right: 0px;
        bottom: 0px;
    }
</ui:style>
<g:HTMLPanel>
<div class="{style.header_bar}">
    <g:FlowPanel ui:field="headerPanel"></g:FlowPanel> 
</div>
<div class="{style.left_bar}">
    <g:FlowPanel ui:field="leftPanel"></g:FlowPanel>
</div>
<div class="{style.menu_bar}">
    <g:FlowPanel ui:field="menuPanel"></g:FlowPanel>
</div>
<div class="{style.content}">
    <g:FlowPanel ui:field="contentPanel"></g:FlowPanel>
</div>
</g:HTMLPanel>

И код файла Java:

public class TestLayout extends Composite {

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

interface TestLayoutUiBinder extends UiBinder<Widget, TestLayout> {
}

public TestLayout() {
    initWidget(uiBinder.createAndBindUi(this));
    headerPanel.add(new Label("Head!"));
    leftPanel.add(new Label("Left!"));
    menuPanel.add(new Label("Menu!"));
    contentPanel.add(new Label("Content!"));
}

@UiField
FlowPanel headerPanel;

@UiField
FlowPanel leftPanel;

@UiField
FlowPanel menuPanel;

@UiField
FlowPanel contentPanel;
}

Надеюсь, я помог.