|
Reactions
Using Reactions
Featured IntroductionReactions are the equivalent of Reflexive notification interests for component events. Instead of subscribing to component events manually using addEventListener, you declare your interest in the component event using reactTo<ComponentNameEventName> syntax. RequirementsThis feature needs Fabrication version 0.6 or above. Usage ScenarioConsider the typical anatomy of a PureMVC Mediator class for an mxml view component show below. MyForm.mxml <mx:Form> <mx:TextInput id="emailInput" /> <mx:Button id="submitButton" label="Submit Button"/> </mx:Form> FormMediator.as public class FormMediator extends FlexMediator {
static public const NAME:String = "FormMediator";
public function FormMediator(viewComponent:Object) {
super(NAME, viewComponent);
}
public function get submitButton():Button {
return viewComponent.submitButton as Button;
}
public function onRegister():void {
submitButton.addEventListener(MouseEvent.CLICK, submitButtonClicked);
}
private function submitButtonClicked(event:MouseEvent):void {
// submit form
}
}
Instead of subscribing to the click event you just add a click handler with the reactTo syntax. public function reactToSubmitButtonClick(event:MouseEvent):void {
// submit form
}Implementation Details
Capture PhaseThe reactTo methods implement addEventListener with a false useCapture argument. To use the reaction with capture phase, The method prefix should be trap. To react to the click event in the above example in capture phase the handler would be, public function trapSubmitButtonClick(event:MouseEvent):void {
}Removing ReactionsOne useful aspect of Reactions is that you do not need to use removeEventListener explicitly. Once the mediator is removed its Reactions are removed as well. If you need to remove the reaction manually, use the removeReaction method. The syntax is, removeReaction(handler:Object):void
To remove the handler in the above example use, // with handler reference
removeReaction(reactToSubmitButtonClick);
// with handler string
removeReaction("reactToSubmitButtonClick");Examples | |
► Sign in to add a comment
Maybe worth pointing out that both the getter function and the reactTo function must be declared public.
Hey all i was wondering what the benefits or back falls might be from using the reactTo instead of the usual AddEventListener?? thanks
@czgaljic Benefits: Reducing code as well as making your development cycle faster. "addEventListener" is already done for you here.
I cant react to this, (the component itself), only his childrens. There´s a way?
Thanks.
of course:
public function get viewComp():UIComponent {
}then:
public function reactToViewCompClisk( event:MouseEvent? ):void {
}
Are you meaning that only this way works?
i mean, by comp$event doesnt work only with the "this" ?
Okay.... sorry posting only today. But ive tried that and it works independently the method.. the new method or not... the problem was too in this case, that i was using old style protected getter for the component, i already changed it to public, i think its good to make this more clear to people dont get confused and less error prone... but now raphal, im running into other problem... i cant react to a custom component! for example, i have a Extended:SpringLoadedTree?... "Extended" is a xmlns namespace for the component.. it just dont react, neither in the old or new method. very very very thanks for maintaining this fabulous project.
SORRY RAPHAL! it was my mistake... the event name must be exactly..so when i get used with addeventlistener, i´ve got confused the function name was itemselected...!! hah now i´ve changed to itemClick, and it worked. Thanks. sorry by my mistake. it´s working flawless.
now it´s serious! i can´t get it to work when i´ve instantiated with new keyword...
like private or public, var, component:Component;
then i can´t react. so in this case im using listener.. any clue??? thanks
i can´t react directly to stage too? :D
Hi atendimento,
Can you send me any example on problems you have?
Hi Rafael,
I'm trying to use the reactTo feature in a pure AS3 project (no flex) but i cant make it work, after many tries and modifs to my code Can you tell me if it's even possible (i wasnt able to find any example for this in pure as3 ). Thanks for answering me
Weird, tested it dozen times, and looks like Point 3. in "Implementation details" is wrong:
"The Component's event name must also be upper CamelCased?. In the above example the click event became Click."
When I make a reactTo function like this:
public function reactToTestTextFieldClick(event:MouseEvent?):void { trace('route notification'); }
Then the following works:
public function get testTextField():TextField? { return myShell.tff as TextField?; }
But capital letter won't work:
public function get TestTextField?():TextField? { return myShell.tff as TextField?; }
So looks like You not only can make first letter small, but you also must do it!