Floating FileItem bug in tabs

[Mitch B]

I have a tabbed pane using a FileItem widget in two form. Upon re-use of the tabbed display the FileItem looses its exact positioning and floats to the upper left of the DynamicForm. This bug functions exactly as a bug I reported earlier on the Floating Button Item, which was fixed in 2.5p Jan12th, 2012.
1. SmartClient Version: SC_SNAPSHOT-2012-02-23_v8.2p/Pro Deployment (built 2012-02-23)

2.FireFox 10.0.1

3. Sample code

        DataSource mediaDataSource = DataSource.get("FILE_DS");

        Canvas graphicsTabCanvas = n Canvas();
        graphicsTabCanvas.setHeight(200);
        graphicsTabCanvas.setWidth(500);
        graphicsTabCanvas.setIsGroup(true);
        graphicsTabCanvas.setGroupTitle("Client App");
        // Product Icon form
        ProductIconForm = n DynamicForm();
        ProductIconForm.setItemLayout(FormLayoutType.ABSOLUTE);
        ProductIconForm.setTop(0);
        ProductIconForm.setTitlidth(120);
        ProductIconForm.setWidth(500);
        ProductIconForm.setDataSource(mediaDataSource);
        ProductIconForm.setWrapItemTitles(false);
        ProductIconForm.setID(PAGE_ID + "FORM_ID");

        IconImage  =   n Img("https://PATH", 40, 40);
        IconImage.setTop(20);
        IconImage.setLeft(10);
        IconImage.setBorder("2");

        Label productIconLabel = n Label("Product Icon<br></br>40px x 40px");
        //productIconLabel.setDefaultValue("Product Icon");
        productIconLabel.setTop(70);
        productIconLabel.setLeft(10);

        ProductIconFileItem = n FileItem("BINARY_DATA","Product icon" );
        ProductIconFileItem.setOptionOperationId(PAGE_ID +  "OPERATION_ID");
        ProductIconFileItem.setTitle("Product icon");
        ProductIconFileItem.setShowTitle(false);
        //ProductIconFileItem.setAlign(Alignment.LEFT);
        ProductIconFileItem.setShowPickerIcon(false);
        ProductIconFileItem.setStartRow(true);
        ProductIconFileItem.setEndRow(true);
        ProductIconFileItem.setRedrawOnChange(true);

        ProductIconFileItem.setTop(110);
        ProductIconFileItem.setLeft(120);

        HiddenItem ProductIconMedType = n HiddenItem("FILETYPE");
        ProductIconMedType.setDefaultValue(FILETYPE.ICON.name());

        IconPKID = n HiddenItem("INDEX");
        //IconFileNameItem.setDefaultValue(FileType.ICON.name());

        ProductIconForm.setFields(eIconType, IconPKID, ProductIconFileItem);
        ProductIconForm.addChild(IconImage);
        ProductIconForm.addChild(productIconLabel);



        graphicsTabCanvas.addChild(ProductIconForm);


        ProductBodyForm = n DynamicForm();
        ProductBodyForm.setItemLayout(FormLayoutType.ABSOLUTE);
        ProductBodyForm.setTop(210);
        ProductBodyForm.setTitlidth(120);
        ProductBodyForm.setWidth(500);
        ProductBodyForm.setDataSource(mediaDataSource);
        ProductBodyForm.setWrapItemTitles(false);
        ProductBodyForm.setID(PAGE_ID + "_Editor_ArtForm_Body");

        BodyImage  =   n Img("https:path", 150, 184);
        BodyImage.setTop(20);
        BodyImage.setLeft(10);

        Label bodyGraphicsLabel = n Label("Box or Screen Shot<br><br>150px x 184px");
        //activationBodyArtBlurb.setDefaultValue("Activation body art");
        bodyGraphicsLabel.setTop(180);
        bodyGraphicsLabel.setLeft(10);
        bodyGraphicsLabel.setWidth(300);
        bodyGraphicsLabel.bringToFront();

        ProductBodyFileItem = n FileItem("BINARY_DATA", "Body art");
        ProductBodyFileItem.setTitle("Activation body art");
        ProductBodyFileItem.setOptionOperationId(PAGE_ID + "_BODYFORM");
        ProductBodyFileItem.setShowTitle(false);
        ProductBodyFileItem.setStartRow(true);
        ProductBodyFileItem.setEndRow(true);

        ProductBodyFileItem.setTop(210);
        ProductBodyFileItem.setLeft(120);
        ProductBodyFileItem.setValueIconLeftPadding(10);

        HiddenItem BodyGraphicsFileType = n HiddenItem("FileType");
        BodyGraphicsFileType.setDefaultValue(FileType.BODYIMAGE.name());

        BodyPKID = n HiddenItem("INDEX");

        ProductBodyForm.setFields(BodyPKID, BodyGraphicsFileType, ProductBodyFileItem);
        ProductBodyForm.addChild(bodyGraphicsLabel);
        ProductBodyForm.addChild(BodyImage);



 -----------------------TAB SET CREATION
 TabSet TabSet = n TabSet();
        TabSet.setTabBarPosition(Side.TOP);
        TabSet.setTabBarAlign(Side.LEFT);
        //TabSet.setHeight(500);
        TabSet.setDefaultHeight(450);
        //TabSet.setHeight100();
        TabSet.setID(pageBaseId + "_tabSet");

        int tabIterator = 0;

        for (String key : CanvasMap.keySet()) {
            Layout tabLayout = n VLayout();
            tabLayout.setMargin(20);
            tabLayout.setMembersMargin(15);
            tabLayout.addMember(CanvasMap.get(key));
            if (CanvasMap.get(key) instanceof DynamicForm) {
                ((DynamicForm) CanvasMap.get(key)).setWrapItemTitles(false);
            }

            Tab Tab = n Tab(key);
            Tab.setID(pageBaseId + "_tab" + tabIterator);
            Tab.setPane(tabLayout);

            TabSet.addTab(Tab);

            Layout buttonLayout = n HLayout();
            buttonLayout.setMembersMargin(10);
            buttonLayout.setHeight100();
            buttonLayout.setAlign(Alignment.LEFT);

            if (tabIterator > 0) {
                Button TabBackButton = n Button("Back");
                TabBackButton.setID(pageBaseId + "_tab" + tabIterator + "_BackButton");
                buttonLayout.addMember(TabBackButton);
                TabBackButton.addClickHandler(
                    n ClickHandler() {
                        @Override
                        public void onClick(ClickEvent event) {
                            TabSet tabSetRef = (
                                    (TabSet) ((Button) event.getSource()).getParentElement().getParentElement()
                                        .getParentElement().getParentElement()
                                );
                            int    tabNumber = tabSetRef.getSelectedTabNumber();
                            tabNumber--;
                            String nextTabId = tabSetRef.getSelectedTab().getID().replaceAll(
                                    "tab[0-9][0-9]*", "tab" + tabNumber
                                );
                            tabSetRef.selectTab(nextTabId);
                        }
                    }
                );
            } // end if

            if (tabIterator < (CanvasMap.size() - 1)) {
                Button TabNextButton = n Button("Next");
                TabNextButton.setID(pageBaseId + "_tab" + tabIterator + "_NextButton");
                buttonLayout.addMember(TabNextButton);
                TabNextButton.addClickHandler(
                    n ClickHandler() {
                        @Override
                        public void onClick(ClickEvent event) {
                            TabSet tabSetRef = (
                                    (TabSet) ((Button) event.getSource()).getParentElement().getParentElement()
                                        .getParentElement().getParentElement()
                                );
                            int    tabNumber = tabSetRef.getSelectedTabNumber();
                            tabNumber++;
                            String nextTabId = tabSetRef.getSelectedTab().getID().replaceAll(
                                    "tab[0-9][0-9]*", "tab" + tabNumber
                                );
                            tabSetRef.selectTab(nextTabId);
                        }
                    }
                );
            } // end if

            tabLayout.addMember(buttonLayout);

            Tab.setPane(tabLayout);
            tabIterator++;
        } // end for

        Body.addMember(TabSet);

[Isomorphic]

We've attempted to reproduce this issue with your code with no success.
The code needed a little tweaking to get running (Drop references to the dataSource, tweak some IDs and various bits of code that won't run quite as written, and of course tie the two snippets together). These tweaks may have obscured the issue for us of course.

Assuming there are no warnings etc that might indicate what's going wrong for you, if you could take these snippets and combine them into a (simple as possible) entry point class we can actually just drop into a project and run, we'll take another look.

[Mitch B]

I appreciate you taking the time to attempt to re-create the behavior. This issue needs more traction inside Isomorphic. I posted a report on this same type of behavior happening with ButtonItems on 12/20/2011: http://forums.smartclient.com/showthread.php?t=20192. The 1/12/2012 2.5p build resolved that particular issue. On top of the floating FileItem issue, I now have another co-working experiencing the same problem with floating widgets inside a tabbed display. Please, help us by looking into what fixed previous floating FormItems in tabs. I will speak to my manager about unfettered access to our code should you demand a demonstration before investigating the issue further.

[Isomorphic]

We already looked at the cause of the previous, similar issue and it did not appear to be problem here. The need step is that we need a minimal test case that actually reproduces the problem.

[hlevin]

In my case it affected an Image and a CanvasItem. Images that reset their position to 0,0 coordinates are actually within a ListGrid placed there by createRecordComponent(). As I was stepping through my code (too much to paste here), I narrowed it down to using TabSet.

!! It only happens on Firefox on Mac OSX, it works just fine on PC. !!

When page is first loaded, layout seems normal. Before I close the page (hide), if I click on a different tab or reset tab selection to any other, when I return (show) to the page and click on the tab with problems, some items alignment is out of wack.

I tried explicitly setting new coordinates of the CanvasItem when page is initialized before it's redesplayed to no avail. Only when I add something like ClickHandler to setLeft() and setTop() after the page is shown, the item can be set into place.