6 Replies Latest reply on Jan 19, 2010 10:42 AM by Marc de kwant

    Events from custom components

    mw00

      Hi, I have set up a ViewStack component as seen below, what I would like to do is change the item on display when a button is pressed from within one of the custom canvases e.g. when PayAndLoadButton is pressed which is a child of MainProductCanvas i'd like to switch the ViewStack index to 1, the LoadScreen canvas.

       

          <mx:ViewStack id="productVs" x="0" y="0" selectedIndex="0">
         
              <customcanvases:MainProductCanvas/>
             
              <customcanvases:LoadScreen/>
         
          </mx:ViewStack>

       

      If I set up an actionscript function in the same file as the ViewStack above e.g...

       

          <mx:Script>
              <![CDATA[
                  public function changeStackIndex():void
                  {
                      productVs.selectedIndex = 1;
                  }
              ]]>
          </mx:Script>

       

      How do I refer to this function from within the child component?

      The child looks like this at the moment...

       

      <buttons:PayAndLoadButton x="650" y="632" id="payAndLoadButton" click="changeStackIndex()" />

       

      But I'm getting the error "Call to a possibly undefined method changeStackIndex", how do I refer to the parent script function?

       

      Another option is to place the function in a separate .as file which I could refer to using <mx:Script source="... tag but then how do I refer to the parent ViewStack id from within the .as file?

       

      TIA

       

      Mike.

        • 1. Re: Events from custom components
          Vanden_B Level 1

          What you can do is make a bindable variable in a Model for the selectedIndex and two constantes to use.

           

          public var productVsView:int = 0;

          public static const LALALA_0:int = 0;

          public static const LALALA_1:int = 1;

           

          Use in the viewstack: selectedIndex="{model.productVsView}">

           

          and do in the function this:

           

           

                     public function changeStackIndex():void
                      {
                          model.productVsView = ModelLocator.LALALA_1;
                      }

           

           

           

          Now, when the function is called, the variable is updated and through binding the viewstack index-property is changed.

          • 2. Re: Events from custom components
            Marc de kwant Level 1

            Hi,

             

            The steps you could take to make this work are the following:

             

            1. define an event (with metadata) in your child component

             

                <mx:Metadata>
                      [Event(name="changestack", type="flash.events.Event")]
                </mx:Metadata>
            

             

            + corrsponding event dispatching when needed.

             

            2. In your main mxml file (where the viewstack is and the child component) you refer to this event and handle it in a method, thus chaniging the index

             

             

               <mx:Script>
                    <![CDATA[
            
                            private function onStackChange():void {
                               productVs.selectedIndex = 1;
                         }
                         
                    ]]>
               </mx:Script>
            
            <mx:ViewStack id="productVs" x="0" y="0" selectedIndex="0">
                
                    <customcanvases:MainProductCanvas/>
                    
                    <customcanvases:LoadScreen changestack="onStackChange()"/>
                
                </mx:ViewStack>
            

             

             

            Kind regards,

             

            Marc

             

             

             

            ps. This code is not functional, but gives an idear as to solving your problem.

            • 3. Re: Events from custom components
              mw00 Level 1

              Thank you both for your help.

              As a general rule when writing flex apps is it best to keep all actionscript in separate files from the MXML or is it unavoidable or desirable to keep the 2 together in some cirumstances?

              • 4. Re: Events from custom components
                Vanden_B Level 1

                I don't know exactly about a best practice, but I use AS within my MXML class if this is specific to that class.
                I mostly use a MVC (Cairngorm) and therefore I define generic AS classes which can be triggered by events.

                 

                ps: if the question is answered, mark it as such

                • 5. Re: Events from custom components
                  Marc de kwant Level 1

                  That is indeed à common practice. Personally I architect my flex 

                  application True to design of flex and event bubbling in specific. I 

                  do not like to Use à mvc framework, where there is in 99% of the cases 

                  no need for.

                   

                  But that is just my opinion

                   

                  Marc

                  • 6. Re: Events from custom components
                    Marc de kwant Level 1

                    I see no difference in mxml and as code. Both are actioscript. 

                    Therefore I mix them as I see fit. What I try to keep separate are my 

                    programming concerns. View, controller and model. Or whtever yasye you 

                    have.

                     

                    Marc