1. 首頁
  2. 問答
  3. GWT GUI設計 - 佈局面板

GWT GUI設計 - 佈局面板

2012-09-21 121 views
0

我已經計劃與以下幾個方面來設計我的應用程序：GWT GUI設計 - 佈局面板

  • 工具欄區域（固定大小）
  • 工作區頭（對於某些信息和過濾規則的，沒有固定的大小）
  • 工作區域（應使用所有可用的屏幕空間）
  • 狀態欄區（固定大小）

也請參閱附件SCR eenshot。

appLayout

要使用一個DataGrid它與屏幕尺寸自動調整，我看過的最好辦法 是使用DockLayoutPanel。 我也看過下面的文章： https://developers.google.com/web-toolkit/doc/latest/DevGuideUiPanels

在這篇文章中它也推薦使用佈局面板（不僅LayoutPanel.class但所有佈局面板）爲更好的標準模式的支持。 因此，我構建了一個非常簡單的示例來測試佈局面板。

在這裏簡單的截圖例子，我如何努力來設計應用程序：

--- CSS文件 - 

.test { 
    margin: 4px; 
    padding: 20px; 
    background-color: Lime; 
} 

package com.test.client; 

import com.google.gwt.core.client.EntryPoint; 
import com.google.gwt.dom.client.Style.Unit; 
import com.google.gwt.user.cellview.client.DataGrid; 
import com.google.gwt.user.cellview.client.SimplePager; 
import com.google.gwt.user.cellview.client.TextColumn; 
import com.google.gwt.user.client.ui.Button; 
import com.google.gwt.user.client.ui.DisclosurePanel; 
import com.google.gwt.user.client.ui.DockLayoutPanel; 
import com.google.gwt.user.client.ui.FlowPanel; 
import com.google.gwt.user.client.ui.Label; 
import com.google.gwt.user.client.ui.LayoutPanel; 
import com.google.gwt.user.client.ui.RootLayoutPanel; 
import com.google.gwt.user.client.ui.SimpleLayoutPanel; 
import com.google.gwt.user.client.ui.TextBox; 
import com.google.gwt.view.client.ListDataProvider; 


public class GwtTestDockFilled implements EntryPoint { 
    private SimpleLayoutPanel slpToolbarPlaceholder; 
    private SimpleLayoutPanel slpWorkspacePlaceholder; 
    private SimpleLayoutPanel slpWorkspaceHeaderPlaceholder; 
    private SimpleLayoutPanel slpStatusbarPlaceholder; 
    private LayoutPanel layoutPanel; 
    private FlowPanel flowPanel; 
    private Button btnBack; 
    private Button btnNew; 
    private Label lblName; 
    private TextBox txtName; 
    private DisclosurePanel disclosurePanel; 
    private LayoutPanel layoutPanel_1; 
    private Label lblStreet; 
    private TextBox txtStreet; 
    private DataGrid<Person> dataGrid; 
    private TextColumn<Person> colName; 
    private TextColumn<Person> colStreet; 
    private DockLayoutPanel dockLayoutPanel_1; 
    private LayoutPanel layoutPanel_2; 
    private SimplePager simplePager; 
    private ListDataProvider<Person> dataProvider = new ListDataProvider<GwtTestDockFilled.Person>(); 

    private static final String[] NAMES = { 
      "Mary", "Patricia", "Linda", "Barbara", "Elizabeth", "Jennifer", "Maria", 
      "Susan", "Margaret", "Dorothy", "Lisa", "Nancy", "Karen", "Betty", 
      "Helen", "Sandra", "Donna", "Carol", "Ruth", "Sharon", "Michelle", 
      "Laura", "Sarah", "Kimberly", "Deborah", "Jessica", "Shirley", "Cynthia", 
      "Angela", "Melissa", "Brenda", "Amy", "Anna", "Rebecca", "Virginia", 
      "Kathleen", "Pamela", "Martha", "Debra", "Amanda", "Stephanie", "Carolyn", 
      "Christine", "Marie", "Janet", "Catherine", "Frances", "Ann", "Joyce", 
      "Diane", "Alice", "Julie", "Heather", "Teresa", "Doris", "Gloria", 
      "Evelyn", "Jean", "Cheryl", "Mildred", "Katherine", "Joan", "Ashley", 
      "Judith", "Rose", "Janice", "Kelly", "Nicole", "Judy", "Christina", 
      "Kathy", "Theresa", "Beverly", "Denise", "Tammy", "Irene", "Jane", "Lori"}; 


    /** 
    * This is the entry point method. 
    */ 
    public void onModuleLoad() { 

     RootLayoutPanel rootLayoutPanel = RootLayoutPanel.get(); 

     DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.PX); 
     rootLayoutPanel.add(dockLayoutPanel); 
     dockLayoutPanel.addNorth(getSlpToolbarPlaceholder(), 60.0); 
     dockLayoutPanel.addNorth(getSimpleLayoutPanel_2(), 60.0); 
     dockLayoutPanel.addSouth(getSimpleLayoutPanel_3(), 60.0); 
     dockLayoutPanel.add(getSlpWorkspacePlaceholder()); 

     fillDataGrid(); 
    } 

    private void fillDataGrid(){   

     for(int i = 0; i < NAMES.length; i++){ 

      Person p = new Person(); 
      p.setName(NAMES[i]); 
      p.setStreet("Spring Road"); 
      dataProvider.getList().add(p); 
     } 
    } 

    private SimpleLayoutPanel getSlpToolbarPlaceholder() { 
     if (slpToolbarPlaceholder == null) { 
      slpToolbarPlaceholder = new SimpleLayoutPanel(); 
      slpToolbarPlaceholder.setWidget(getFlowPanel()); 
     } 
     return slpToolbarPlaceholder; 
    } 
    private SimpleLayoutPanel getSlpWorkspacePlaceholder() { 
     if (slpWorkspacePlaceholder == null) { 
      slpWorkspacePlaceholder = new SimpleLayoutPanel(); 
      slpWorkspacePlaceholder.setWidget(getDockLayoutPanel_1()); 
     } 
     return slpWorkspacePlaceholder; 
    } 
    private SimpleLayoutPanel getSimpleLayoutPanel_2() { 
     if (slpWorkspaceHeaderPlaceholder == null) { 
      slpWorkspaceHeaderPlaceholder = new SimpleLayoutPanel(); 
      slpWorkspaceHeaderPlaceholder.setStyleName("test"); 
      slpWorkspaceHeaderPlaceholder.setWidget(getLayoutPanel()); 
     } 
     return slpWorkspaceHeaderPlaceholder; 
    } 
    private SimpleLayoutPanel getSimpleLayoutPanel_3() { 
     if (slpStatusbarPlaceholder == null) { 
      slpStatusbarPlaceholder = new SimpleLayoutPanel(); 
     } 
     return slpStatusbarPlaceholder; 
    } 
    private LayoutPanel getLayoutPanel() { 
     if (layoutPanel == null) { 
      layoutPanel = new LayoutPanel(); 
      layoutPanel.add(getLblName()); 
      layoutPanel.setWidgetLeftWidth(getLblName(), 0.0, Unit.PX, 56.0, Unit.PX); 
      layoutPanel.setWidgetTopHeight(getLblName(), 0.0, Unit.PX, 16.0, Unit.PX); 
      layoutPanel.add(getTxtName()); 
      layoutPanel.setWidgetLeftWidth(getTxtName(), 62.0, Unit.PX, 165.0, Unit.PX); 
      layoutPanel.setWidgetTopHeight(getTxtName(), 0.0, Unit.PX, 25.0, Unit.PX); 
      layoutPanel.add(getDisclosurePanel()); 
      layoutPanel.setWidgetLeftWidth(getDisclosurePanel(), 0.0, Unit.PX, 250.0, Unit.PX); 
      layoutPanel.setWidgetTopHeight(getDisclosurePanel(), 31.0, Unit.PX, 200.0, Unit.PX); 
     } 
     return layoutPanel; 
    } 
    private FlowPanel getFlowPanel() { 
     if (flowPanel == null) { 
      flowPanel = new FlowPanel(); 
      flowPanel.add(getBtnBack()); 
      flowPanel.add(getBtnNew()); 
     } 
     return flowPanel; 
    } 
    private Button getBtnBack() { 
     if (btnBack == null) { 
      btnBack = new Button("New button"); 
      btnBack.setText("Back"); 
      btnBack.setSize("50px", "50px"); 
     } 
     return btnBack; 
    } 
    private Button getBtnNew() { 
     if (btnNew == null) { 
      btnNew = new Button("New button"); 
      btnNew.setSize("50px", "50px"); 
      btnNew.setText("New"); 
     } 
     return btnNew; 
    } 
    private Label getLblName() { 
     if (lblName == null) { 
      lblName = new Label("Name"); 
     } 
     return lblName; 
    } 
    private TextBox getTxtName() { 
     if (txtName == null) { 
      txtName = new TextBox(); 
     } 
     return txtName; 
    } 
    private DisclosurePanel getDisclosurePanel() { 
     if (disclosurePanel == null) { 
      disclosurePanel = new DisclosurePanel("Additional Details", false); 
      disclosurePanel.setAnimationEnabled(true); 
      disclosurePanel.setContent(getLayoutPanel_1()); 
     } 
     return disclosurePanel; 
    } 
    private LayoutPanel getLayoutPanel_1() { 
     if (layoutPanel_1 == null) { 
      layoutPanel_1 = new LayoutPanel(); 
      layoutPanel_1.setSize("5cm", "60px"); 
      layoutPanel_1.add(getTxtStreet()); 
      layoutPanel_1.setWidgetLeftWidth(getTxtStreet(), 60.0, Unit.PX, 91.0, Unit.PX); 
      layoutPanel_1.setWidgetTopHeight(getTxtStreet(), 0.0, Unit.PX, 32.0, Unit.PX); 
      layoutPanel_1.add(getLblStreet()); 
      layoutPanel_1.setWidgetLeftWidth(getLblStreet(), 0.0, Unit.PX, 56.0, Unit.PX); 
      layoutPanel_1.setWidgetTopHeight(getLblStreet(), 0.0, Unit.PX, 22.0, Unit.PX); 
     } 
     return layoutPanel_1; 
    } 
    private Label getLblStreet() { 
     if (lblStreet == null) { 
      lblStreet = new Label("Street"); 
     } 
     return lblStreet; 
    } 
    private TextBox getTxtStreet() { 
     if (txtStreet == null) { 
      txtStreet = new TextBox(); 
     } 
     return txtStreet; 
    } 

    private DataGrid<Person> getDataGrid() { 
     if (dataGrid == null) { 
      dataGrid = new DataGrid<Person>(); 
      dataProvider.addDataDisplay(dataGrid); 
      dataGrid.addColumn(getColName(), "Name"); 
      dataGrid.addColumn(getColStreet(), "Street"); 
     } 
     return dataGrid; 
    } 

    private TextColumn<Person> getColName() { 
     if (colName == null) { 
      colName = new TextColumn<Person>() { 
       @Override 
       public String getValue(Person object) { 
        return object.getName(); 
       } 
      }; 
     } 
     return colName; 
    } 

    private TextColumn<Person> getColStreet() { 
     if (colStreet == null) { 
      colStreet = new TextColumn<Person>() { 
       @Override 
       public String getValue(Person object) { 
        return object.getStreet(); 
       } 
      }; 
     } 
     return colStreet; 
    } 
    private DockLayoutPanel getDockLayoutPanel_1() { 
     if (dockLayoutPanel_1 == null) { 
      dockLayoutPanel_1 = new DockLayoutPanel(Unit.PX); 
      dockLayoutPanel_1.addSouth(getLayoutPanel_2(), 40.0); 
      dockLayoutPanel_1.add(getDataGrid()); 
     } 
     return dockLayoutPanel_1; 
    } 
    private LayoutPanel getLayoutPanel_2() { 
     if (layoutPanel_2 == null) { 
      layoutPanel_2 = new LayoutPanel(); 
      layoutPanel_2.add(getSimplePager()); 
      layoutPanel_2.setWidgetLeftWidth(getSimplePager(), 50.0, Unit.PCT, 50.0, Unit.PCT); 
     } 
     return layoutPanel_2; 
    } 
    private SimplePager getSimplePager() { 
     if (simplePager == null) { 
      simplePager = new SimplePager(); 
      simplePager.setDisplay(getDataGrid()); 
     } 
     return simplePager; 
    } 

    public class Person{ 

     private String name; 
     private String street; 

     public Person(){ 
     } 

     public String getName() { 
      return name; 
     } 
     public void setName(String name) { 
      this.name = name; 
     } 
     public String getStreet() { 
      return street; 
     } 
     public void setStreet(String street) { 
      this.street = street; 
     } 
    } 
}

在這個例子中我有一些問題：

  • CSS填充對SimpleLayoutPanel不起作用。我應該使用哪個班級？ 我想在空的骨架類中使用css填充，因爲如果我替換這個佔位符的 的小部件，它應該自動使用父級的css（slpWorkspaceHeaderPlaceholder）。 我不想爲slpWorkspaceHeaderPlaceholder的每個子項設置填充。

  • 「其他詳細信息」的披露面板無法使用。原因是因爲DockLayoutPanel 對於North具有修復大小。我測試了一個解決方案，如果我打開披露窗格，但只是更改北部大小，但動畫不起作用。

  • 這是設計我的應用程序的正確軌道，還是應該使用不同的面板？

  • 我應該只嘗試使用佈局面板（更好的標準模式支持）還是有其他面板的特殊情況？

來源

2012-09-21 user1165474

+0

請閱讀此答案：http://stackoverflow.com/questions/12284139/resizelayoutpanel-inside-disclosurepanel-using-gwt/12292171#12292171。爲了掌握GWT佈局，您必須掌握RequiresResize/ProvideResize。 –

回答

2

嘗試使用盡可能少的類型的小部件，以儘量減少編譯的代碼大小，加快編譯速度並提高性能。您的設計只需要3種類型的面板（除了RootLayoutPanel外）。您絕對不需要爲您的工具欄或工作區標題使用LayoutPanel。

事情是這樣的：

FlowPanel toolbar = new FlowPanel(); 
FlowPanel center = new FlowPanel(); 

DisclosurePanel workspace = new DisclosurePanel(); 
workspace.addCloseHandler(new CloseHandler<DisclosurePanel>() { 
    @Override 
    public void onClose(CloseEvent<DisclosurePanel> event) { 
     resize(); 
    } 
}); 
workspace.addOpenHandler(new OpenHandler<DisclosurePanel>() { 
    @Override 
    public void onOpen(OpenEvent<DisclosurePanel> event) { 
     resize(); 
    } 
}); 
Window.addResizeHandler(new ResizeHandler() { 
    @Override 
    public void onResize(ResizeEvent event) { 
     resize(); 
    } 
}); 

DataGrid<Person> dataGrid = new DataGrid<Person>(); 
FlowPanel statusBar = new FlowPanel(); 

center.add(workspace); 
center.add(dataGrid); 

LayoutPanel myPage = new LayoutPanel(); 
myPage.add(toolbar); 
myPage.add(center); 
myPage.add(statusBar); 

myPage.setWidgetTopHeight(toolbar, 0, Unit.PX, 60, Unit.PX); 
myPage.setWidgetTopBottom(center, 60, Unit.PX, 60, Unit.PX); 
myPage.setWidgetBottomHeight(statusBar, 0, Unit.PX, 60, Unit.PX); 

// add myPage to RootLayoutPanel 
resize();

創建調整大小（）方法：

private void resize() { 
    Scheduler.get().scheduleDeferred(new ScheduledCommand() { 
     @Override 
     public void execute() { 
      dataGrid.setHeight(center.getOffsetHeight() - workspace.getOffsetHeight() + "px"); 
     } 
    }); 
}

添加按鈕，直接與下面的樣式控件工具：

.myToolbarButton { 
    width: 50px; 
    height: 50px; 
    float: left; 
    margin: 5px 10px 5px 0; 
}

如果你的風格你工具欄（背景顏色），將以下內容添加到其樣式中：

overflow: hidden;

來源

2012-09-21 19:23:58

-1

HTML對於「讓這個組件佔用儘可能多的空間，然後讓這個組件佔用剩下的空間，可怕的支持。「據我所知，最好的辦法做你想做的事，GWT將使用所有LayoutPanels，覆蓋在onResize，然後自己做數學佈局計算：

int heightOfEntireCenter = centerPanel.getClientHeight(); 
int heightOfToolbar = toolBar.getClientHeight(); 

workspace.setHeight(heightOfEntireCenter - heightOfToolbar);

你必須做噸的finagling，尋找神祕的佈局錯誤，在尺寸改變時被滯後所困擾等等.HTML在這方面只是不好的。

如果你可以修復工具欄的大小，你會有一個更容易的時間。我甚至不意味着工具欄不能改變大小 - 我的意思是你必須計算並設置它，然後工作空間可以更自然地填充剩餘空間，LayoutPanels在這裏是正確的選擇，

來源

2012-09-21 18:40:26

相關問題

 相關問題