CanvasItem resizing

[mathias]

13.0d. Hi, i'm trying to update some old code, and i'm having a hard time resizing canvasitems.

i am playing around with a standard canvas where i just added a VLayout().
I have set a border around the VLayout, and it's much smaller than the cell. I want the layout to always take up the entire CanvasItem contents, whatever it is sized to.

However, i have overridden redraw, setwidth, setheight and they never gets called.
There is no "resizehandler" or listener of any kind that i can see.
I checked the showcase, but there's only one example and there the size is hardcoded.
I tried calling "getWidth" in the constructor of the canvasitem, but size and width is -1.

Maybe i missed something obvious, but what can i do to make the canvasitem dynamically resize its canvas so that it takes up all the size of its parent formitem?

Pointers appreciated.

[Isomorphic]

Form widths and heights are based on settings on the form (see Form Layout overview). You can overflow those sizes and the form’s widths and heights will adapt.

If this doesn’t solve your use case, please be very specific about what you are trying to do, from the end user’s perspective.

[mathias]

OK, here goes.

Code in the end.

In the example, i have a formitem with colspans and rowspans. It has a textarea and a canvasitem. I want the area and the canvasitem to take up the same size, based on what their respective col/rowspans are.

However, if i don't set any sizes in the canvasitem, it gets some default width/height (which is canvasitem default values i suppose).
The width and height in the canvasitem is as i mentioned -1.



So, i made a version where i send in the width and height from the textarea as you can see. This kind of works, but not exactly. There seems to be some additional padding for the textarea that gets applied somewhere after, since it is a couple of pixels shorter.



So, what i would like is for my canvasitem to behave as the textareaitem, same widths/heights, and expand depending on the row/colspan. Also the padding that i can see.

Hope i make sense :)

public void onModuleLoad() {

DynamicForm form = new DynamicForm();
form.setTitleOrientation(TOP);
form.setCellBorder(1);
form.setCanEdit(false);
form.setCellPadding(2);
TextAreaItem dude = new TextAreaItem();
dude.setValue("Goes bowling");
dude.setColSpan(2);
dude.setRowSpan(2);

MyCanvasItem canvas = new MyCanvasItem(dude.getWidth(), dude.getHeight());
canvas.setRowSpan(2);
canvas.setColSpan(2);
form.setItems(dude, canvas);
RootPanel.get().add(form);
canvas.redraw();
}

private class MyCanvasItem extends CanvasItem{
public MyCanvasItem(int width, int height) {
super();
setShowTitle(false);
setAlign(CENTER);
VLayout canvasLayout = new VLayout();
canvasLayout.setBackgroundColor("blue");
canvasLayout.setBorder("1px solid red");
canvasLayout.setWidth(width);
canvasLayout.setHeight(height);

setCanvas(canvasLayout);
}
}
}

[Isomorphic]

The easiest way to achieve what you're after is to set the width of both the TextArea and the CanvasItem to "*" [fill the available space within the form], then size the dynamicForm as desired.

For example:

public class CanvasItemResizing implements EntryPoint {

 @Override
 public void onModuleLoad() {

  DynamicForm form = new DynamicForm();
  form.setTitleOrientation(TitleOrientation.TOP);
  form.setCellBorder(1);
  form.setCanEdit(false);
  form.setCellPadding(2);

  form.setWidth(300);

  TextAreaItem dude = new TextAreaItem();
  dude.setShowTitle(false);
  dude.setValue("Goes bowling");
  dude.setColSpan(2);
  //dude.setRowSpan(2);
  dude.setWidth("*");

  MyCanvasItem canvas = new MyCanvasItem();
  //canvas.setRowSpan(2);
  canvas.setColSpan(2);
  canvas.setWidth("*");
  form.setItems(dude, canvas);

  form.draw();

 }


 private class MyCanvasItem extends CanvasItem{
  public MyCanvasItem() {
  super();
  setShowTitle(false);
  setAlign(Alignment.CENTER);
  VLayout canvasLayout = new VLayout();
  canvasLayout.setBackgroundColor("blue");
  canvasLayout.setBorder("1px solid red");

  setCanvas(canvasLayout);
 }
}

}

The Canvas embedded in the CanvasItem will be sized to fit the canvasItem by default so you shoudn't need to apply a size to the canvas itself.

Let us know if this doesn't make things clear

Thanks
Isomorphic Software

[mathias]

Hi, thanks yes that made the example above work, when there's only two items in the form. However, the princess is in another castle:

I have 2 use cases with the above form i cannot get to work 100%:

1. i want 3 columns with textitems to the left, a 2-column textarea to the right, and below a 3-column canvasitem.
This is accomplished by regular col/rowspans. I want the form to take up the entire width of the parent layout.

2. I want a vertical scrollbar if the browser is too small to fit the column.
This is accomplished by putting the form in a layout and setting overflow AUTO on the layout.

I have the testcase code pasted below as usual for your enjoyment.

This is the current layout i have:


My problem as displayed in the screenshot above is that the form expands horizontally beyond the width of the encompassing layout. Also the canvasitem width does not take up the entire row. It seems this is because i don't set width("*") on the textitems, since if i add those, the form fits as you can see below:



, but then then i get other problems...

I am currently stuck between a rock and a hard place, because:

--> if i remove the overflow AUTO, the form fits inside the layout as i want, but then i don't get the vertical scrollbars if the height is too small to fit the form.

--> if i set width("*") on every single formitem, it also fits inside the layout, but then the textitems gets much too narrow.


I have read up a bit, and apparently there's some "overflow-x" you can set so that AUTO only gets applied vertically?

I there a way for me to accomplish what i want in points 1 and 2 above? Pointers much appreciated.


Code:

@Override
public void onModuleLoad() {

HLayout hLayout = new HLayout();
hLayout.setWidth(600);
//hLayout.setOverflow(Overflow.AUTO);
hLayout.setHeight100();
hLayout.setBorder("1px solid red");

DynamicForm form = new DynamicForm();
form.setTitleOrientation(TitleOrientation.TOP);
form.setWidth100();
form.setCellBorder(1);
form.setTitleSuffix(null);
form.setBorder("1px solid green");
form.setCanEdit(false);
form.setCellPadding(10);
form.setNumCols(3);

TextItem royBatty = new TextItem();
royBatty.setWidth(200);
//royBatty.setWidth("*");

TextItem deckard = new TextItem();
deckard.setWidth(200);
//deckard.setWidth("*");


TextAreaItem dude = new TextAreaItem();
dude.setShowTitle(false);
dude.setValue("Goes bowling");
dude.setColSpan(2);
dude.setRowSpan(2);
dude.setWidth("*");

MyCanvasItem canvas = new MyCanvasItem();
form.setItems(royBatty, dude, deckard, canvas);

hLayout.addMember(form);
hLayout.draw();
}

private class MyCanvasItem extends CanvasItem {
public MyCanvasItem() {
super();
setShowTitle(false);
setAlign(Alignment.CENTER);
VLayout canvasLayout = new VLayout();
canvasLayout.setBackgroundColor("blue");
canvasLayout.setBorder("1px solid red");
setColSpan(4);
setRowSpan(2);
setWidth("*");
setCanvas(canvasLayout);
}
}
}