UIBinder - problem with damaged layout

Magnus

unread,

Sep 21, 2012, 7:22:05 AM9/21/12

to google-we...@googlegroups.com

Hello,

I am trying to build my first user interface using UIBinder and I am having problems with the layout. It looks like this:

https://picasaweb.google.com/104334857964624808900/21September2012?authuser=0&feat=directlink

(The ui.xml is attached below.)

The red area on the right has a fixed width and contains a button. The green area on the left should take all the remaining width.

The green area contains a 3 DecoratorPanels:

- "Beteiligung"

- "Status"

- "Turnier"

The first two should have a fixed size, while the third ("Turnier") should grow with the window witdh.

I have built the whole widget as follows:

- an outer LayoutPanel

- three layers with a HTMLPanel

- the interiors of the HTMLPanels with Horizontal/VerticalPanels and so on.

The whole GUI looks damaged, but I don't know how to fix it.

I would appreciate any help!

Thanks

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>

.layer {

background-color: red;

}

.innerlayer {

background-color: green;

}

.tournamentText {

border: solid 1px black;

}

.label {

background-color: orange;

margin-right: 70px;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

.button {

width: 50px;

float: right;

}

.clear {

clear: right;

}

</ui:style>

<g:LayoutPanel>

<g:layer top="5" bottom="5" left="5" width="200px">

<g:HTMLPanel styleName="{style.innerlayer}">

<g:HorizontalPanel height="100%">

<g:DecoratorPanel>

<g:VerticalPanel>

<g:HTML wordWrap="true">Beteiligung</g:HTML>

<g:CheckBox text="eigene"/>

<g:CheckBox text="fremde"/>

</g:VerticalPanel>

</g:DecoratorPanel>

<g:DecoratorPanel>

<g:VerticalPanel>

<g:HTML wordWrap="true">Status</g:HTML>

<g:CheckBox text="aktiv"/>

<g:CheckBox text="geplant"/>

<g:CheckBox text="beendet"/>

</g:VerticalPanel>

</g:DecoratorPanel>

</g:HorizontalPanel>

</g:HTMLPanel>

</g:layer>

<g:layer top="5" bottom="5" left="205" right="140px">

<g:HTMLPanel styleName="{style.innerlayer}">

<g:DecoratorPanel width="100%">

<g:VerticalPanel>

<g:HTML wordWrap="false">Turnier</g:HTML>

<g:CheckBox text="Turnier"/>

<g:HTML wordWrap="true" styleName="{style.tournamentText}">XXX</g:HTML>

</g:VerticalPanel>

</g:DecoratorPanel>

</g:HTMLPanel>

</g:layer>

<g:layer top="20" right="20" width="100px" bottom="20px">

<g:HTMLPanel styleName="{style.layer}">

<div>

<g:Button addStyleNames="{style.button}">></g:Button>

</div>

</g:HTMLPanel>

</g:layer>

</g:LayoutPanel>

</ui:UiBinder>

Magnus

unread,

Sep 21, 2012, 8:10:42 AM9/21/12

to google-we...@googlegroups.com

Hello,

I simplified the layout as follows, but the fluid DecoratorPanel still gets damaged when resizing the window.

I hope someone can help, because I am crazy about using UIBinder now... :-)

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

<g:layer left="5px" top="5px" bottom="5px" right="100px">

<g:HorizontalPanel>

<g:DecoratorPanel>

<g:VerticalPanel>

<g:HTML wordWrap="true">Beteiligung</g:HTML>

</g:VerticalPanel>

</g:DecoratorPanel>

<g:DecoratorPanel>

<g:VerticalPanel>

<g:HTML wordWrap="true">Status</g:HTML>

</g:VerticalPanel>

</g:DecoratorPanel>

<g:Cell width="100%">

<g:DecoratorPanel width="100%">

<g:VerticalPanel>

<g:HTML wordWrap="true">Turnier</g:HTML>

</g:VerticalPanel>

</g:DecoratorPanel>

</g:Cell>

</g:HorizontalPanel>

Thomas Broyer

unread,

Sep 21, 2012, 8:40:29 AM9/21/12

to google-we...@googlegroups.com

On Friday, September 21, 2012 2:10:42 PM UTC+2, Magnus wrote:

Hello,

I simplified the layout as follows, but the fluid DecoratorPanel still gets damaged when resizing the window.

DecoratorPanel uses a 9×9 table, and it looks like the first and last columns are resizing.

Try the following:

<ui:style>

@external .gwt-*;

.gwt-DecoratorPanel {

table-layout: fixed;

}

I hope someone can help, because I am crazy about using UIBinder now... :-)

It's nothing to do with UiBinder. Write the same layout in Java, you'll have the same issues.

Magnus

unread,

Sep 21, 2012, 8:59:51 AM9/21/12

to google-we...@googlegroups.com

Hello,

sorry for posting my learning curve! :-)

I found that DecoratedPanel caused the problems. But I also found that there is CaptionPanel, which much more suits my needs!

The layout below is nearly perfect for me. Just two things are missing:

- The orange textbox should horizontally grow.

- The right most button should be vertically centered.

I would be glad if someone could tell me how.

Thanks

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>

.group

{

border: solid 1px red;

}

.tournamentText {

background-color: orange;

margin-right: 50px;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

.tournamentButton {

width: 25px;

float: right;

}

.clear {

clear: right;

}

.updateButton {

width: 25px;

float: right;

}

</ui:style>

<g:LayoutPanel>

<g:layer left="5px" top="5px" bottom="5px" right="90px">

<g:HorizontalPanel spacing="5" height="100%">

<g:Cell height="">

<g:CaptionPanel captionText="Beteiligung" height="100%" width="">

<g:FlowPanel width="" height="">

<g:CheckBox text="eigene" wordWrap="false"/>

<g:CheckBox text="fremde"/>

</g:FlowPanel>

</g:CaptionPanel>

</g:Cell>

<g:Cell width="">

<g:CaptionPanel captionText="Status" width="" height="100%">

<g:VerticalPanel width="" height="">

<g:CheckBox text="aktiv" wordWrap="false"/>

<g:CheckBox text="geplant" wordWrap="false"/>

<g:CheckBox text="beendet" width="50px" wordWrap="false"/>

</g:VerticalPanel>

</g:CaptionPanel>

</g:Cell>

<g:Cell width="100%">

<g:CaptionPanel captionText="Turnier" height="100%">

<g:FlowPanel width="" height="">

<g:CheckBox text="Turnier"/>

<g:HTMLPanel>

<div>

<g:Button addStyleNames="{style.tournamentButton}">></g:Button>

<g:TextBox addStyleNames="{style.tournamentText}"/>

</div>

</g:HTMLPanel>

</g:FlowPanel>

</g:CaptionPanel>

</g:Cell>

</g:HorizontalPanel>

</g:layer>

<g:layer right="5px" top="5px" bottom="5px" width="50px">

<g:HTMLPanel>

<div>

<g:Button addStyleNames="{style.updateButton}">></g:Button>

Magnus

unread,

Sep 21, 2012, 9:05:03 AM9/21/12

to google-we...@googlegroups.com

Hello Thomas,

thank you! When I used DecoratorPanel, I did not know CaptionPanel. But CaptionPanel is exactly what I want: group similar widgets. My last layout with CaptionPanel is currently the one that best works for me. There are just two issues...