Thursday, November 21, 2013

Re: liquid layout with UIBinder

your first example is not clear to me:

  <g:layer top="0" height="60px" ... >
    <g:FlowPanel>
      <g:Label text="Name:"/>
      <g:TextArea/> 
      <g:Label text="Description:"/> 
    </g:FlowPanel>
  </g:layer>

You put a label, a TextArea and another label in one FlowPanel?
This would place them all in one row?

A Label is a <div> element which by default has the CSS property "display:block". This means it occupies all available width and will always start on a new row. GWT also has an InlineLabel which has the very opposite behavior.


 
And the second TextArea is placed in another layer:

  <g:layer top="61" bottom="0" ... >
   <g:TextArea/> 
  </g:layer>

If I understand your approach right, you combine several components into some panel and put this panel into a separate layer.

Right, because the widget inside the layer is automatically stretched to the layer size. The text area layer is the one that fills the remaining vertical space.


 
But then, why not this way:?

  <g:layer top="0" height="60px" ... >
    <g:VerticalPanel> <!-- label should be *above* the TextBox -->
      <g:Label text="Name:"/>
      <g:TextBox/> 
    </g:VerticalPanel>
  </g:layer>

  <g:layer bottom="0" top="61px" ... >
    <g:VerticalPanel> <!-- label should be *above* the TextArea -->
      <g:Label text="Name:"/>
      <g:TextArea/> 
    </g:VerticalPanel>
  </g:layer>

Because VerticalPanel uses <table> and this element should not be used for layout tasks (<table> should be used to present tabular data). 

If you use VerticalPanel then technically you don't even need a LayoutPanel as shown in the last example of my previous post. Pure VerticalPanel would look like http://jsfiddle.net/4mL8T/ 

-- J.

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