Return value instead of null - apache-flex

Question

I'm trying to call a function and pass a couple of properties to it however it's complain the object i'm attempting to target is null. Can anyone see where I am going wrong?
<mx:ViewStack id="vs" width="100%" height="100%" y="53">
<mx:Canvas id="view1" label="Community" width="100%" height="100%" backgroundColor="#ff9900" showEffect="WipeDown" hideEffect="WipeUp">
<mx:Label text="Community"/>
</mx:Canvas>
<mx:Canvas id="view2" label="Apps" width="100%" height="100%" backgroundColor="green">
<mx:HTML id="myHTML" width="100%" height="100%"
visible="true"
paintsDefaultBackground="true"
htmlRender="browser_completeHandler(event)"
locationChange="browser_locationChangeHandler(event)"
complete="browser_completeHandler(event)" />
</mx:Canvas>
</mx:ViewStack>
<local:DockBar id="dockbar" horizontalCenter="0" bottom="0" width="100%" height="100" minSize="32" maxSize="80">
<mx:Label visible="false" id="menuLabel" text="Menu" bottom="0" horizontalCenter="0" fontSize="24" color="#ffffff" alpha=".75" />
<mx:Image click="gotoApp('Google','http://www.google.com/')" source="{icon1}" buttonMode="true" useHandCursor="true" toolTip="Nice red" rollOver="turnOn(event)" rollOut="turnOff(event)" />
<mx:Image click="gotoApp('Yahoo','http://www.yahoo.com/')" source="{icon2}" buttonMode="true" useHandCursor="true" toolTip="Cool orange" rollOver="turnOn(event)" rollOut="turnOff(event)" />
</mx:HBox>
</local:DockBar>
and the function looks like this:
private function gotoApp(id:String,url:String):void {
vs.selectedChild=view4;
trace(myHTML);
}
It's returning null the first time I click an image however subsequent attempts traces a value (I assume because it is set then, just not when the app loads). Any ideas how to recognize it when the app loads?
Cheers

Answer 1

Well "view4" isn't a child of your viewstack, so its going to throw a null pointer when it tries to shift its children.
The reason it doesn't throw it the second time is probably due to something like
public function set selectedChild( child : Object ) : void {
if ( child == _selectedChild ) return;
...
}
That's a pretty common pattern in setters.

Answer 2

Assuming "view4" is a typo and you meant "view2", you can set the creationPolicy on your ViewStack to "all". By default, ViewStacks only instantiate the first view when created, setting the creationPolicy to "all" will force all of the views in the stack to get instantiated.

Answer 3

The ViewStack will, by default, create its children lazily in document-order, so only the first child which will be visible on load (i.e view1) will not have a null id in your function. Subsequent clicks on the ViewStack will create the other views (view2, view3 and view4) which is why the error will no longer occur.
So you need to modify your code to include a creationPolicy="all" to fix this:
<mx:ViewStack id="vs" creationPolicy="all" width="100%" height="100%" y="53">
<mx:Canvas id="view1" label="Community" width="100%" height="100%">
...
</mx:Canvas>
...
<mx:Canvas id="view4" label="Apps" width="100%" height="100%">
...
</mx:Canvas>
</mx:ViewStack>

Answer 4

Try setting by using the selectedIndex property instead:
vs.selectedIndex = 1;
This way you're not losing out on the benefits of the deferred instantiation.