6 Replies Latest reply on Jul 27, 2010 4:00 PM by laxmidi

    How Do I Programmatically Dispatch an Itemclick Event in Flex 3?

    laxmidi Level 1

      Hi,

       

      I need some help with programmatically dispatching an itemclick event in Flex 3.

      For example, I've got a popupmenubutton as follows:

       

      <mx:PopUpMenuButton
          id="myPopUpMenuButton"
          label="Neighborhoods"
          dataProvider="{myNeighborhoodList}" 
          itemClick="myPopUpMenuButtonClickHandler(event)"
      />
      

      Let's say that the myNeighborhoodList contains 3 choices: Old Port, Newport, Southport.

       

      In another piece of code, I want to programmatically dispatch the myPopUpMenuButton itemclick event as if "Newport" were chosen. How do I do that?

       

      FYI, I posted this question on Stack Overflow, but I didn't get a reply.

       

      Thank you!

       

      -Laxmidi

        • 1. Re: How Do I Programmatically Dispatch an Itemclick Event in Flex 3?
          UbuntuPenguin Level 4

          There maybe a better way to architect and solve the problem without resorting to fake events.  If you have a list , you should have a controller/presentation model behind it.  It would listen for clicks from the the list and dispatch an event to be heard by the rest of the application , something like a custom event called "NeighborHoodEvent(NeighborHoodEvent.ChangeNeighborHood) with a neighborhood parameter.

           

          Trying to fake the UI interaction ties your code to the implementation to much , just add a handler to the list to respond to click events and create your custom event there.  Like this

           

          <List id="list1" dataProvider="{dp}" itemClick="{clickHandler(event)}" />

           

          protected function clickHandler( event:ListEvent ):void

          {

           

             var selectedNeighborHood:NeighborHood = list1.selectedItem as NeighborHood;

             if( selectedNeighborHood != null )

             {

                var nEvent:NeighborHoodEvent = new NeighborHoodEvent(NeighborHoodEvent.NeighborHoodChange);

                nEvent.neighborHood = selectedNeighborHood;

                dispatchEvent( nEvent );

             }

          }

           

          Of course some of this code could be said to belong in another class ( controller/pm ) but that is based on taste.

           

          If this post was helpful please mark it as such.

           

          Sincerely ,

          Ubu

          1 person found this helpful
          • 2. Re: How Do I Programmatically Dispatch an Itemclick Event in Flex 3?
            laxmidi Level 1

            Hi UbuntuPenguin,

             

            Thank you very much for your suggestion.

             

            I understand your point. But, I think that my situation is a little different.

             

            My goal is to have my application open to a random canvas in my viewstack. So, when  the user arrives at the site for the first time, they see section A on opening. When they return, they might see section D. I've got a popUpMenuButton for regular navigation. If I can "fake" an ItemClick from the popUpMenuButton, then I can figure out how to open to random sections.

             

            Thank you.

             

            -Laxmidi

            • 3. Re: How Do I Programmatically Dispatch an Itemclick Event in Flex 3?
              pauland Level 4

              You should be able to just set the selectedIndex value of the ViewStack.

               

              It really is a bad idea to try and mimic UI events.

              1 person found this helpful
              • 4. Re: How Do I Programmatically Dispatch an Itemclick Event in Flex 3?
                UbuntuPenguin Level 4

                Ok , here is how I solve the problem architecturally.  One class should be responsible for the viewstack index.  This class can respond to events dispatched anywhere.  So it goes a little something like this.

                 

                The view stack

                 

                <Viewstack selctedIndex="{stackIndex}">

                  <Script>

                      [Bindable] public var stackIndex:int;

                   </Script>

                  <ViewOne />

                  <ViewTwo/>

                  <ViewThree />

                   ....

                </Viewstack/>

                 

                StackPresentation.as

                ...

                public var stackCount:int;

                [Bindable] public var stackIndex:int;

                ...

                public function startUp():int

                {

                    stackIndex = someRandomNumberGenerator( 0 , stackCount );

                     return stackIndex;

                }

                 

                public function changeStackHandler( newStackIndex:int ):void

                {

                    stackIndex = newStackIndex;

                }

                 

                There are a few things I must explain here.

                 

                1.  The stackIndex of the StackPresentation class in "injected" into the Viewstack class.  This can be accomplished using a number of frameworks.  Personally I use Mate , but there is a whole cornucopia of DI frameworks ( Prana , RobotLegs , Swiz ...).

                 

                2.  When you want to change the stack index from any part of the application , you dispatch an event like the one I posted earlier.  Your framework will wire this event to the StackPresentation.  The event will have some parameters ( i.e var newStackIndex:int ) which it uses to go to the next stack index , it could very well be different from what I posted as this is an example.

                 

                The advantages of this are numerous.  But they all stem from "separation of concern".   The view class is responsible for being a view , and the presentation is responsible for coordinating the state of the view class.  The other advantage is that if some other part of the application wants to change the viewstack index , it MUST go through the presentation layer , preventing a "ball of mud" type of approach.  This greatly cuts down on the number of bugs and the time it takes to resolve them.  In scenarios where there is a problem , you only have to look at a few things , the logic in the presentation class ( which lends itself to unit-testing) and the cases where the event triggering the change is dispatched.  Hope this helps.

                 

                Sincerely ,

                  Ubu

                • 5. Re: How Do I Programmatically Dispatch an Itemclick Event in Flex 3?
                  laxmidi Level 1

                  Hi Ubu,

                   

                  Thank you very much for your detailed reply.

                   

                  Apologies for not replying sooner, but a storm knocked out power in the DC suburbs. I got power back today!

                   

                  Your solution makes a lot of sense to me. Binding to the selectedIndex and keeping the logic separate from the view is smart.

                   

                  I don't know too much about MVC. I'll have to study-up on the Mate framework.

                   

                  Again, thank you for helping me.

                   

                  -Laxmidi

                  • 6. Re: How Do I Programmatically Dispatch an Itemclick Event in Flex 3?
                    laxmidi Level 1

                    Hi pauland,

                     

                    Thank you for the good advice.

                     

                    I'm still learning...

                     

                    I appreciate the help.

                     

                    -Laxmidi