Accessing the StageWebView object

Recently, for one of my articles on StageWebView, a reader has commented that he gets an error while calling a stage object through a preperationComplete event. I must say that while preparing the article, I never thought about that kind of a scenario. This blog entry is to explain how to sort this issue out.
This was the example that I provided:

==
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*" creationComplete="init()">
 <fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
 </fx:Declarations>
<fx:Script>
 <![CDATA[
  import flash.geom.Rectangle;
  import flash.media.StageWebView;
  import flash.net.*;
  import flash.net.URLRequest;
  public var webView:StageWebView = new StageWebView();
  public function init():void
  {
   webView.stage = this.stage;
   webView.viewPort = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight );
   webView.loadURL("http://www.bbc.com");
  }
 ]]>
</fx:Script>  

</s:WindowedApplication>

===
Compiling the code generates the following error: “Cannot access a property or method of a null object reference.” When a creationComplete event fires, the stage is still null. It is not initialized yet. The stage property acquires a value only after the display object has been added to the stage’s display list. Here, we don’t have any display object added to the stage. If you are accessing the function through another component, say a button, you don’t find this issue.

One solution is to wait for the addedToStage event. This event gets fired whenever the stage is initialized and obtains a value. The issue I explained above has nothing to do with the StageWebView api. See the code below. Using the creationComplete event, I called in the init() function which listens for the addedToStage event. After it’s fired, the target function accesses the stage object.

The following code works without any issues:

==
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*" creationComplete="init()">
 <fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
 </fx:Declarations>
<fx:Script>
 <![CDATA[
  import flash.geom.Rectangle;
  import flash.media.StageWebView;
  import flash.net.*;
  import flash.net.URLRequest;
  public var webView:StageWebView = new StageWebView();
  public function init():void
  {
   this.addEventListener(Event.ADDED_TO_STAGE , handleLoad );
  }
  public function handleLoad(e:Event):void
  {
   webView.stage = this.stage;
   webView.viewPort = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight );
   webView.loadURL("http://www.bbc.com");
  }
 ]]>
</fx:Script>  

</s:WindowedApplication>
==

5 Responses to Accessing the StageWebView object

  1. danema says:

    Hi,

    Can you show us how you can use StageWebView to display streaming video from a FMS 3.5 in h264 so it will work with Flex Mobile for iOS?

    Thanks in advance,

    David

  2. venkatnarayan b says:

    Thank you!

  3. sbhaskar says:

    @David: StageWebView is just like a browser object. Where are you rendering the FMS videos? If you can render them on an html page, you should be able to call the same on a StageWebView. And, a phone with Flash Player should be able to render the same.

    @ venkatnarayan b: Welcome!!

  4. raj says:

    Hi,
    Im using StageWebView to display a webpage on my Android Application…..Can any one please help me , how to change the Default WHITE Background color of the StageWebView….

    Thanks,
    Rajkumar

    • sbhaskar says:

      raj, What you meant by the default white background color? What object you got on top of StageWebView?