GWT佈局像一個普通的網頁

我想使用GWT做出這樣的佈局。這真的很煩人，因爲它看起來並不怎麼樣。總有一些重疊，隱藏，大或只是在錯誤的位置。GWT佈局像一個普通的網頁

我只是想使這個佈局： The layout

我正在爲這幾個小時沒有結果:(

佈局應充滿整個瀏覽器，但不使用滾動條！標題應包含的圖像和標籤菜單是從GWT菜單對象和內容是變化的，這取決於被點擊的ListItem

幫助PLS ....

來源

2011-08-06 Dominic Bartl

請發佈你到目前爲止，並準確告訴我們*什麼不按計劃進行。 –

我剛剛測試了以下解決方案，它的外觀和像你描述的完全相同的作品。我使用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; 
}

我希望我幫助。

來源

2011-08-08 21:57:14

你是我的英雄:) –

從個人經驗和根據谷歌自己的建議，我建議看看UIBinder。

此外，我建議在面板之間插入一些「溢出緩衝區」。即，你有100px分配給你的最北面板。將它縮小到96，允許它和下一個面板之間有+/- 2px的空間。這將允許不同計算機和瀏覽器之間的任何大小/佈局錯誤得到一定的補償 - 幾乎沒有成本。

來源

2011-08-06 23:58:36

使用UiBinder，您可以使用兩個嵌套的DockLayoutPanel來實現此佈局。我沒有測試它自己，但這樣的事情應該工作（加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>

來源

2011-08-08 08:27:11

甜蜜:)我今天要測試這個thx –

GWT佈局像一個普通的網頁

回答

相關問題