如何在GWT 2.0中使用DockLayoutPanel和UiBinder來佈局小部件？

我想要使用UiBinder在GWT 2.0下運行一個簡單的佈局。我試圖得到的佈局是模仿Java的BorderLayout，你可以在其中指定不同的面板在北，南，東，西和中心方向;爲此我使用DockLayoutPanel。我想獲得一個頁眉和頁腳，都是固定的寬度。剩餘的視口空間將被分配給DockLayoutPanel中央插槽的小部件佔用。如何在GWT 2.0中使用DockLayoutPanel和UiBinder來佈局小部件？

我已經得到了當前.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>

瀏覽器只在左上角呈現標題。我怎樣才能達到我要找的佈局？在使用GWT佈局面板之前，似乎還有更多的CSS你必須知道，但這種方式無法用它創建UI。

來源

2009-12-21 Cesar

這適用於我沒有RaphaelO建議的黑客。

DockLayoutPanel上的Javadoc示例使用192作爲West的寬度。這是錯誤的 - 作者可能認爲他在使用PX，但他正在使用EM。所以如果你縮小，你會發現該中心離右邊很遠。

您是否檢查過使用標準模式？這是DockLayoutPanel所必需的。

此外，忘記提及當您在入口點類中添加DockLayout時，應該使用RootLayoutPanel - 不要使用RootPanel。

來源

2009-12-22 13:45:00

我不知道RootLayoutPanel的存在。一旦我改變使用它而不是RootPanel，一切都按預期工作。 – Cesar 2009-12-22 14:52:28

您是否在控制檯中發現任何錯誤？你可以嘗試使用javadocs示例（通過對West寬度的更正）來查看是否有效？ – 2009-12-22 14:52:58

現在正在工作。沒有控制檯錯誤。問題是我使用RootPanel而不是RootLayoutPanel。 – Cesar 2009-12-22 15:51:55

我試過你的代碼塊以及javadoc頁面上的示例塊DockLayoutPanel，我得到了類似的結果。似乎只會顯示DockLayoutPanel的North部分中的數據。但是，當我搜索頁面（在Mac上使用firefox和safari）時，可以找到其他元素，但它們不會顯示在任何地方。似乎這個面板和UiBinder可能存在缺陷。

來源

2009-12-21 06:20:25 Carnell

感謝您的嘗試。如果你檢查發送給客戶端的代碼，你可以看到其他的元素在那裏。我相信這是不正確的CSS佈局，但我不知道足夠的CSS來調試它。 – Cesar 2009-12-21 14:12:44

我同意這可能是一個CSS錯誤，但看到我們怎麼沒有用CSS做任何事情（我只是使用默認設置），似乎這是一個GWT錯誤。您可能想在GWT問題網站（http://code.google.com/p/google-web-toolkit/issues/list）上打開一個錯誤 – Carnell 2009-12-21 16:40:09

檢查@ RaphaelO的回答：執行Window.setMargin（「0」）;在將DockLayoutPanel實例添加到RootLayoutPanel之前，似乎可以做到這一點。 – 2012-01-16 23:32:15

新引入的佈局面板的使用確實相當混亂。有一種方法可以使佈局佔據整個客戶區域。除了ui.xml文件外，它還需要一點Java代碼。

在您的入口點類中，添加一個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); 
}

來源

2009-12-21 20:39:51 RaphaelO

這有助於我的情況，但我不得不對我的特殊情況做一些調整，因爲我爲我的UI組件使用了一個單獨的類。「接口DockLayoutUiBinder擴展 {}」< - 在這裏使用「DockLayoutPanel」是幫助我的情況非常重要的部分。 – WhyNotHugo 2010-01-04 01:20:02

如何在GWT 2.0中使用DockLayoutPanel和UiBinder來佈局小部件？

回答

相關問題