How to call a mxml component from another mxml component in flex-edited

Question

I need to call a component named "defectTracker.mxml" by clicking a link in another mxml component called "reviewComponent.mxml". How do I achieve that?

This is my reviewComponent.mxml code:

 <?xml version="1.0" encoding="utf-8"?> 
 <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" 
          width="100%" height="100%" 
          horizontalScrollPolicy="off" verticalScrollPolicy="off">

 <mx:Script>
 <![CDATA[


   private function defectTrackerLink(event:Event):void{
                 //call defectTracker
        }
 ]]>
 </mx:Script>

 <mx:LinkButton label="Delete" textDecoration="underline" textRollOverColor="blue"/>
 <mx:LinkButton label="Defect Tracker" textDecoration="underline" textRollOverColor="blue" click="defectTrackerLink(event)"/>

 </mx:VBox>

Some one guide me.

Main.mxml:

<mx:Script>
<![CDATA[
  private function subBtnBar(evt:ItemClickEvent):void{
switch (evt.label){
 case "IQA/UAT":
  this.bdyStack.selectedChild = screenIQA;
  break;
 case "EQA":
  Alert.show("Yet To Design");
  break;
 case "Review Tracker":
  this.bdyStack.selectedChild = reviewTracker;
  break;
    case "Defect Tracker":
  this.bdyStack.selectedChild = defectTracker;
  break;        
    default:
  trace ("Neither a or b was selected")
 } 
}
   ]]>
</mx:Script>
 <mx:ViewStack id="tabView" width="910" creationPolicy="all">
   <mx:ToggleButtonBar horizontalGap="0" id="subTabBar"
      itemClick="subBtnBar(event);" styleName="SubButtonBar"
      hideEffect="{dissolveOut}" showEffect="{dissolveIn}">

     <mx:dataProvider>
  <mx:String>IQA/UAT</mx:String>
  <mx:String>EQA</mx:String>
  <mx:String>Review Tracker</mx:String>
  <mx:String>Defect Tracker</mx:String>
  <mx:String>Defect Configuration</mx:String>
  <mx:String>Defect Export</mx:String>
  <mx:String>Defect Import</mx:String>
</mx:dataProvider>
    </mx:ToggleButtonBar>   
  </mx:ViewStack>

  <mx:ViewStack id="bdyStack" width="910" height="80%">  
        <components:ScrIQA id="screenIQA"
   hideEffect="{dissolveOut}" showEffect="{dissolveIn}"/>
        <components:scrWorkList id="screenWorkList"
   hideEffect="{dissolveOut}" showEffect="{dissolveIn}"/> 
        <components:DefectEntryVerification id="defectEntryVerification" 
   hideEffect="{dissolveOut}" showEffect="{dissolveIn}"
   width="100%" height="100%"/>
        <components:scrDefectResolutionAndCause id="defectResolutionnVerification"
   hideEffect="{dissolveOut}" showEffect="{dissolveIn}"
   width="100%" height="100%"/>
        <components:reviewTracker id="reviewTracker" 
   hideEffect="{dissolveOut}" showEffect="{dissolveIn}"
   width="100%" height="100%"/>
        <components:defectTracker id="defectTracker"
   hideEffect="{dissolveOut}" showEffect="{dissolveIn}"
   width="100%" height="100%"/>
   </mx:ViewStack>

The defect Tracker scren is already linked with the main mxml file. How to call the function in the reviewComponent file? reviewComponent consist of 2 link buttons and it is a column entry of the reviewTracker.mxml file's datagrid. So when I click the link in the review component, I want the defectTracker screen to be called. Its already a child of the main.mxml file.

I tried creting an instance of the main file in the component, and changes the selected child to defect tracker, It shows an error saying:

Error #1009: Cannot access a property or method of a null object reference.

My modified reviewComponent.mxml code:

 <?xml version="1.0" encoding="utf-8"?> 
 <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" 
          width="100%" height="100%" 
          horizontalScrollPolicy="off" verticalScrollPolicy="off">

 <mx:Script>
 <![CDATA[


   private function defectTrackerLink(event:Event):void{
                 var main:Main=new Main();
                 main.bdyStack.selectedChild=main.defectTracker;            }
 ]]>
 </mx:Script>

 <mx:LinkButton label="Delete" textDecoration="underline" textRollOverColor="blue"/>
 <mx:LinkButton label="Defect Tracker" textDecoration="underline" textRollOverColor="blue" click="defectTrackerLink(event)"/>

 </mx:VBox>

Please some one guide me in this? Should I call the item click event function of the Toggle button Bar? If so how to do It?

Answer 1

By calling, do you mean adding it to the VBox?

var dTracker:DefectTracker = new DefectTracker();
addChild(dTracker);

Answer 2

Would calling is with a popup work?

 var dTracker:DefectTracker = new DefectTracker();
 PopUpManager.addPopUp(dTracker, this, true);