SkinnablePopUpContainer Is Visually Blocked by StageWebView in Flex

Question

For some unknown reason, my popup AlertMsg is visually blocked by the StageWebView:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="160" xmlns:local="*"
               creationComplete="application1_creationCompleteHandler(event)"
               backgroundColor="#112233">
    <fx:Script>
        <![CDATA[
            import mx.core.FlexGlobals;
            import mx.events.FlexEvent;

            public var webView:StageWebView = new StageWebView();

            public function StageWebViewExample():void
            {
                webView.stage = webContainer.stage;
//                webView.viewPort = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight );
                webView.viewPort = new Rectangle( 100, 100, 500, 500 );
            }

            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                webContainer.addEventListener(Event.ADDED_TO_STAGE, function(ee:Event):void {
                    StageWebViewExample();
                });
            }

            protected function btnTest_clickHandler(event:MouseEvent):void
            {
                webView.loadURL("http://www.example.com");
                new AlertMsg().open(FlexGlobals.topLevelApplication as DisplayObjectContainer, true);
            }

        ]]>
    </fx:Script>

    <fx:Declarations>
        <fx:Component className="AlertMsg">
            <s:SkinnablePopUpContainer x="70" y="300">
                <s:TitleWindow title="My Message" close="close()">
                    <s:VGroup horizontalAlign="center" paddingTop="8" paddingBottom="8" paddingLeft="8" paddingRight="8" gap="5" width="100%">
                        <s:Label text="My alert message text here..."/>
                        <s:Button label="OK" click="close()"/>
                    </s:VGroup>
                </s:TitleWindow>
            </s:SkinnablePopUpContainer>
        </fx:Component>
    </fx:Declarations>

    <s:Panel id="thePanel" title="Panel" backgroundColor="blue">
        <s:Button id="btnTest" label="Test"
                  click="btnTest_clickHandler(event)" />
        <s:BorderContainer id="webContainer" y="50" width="400" height="300" />
    </s:Panel>

</s:Application>

Any idea?

I'm pretty sure that Stage controls such as StageWebView or StageText are always displayed "above" everything in the Flash DisplayList; so what you're seeing is expected. I cannot find this in the Adobe Docs though. Some more info http://www.flashandmath.com/mobile/swv/ and a work around: http://stackoverflow.com/questions/13914551/put-something-on-top-of-the-stagewebview-with-flash-builder-4-6 — JeffryHouser, Jan 24 '13 at 01:21
But why, it does NOT make any sense. The workaround is really ...... — Peter Lee, Jan 24 '13 at 01:53
I do not know the tech details here. I've only worked with StageText. But, StageText (or StageWebView) are basically using the OS functionality. So, they aren't a part of the DisplayList; they exist separately from it. That is why it must reside on top. If it were on bottom; it'd be hidden. — JeffryHouser, Jan 24 '13 at 03:07

score 2 · Answer 1 · answered Jan 24 '13 at 06:09

2

I absolutly agree with @www.Flextras.com, there is no another workaround than substitute WebView by its snapshot. There is a ready solution http://www.judahfrangipane.com/blog/2011/01/16/stagewebview-uicomponent/

answered Jan 24 '13 at 06:09

Serge Him

936
6
8

SkinnablePopUpContainer Is Visually Blocked by StageWebView in Flex

1 Answers1