Canvas dynamical size?

[membersound]

Hi,

how can I size a Canvas dynamically? I have a DockLayoutPanel, and a Canvas inside the g:center element.
I use canvas.setSize("100%, 100%") to make it fill the whole center area.

BUT how can I setCoordinateSpaceHeight() and width? How do I know the size of the canvas inside the center element?

[Thomas Broyer]

Wrap it in a Composite implementing RequiresResize and do your resizing stuff in the onResize() method.

[membersound]

I alread though about extending ResizeComposite as a Wrapper for the canvas. But it gives me the following error:
java.lang.AssertionError: LayoutComposite requires that its wrapped widget implement RequiresResize


Else if I use:
 extends Composite implements RequiresResize {
    @Override
    public void onResize() {
        System.out.println("on resize");
    }
}

then nothing happens if I resize the browser. No sysout.


2nd problem: how do I know the correct setCoordinateSpaceHeight() that I have to set? Where can I get it from? I know Window.getClientHeight() but this would give me the whole window size. I just need the one for the canvas, or rather the size of the g:center area where the canvas should take 100% of the size...

Any ideas?

[Thomas Broyer]

getWidth() / getHeight() ?

Panels in a DockLayoutPanel (or any layout panel) are always resized to the "layer" dimensions, so you shouldn't even need the 100% CSS rules. The idea would be to get the "external dimensions" of the widget and apply them as the "coordinate-space dimensions" of the canvas.

[membersound]

OK so assuming I have a wrapper class for the canvas that is placed in the center element, I can get the size of the center-panel by:
this.getElement().getParentElement().getClientWidth();

I don't know if this is the proper way, but at least it works.


BUT again I could not get the RequiresResize to work.
What I succeeded is to attach a ResizeHandler to the whole browser window like:
Window.addResizeHandler(new ResizeHanlder() {...});

This works, but is this a good idea to attach something to the whole window? Should I be able to just attach a resize handler to the canvas element (or its wrapper)?

[Thomas Broyer]

On Friday, January 18, 2013 2:57:17 PM UTC+1, membersound wrote:

OK so assuming I have a wrapper class for the canvas that is placed in the center element, I can get the size of the center-panel by:
this.getElement().getParentElement().getClientWidth();

I don't know if this is the proper way, but at least it works.


BUT again I could not get the RequiresResize to work.

Can you share your code? (the whole widget hierarchy up to the RootLayoutPanel)

The Showcase sample uses DockLayoutPanel and it seems to Just Work™ (there's an inner DockLayoutPanel nested in the outer DockLayoutPanel, and it seems to correctly resize its inner layers)

[membersound]

Could you give me the link of your working example?

My layout looks like this (stripped down to the canvas concerning elements):

<g:SplitLayoutPanel>
 <g:center>
  <g:DockLayoutPanel>
   <g:center>
    <g:SplitLayoutPanel>
     <g:center>
      <g:DockLayoutPanel>
       <g:center>
        <c:Canvas>

[RyanZA]

Make sure that the actual container your uibinder is using is a RequiresResize. Usually you use a Composite for UiBinder - if that's the case, change it to a ResizeComposite

[ashwin....@gmail.com]

drop your canvas inside a ResizeLayoutPanel. This way onResize event you can adjust the width and height of the canvas. 

<g:SplitLayoutPanel>
 <g:center>
  <g:DockLayoutPanel>
   <g:center>
    <g:SplitLayoutPanel>
     <g:center>
      <g:DockLayoutPanel>
       <g:center>

                <g:ResizeLayoutPanel>
         <c:Canvas>

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/YwZgwcpJb1YJ.

To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

[membersound]

Horray, ResizeLayoutPanel did the trick, thanks!