GWT treating FlowPanel as HTML Context - why?

Question

I am trying to do something quite simple, create a div based layout using uiBinder. At the centre of the layout are a couple of labels, some TextBoxes and an image. My desired output is:

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

As the labels and the image are GWT widgets, I can't use div directly, so I am using FlowPanel instead. The documentation for FLowPanel indicates that it can contain widgets. However, when I compile the code below it throws the error

Not allowed in an HTML context: &ltg:Label addStyleNames='{res.css.actionPanelText}'> (:10)

Please, can someone point out where I am being dumb?

Thanks, Richard

<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>

My css looks like this:

    .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;
  }

score 1 · Answer 1 · answered Oct 04 '13 at 15:58

1

I am truly an idiot. After spending hours looking at this code, I realize that I have missed the 'g:' in front of the 'FrowPanel'.

answered Oct 04 '13 at 15:58

Richard George

23
5

score 0 · Answer 2 · answered Oct 04 '13 at 04:03

0

Thats the purpose of Flow panel.

The description of Flow panel as per the docs is

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

You can get your expected results easily, if you use multiple flow panels or a combination of Horizontal Panels and Flow Panel(s).

answered Oct 04 '13 at 04:03

Abhijith Nagaraja

3,370
6
27
55

I originally used VerticalPanels and HorizontalPanels, but the GWT documentation indicate that these panels are deprecated and I should be using flow panels. – Richard George Oct 04 '13 at 13:36

GWT treating FlowPanel as HTML Context - why?

2 Answers2