7 Replies Latest reply on Feb 24, 2010 11:46 PM by RoBbertDs1

    Split code from mxml

    RoBbertDs1

      Hi there

       

      I'm doing a school project in which I have to build a component that have multiple buttons on it like this on :

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
           toolTip="Blabla" width="230" height="200">
                <mx:Button id="buttonZoomIn" icon="@Embed(source='../Assets/Images/i_zoomin.png')" width="60" fillAlphas="[0.0, 0.0, 0.0, 0.0]" toolTip="Zoom in"  left="10" top="10" height="60"/>
                <mx:Button id="buttonZoomOut" right="10" icon="@Embed(source='../Assets/Images/i_zoomout.png')" width="60" fillAlphas="[0.0, 0.0, 0.0, 0.0]" fontWeight="bold" cornerRadius="4" alpha="1.0" fillColors="[#A6C1FA, #A6C1FA, #A6C1FA, #A6C1FA]" toolTip="Zoom out" top="10" height="60"/>
                <mx:Button label="Reset" id="buttonResetMap" toolTip="Reset map to original state" bottom="30" left="10" width="60" height="20"/>     
      </mx:Canvas>
      
       
      

        • 1. Re: Split code from mxml
          Bogdan Manate Level 2

          Hi Robert,

           

          I think I don't understant the problem... What you really want to do ?

          • 2. Re: Split code from mxml
            RoBbertDs1 Level 1

            Text wasn't done yet

             

            Correct text (could not edit the text for some reason)

             

            Hi there

             

            I'm doing a school project in which I have to build a component that have multiple buttons on it like this on :

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
                 toolTip="Blabla" width="230" height="200">
                      <mx:Button id="buttonZoomIn"  width="60"  toolTip="Zoom in"  left="10" top="10" height="60"/>
                      <mx:Button id="buttonZoomOut" right="10"  width="60" height="60"/>
                      <mx:Button label="Reset" id="buttonResetMap" toolTip="Reset map to original state"" width="60" height="20"/>     
            </mx:Canvas>
            
             
            

             

            They want us to separate the code from the mxml file so I have a ComponentCode.as class

             

            the problem is here when I want to add an action listner to the button on the component it tells me that the button is null

             

             

            package Classes.ControlCode
            {
                 imports ...
                 
                 public class NavigationControlCode extends NavigationComponent
                 {
                      var's ...
                      
                      public function NavigationControlCode() 
                      {
                           //Event listeners for buttons 
                                ...
                                buttonZoomIn.addEventListener(MouseEvent.CLICK, zoomIn);
                                buttonZoomOut.addEventListener(MouseEvent.CLICK, zoomOut);
                                buttonResetMap.addEventListener(MouseEvent.CLICK, resetMap);
                                            ...
            
                      }
            
                            public function zoomIn():void
                           {
             ....
             ....
                      
            

             

             

            Does someone know a solution to this

            Or is there a better way to do this ?

             

             

            Thanks

            • 3. Re: Split code from mxml
              Bogdan Manate Level 2

              Your class doesn't know who those buttons are. I think a simple solution

              would be to create an instance of NavigationControlCode in your component

              and to pass a reference to your canvas to NavigationControlCode constructor.

               

              Navigation.mxml

              <?xml version="1.0" encoding="utf-8"?>

              <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"

                   xmlns:control="Classes.ControlCode.*"

                   toolTip="Blabla" width="230" height="200">

                        <mx:Button id="buttonZoomIn"  width="60"  toolTip="Zoom in"

              left="10" top="10" height="60"/>

                        <mx:Button id="buttonZoomOut" right="10"  width="60" height="60"/>

                        <mx:Button label="Reset" id="buttonResetMap" toolTip="Reset map to

              original state"" width="60" height="20"/>

                       <control:NavigationControlCode  target="" />

              </mx:Canvas>

               

               

               

               

               

              They want us to separate the code from the mxml file so I have a

              ComponentCode.as class

               

              the problem is here when I want to add an action listner to the button on

              the component it tells me that the button is null

               

               

              package Classes.ControlCode

              {

                   imports ...

               

                   public class NavigationControlCode extends NavigationComponent

                   {

                        var's ...

                        public var target :Navigation;

               

                        public function NavigationControlCode()

                        {

                             //Event listeners for buttons

                                  ...

                                  buttonZoomIn.addEventListener(MouseEvent.CLICK, zoomIn);

                                  buttonZoomOut.addEventListener(MouseEvent.CLICK,

              zoomOut);

                                  buttonResetMap.addEventListener(MouseEvent.CLICK,

              resetMap);

                                              ...

               

                        }

               

                              public function zoomIn():void

                             {

                             }

              }

               

              The code from above is not tested in Flex Builder, but I think it should

              work.

              1 person found this helpful
              • 4. Re: Split code from mxml
                RoBbertDs1 Level 1

                That didn't work

                 

                It gives an error on the target="" in the tag of the controlCode

                If I leave that out it still gives the same error that the buttons are null :s

                 

                So I don't know if there are other solutions to this problem, so now the fact is you have to add the NavigationControlCode  to your main page to see the Canvas with the buttons, and to have the code.

                Isn't it best that the component itself gets the information from NavigationControlCode  so that u can add the component to the main page instead (want to make libraries afterwards) ?

                • 6. Re: Split code from mxml
                  Bogdan Manate Level 2

                  I forgot to say that you must add the event listeners this way:

                   

                     public class NavigationControlCode extends NavigationComponent

                       {

                            var's ...

                            protected var _target :Navigation;

                   

                            public function set target( value:Navigation ):void

                            {

                                  target = value;

                                  //Event listeners for buttons

                                      ...

                                     target.buttonZoomIn.addEventListener(MouseEvent.CLICK,

                  zoomIn);

                                     target.buttonZoomOut.addEventListener(MouseEvent.CLICK,

                  zoomOut);

                                     target.buttonResetMap.addEventListener(MouseEvent.CLICK,

                  resetMap);

                            }

                            public function NavigationControlCode()

                            {

                   

                                                  ...

                   

                            }

                   

                                  public function zoomIn():void

                                 {

                                 }

                  }

                   

                   

                  And of course if you want a different approach you can read the articoles

                  wrote by Paul Williams.

                  1 person found this helpful
                  • 7. Re: Split code from mxml
                    RoBbertDs1 Level 1

                    Thanks everyone for helping

                     

                    The problem was solved by this : http://examples.pmwilliams.co.uk/adobeblog/presentationpatterns/codebehind/srcview/index.h tml

                    Thas is the code behind from the blogs about the code behind

                     

                    The problem was that you have to add :

                     

                    addEventListener( FlexEvent.CREATION_COMPLETE, creationCompleteHandler );

                     

                    and then at the function creationCompleteHandler you van add the handlers to the buttons.

                     

                     

                    Greetings