1

私のレイアウト構造は画像にありますここに画像の説明を入力

画像の概要: HTMLPanel は RootPanel と 2 つの垂直パネル、1 つのヘッダーとその他のコンテンツ パネルです。2 番目の垂直パネルには DockLayoutPanel があります。 今私の問題は、ホーム ページのプロジェクト コードを
実行すると、DockLayout が表示されないことです。

<g:HTMLPanel>
     <g:VerticalPanel ui:field="contentPane" ></g:VerticalPanel>
     <g:VerticalPanel ui:field="headerPane" styleName="{style.upper-titlebar-container}" ></g:VerticalPanel>
</g:HTMLPanel>

コンテンツ パネルのコード

<g:HTMLPanel>
        <g:DockLayoutPanel unit='EM'>
             <g:north size='4'>
                <g:Label> Hello </g:Label>
             </g:north>
             <g:east size="7.0">
                  <g:HTMLPanel ui:field="EdgeBandingPane"></g:HTMLPanel>
             </g:east>
             <g:west size="5.8" >
                  <g:HTMLPanel ui:field="PartsPane"></g:HTMLPanel>
             </g:west>

             <g:center >
                  <g:HTMLPanel ui:field="PanelsPane"></g:HTMLPanel>
             </g:center>
             <g:south size="5">
               <g:Label> Hello </g:Label>
             </g:south>
        </g:DockLayoutPanel>

    </g:HTMLPanel>

追加したウィジェットは出力に表示されますが、Dock パネルは表示されません。問題が発生していません
よろしくお願いします

4

1 に答える 1

4

GWT *LayoutPanels は、*Panels (レイアウトのないもの) にネストされている場合、自動的には機能しません。これは、レイアウトのアプローチが異なるためです。

  • レイアウト パネルは、親要素によってサイズを指定する必要がある絶対的な CSS レイアウトを使用します。
  • 「通常の」パネルはコンテンツとともに成長します

Panel に LayoutPanel をネストするには、固定サイズを設定し、サイズが変わるたびに onResize を呼び出す必要があります。ただし、代わりに、LayoutPanels のみを操作することもできます。私が正しければ、動的な高さのヘッダーが必要です (高さはコンテンツによって定義されます)。その場合、HeaderPanel を使用する必要があります。ヘッダーには、VerticalPanel を使用できます。(交換可能な) コンテンツのコンテナーとして、1 つのウィジェットをホストする LayoutPanel である SimpleLayoutPanel を使用できます。

<g:HeaderPanel>
    <g:VerticalPanel ui:field="headerPane"></g:VerticalPanel>
    <g:SimpleLayoutPanel ui:field="contentPane"></g:SimpleLayoutPanel>
</g:HeaderPanel>

そして、私の観点からは、コンテンツの DockLayoutPanel の周りの余分な HTMLPanel を削除して、サイズが外側から正しく設定されるようにする必要があります。

<g:DockLayoutPanel unit='EM'>
     <g:north size='4'>
        <g:Label> Hello </g:Label>
     </g:north>
     <g:east size="7.0">
          <g:HTMLPanel ui:field="EdgeBandingPane"></g:HTMLPanel>
     </g:east>
     <g:west size="5.8" >
          <g:HTMLPanel ui:field="PartsPane"></g:HTMLPanel>
     </g:west>
     <g:center >
          <g:HTMLPanel ui:field="PanelsPane"></g:HTMLPanel>
     </g:center>
     <g:south size="5">
       <g:Label> Hello </g:Label>
     </g:south>
</g:DockLayoutPanel>

編集: HTMLPanel は、「手動」レイアウトにのみ必要です。他の 1 つのウィジェット/パネルのみをラップするために使用しないでください。

于 2013-09-17T07:43:16.547 に答える