Error in using "removechild"

Question

Below is my code, and the question is explained after it.

 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                    xmlns:cal="cal.*"
                    layout="absolute"
                    applicationComplete="init()"    


                xmlns:geometry="com.degrafa.geometry.*"
                xmlns:degrafa="com.degrafa.*"
                xmlns:paint="com.degrafa.paint.*"
                xmlns:containers="flexlib.containers.*"
                xmlns:flexlib_controls="flexlib.controls.*"
                xmlns:mdi_containers="flexlib.mdi.containers.*"
                xmlns:auto="com.hillelcoren.components.*" 
                xmlns:local="*"
                xmlns:components="CollapsibleAccordion.*"
                modalTransparency="0.8"
                modalTransparencyColor="0x000000"
                backgroundSize="100%">
<mx:Script>
        <![CDATA[
import c7.views.components.PhotoViewer.PhotoViewer;
            import c7.config.ServerConfig;
            import mx.core.Application;
            import mx.containers.*;

            import c7.models.GlobalModel;
private var pv_slideshow:PhotoViewer = null;   



    private function toggleFullScreen():void
                {
                    if(stage.displayState == StageDisplayState.NORMAL)
                    {                                                   
                        this.pv_slideshow = new PhotoViewer;
                        Application.application.addChild(this.pv_slideshow); //added as top-most component to application itself                    
                        //set new sizes & go full-screen
                        this.pv_slideshow.x = 0;
                        this.pv_slideshow.y = 0;          
                        this.pv_slideshow.width = stage.fullScreenWidth;
                        this.pv_slideshow.height = stage.fullScreenHeight;
                        try
                        {
                         stage.displayState = StageDisplayState.FULL_SCREEN;
                        }
                        catch(err:Error) 
                        {                    
                     Alert.show(err.toString());
                    }
                    stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenEventHandler, false, 0, true);    //intentionally weak referenced           
                    //refresh the display sizes & display list
                    invalidateSize();
                    invalidateDisplayList();                                                            
                }               
                /*else
                    stage.displayState = StageDisplayState.NORMAL;*/
            }

            private function fullScreenEventHandler(event:FullScreenEvent):void
            {
                if (event.fullScreen) //nothing to do in case when switching to full-screen
                    return;       
                //Alert.show(pv_slideshow.width.toString());
                //application.removeChild(this.pv_slideshow);      
                Application.application.removeChild(pv_slideshow);      //remove the full-screen container
                this.pv_slideshow = null;   //reset             
                //refresh the display sizes & display list
                invalidateSize();
                invalidateDisplayList();                
            }

The toggleFullScreen is fired on the click of a button... and it working absolutely fine. But the issue is in "exit" . When I click escape key fullScreenEventHandler is fired and it should remove the pv_slideshow.

This is where I get a null object reference error on the line:

Application.application.removeChild(pv_slideshow);      //remove the full-screen container

I have tried using this.pv_slideshow and other such things.

Plz help me figure it out. what am i doing wrong and how should I make it work.

This is exact error message I get:

TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at mx.core::Container/http://www.adobe.com/2006/flex/mx/internal::removingChild()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\Container.as:3315]
    at mx.core::Container/removeChild()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\Container.as:2263]
    at index_cloud/fullScreenEventHandler()[C:\development\flex_src\index_cloud.mxml:1661]

Answer 1

The intended architectural use of Application.application is not to use it as a uiComponent or displayObject, or whatever. If you're building a library project that is doing some calculations based on the application properties, or the application's systemManager, or you need access to the outter application from a loaded module, then you have good reason to use App.app.

You example is not one of those cases. Your best bet is to add your component to 'this' (as long as you're not going to use a "view" container), and do a this.removeChild. That should solve a good chunk of your issues.

Best of luck, Jeremy