Question

Consider the following code

<fx:Script source="Script.as" />
......................
<s:Group>
    <s:layout>
        <s:HorizontalLayout/>
    </s:layout>
    <s:Spacer width="10" />
    <s:Button label="1" click="doSomething()"/>
    <s:Button label="2" click="holder.getCanvas().testDraw()"/>
    <s:Button label="3" click="doSomething()"/>
</s:Group>
<s:Scroller id="canvasGroup" width="650" height="500">
    <s:Group>
        <local:CanvasHolder id="canvas" />
    </s:Group>
</s:Scroller>

I want to move buttons in a separate module (let’s call it Toolbar.mxml). Thus I’ll need to move <fx:Script source="Script.as" /> (in Script.as I use canvas as well). Here’s my questions:

1. How can I see canvas var in Toolbar.mxml (and can I)?
2. Is it possible somehow to pu <fx:Script source="Script.as" /> so that it could be seen from Toolbar.mxml.

Answer 1

1. You won’t be able to automatically “see” canvas in Toolbar.mxml. I would recommend using Flex’s Event architecture to access it.

   //Extend Event class to hold any data that must be passed
   //from Toolbar -> canvas
   public class CustomEvent extends Event
   {
       public static const CUSTOM_EVENT:String = "CustomEventTypeString";
       public var mImportantInfo:String = "";
   
       public function CustomEvent();
       {
           super(CUSTOM_EVENT);
       }
   
       override public function clone():Event
       {
           var evt:CustomEvent = new CustomEvent();
           evt.mImportantInfo = mImportantInfo;
           return evt;
       }
   }
   
   //in Script.as
   myToolbarID.addEventListener(CustomEvent.CUSTOM_EVENT,customEventHandler);
   ...
   protected function customEventHandler(var evt:CustomEvent)
   {
       canvas.myFunction(evt.mImportantInfo);
   }
   
   //in Toolbar.mxml
   var evt:CustomEvent = new CustomEvent();
   evt.mImportantInfo = "canvas needs me!";
   dispatchEvent(evt);
   

   Alternatively, you can pass the canvas object to the Toolbar directly.

   <local:Toolbar ... myCanvas="{canvas}" ... />
   
   //in Toolbar.mxml
   public var myCanvas:CanvasHolder;
   ...
   myCanvas.myFunction(...);
   

   Yes, the second option is much simpler, but the first option is often useful when the components that need to talk aren’t easy to pass to each other.

2. You can put <fx:Script source="Script.as" /> in Toolbar.mxml, if that’s what you need. If you need to call functions in the scope of the parent, I would recommend using the Event architecture again, as opposed to some kind of parent... or Application.application... call.