1

ヘッダー フッターとメイン コンテンツ スロットを含むグローバル プレゼンターがあります。ヘッダーが常に上部にあり、フッターが常に下部にある場合...

私の質問は:グローバル プレゼンターにスクロール バーを追加するにはどうすればよいですか?

このような質問がたくさんあったことは知っていますが、正しい答えが見つかりません。

コードを持つUiBinderがあります：

    <g:RootLayoutPanel width="100%" height="100%">
    <g:layer left="0px" right="0px" top="0px" bottom="0px">
        <g:DockLayoutPanel unit="EM">
            <g:north size="5.0">
                <g:HTMLPanel ui:field="headerContentPanel" />
            </g:north>
            <g:center size="1.0">
                <g:FlowPanel ui:field="mainContentPanel" />
            </g:center>
            <g:south size="1.5">
                <g:HTMLPanel ui:field="footerContentPanel" />
            </g:south>
        </g:DockLayoutPanel>
    </g:layer>
</g:RootLayoutPanel>

RootLayotPanel または他のパネルを含む ScrollPanel を追加しようとしましたが、すべての内側のパネルがサイズ 0 を受け取ります。

scrollPanel 内で垂直パネルを使用しようとしましたが、下部にフッターを配置できません。

誰かが答えを持っていますか？

================================================== ================================

私はそれを行うことに成功しました、ここに私の新しいコードがあります:

    <g:RootLayoutPanel width="100%" height="100%">
    <g:layer>

        <g:ScrollPanel width="100%" height="100%">
            <g:DockPanel width="100%" horizontalAlignment="ALIGN_CENTER" verticalAlignment="ALIGN_MIDDLE">
                <g:Dock direction="NORTH" >
                    <g:HTMLPanel ui:field="headerContentPanel" />
                </g:Dock>
                <g:Dock direction="CENTER" verticalAlignment="ALIGN_MIDDLE" horizontalAlignment="ALIGN_CENTER">
                    <g:FlowPanel ui:field="mainContentPanel" />
                </g:Dock>
                <g:Dock direction="SOUTH"  verticalAlignment="ALIGN_BOTTOM" horizontalAlignment="ALIGN_CENTER">
                    <g:HTMLPanel ui:field="footerContentPanel" />
                </g:Dock>
            </g:DockPanel>
        </g:ScrollPanel>

    </g:layer>
</g:RootLayoutPanel>

しかし、私には小さな問題があります。何を試しても、フッターが下部に接続されていません..誰かが解決策を知っていますか?

4

2 に答える 2

1

レイアウトパネルは、スクロールパネルでは正しく機能しません。ただし、scollパネルはレイアウトパネルで使用できます。たとえば、中央部分をスクロールするには、次のようにします。

    <g:DockLayoutPanel unit="EM">
        <g:north size="5.0">
            <g:HTMLPanel ui:field="headerContentPanel" />
        </g:north>
        <g:center size="1.0">

          <g:ScrollPanel>
            <g:FlowPanel ui:field="mainContentPanel" />
          </g:ScrollPanel>

        </g:center>
        <g:south size="1.5">
            <g:HTMLPanel ui:field="footerContentPanel" />
        </g:south>
    </g:DockLayoutPanel>

もう1つの可能性は、レイアウトパネルの代わりにDockPanelを使用することです。

ヘッダーがスクロールバーに含まれている場合：

<g:ScrollPanel>   
   <g:DockPanel>
      <g:Dock direction="NORTH" height="100px">
          <g:HTMLPanel ui:field="headerContentPanel" />
      </g:Dock>
      <g:Dock direction="CENTER">
          <g:FlowPanel ui:field="mainContentPanel" />
      </g:Dock>
      <g:Dock direction="SOUTH" height="100px">
          <g:HTMLPanel ui:field="footerContentPanel" />
      </g:Dock>
  </g:DockPanel> 
</g:ScrollPanel>

そして、これをRootLayoutPanelまたはに入れますRootPanel

または、レイアウトパネルでDockPanelを使用します。例：スクロール可能なヘッダーと中央部分が必要ですが、西のパネルと下部が常に表示されます。

<g:DockLayoutPanel width="100%">
  <g:west size="100.0">
     <g:Label>West side </g:Label>
  </g:west>
  <g:center>
     <g:ScrollPanel>   
        <g:DockPanel>
          <g:Dock direction="NORTH" height="100px">
            <g:HTMLPanel ui:field="headerContentPanel" />
          </g:Dock>
          <g:Dock direction="CENTER">
            <g:FlowPanel ui:field="mainContentPanel" />
          </g:Dock>
        </g:DockPanel> 
     </g:ScrollPanel>
  </g:center>
  <g:south size="50">
     <g:HTMLPanel ui:field="footerContentPanel" />
  </g:south >
</g:DockLayoutPanel>

そして、これをに入れRootLayoutPanelます。

于 2012-05-07T13:13:38.667 に答える
0

すべての GWT (UiBinder) 構文とすべてのカスケード レイアウトをしばらく忘れてください。次の簡単な例を考えてみてください。

  • 現在の高さが 1000px のウィンドウがあるとします。
  • ウィンドウの高さの 100% を占めるコンテナー (単純なブラック ボックスを想像してください) があるため、高さは 1000px になります。

この場合、スクロールするものは何もありません。したがって、scroll=auto を使用すると、ウィンドウにスクロール バーは表示されません。(ブラック ボックス内の可能なスクロール バーは忘れてください。)

ヘッダーが一番上にあり、他のすべてがスクロールする (スクロールバーが 100% の高さを占める) レイアウトが必要な場合は、おそらく "position=fixed" のヘッダーから始める必要があります。したがって、HTML で行うことは次のとおりです。

<div class="headerContent">My header</div>
<div class="everythingElse">
   <div class="mainContent">...</div>
   <div class="footerContent">My footer</div>
</div>

CSS:

.headerContent {
  position: fixed;
  top: 0;
  left: 0;
  height: 5.0em;
  width: 100%;
  background-color: red;
}
.everythingElse {
  margin-top: 5.0em; /* Same as the height of the header */
}

GWT UiBinder でも同じことができます。div を単純な FlowPanel に置き換え (必要に応じて)、CSS を適用します (addStyleNames属性を使用して参照される UiBinder CSS クラスを使用)。DockPanel は必要ありません。「everythingElse」の高さがウィンドウの高さを超えると、body タグのデフォルト設定でスクロール バーが表示されます。

于 2012-05-06T12:09:17.797 に答える