2 Replies Latest reply on Jul 25, 2008 11:57 AM by ntsiii

    Dynamic component loading problem

    charithao Level 1
      Hi,

      I want to load an MXML component dynamically to an appilication. The MXML component is in a diffrent flex project.
      The component contains a flex color picker. I could load the component using a loader and instantiate it. When I add an instance of the component to a HBox skin of the color picker is not displayed and I get below error when I click on it.

      TypeError: Error #1009: Cannot access a property or method of a null object reference.
      at mx.controls::Button/mouseDownHandler()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\ controls\Button.as:2740]


      ==================================================================================
      This is the code of the MXML component
      ==================================================================================

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml" width="50" height="50">


      <mx:ColorPicker width="100%" height="100%">

      </mx:ColorPicker>
      </mx:Canvas>


      ===================================================================================
      This is the code of main application
      ===================================================================================

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onCreation()">

      <mx:Script>
      <![CDATA[
      import mx.controls.Alert;

      private var loadedClass:Class;

      [Bindable]
      private var componentsList:Array= [{label:"Color Picker", data:"ColPick"}
      ];


      private function onCreation():void
      {

      }

      private function loadComponent():void
      {
      var loader:Loader = new Loader();
      loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onLoadComplete);
      loader.contentLoaderInfo.addEventListener(SecurityErrorEvent.SECURITY_ERROR,onLoadError);
      loader.load(new URLRequest("comp/"+txtClass.selectedItem.data+".swf"));
      }

      private function onLoadComplete(event:Event):void
      {
      Alert.show("Loading Complete");
      var ldr:LoaderInfo = (event.target as LoaderInfo);
      ldr.removeEventListener(Event.COMPLETE,onLoadComplete);
      ldr.removeEventListener(SecurityErrorEvent.SECURITY_ERROR,onLoadError);
      loadedClass = ldr.applicationDomain.getDefinition(txtClass.selectedItem.data) as Class;
      }

      private function onCreateInstance():void
      {
      var a = new loadedClass();
      vbxContainer.addChild(a);
      a.validateNow();
      }

      private function onLoadError(event:SecurityErrorEvent):void
      {
      Alert.show("Error loading");
      }


      ]]>
      </mx:Script>

      <mx:VBox x="10" y="10" width="100%" height="100%">
      <mx:HBox width="100%" height="10%">
      <mx:ComboBox dataProvider="{componentsList}" id="txtClass"/>
      <mx:Button label="Load Component" id="cmdLoad" click="loadComponent()"/>
      <mx:Button label="Create Instance" click="onCreateInstance()"/>
      </mx:HBox>
      <mx:HBox width="100%" height="100%" id="vbxContainer">
      </mx:HBox>
      </mx:VBox>

      </mx:Application>


      Am I making any mistake here? How do I get this working. I tried to use modules but it couldn't be used as modules couldn't be instantiated.

      Tannx.
        • 1. Re: Dynamic component loading problem
          ntsiii Level 3
          Loader, and SWFLoader, are meant to work with compiled SWF's, essentially entire applications.

          Your component is only that, a component, and never becomes a swf. Only Application and Module asre valid tags for an mxml file that is to become a free-standing swf.

          Components must be available at compile time, because they are compiled into the app(swf).

          So you need to choose.
          1. Compile the colorPicker component into the app as a component. You will need to add a path to it in your Flex Project properties.

          2. Make the color picker a full application by changing the Canvas to Application. Compile it, and place the swf in a location accessible by url.

          Tracy

          • 2. Re: Dynamic component loading problem
            ntsiii Level 3
            And sorry, in #2, add "then load that swf using SWFLoader".

            You should use SWFLoader instead of Loader unless you know why not.

            Tracy