0

uiBinder を使用して div ベースのレイアウトを作成する、非常に単純なことをしようとしています。レイアウトの中央には、いくつかのラベル、いくつかの TextBoxes、および画像があります。私の望ましい出力は次のとおりです。

           ____________________
 Label 1   | box 1            |
           --------------------
           ____________________
 Label 2   | box 2            |
           --------------------
                      _________
 Label 3              |       |
 Label 4              | image |
                      ---------

ラベルと画像は GWT ウィジェットであるため、div を直接使用できないため、代わりに FlowPanel を使用しています。FLowPanel のドキュメントには、ウィジェットを含めることができることが示されています。ただし、以下のコードをコンパイルすると、エラーがスローされます

HTML コンテキストでは許可されていません: <g:Label addStyleNames='{res.css.actionPanelText}'> (:10)

誰かが私が愚かである場所を指摘できますか？

ありがとう、リチャード

<ui:with field='res' type='com.this.that.wf.portal.flip.client.ui.Resources' />
<FlowPanel>
  <FlowPanel addStyleNames="{res.css.itemDetailsInput}">
    <FlowPanel addStyleNames="{res.css.itemDetailsInputCol1}">
      <g:Label>Label 1</g:Label>
      <g:Label>Label 2</g:Label>
    </FlowPanel>
    <FlowPanel addStyleNames="{res.css.itemDetailsInputCol2}">
      <g:TextBox ui:field="Box1"></g:TextBox>
      <g:TextBox ui:field="Box2"></g:TextBox>
    </FlowPanel>
  </FlowPanel>
  <FlowPanel addStyleNames="{res.css.itemDetailsOutput}">
    <FlowPanel addStyleNames="{res.css.itemDetailsOutputCol1}">
      <g:Label>Label 3</g:Label>
      <g:Label>Label 4</g:Label>
    </FlowPanel>
    <FlowPanel addStyleNames="{res.css.itemDetailsOutputCol2}">
      <g:Image url="http://www.someimage.com/generic.jpg"
               ui:field="itemImage"
               title="Item" altText="My alt"/>
    </FlowPanel>
  </FlowPanel>
</FlowPanel>

私のcssは次のようになります：

    .itemDetailsInput {
    display: table;
    width: 500px;
    margin: 5px;
    width: 100%;
    padding: 3px 5px 3px 5px;
  }

  .itemDetailsInputCol1{
    display: table-cell;
    width: 20%;
    padding: 1em;
    position: relative;
    left: auto;
  }

  .itemDetailsInputCol2 {
    width: 80%;
    display: table-cell;
    padding: 1em;
    position: relative;
  }

  .itemDetailsOutput {
    display: table;
    width: 500px;
    margin: 5px;
    width: 100%;
    padding: 3px 5px 3px 5px;
  }

  .itemDetailsOutputCol1{
    display: table-cell;
    width: 60%;
    padding: 1em;
    position: relative;
    left: auto;
  }

  .itemDetailsOutputCol2 {
    width: 40%;
    display: table-cell;
    padding: 1em;
    position: relative;
  }
4

2 に答える 2

0

私は本当にばかです。このコードを何時間も調べた後、「FrowPanel」の前にある「g:」を見落としていたことに気付きました。

于 2013-10-04T15:58:33.027 に答える
0

それがフローパネルの目的です。

ドキュメントによるフローパネルの説明は

A panel that formats its child widgets using the default HTML layout behavior.

複数のフロー パネルを使用するか、水平パネルとフロー パネルを組み合わせて使用​​すると、期待どおりの結果を簡単に得ることができます。

于 2013-10-04T04:03:39.283 に答える