Flex IFrame Component not rendering outside viewable area - apache-flex

Question

Beginner Question:
I am using the IFrame Component for Flex in Flex 4. The code below works when it is put at the top of the scrolling area. However, if I put it where it below the viewable area it will not render. I am a complete beginner to Flex. The interesting thing is when I resize the window while the HBox is in view, the Iframe will load. But scrolling to it will not. Below is my code. I have made sure everything is visible=true but it seems like I need to add a listener or somehow trick it to think that the window has been resized to get it to render. Anyone with an idea how to fix this? Thanks!
<mx:HBox visible="true" backgroundColor="#cccccc" id="facebookhbox" width="100%" height="100" horizontalAlign="center" verticalAlign="middle" verticalGap="0" verticalScrollPolicy="off">
<mx:Canvas id="facebookcanvas" visible="true" x="0" y="0" width="650" height="80">
<flexiframe:IFrame visible="true" y="0" x="0" id="facebookIFrame" source="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.examplelink.com&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" width="450" height="80"/>
</mx:Canvas>
</mx:HBox>

Answer 1

No experience with the Flex IFrame here just FYI but in generic terms you can invalidate the size of the component or invalidate the display list then call validate now in order to force the LayoutManager to recalculate the sizes of the element and it's children (or simply draw in the case of invalidating the display list):
The difficult part I see here is figuring out when exactly you want that to happen (that is capturing some sort of event from the scrollbar). For test purposes you can just create a button and in it's click handler do the following:
facebookIFrame.invalidateSize();
facebookIFrame.invalidateDisplayList();
facebookIFrame.validateNow();
If this works out then you just need to find the appropriate event from the Scroller or Canvas that tells you when scrolling is occuring (at worst you could capture mouse down mark a flag then capture mouseMove and if the flag is set then run the code to invalidate/re-validate). Basically how the layout/drawing works is that the UIComponents have flags that let it know when it needs to recalculate the size of something or redraw it, this way everything isn't always redrawn only those components that require it. In this case it seems the FacebookIFrame isn't getting invalidated at some point when it should. Let me know if I can help anymore or if this doesn't work out.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
height="100%"
width="100%"
xmlns:code="http://code.google.com/p/flex-iframe/"
mouseDown="application1_mouseDownHandler(event)"
mouseUp="application1_mouseUpHandler(event)"
mouseMove="application1_mouseMoveHandler(event)">
<mx:Script>
<![CDATA[
var isMouseDown:Boolean;
protected function button1_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
facebookIFrame.invalidateSize();
facebookIFrame.invalidateDisplayList();
facebookIFrame.validateNow();
}
protected function application1_mouseDownHandler(event:MouseEvent):void
{
isMouseDown = true;
}
protected function application1_mouseUpHandler(event:MouseEvent):void
{
isMouseDown = false;
}
protected function application1_mouseMoveHandler(event:MouseEvent):void
{
if(isMouseDown)
{
facebookIFrame.invalidateSize();
facebookIFrame.invalidateDisplayList();
facebookIFrame.validateNow();
}
}
]]>
</mx:Script>
<mx:Spacer height="1000"/>
<mx:Button label="Test Invalidation"
click="button1_clickHandler(event)"/>
<mx:HBox visible="true" backgroundColor="#cccccc" id="facebookhbox" width="100%" height="80" horizontalAlign="center" verticalAlign="middle" verticalGap="0" verticalScrollPolicy="off">
<mx:Canvas id="facebookcanvas" visible="true" x="0" y="0" width="650" height="80">
<code:IFrame visible="true" y="0" x="0" id="facebookIFrame" source="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.examplelink.com&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" width="450" height="80"/>
</mx:Canvas>
</mx:HBox>
</mx:Application>
Updated to include a full application showing the example working, this is by no means a good way of doing things, this is due to a bug in the IFrame code that should be fixed (though I'm not sure how or where the bug exists something should be causing it to invalidate appropriately where it is not).
Shaun