Wednesday, November 20, 2013

liquid layout with UIBinder

Hello,

I would like to make a liquid layout like this:

----------------------------------------
Name:
[ TextBox ]

Description:
[               ]
[ TextArea ]
[               ]
----------------------------------------

The TextArea should always occupy all of the remaining space.
In addition, it would be nice if the TextBox will always occupy the available width.

I have done this with two nested DockLayoutPanels, the first one containing the TextBox and its label in the north section, and the second one in the center section. The second DockLayoutPanel contains its label in the north section and the TextArea in its center section. (see UIBinder code below)

I have used DockLayoutPanel, because it automatically resizes the content in its center section.

I believe that to make the TextBox use the whole width, I had to use an additional DockLayoutPanel, with the TextArea contained in its center section. So there were 3 nested DockLayoutPanels for such a simple form.

Is there a more simple approach? 

Thank you!
Magnus


  <g:DockLayoutPanel unit="PX">
      <g:north size="60">
          <g:VerticalPanel>
              <g:Label text="Name:"/>
              <g:TextBox/>
          </g:VerticalPanel>
      </g:north>
      <g:center>
          <g:DockLayoutPanel unit="PX" width="100%" height="100%">
              <g:north size="20">
                  <g:Label text="Description:"/>
              </g:north>
              <g:center>
                  <g:TextArea characterWidth="60"/>
              </g:center>
          </g:DockLayoutPanel>
      </g:center>
  </g:DockLayoutPanel> 

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.

No comments:

Post a Comment