1 Reply Latest reply on Oct 12, 2007 3:20 PM by Gregory Lafrance

    Using Parent Functions from Child

    Mark Forsberg Level 1
      I have created an application utilizing numerous components. Each component encompasses it's own functions. This has become an issue as the application has grown and I need to refresh components based on the click of a tab navigator.
      Being very new to flex 2 I am wondering how I could put all of the functions now in the components on my main.mxml and call them from the children (components)? I believe that this would allow me an easy way to refresh the different components utilizing a large init() function in main.mxml.
      Also, is it possible to call the init() functions of my components from the main.mxml. This would also allow me to refresh components. If it's possible I would like to see a simple example of the process.
      Thanks for the help. I appreciate it.

      Mark
        • 1. Re: Using Parent Functions from Child
          Gregory Lafrance Level 6
          This code may help:

          ----------------------- components/init/InitButton1.mxml---------------------
          <?xml version="1.0" encoding="utf-8"?>
          <mx:Button xmlns:mx=" http://www.adobe.com/2006/mxml" label="ButtonOne" creationComplete="init()">
          <mx:Script>
          <![CDATA[
          public function init():void {
          setStyle("fontWeight", "bold");
          setStyle("fontSize", "10");
          setStyle("color", "0xFFFFFF");
          }
          ]]>
          </mx:Script>
          </mx:Button>

          ----------------------- components/init/InitButton2.mxml---------------------
          <?xml version="1.0" encoding="utf-8"?>
          <mx:Button xmlns:mx=" http://www.adobe.com/2006/mxml" label="ButtonTwo" creationComplete="init()">
          <mx:Script>
          <![CDATA[
          public function init():void {
          setStyle("fontWeight", "bold");
          setStyle("fontSize", "5");
          setStyle("color", "0x000000");
          }
          ]]>
          </mx:Script>
          </mx:Button>

          ----------------------------- Test.mxml --------------------------

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns:comp="components.init.*"
          horizontalAlign="center" verticalAlign="middle">
          <mx:Script>
          <![CDATA[
          import mx.controls.Button;
          public function changeBtn1Styles(event:Event):void {
          if(event.target.id != "btn1" && event.target.id != "btn2"){
          btn1.setStyle("fontWeight", "normal");
          btn1.setStyle("fontSize", "30");
          }
          }
          public function changeBtn2Styles(event:Event):void {
          if(event.target.id != "btn1" && event.target.id != "btn2"){
          btn2.setStyle("fontWeight", "normal");
          btn2.setStyle("fontSize", "40");
          }
          }
          public function resetStyles(event:Event):void {
          var currBtn:Button = Button(event.currentTarget);

          if(currBtn.id == "btn1"){
          btn1.init();
          }
          if(currBtn.id == "btn2"){
          btn2.init();
          }
          }
          ]]>
          </mx:Script>

          <mx:TabNavigator>
          <mx:VBox label="Button One" width="300" height="150"
          backgroundColor="0x0000CC" horizontalAlign="center"
          verticalAlign="middle" click="changeBtn1Styles(event)">
          <comp:InitButton1 id="btn1" click="resetStyles(event)"/>
          </mx:VBox>
          <mx:VBox label="Button Two" width="300" height="150"
          backgroundColor="0xCC3333" horizontalAlign="center"
          verticalAlign="middle" click="changeBtn2Styles(event)">
          <comp:InitButton2 id="btn2" click="resetStyles(event)"/>
          </mx:VBox>
          </mx:TabNavigator>
          </mx:Application>