tabular layout with UIBinder?

[Magnus]

Hi,

I want to use a tabular layout using UIBinder. 

It should look contain two rows, the first one with two columns containing dropdown lists, and the second one containing a textfield that spans the two columns of the first row (colspan=2):

[dropdownlist] [dropdownlist]

[         textfield         ]

I tried to do it with a Grid and I added "colspan=2" manually to the CustomCell tag, but without any effect (see code below).

I also tried to use FlexTable, but GWT Designer does not let me put widgets in the FlexTable.

(For now I just use the designer's user interface to build layouts. For writing UIBinder XML by hand I do not know a suitable documentation that describes the tags and attributes you may use.)

Tipps are welcome!

Magnus

-----

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"

 xmlns:g="urn:import:com.google.gwt.user.client.ui">

 <ui:style>

  

 </ui:style>

 <g:HTMLPanel>

  <g:Grid cellSpacing="10" width="">

  <g:row>

  <g:customCell>

  <g:VerticalPanel>

  <g:Label text="Einladender"/>

  <g:ListBox visibleItemCount="1" width="" ui:field="lst_Inviter"/>

  </g:VerticalPanel>

  </g:customCell>

  <g:customCell>

  <g:VerticalPanel>

  <g:Label text="Eingeladener"/>

  <g:ListBox visibleItemCount="1" width="" ui:field="lst_Invited"/>

  </g:VerticalPanel>

  </g:customCell>

  </g:row>

  <g:row>

  <g:customCell colspan="2">

  <g:VerticalPanel width="100%">

  <g:Label text="Nachricht"/>

  <g:TextBox width="" ui:field="txt_Message"/>

  </g:VerticalPanel>

  </g:customCell>

  </g:row>

  </g:Grid>

 </g:HTMLPanel>

</ui:UiBinder> 

[Thomas Broyer]

The Grid widget doesn't support colspans or rowspans. FlexTable does though.

But in your case, why not simply go with a <table> (or even <div>s with a bunch of CSS)?

You might also want to replace your VerticalPanels with just <div>s, <FlowPanel>s if you absolutely needs widgets, or just nothing (depending on context), and Labels with <div>s or <span>s, or even better <label>s or just nothing.

(BTW, why did you enclose your Grid into an HTMLPanel?)

[Magnus]

Hi Thomas!

Am Samstag, 13. Juli 2013 16:17:54 UTC+2 schrieb Thomas Broyer:

But in your case, why not simply go with a <table> (or even <div>s with a bunch of CSS)?

You might also want to replace your VerticalPanels with just <div>s, <FlowPanel>s if you absolutely needs widgets, or just nothing (depending on context), and Labels with <div>s or <span>s, or even better <label>s or just nothing.

Can you give me a minimal example?

(BTW, why did you enclose your Grid into an HTMLPanel?)

I am still new to UIBinder. I just created a new UIBinder and the enclosing HTMLPanel came automatically.

Maybe I am missing a UIBinder documentation...?

Magnus

[Thomas Broyer]

On Saturday, July 13, 2013 11:44:16 PM UTC+2, Magnus wrote:

Hi Thomas!

Am Samstag, 13. Juli 2013 16:17:54 UTC+2 schrieb Thomas Broyer:

But in your case, why not simply go with a <table> (or even <div>s with a bunch of CSS)?

You might also want to replace your VerticalPanels with just <div>s, <FlowPanel>s if you absolutely needs widgets, or just nothing (depending on context), and Labels with <div>s or <span>s, or even better <label>s or just nothing.

Can you give me a minimal example?

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui">

 <g:HTMLPanel>

  <table cellspacing="10"><!-- you might want to use CSS instead of cellspacing -->

  <tr>

  <td>

  <div>Einladender</div>

  <g:ListBox visibleItemCount="1" ui:field="lst_Inviter"/>

  </td>

  <td>

  <div>Eingeladener</div>

  <g:ListBox visibleItemCount="1" ui:field="lst_Invited"/>

  </td>

  </tr>

  <tr>

  <td colspan="2">

  <div>Nachricht</div><!-- you might want to use a <label> here -->

  <g:TextBox ui:field="txt_Message"/>

  </g:customCell>

  </tr>

  </table>

 </g:HTMLPanel>

</ui:UiBinder>

 

(BTW, why did you enclose your Grid into an HTMLPanel?)

I am still new to UIBinder. I just created a new UIBinder and the enclosing HTMLPanel came automatically.

Maybe I am missing a UIBinder documentation...?

UiBinder instances are factories that generate a UI structure and glue it to an owning Java class. The UiBinder<U, O> interface declares two parameter types:

• U is the type of root element declared in the ui.xml file, returned by thecreateAndBindUi call
• O is the owner type whose @UiFields are to be filled in.

Source: http://www.gwtproject.org/doc/latest/DevGuideUiBinder.html

[Magnus]

Hi Thomas,

thank you!

To understand it right: Why isn't it possible to declare a FlexTable in GWT Designer, with 2 rows and 3 cells? It works with Grid but it doesn't with FlexTable. GWT Designer lets me insert a FlexTable, but it won't let me put widgets into the FlexTable.

And concerning the documentation: Where can I see which attributes are available to the different widgets in XML? For example, where can I read what is the right name for the cell tags within a FlexTable and the names of the attributes, e. g. "colspan" or "colSpan"...

Thanks

Magnus

[Thomas Broyer]

On Monday, July 15, 2013 6:33:56 PM UTC+2, Magnus wrote:

Hi Thomas,

thank you!

To understand it right: Why isn't it possible to declare a FlexTable in GWT Designer, with 2 rows and 3 cells? It works with Grid but it doesn't with FlexTable. GWT Designer lets me insert a FlexTable, but it won't let me put widgets into the FlexTable.

Those widgets need special parsers to work in UiBinder, and nobody made one for FlexTable (because, honestly, in 90% of the cases a <table> in an HTMLPanel is what you need, so it wasn't worth the effort). Grid was much simpler to support, and it's worth noting that it was initially contributed by a community member (not by Google).

 

And concerning the documentation: Where can I see which attributes are available to the different widgets in XML?

You should be able to find everything in the javadoc.

The basics are in http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/ui/UIObject.html

And then each specifics for a widget is in the javadoc for the widget itself, generally in a "Use in UiBinder" section; for example: http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/ui/DockLayoutPanel.html

 

For example, where can I read what is the right name for the cell tags within a FlexTable and the names of the attributes, e. g. "colspan" or "colSpan"...

So the answer is: there aren't any ;-)