How to overcome the rigid forms layout ?

[juan.medin]

Hi,

So far the docs state that only table and absolute layouts are available. This is a bit limiting, since some typical layouts require a normal HTML flow and those two options make this really, really hard.

This post is to know if I'm missing something and this rigidness is just my lack of knowledge of the SmartGWT API or if it's real. If it's real, what are you doing to overcome it ?


Thanks in advance,
Juan

[Isomorphic]

Sounds like a misperception. What layout are you trying to achieve? Please be very, very specific.

[juan.medin]

Case 1.

You have a property list: every row has a label and a long text field. But in one of them you have a checkbox that, when active, shows in the same row two more date fields (to select a starting and an ending date).

So far, my approach was to create a form with 6 columns. For every row with a label + field I set the col span to 6. For the row with the checkbox and the two date fields I use the default col span. This renders the three components in the same row without problems.

The problem is esthetic: the checkbox and the two date fields should be really close to each other. To accomplish this you must set the width via setColWidths(). So far it works. But now imagine that you have not only one single row with this requirement: you might have rows with 2, 3 or 4 fields, each component with a different width. You want to keep the normal flow (just like when you add them in a normal HTML page)

Well, the setColWidths() is no longer useful to keep each row with a different number of components and the layout is becoming almost impossible.

Case 2:

You have a form and, within it, a subform that it's activated by a checkbox. So far it seems this is impossible with the normal DynamicForm table layout.

[Isomorphic]

Both cases most easily solved with CanvasItem, which allows any Canvas to be embedded within a form and shown/hidden like other form items.

[boardtc]

Similar to @juan.medin here is Case 3:

Dynamic form containing a TimeItem <myTimeItem> on the first row and 7 evenly spaced CheckboxItems on the second row. The width of the TimeItem throws of the spacing of the checkboxes, so I want the TimeItem to span the row and not be confined to the same column as a checkboxItem.

Taking on board the suggestion that CanvasItem could be used to solve this I tried inluding the first row with the TimeItem in a canvasItem:

        CanvasItem canvasItem = new CanvasItem();
        canvasItem.setEndRow(true);
        HLayout hlayout = new HLayout();
        canvasItem.setCanvas(hlayout);
        DynamicForm canvasItemForm = new DynamicForm();
        canvasItemForm.setFields(myTimeItem);
        hlayout.addMember(canvasItemForm);

I then added the CanvasItem and my CheckboxItems to the DynamicForm:

        myDynamicForm.setFields(canvasItem, checkbox1...checkbox7)

myTimeItem still fills out column 2. Also there is now an isc_OID_68 in (2,1) with the CheckboxItems starting on the next line.

[Isomorphic]

@boardtc See the Form Layout overview from SmartClient (same properties apply). You most likely want some combination of colSpan and startRow/endRow.

[boardtc]

Thanks. colSpan was what I was looking for.

        myDynamicForm = new DynamicForm();
        myDynamicForm.setNumCols(7);
        myDynamicForm.setTitleSuffix(""); // this removes colon in title
        myDynamicForm.setBorder("2px solid gray");
        myDynamicForm.setHeight(50);
        myDynamicForm.setWidth(400);

        myTimeItem= new TimeItem("Start time");
        myTimeItem.setWrapTitle(false);
        // start day checkboxeItems on new line
        myTimeItem.setEndRow(true);
        myTimeItem.setColSpan(7);
        ...
        // for each checkboxItem
        myCheckbox1.setAttribute("labelAsTitle", true);
        myCheckbox1.setTitleOrientation(TitleOrientation.TOP);
        // set to 1 as otherwise when selected the focus rectangle is large
        myCheckbox1.setWidth(1);
        ...
        myDynamicForm.setFields(myTimeItem, myCheckbox1...myCheckbox7)

My checkboxItems are still not spaced evenly, see screenshot attachment
How can I bring them together?

[Isomorphic]

See setColWidths(), but bear in mind, if it's difficult to make two or more rows of FormItems fit into a common set of columns, just make two forms and combine them with a ValuesManager.

[boardtc]

Phew! The layers involved are a little nuts. How can I then add ValuesManager to my SectionStackSection then? The SectionStackSection.addItem needs a canvas.

[Isomorphic]

@boardtc See the docs for ValuesManager. It's a logical component, not a visual component, so it doesn't add another layer, it simplifies things by allowing you to separate layout concerns from the logical dataset being manipulated.

[boardtc]

Ok, thanks for the clarification. The form in the screenshot above I want to have in the 2nd column (well counting labels, 3rd & 4th columns) of a form, where it can be enabled when another checkbox is clicked. I've been trying to figure out how to embed a DynamicForm within a DynamicForm - can it be done?

Also, I want it to appear under a CheckBoxItem in column 3, i.e with column 1 & 2 empty, passing null to setFields caused an issue, any way to do this?

[Isomorphic]

While you can embed one form in another via CanvasItem, you probably just want to place two forms in a VStack and use show()/hide() to hide one conditionally.

[boardtc]

See setColWidths(), but bear in mind, if it's difficult to make two or more rows of FormItems fit into a common set of columns, just make two forms and combine them with a ValuesManager.

Have not figured how ValuesManager would help to organise the 2 forms. Some painting issues still but using 2 forms and setting the DynamicForm width to 1 seems to have done the trick...

While you can embed one form in another via CanvasItem, you probably just want to place two forms in a VStack and use show()/hide() to hide one conditionally.

Embedding with a CanvasItem works fine. For anyone interested:

        CanvasItem canvasItem = new CanvasItem();
        canvasItem.setTitle(""); // otherwise will see text isc_OID_## : 
        VLayout vlayout = new VLayout();
        canvasItem.setCanvas(vlayout);
        vlayout.addMember(dynamicForm1);
        vlayout.addMember(dynamicForm2);

Then just add canvasItem to the DynamicForm in question. Embedding in the 3rd/4th column is another matter. Adding a dummy to take up columns 1 & 2, e.g. TextItem with setVisible(false) has not worked for me as it does not seem to occupy a cell once it is invisible. I was able to add a canvasItem to take up 1 & 2:

        CanvasItem dummyCanvasItem = new CanvasItem();
        dummyCanvasItem.setTitle("");  
        VLayout vlayout = new VLayout();
        dummyCanvasItem.setCanvas(vlayout);
        vlayout.addMember(new DynamicForm());

This works ok but curious since you mention it, if there is a way for the VStack solution to address this issue of embedding in the 3rd/4th column?

[Isomorphic]

There are SpacerItems for taking up columns in the Layout.

Once again, ValuesManagers are not visible widgets and do not help with layout directly. What they allow you to do is split a given record that you are editing across as many different forms as is necessary to accomplish your layout, yet still treat the record as a single entity for loading and saving data. See the docs.

In general, could you please spend a little longer with the docs before asking more questions?

[boardtc]

Thanks for the SpacerItem tip.

One hopes that one can post here having tried to make sense of the api & showcase.