2

私は GWT を使用していHeaderPanelます。中間要素として、DockLayoutPanel次のように a を使用しています。

<g:DockLayoutPanel width="1200px" height="100%">
    <g:west size="220">
        <g:HTMLPanel styleName="{style.debug}">
            something <br />
            something <br />
        </g:HTMLPanel>
    </g:west>
</g:DockLayoutPanel>

ページは正常にレンダリングされますが、ブラウザー ウィンドウが縦方向に縮小されている場合、中央のパネルがフッターの上に表示されます。これはもちろん、ヘッダー パネルでは望ましくありません。

私はむしろ固定フッターが好きですDockLayoutPanel。私は何を間違っていますか？ありがとう！

編集:わかりました、実際には、ウィンドウが垂直に拡大された場合、中央のパネルはまだサイズ変更されません

EDIT2: HeaderPanel は直接ルート パネルにあり、次のようになります。

<g:HeaderPanel>
    <my.shared:Header></my.shared:Header>
    <my.shared:Middle></my.shared:Middle>
    <my.shared:Footer></my.shared:Footer>
</g:HeaderPanel>
4

3 に答える 3

3

レイアウト パネル 101:HeaderPanelはRequiresResizeパネルであるためProvidesResize、 などのパネルRootLayoutPanel(または [1] の中央パネルHeaderPanel) に配置するか、明示的な固定サイズを指定する必要があります。

[1]は、中間パネルのコントラクトのみを実行するため、HeaderPanel実装しません。ProvidesResize

于 2013-03-11T12:21:50.373 に答える
1

次のアプローチは私にとってはうまくいきました。これは、Zack Linder のアドバイスに基づいてい ます Google Web Toolkit ›layout panel problem

(1) HeaderLayoutPanel を RootLayoutPanel にアタッチします。headerLayoutPanel は、HeaderPanel を拡張し、ProvidesResize() を実装する作成するクラスです。

import com.google.gwt.user.client.ui.HeaderPanel;
import com.google.gwt.user.client.ui.ProvidesResize;
import com.google.gwt.user.client.ui.SimpleLayoutPanel;
import com.google.gwt.user.client.ui.Widget;

public class HeaderLayoutPanel extends HeaderPanel implements ProvidesResize {
SimpleLayoutPanel contentPanel;

public HeaderLayoutPanel() {
    super();
    contentPanel=new SimpleLayoutPanel();
}

    @Override
    public void setContentWidget(Widget w) {
       contentPanel.setSize("100%","100%");
       contentPanel.setWidget(w);
       super.setContentWidget(contentPanel);
    }

    public void onResize() {
      int w=Window.getClientWidth();
      int h=Window.getClientHeight();
      super.setPixelSize(w, h);
    }
}

(2) 次に、HeaderLayoutPanel をインスタンス化します。ヘッダーとフッターのウィジェットには固定の高さ (メニュー バーの高さなど) が割り当てられ、幅はパネルの幅に合わせて自動的に調整されます。中央のウィジェットは ProvidesSize である必要があります。レイアウトパネルを使用しました。例えば、

 public class AppViewer extends Composite implements MyApp.AppDisplay {

private HeaderLayoutPanel allContentsPanel;
MenuBar menuBarTop;
MenuBar menuBarBottom;
LayoutPanel dataPanel;

public AppViewer() {

    allContentsPanel = new HeaderLayoutPanel(); 
    menuBarTop = new MenuBar(false);
    menuBarBottom = new MenuBar(false);
    dataPanel = new LayoutPanel();

    menuBarTop.setHeight("30px");
    menuBarBottom.setHeight("20px");

    allContentsPanel.setHeaderWidget(menuBarTop);       
    allContentsPanel.setFooterWidget(menuBarBottom);                            
    allContentsPanel.setContentWidget(dataPanel);

    initWidget(allContentsPanel);
}


@Override
public void doOnResize() {
    allContentsPanel.onResize();
}   
  }

(3) 中央のウィジェット (LayoutPanel) は、別の Composite で定義する DeckLayoutPanel を保持します (ただし、やりたいことは何でもできます)。例えば、

    public class MyDataView extends Composite implements MyDataPresenter.DataDisplay {      
        private DockLayoutPanel pnlAllContents;
    private HorizontalPanel hpnlButtons;
    private HorizontalPanel hpnlToolbar;
    private VerticalPanel pnlContent;

    public MyView() {
    pnlAllContents=new DockLayoutPanel(Unit.PX);
    pnlAllContents.setSize("100%", "100%"); 
    initWidget(pnlAllContents);

    hpnlToolbar = new HorizontalPanel();
    hpnlToolbar.setWidth("100%");   
    pnlAllContents.addNorth(hpnlToolbar, 30);

    hpnlButtons = new HorizontalPanel();
    hpnlButtons.setWidth("100%");
    pnlAllContents.addSouth(hpnlButtons,20);

    pnlContent=new VerticalPanel(); 
    //center widget - takes up the remainder of the space
    pnlAllContents.add(pnlContent);

    ...
         }
}

(4) 最後にすべてが onModuleLoad() クラスで結び付けられます。AppViewer は RootLayoutPanel に追加されるディスプレイを生成し、MyDataView はコンテナに追加される display.asWidget() を生成します。例えば、 

public class MyApp implements EntryPoint,Presenter{

  private HasWidgets container=RootLayoutPanel.get();
  private static AppDisplay display;  
  private DataPresenter dataPresenter;

    public interface AppDisplay extends Display{
        @Override
        Widget asWidget();
        HasWidgets getContentContainer();
        void doOnResize();
        }

    @Override
    public void onModuleLoad() {
        display=new AppViewer();
        dataPresenter = new DataPresenter();
        display.getContentContainer().add(dataPresenter.getDisplay().asWidget());
        container.add(display.asWidget());
        bind();
        }

       @Override
       public void bind() {

    Window.addResizeHandler(new ResizeHandler() {
        @Override
        public void onResize(ResizeEvent event) {
            display.doOnResize();
        }
    });
        }


       @Override
       public com.midasmed.client.presenter.Display getDisplay() {
        return display;
       }
    }

お役に立てれば！

于 2013-12-14T20:30:37.653 に答える
0

DockLayourPanelまあ、私はこれを解決することができませんでしたが、将来の訪問者のために：北、中央、南のコンポーネントを使用して同じことを達成できます（修正できなかった問題を除く） 。

于 2013-03-11T11:45:51.780 に答える