NON-SFV app - handle events between controls in different component .mxmls

[CarmenDurham]

Hello all,

I believe I am missing something easy.  I have a NON-SFV flex app that has the main app (AddressChecker.mxml) and two separate component .mxmls that contain different type of tools (NavMenuBar.mxml and MainToolBar.mxml). 

I can get this to work if all of the tools are coded in the main application or if all the tools were in one .mxml component.  But I am trying to learn how to break code down into reusable components.

The problem is handling the map type events between the two components.  For example, how do I disable/remove event listener from MainToolBar.tool1 (ie. identify, measure, etc) when the NavMenuBar.Zoom is selected??

Right now, if the Measure tool is selected, then I click the Zoom tool, it will both zoom and start to measure.

Any guidance from the ESRI flex perspective is appreciated.  I have been looking at Flex sites, but getting more confused.

Thanks,
Carmen

[RobertScheitlin__GISP]

Carmen,

   The proper way would be to develop your app using an MVC (Model Viewer Controller) methodology.
If you don't want to do all the research of figuring that out you can borrow code from the FlexViewer. Look at the AppEvent.as when things want to communicate between each other they add and event listener for an AppEvent and then the other component calls the dispatchevent.

[CarmenDurham]

Thanks Robert.  I'll take a look at both.

Carmen

[DasaPaddock]

If you do want the help of a 3rd party framework, I'd recommend looking at the Swiz Framework:
http://swizframework.org/

[CarmenDurham]

Dasa,

Thank you for the information.  This article that you had mentioned in another thread proved very helpful to me:
http://www.adobe.com/devnet/flex/articles/flex_framework.html

especially the part about "having no frameworK"!

I decided that it was not a good idea to decide to break my application into components at this time since
1)  I am the only one working on it, 
2) the app code was working with just one toolbar component and the app is almost done and
3) have a bit of a deadline and the holidays are approaching!

To accomplish my original goal in the future of having separate components communicate with each other regarding events, I will use the information from the FlexViewer sample as Robert mentioned and the information from the end of Day 2 and beginning of Day 3 (event classes and such) in the "Flex in A Week" (free) from Adobe: 
http://www.adobe.com/devnet/flex/videotraining.html

While the replies didn't solve my initial question, they did help me to make a decision to NOT worry about the separate components for this application.  I will look at it for developing the next application from the beginning.

thanks,
Carmen

[RobertScheitlin__GISP]

Carmen,

     If you have public functions in the tool components than in the main app when you instantiate them then you should have access to their public function. And for the tools to get back to the main app then you can use:

import mx.core.FlexGlobals;
FlexGlobals.topLevelApplication.SomePublicVarOrFunction

If you want to post more of your code, I can help you with it.

[CarmenDurham]

Thanks Robert, I will probably take you up on your offer but you are off the hook for a couple of days as I won't get back to this until Friday.

Carmen

[CarmenDurham]

Okay, so I couldn't stay away from Flex.  Robert's response got me thinking so I had to try something with the code  (vs. what I was supposed to be doing).

I added the code Robert mentioned above and it worked for me! 

Although I had to remember to provide an id in the mxml that instantiates the component so I could call it in script.  duh. 
ie <local:MainToolBar id="theMainToolBar" map="{map}" x ="350"/>
(yes, I realize it should be in something like a component directory vs. in src. I'm still learning).

Once I did that, I could deactivate/activate tools from one component to another using something like...
FlexGlobals.topLevelApplication.theMainToolBar.drawToolbar.deactivate

Yea!  Thanks a bunch.

Carmen

[MarkHoyland]

Hi Carmen,

I too am the only developer where I work and I find that the best design for flex is usin Flex's built in event driven framework, and creating loosely coupled components. By doing this you are essentially using a very basic mvc architecture.

I have attached three files, one is the main application the other two are componets for NavMenuBar and MainMenuBar . (rename to .mxml instead of .txt the two components go into src/components folder).

I have set up the NavMenuBar component to dispatch an event "navToolActivated" when the esri:NavigationTool is activated. The event is set to bubble, so Flex application knows it is dispatched.
The MainMenuBar is set to listen for an event called "navToolActivated". When it hears that event it will deactivate its own esri:DrawTool.

MainMenuBar is also set up to dispatch an event called "drawToolActivated", NavMenuBar listens for it and acts accordingly.

The components are independant from each other(loosely coupled).

I hope that helps. (Load these into a flash builder 4 project to see how it works)

[CarmenDurham]

Mark,

This is a wonderful example - thank you very much.  I loaded it into a new Flex App and am able to understand the logic using an ESRI type example (vs. Adobe's examples).

Thank you for taking the time to put it together.

Carmen