When used in tab navigator, removal of sub-tabs confuses show/hide process

nicoulaj commented 13 years ago

Originally filed by dealingwith on 2008-12-08T17:53:29

What steps will reproduce the problem?

Use flex-iframe w/in tab navigator or super tab navigator (from flexlib)
Create mechanism for removal of tabs (default feature in super tab navigator or just create a button that does something like tab.removeChildAt(tab.selectedIndex) where "tab" is the standard tab navigator)
Remove any-but-rightmost-tab

What is the expected output? What do you see instead? Expected behavior would be showing of the iframe child of the tab-that- becomes-visible-upon-subtab-removal. Unfortunately, the event stack (if that is even the right term for it) that controls which (actual) iframe in the browser is visible or not gets confused. Whichever iframe becomes visible after the subtab removal is still hidden, and clicking that tab still shows/hides the "old" tab's iframe div.

I was hoping after I implemented the div/iframe removal code offered on this list, that it might help this problem, but the problem persists even after the div is not even in the page to show/hide.

I haven't figured out how the JS maintains the list of available iframe divs to show/hide, it's all generated at runtime and/or abstracted. If someone can provide a little bit more info that might lead me in the right direction, I could give this a better look. It's a bit of a problem for something I'm trying to ship soon.

What version of the product are you using? On what operating system? flex-iframe 1.3.2 flex builder 3 windows any browser (testing mostly in FF, but confirmed in IE6 & 7 and Chrome)

nicoulaj commented 13 years ago

Updated by dealingwith on 2008-12-08T18:56:19

Just one more piece of information: changing the tab order (a feature of the super tab navigator) also breaks the iframe show/hide stuff--the tabs' frame remains the same depending on index, i.e. if I move tab 2 to the left of frame 1, its frame becomes frame 1's, and vice versa. This is less of a deal breaker but it would still be nice to enable this feature.

nicoulaj commented 13 years ago

Updated by dealingwith on 2008-12-16T22:52:03

More info:

When making sure to use the "dispose" code from Issue #1, if the IFrame control is a direct child of the tabnavigator or supertabnavigator controls, removing any child tab is not an issue. (Moving tabs in the subertabnavigator is still a problem, just not as big a problem for me.)

My problem is my IFrame controls are inside Modules that are the direct children of the tabnavigator.

In the test that worked (IFrame as direct child of tab navigator), the "dispose" code was done on the Removed event of the IFrame control. In my implementation I have tried the same on my IFrame and the event doesn't seem to fire (the actual iframe is never removed), and on the Module's RemovedFromStage event, which does remove the actual iframe successfully, but the showing/hiding bit still gets confused and attempts to show/hide iframes that are no longer there.

I'm going to continue to dig, but any help or pointers will be greatly appreciated!

nicoulaj commented 13 years ago

Updated by dealingwith on 2009-01-07T23:25:15

I've tried forcing the current tab to always do "iframe = visible" whenever a tab is removed or clicked on. It works great the first time, for example: Tab1, Tab2, Tab3; close Tab2; Tab3 appears. But then: click Tab1; click Tab3; Tab3's corresponding div remains hidden.

I'm assuming that the javascript is trying to show Tab2's div. It no longer exists since I've implemented the div/iframe removal suggested in Issue #1.

I'm also assuming the problem lies in the javascript, assuming it maintains its own hash of the divs/iframes.

I'm updating this issue to #1) continue to try and get some feedback on it, anything might help; and #2) to suggest we create a branch that moves the javascript back into its own file. The Flex-generated javascript is too difficult to debug -- I've already moved some back out into an external javascript file, as well as added some to the same -- and I suspect anyone who is capable of installing and using this component as it stands is also capable of installing one more javascript file. I just don't see the cost/benefit of having it all in Flex. Since the "Flex javascript" only adds the functions-in-question if they do not exist, those bits could even stay in the control. It looks like I'm going to end up doing this anyway, so I could even offer up the javascript separate from a branch.

nicoulaj commented 13 years ago

Updated by dealingwith on 2009-01-12T18:04:36

Ok I've sorted my problem here by forcing the "current" tab visible=true. It was just finding the right event(s).

tabClose="callLater(reshowTab);"
change="callLater(reshowTab);"

were the two events I used. "reshowTab" had all the foo for getting to my iframe and making it visible.

nicoulaj commented 13 years ago

Updated by hovhanne...@gmail.com on 2009-10-19T06:49:12

very very thanks. I also will spend a lot of time for fix this, but you saved me.

nicoulaj commented 13 years ago

Updated by blinkthi...@gmail.com on 2009-10-23T01:15:12

I'm facing the similar iframe issue with supertabnavigator. For example: Tab1, Tab2, Tab3; close Tab2; Tab3 appears with blank page and iframe is missing. Then create a new tab with flex object. The missing iframe is displayed on top. Please help...

nicoulaj commented 13 years ago

Updated by Julien.N...@gmail.com on 2009-11-09T19:15:42

Original ticket set status to Accepted (we converted to open)

nicoulaj commented 13 years ago

Updated by andrei.i...@gmail.com on 2009-12-30T11:51:36

Does anyone has some example on how to solve it?

I have SuperTabNavigator and menu which executes following code:

var child:IFrame = new IFrame(); child.percentWidth = 100; child.percentHeight = 100; child.label = lbl; // this is needed for not breaking js code - replace all spaces for id child.id = lbl.replace(/\s+/g, ''); child.source = link; //Alert.show("id = " + child.id); child.verticalScrollPolicy = "off";

...

tn.addChild(child); tn.selectedIndex = tn.numChildren - 1;

It's not working well in two scenarios:

Open IFrame tab 1, Flex tab 2 Close IFrame tab 1 See that IFrame tab 1 is still displayed, overlaying Flex tab2.

This is solved by listening on close event for tabnavigator

public function deleteIFrame(event:SuperTabEvent):void {

        var child:Object = tn.getChildAt(event.tabIndex);
        if (child is IFrame) {
            var iFrame:IFrame = child as IFrame;
            iFrame.visible = false;
            iFrame.removeIFrame();
        }

Scenario #2 Open iframe tab 1, iframe tab 2 Close ifRame tab1 See that iframe tab 2 become hidden, thus nothing is shown on the screen

nicoulaj commented 13 years ago

Updated by azul.rej...@gmail.com on 2010-06-22T06:35:24

Hi dealingwith can you write your code by force the "current" tab? (Complete). I have the same problen and I don't have the solution, thank you :)!!

nicoulaj commented 13 years ago

Updated by dealingwith on 2010-06-22T15:09:47

This was a long time ago for me and I haven't even worked in Flex since, let alone with the IFrame component! But I dug up the function in question:

private function reshowTab():void { // try/catch is for same problem as appResized. this is being fired right as the app loads, // but "change" is the only event I found that fires consistently enough when the tabs are clicked try { AbstractTab(ModuleLoader(tab.selectedChild).child).showFrame(); } catch (error:Error) {

}

...and here is the MXML for the SuperTabNavigator:

nicoulaj commented 13 years ago

Updated by dealingwith on 2010-06-22T15:14:39

Obviously AbstractTab was an internal interface. All you need to do is find, after the change or tabClose event, the currently selected tab's frame child and do showFrame() on it. Mine was inside a ModuleLoader which made the object traversal a little laborious.

nicoulaj commented 13 years ago

Updated by dealingwith on 2010-06-22T15:16:06

BTW I've stopped watching this issue, contact me directly if you need any further examples from my (OLD) code.

nicoulaj commented 13 years ago

Updated by azul.rej...@gmail.com on 2010-06-23T02:18:16

Thanks dealingwith ! I resolved the problem with your solution and I modified the handleChange method in IFrame class

this line: var result:Boolean=updateFrameVisibility(checkDisplay(target, newIndex)); for this: var result:Boolean=updateFrameVisibility(false);

I chage the visible property to "false" and "true" ( hack ) in change and tabClose event. This is my code:

        private function closeIFrame():void{
            var closeComp:Object = tabsCode.getChildAt( tabsCode.getItemIndex(tabsCode.selectedChild)+1 );              
            closeComp.iFrameCanvas.visible= false;
            closeComp.iFrameCanvas.visible= true;           
        }

        private function updateIFrame():void{
            var closeComp:Object = tabsCode.selectedChild;              
            closeComp.iFrameCanvas.visible= false;
            closeComp.iFrameCanvas.visible= true;
        }

Thank you very much, I'm waiting to the new version, kind regards!!

nicoulaj commented 13 years ago

Updated by jjgainer on 2010-11-15T21:04:52

Hi All,

I have been struggling with this problem as well, but instead of the SuperTabNavigator, I am using the TerrificTabBar which doesn't appear to have default events for tabClose and change that I can listen on. I did a bit of a hack myself to get it to finally work. I am new to Flex so I am not sure if this is the best approach, but here is what I did:

First, I added event listeners for tab close and tab change. All three of these functions are in my actionscript for the component which adds the tab bar.

/**

Adds event listeners to the ViewStack that TabBar controls for tab remove
and tab change */ private function creationCompleteHandler(event:Event):void { mainTabBar.setCloseableTab(0, false); mainTabBar.setCloseableTab(1, false); mainViewStack.addEventListener(ChildExistenceChangedEvent.CHILD_REMOVE, tabCloseHandler); mainViewStack.addEventListener(IndexChangedEvent.CHANGE, tabChangeHandler); }

/**

Gets a handle to the container that holds an IFrame whose display should
be set to invisible since its tab is being removed */ private function tabCloseHandler(event:ChildExistenceChangedEvent):void { var relatedObject:NavigatorContent = event.relatedObject as NavigatorContent; var childContainer:UpdateContentContainer = relatedObject.getElementAt(0) as UpdateContentContainer; childContainer.updateHorizContentContainer.hideIFrame(); }

/**

Whenever a tab is changed, send a message using Parsley that will cause all
IFrames to rebuild their container list. I do this, because whenever we
delete a tab, I want to make sure and rebuild the container list to be in line
with the current container hierarchy now that a tab has been removed */ private function tabChangeHandler(event:IndexChangedEvent):void {

var hideEvent:TabIndexChangeEvent = new TabIndexChangeEvent(); sendMessage(hideEvent); // uses Parsley messaging framework }

In the actionscript for the component which adds the IFrame which I am calling UpdateHorizContentContainer, I have the following actionscript:

/**

For our IFrame (documentPane), call the buildContainerList() method.
This method originally protected in the flex-iframe source code, but
was made public. */ [MessageHandler]public function handleTabIndexChangeEvent(event:TabIndexChangeEvent):void { this.documentPane.buildContainerList(); this.documentPane.setVisible(true); }

/**

Hide the IFrame when its tab is removed. */ public function hideIFrame():void { this.documentPane.visible = false; }

To get this to work, I had to change the flex-iframe source code so that the buildContainerList function is public instead of protected.

Like I said, I'm not sure if this is the best way to handle my problem, but it seems to be working.

flex-users / flex-iframe

When used in tab navigator, removal of sub-tabs confuses show/hide process #85