設計一個GWT UI佈局

我們想要在GWT中設計一個佈局，在屏幕上有很多小的小部分。基本上它有一個左側菜單，頁眉，頁腳，主要內容區域和很多子部分，如果用戶不想看到它們，可以由用戶關閉。然後剩餘的內容部分應該自動調整。我們正在使用GWT平臺。我懷疑DockLayoutPanel是否適合這一點，因爲它必須更加靈活。除此之外，我沒有得到任何好的佈局示例。我們可以使用GWT enter image description here 面板來實現這個目標嗎？或者我們必須在模塊html文件中使用div來手動執行它？設計一個GWT UI佈局

請在下面找到草稿版式。我真的很困惑與什麼面板開始.... 請建議。

來源

2012-06-12 Santosh

有幾百萬種方法可以實現這一目標。我會給你我的意見，並試圖解釋爲什麼我會這樣做。

首先，它似乎你想要的，像大多數網站一樣，頂部標題（或兩個）和左側的菜單。 DockLayoutPanel可以很好地執行此操作，所以我會先使用它。順便說一句，考慮添加頁腳到您的佈局（對不起，只是想大多數應用程序有一個）...

然後，你有左邊的兩個小面板（Tree Str1和2）和內容區域。根據你想要這些的靈活性，你需要不同的結構。

假設您不想只有兩個，但可能有很多Tree Str在左側，而您的內容區域不會有太大變化。我會在DockLayoutPanel的West區域添加一個VerticalPanel（可能包含更多的2個Tree Strs）。

在DockLayoutPanel的主區域中，添加一個VerticalPanel來表示中心區域。這個VerticalPanel的大小必須適當（可能是寬度，高度= 100％）。

添加到VerticalPanel 2行（HorizontalPanels）。

現在，你可以添加內容區1到第一行，和別人排2

好了，讓代碼說話：

public Panel getMainPanel() { 
    DockLayoutPanel mainPanel = new DockLayoutPanel(Unit.PX); 
    mainPanel.setSize("500px", "500px"); 

    VerticalPanel leftPanel = new VerticalPanel(); 

    Label treeStr1 = new Label("Tree Str1"); 
    treeStr1.setSize("100%", "100px"); 
    Label treeStr2 = new Label("Tree Str2"); 
    treeStr1.setSize("100%", "200px"); 

    leftPanel.add(treeStr1); 
    leftPanel.add(treeStr2); 

    VerticalPanel centralArea = new VerticalPanel(); 
    centralArea.setSize("100%", "100%"); 
    centralArea.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER); 
    centralArea.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE); 
    centralArea.getElement().getStyle().setBorderStyle(BorderStyle.SOLID); 

    HorizontalPanel row1 = new HorizontalPanel(); 
    row1.setWidth("90%"); 
    HorizontalPanel row2 = new HorizontalPanel(); 
    row2.setWidth("90%"); 
    row2.getElement().getStyle().setBorderStyle(BorderStyle.SOLID); 
    row2.getElement().getStyle().setBorderColor("red"); 
    row2.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_LEFT); 

    centralArea.add(row1); 
    centralArea.add(row2); 

    HTML ca1 = new HTML("Content Area 1"); 
    ca1.setSize("100%", "100px"); 
    ca1.getElement().getStyle().setBorderStyle(BorderStyle.SOLID); 
    HTML ca2 = new HTML("Content Area 2"); 
    ca2.setSize("60%", "60px"); 
    ca2.getElement().getStyle().setBorderStyle(BorderStyle.SOLID); 
    HTML ca3 = new HTML("Content Area 3"); 
    ca3.setSize("30%", "60px"); 
    ca3.getElement().getStyle().setBorderStyle(BorderStyle.SOLID); 

    row1.add(ca1); 
    row2.add(ca2); 
    row2.add(ca3); 

    mainPanel.addNorth(new HTML(
      "<h1>This is your header, create a Widget instead of this</h1>"), 150); 
    mainPanel.addNorth(new HTML(
      "<h2>Some more user options</h2>"), 60); 
    mainPanel.addWest(leftPanel, 150); 
    mainPanel.add(centralArea); 
    return mainPanel; 
}

如果其中任何一個環節一定很靈活，請嘗試GWT的FlexTable！

來源

2012-06-12 09:07:27 Renato

非常感謝您爲您的寶貴意見。我一定會嘗試這個。現在我只有一個問題。我們使用像素來顯示面板的寬度。我們不能給百分比？因爲不然的話，屏幕尺寸是多少，如果屏幕尺寸更大，它會留下太多的空間？最佳做法是什麼？ – Santosh

另外，請讓我知道什麼是設置不同的部分高度和寬度的最佳做法？像素還是百分比？ – Santosh

這是一個HTML設計問題。無論你使用寬度的百分比，取決於你希望你的網站在窗口大小和不同屏幕上的行爲。粗略地說，有兩種策略：[固定或靈活寬度頁面]（http://webdesign.about.com/od/webdesign/a/aa080904.htm）。您還可以混合使用這兩種方式......這取決於您的內容和目標受衆（移動設備，平板電腦或臺式機/筆記本電腦）。 – Renato

您可以使用HTML設計您的頁面佈局，並在頂部添加GWT小部件。

HTML：創建一個id="treeStr2"和div用css

GWT：RootPanel.get("treeStr2").add(your widget);

來源

2012-06-14 07:44:52 yuvicode

設計一個GWT UI佈局

回答

相關問題