how to resize a DockLayoutPanel pane using gwt 2.0 and uibinder

[gkb]

Hello all.

I have a question concerning how to access/modify the size of a
DockLayoutPanel's widget outside of the *.ui.xml file in the java
code.

For instance, say I have a DockLayoutPanel with a West widget and a
Center widget as follows:
{{{
<g:DockLayoutPanel unit='EM'>
<g:west size='20'>
<layouts:WestWidget ui:field='westWidget' />
</g:west>
<g:center>
<layouts:CenterWidget ui:field='centerWidget' />
</g:center>
</g:DockLayoutPanel>
}}}
Is it possible to dynamically change the width of the westWidget
somewhere in the associated java code, or can it only by modified in
the *.ui.xml file.

The problem is, I would like to be able to hide/show the westWidget
and have the centerWidget fill the remaining space dynamically when
the app is running,
but changing the width of westWidget in the java code has no effect on
the width of the West Pane of the DockLayoutPanel that was hard-coded
in, there is a disconnect between them.

Any help would be greatly appreciated.

Sincerely,

George.

[jd]

Here is a subclass I made to expose some functionality that might help
you

class ResizableDockLayoutPanel extends DockLayoutPanel
{
public ResizableDockLayoutPanel(Unit unit)
{
super(unit);
}

public double getWidgetSize(Widget widget)
{
return ((LayoutData) widget.getLayoutData()).size;
}

public void setWidgetSize(Widget widget, double size)
{
((LayoutData) widget.getLayoutData()).size = size;
}

@Override
public void insert(Widget widget, Direction direction, double size,
Widget before)
{
super.insert(widget, direction, size, before);

[mort...@gmail.com]

I just tried this (in 2.0GA), and I get errors in the generated code:

ui.xml looks something like this:

<trinity:ResizableDockLayoutPanel ui:field="rootPanel" unit="PX">
<trinity:south size="0">
<trinity:ContentPanel ui:field="bottomPanel"></trinity:ContentPanel>
</trinity:south>
...

it complains about a type mismatch, when looking at the generated code
it is obvious why but not how to fix it:

public Widget createAndBindUi(final Trinity owner) {

bam.trinity.client.Trinity_BinderImpl_GenBundle
clientBundleFieldNameUnlikelyToCollideWithUserSpecifiedFieldOkay =
(bam.trinity.client.Trinity_BinderImpl_GenBundle) GWT.create
(bam.trinity.client.Trinity_BinderImpl_GenBundle.class);
bam.trinity.client.Trinity_BinderImpl_GenCss_style style =
clientBundleFieldNameUnlikelyToCollideWithUserSpecifiedFieldOkay.style
();
bam.trinity.client.ui.ContentPanel bottomPanel =
(bam.trinity.client.ui.ContentPanel) GWT.create
(bam.trinity.client.ui.ContentPanel.class);
com.google.gwt.user.client.ui.HTML left =
(com.google.gwt.user.client.ui.HTML) GWT.create
(com.google.gwt.user.client.ui.HTML.class);
com.google.gwt.user.client.ui.HTML right =
(com.google.gwt.user.client.ui.HTML) GWT.create
(com.google.gwt.user.client.ui.HTML.class);
com.google.gwt.dom.client.SpanElement headerspan = null;
java.lang.String domId0 = com.google.gwt.dom.client.Document.get
().createUniqueId();
com.google.gwt.user.client.ui.HTML f_HTML1 =
(com.google.gwt.user.client.ui.HTML) GWT.create
(com.google.gwt.user.client.ui.HTML.class);
bam.trinity.client.ui.ContentPanel content =
(bam.trinity.client.ui.ContentPanel) GWT.create
(bam.trinity.client.ui.ContentPanel.class);
bam.trinity.client.ui.ResizableDockLayoutPanel rootPanel = new
com.google.gwt.user.client.ui.DockLayoutPanel
(com.google.gwt.dom.client.Style.Unit.PX);


On the last line here, the ResizableDockLayoutPanel is for some reason
set to "new DockLayoutPanel" and not ResizableDockLayoutPanel..

Maybe I did something dumb, but I can't really find it :)

On Nov 7, 3:08 am, jd <jdpatter...@gmail.com> wrote:
> Here is a subclass I made to expose some functionality that might help
> you
>
>         class ResizableDockLayoutPanel extendsDockLayoutPanel
>         {
>                 public ResizableDockLayoutPanel(Unit unit)
>                 {
>                         super(unit);
>                 }
>
>                 public double getWidgetSize(Widget widget)
>                 {
>                     return ((LayoutData) widget.getLayoutData()).size;
>                 }
>
>                 public void setWidgetSize(Widget widget, double size)
>                 {
>                         ((LayoutData) widget.getLayoutData()).size = size;
>                 }
>
>                 @Override
>                 public void insert(Widget widget, Direction direction, double size,
> Widget before)
>                 {
>                         super.insert(widget, direction, size, before);
>                 }
>         }
>
> On Nov 6, 8:00 pm, gkb <gkb...@gmail.com> wrote:
>
> > Hello all.
>
> > I have a question concerning how to access/modify the size of a

> >DockLayoutPanel'swidget outside of the *.ui.xml file in the java
> > code.
>
> > For instance, say I have aDockLayoutPanelwith a West widget and a
> > Center widget as follows:
> > {{{
> > <g:DockLayoutPanelunit='EM'>

> >     <g:west size='20'>
> >        <layouts:WestWidget ui:field='westWidget' />
> >     </g:west>
> >     <g:center>
> >       <layouts:CenterWidget ui:field='centerWidget' />
> >     </g:center>
> >   </g:DockLayoutPanel>}}}
>
> > Is it possible to dynamically change the width of the westWidget
> > somewhere in the associated java code, or can it only by modified in
> > the *.ui.xml file.
>
> > The problem is, I would like to be able to hide/show the westWidget
> > and have the centerWidget fill the remaining space dynamically when
> > the app is running,
> > but changing the width of westWidget in the java code has no effect on

> > the width of the West Pane of theDockLayoutPanelthat was hard-coded

[aris]

I'm having the same problem...

[Maurice Zeijen]

Hi,

I faced the same problem and I solved it by creating the following
utility class:

import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.user.client.ui.DockLayoutPanel;
import com.google.gwt.user.client.ui.Widget;

public class DockLayoutPanelUtils extends DockLayoutPanel {

private DockLayoutPanelUtils() {
super(Unit.PX);
}

public static double getWidgetSize(Widget widget) {
return ((LayoutData) widget.getLayoutData()).size;
}

public static void setWidgetSize(Widget widget, double size) {
((LayoutData) widget.getLayoutData()).size = size;
}

}

Because it extends the DockLayoutPanel it has access to the protected
LayoutData object. With that object you can change the size (width or
height depending on the widget) of the widget. So you need to provide
the widget that was set with the addNorth, addSouth, addWest or
addEast method or the widget that you defined in the uibinding xml
file between the north, south, west or east element.

Don't forget to execute the forceLayout() method on the
DockLayoutPanel after changing the size of a widget.

Regards,

Maurice