SectionItem and hide/show

[jasonzhang2002]

Hi, all
This tip may be useful to other.

When you hide an item which is managed by SectionItem, the item is showed up again when the SectionItem is closed and opened. I'd like to have the item visible state is restored to the original state before it is closed. I had a workaround by looking into JS code.

instead of using setVisible, hide or show. I used this code.
item.setAttribute("showIf", "true") or item.setAttribute("showIf", "false").

-jason

[mike_mac]

I think I have found a bug with SectionItems and auto sizing

I have a window which has multiple forms in a layout. I wanted to change this code quickly to add sections that I could collapse or expand. I found the easiest to achieve this was to add all of the items into a single SectionItem that I add to the form and I add all of the other items into this.

Because of the bug outlined above where setVisibilty on FormItems in SectionItems seems to have no effect, I added a fairly ugly method (outlined below) to dynamically add or remove items from a SectionItem when the visibility is changed.

So far so good ... this all works, except I want to add or remove items based on the value of another combo item when the window is drawn. So I added a change handler on this and when the user sets it, call my visibilty method. Except the show/hide methods seem to have no effect either.

However if I collapse and then expand the SectionItem then the updated items are present/removed. So I reckon markForRedraw on the effected form should do it for me. Except it doesn't ... all I get is the warning below and the layout the forms are wrapped in sizes to two rows (the window stays the same size).

Any help would be GREATLY appreciated ....

15:49:33.265 [ERROR] [main] 15:49:33.262:IBLR3:WARN:Log:TypeError: _43 is undefined
    [c]Canvas.applyTableResizePolicy(_1=>[object Array],  _2=>438,  _3=>20,  _4=>2,  _5=>[object Array]) @ sc/modules/ISC_Forms.js:45
    DynamicForm.getInnerHTML() @ sc/modules/ISC_Forms.js:482
    unnamed() @ :73
    unnamed([object GWTJavaObject], 1245635) @ hosted.html?main:56
    unnamed(undef) @ :34
    Canvas._getInnerHTML() @ sc/modules/ISC_Core.js:2046
    Canvas._updateParentHTML() @ sc/modules/ISC_Core.js:2181
    Canvas._updateHTML() @ sc/modules/ISC_Core.js:2170
    Canvas.redraw(false) @ sc/modules/ISC_Core.js:2164
    Class.invokeSuper(_1=>null,  _2=>"redraw") @ sc/modules/ISC_Core.js:284
    Class.Super(_1=>"redraw",  _2=>[object Arguments]) @ sc/modules/ISC_Core.js:276
    DynamicForm.redraw(false) @ sc/modules/ISC_Forms.js:435
    [c]Canvas.clearRedrawQueue() @ sc/modules/ISC_Core.js:3340
    [c]Class.fireCallback(_1=>{Obj},  _2=>undef,  _3=>[object Array],  _4=>{Obj},  _5=>true) @ sc/modules/ISC_Core.js:301
    Timer._fireTimeout("$ir525") @ sc/modules/ISC_Core.js:1279
    unnamed() @ sc/modules/ISC_Core.js:1274
    unnamed() @

public class DetailsPanel extends VLayout {
 	public DetailsPanel()
 	{
 	   super();
 	   this.valuesManager.setCrudEnum(CrudEnum.READ);
 	   this.setHeight100();
 	   this.setWidth100();
 	   this.setRedrawOnResize(true);
 	   this.layout.setRedrawOnResize(true);
 	   this.layout.setWidth100();
 	   this.layout.setHeight100();
 	   this.layout.setPadding(PADDING);
 	   this.layout.setMembersMargin(MARGIN);
 	   this.layout.setOverflow(Overflow.VISIBLE);
 	   this.setOverflow(Overflow.VISIBLE);
           this.setBackgroundColor(BACKGROUND_COLOR);
	}
 ....

    public static void setItemVisible(FormItem item, boolean visible)
    {
        List<String> listIds = null;
        SectionItem sectionItem = null;
        DynamicForm form = item.getForm();
        if(form != null)
        {
            sectionItem = (SectionItem) form.getItem("_"+form.getDataSource().getID());
            if(sectionItem != null)
            {
                String[] itemIds = sectionItem.getAttributeAsStringArray("itemIds");        
                listIds = new ArrayList<String>(Arrays.asList(itemIds));
            }
        }
        if(visible)
        {
            item.setVisible(true);
            //item.setAttribute("showIf", "true");
            if((listIds != null) && (!listIds.isEmpty()))
            {
                listIds.add(item.getName());
                GWT.log("Added to sectionItem "+listIds);
                sectionItem.setItemIds((String[]) listIds.toArray(new String[listIds.size()]));
            }
            else if(sectionItem != null)
            {                
                sectionItem.setItemIds(item.getName());
                sectionItem.setVisible(true);
            }
            if((form != null) && (form.isDrawn()))
                item.show();            
        }
        else
        {
            item.setVisible(false);      
            if(listIds != null)
            {
                int index = listIds.indexOf(item.getName());
                if(index > -1)
                {
                    listIds.remove(index);
                    GWT.log("Removed from sectionItem "+listIds);
                    if(listIds.isEmpty())
                    {
                        sectionItem.setVisible(false);
                        sectionItem.setItemIds("");
                    }
                    else
                        sectionItem.setItemIds((String[]) listIds.toArray(new String[listIds.size()]));
                }
            }
            //item.setAttribute("showIf", "false");
            if((form != null) && (form.isDrawn()))
                item.hide();                  
        }
    }

[Isomorphic]

Why take this approach instead of the much simpler approach of SectionStack?

[mike_mac]

Fair question I suppose ... probably because I was teased when I got something that worked very quickly with very little code, and we (others here) previously had issues with auto sizing and SectionStacks in windows. The code below worked perfectly. Its when I tried to dynamically show/hide items afterwards that all the problems started. Maybe a little tunnel vision after that :-)

    public SectionItem createSectionItem(DataSource ds, List<FormItem> items)
    {
        SectionItem section = new SectionItem();
        section.setName("_"+ds.getID());
        section.setWidth(FORM_ITEM_WIDTH);
        section.setWrapTitle(false);
        List<String> itemIds = new ArrayList<String>();
        for(FormItem item: items)
        {
            if(item.getVisible())
                itemIds.add(item.getName());
        }
        section.setSectionHeaderClass(SECTION_HEADER_CLASS);
        section.setItemIds(itemIds.toArray(new String[0]));
        items.add(0, section);
        return section;
    }

[mike_mac]

I had some time today and I re-implemented the above with a SectionStack instead of the "SectionItems in a form" solution I had but I still got the same exception (above).

So on a hunch I tried changing ...

        if(visible)
        {
            item.setVisible(true);
            if((form != null) && (form.isDrawn()))
                item.show();
        }

to

        if(visible)
        {
            if((form != null) && (form.isDrawn()))
                item.show();
            else
                item.setVisible(true);
        }

and it worked. It seem that changing the visibility on a drawn item and then calling markForRedraw() caused the autosizing to fail. Hope this helps the next person.

[zapryano]

setShowIfCondition works!