I'd like to avoid that mouse events triggered by the user don't get dispatched to their target objects, effectively "freezing" the GUI for the user.
In a sample application featuring just a single mx.controls.Button I called addEventListener on the button to get notified of mouse events. In the event handler, I called Event::stopImmediatePropagation on the event, assuming that this would "discard" the event. Clicking the button would call my event handler, but yet the button was "clicked" (it animated and triggered an event).
How could I do this?
button.mouseEnabled = false;
button.mouseChildren = false;
should work
Depending on how advanced your interface is, you could just throw an object (s:Rect in an s:Group would work) on top of everything, set width and height to 100%, and disable mouseChildren
USE removeEventListener()
var b:Button = new Button();
function init():void
{
b.addEventListener(MouseEvent.CLICK, onButtonClick);
}
function onButtonClick(event:MourseEvent):void
{
b.removeEventListener(MouseEvent.CLICK, onButtonClick);
}
Related
In Flex (Flash Builder 4) I am opening a new window via PopUpManager.addPopUp. I have timer code that runs in my component and I need to stop my timer when that window opens and start the timer again when the window closes.
I figure it's easy enough to stop the timer in the function that opens the window, but how can I start the timer again when the window closes?
Is there a way to tell if there is a pop-up window in front of my component, or if a specific pop-up window is still open via PopUpManager?
Maybe events are a better approach?
Thanks!
Events! is the way to go.
Fire events during launch/close. Add your logic in the event Handlers!
You can use following code to check whether opened popup window is getting closed or not.
if it is closed you can stop the timer.
//set the flag to find your popup window is exist or not.
private var isPopupExist:Boolean = false;
private function closePopUpWindow():void
{
var systemManager:SystemManager = FlexGlobals.topLevelApplication.systemManager;
//Returns a list of all children.
var childList:IChildList = systemManager.rawChildren;
for(var i:int=childList.numChildren-1;i>=0;i--)
{
var childObject:* = childList.getChildAt(i);
//If child object is Uicomponent.
if (childObject is UIComponent)
{
var uiComponent:UIComponent = childObject as UIComponent;
//If uicomponent is popup and class name is equal to **your popup component name** here i am using "ChatComp".
if (uiComponent.isPopUp && uiComponent.className == "ChatComp")
{
isPopupExist = true;
}
}
}
}
in your Timer,
private function checkPopUpExistance():void
{
call closePopUpWindow() function for every 1 sec or any seconds(your wish) to check whether popup is exist or not.
if(isPopupExist)
{
here you stop the timer.
}
}
Now you can start the Timer, when you opened the Popup window.
The popupmanager is a singleton class, so you can easily know how many popups have been created with his ChildList
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/managers/PopUpManagerChildList.html
I am writing a flex application and I have two Spark TextAreas. I want to create an EventListener so that when the user clicks on a text area, the text inside the TextArea is cleared:
this.addEventListener(FocusEvent.FOCUS_IN, onFocusIn);
private function onFocusIn(ev:FocusEvent):void {
if (this._showsCaption) {
this._showsCaption = false;
super.text = "";
}
}
Currently I can implement this with a Spark TextInput, but when I click on the TextArea, the focusIn event never fires and the onFocusIn() handler is never called.
Any thoughts would be much appreciated.
When you are extending the TextArea (as in your case), you can override the protected "focusInHandler" method. This is the handler that is called when the control gets focus. The same goes for the "focusOutHandler" method.
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/core/UIComponent.html#focusInHandler()
I have a datagrid that I want the user to sort the rows on. To make it obvious that it's sortable I am implementing some custom cursors. But I'm having a problem when I actually drag an item.
here's a pseudo demonstration of the problem
Application = normal cursor // fine
Rollover datagrid = open hand cursor // good so far
mousedown on datagrid = closed hand cursor // good
dragging item around = closed hand cursor // switches back to normal cursor (if I move it around real fast I can see my custom curser for an instant)
mouse up on datadrid = open hand cursor // not sure, after I drop it goes back to open hand but if I mouse down, dont move and mouse up I have a closed hand
rollout of datagrid = normal cursor //good
datagrid code:
<mx:DataGrid id="sectQuestionsDG" x="10" y="204" width="558" height="277" headerHeight="0" selectable="{editMode}"
dragMoveEnabled="{editMode}" dragEnabled="{editMode}" dropEnabled="{editMode}"
dragDrop="sectQuestReOrder(event);" rollOver="over();" mouseDown="down();" mouseUp="up();" rollOut="out();"/>
functions:
public function over():void{
CursorManager.setCursor(grabCursor,CursorManagerPriority.LOW,0,0);
}
public function down():void{
CursorManager.setCursor(grabbingCursor,CursorManagerPriority.HIGH,0,0);
}
public function up():void{
CursorManager.setCursor(grabCursor,CursorManagerPriority.LOW,0,0);
}
public function out():void{
CursorManager.removeAllCursors();
}
Edit 12/17/09:
I've made a little bit of progress, I'm now doing this on rollOver
var styleSheet:CSSStyleDeclaration = StyleManager.getStyleDeclaration("DragManager");
styleSheet.setStyle("moveCursor", grabbingCursor);
CursorManager.setCursor(grabCursor,CursorManagerPriority.LOW);
This is giving me the correct rollover and correct drag, but if I try to add any
function to rollOut it screws up again, so now I'm stuck with the grabCursor. It
seems like when I set a rollOut on the dataGrid it's firing for each row, same
with mouseOut, is there any way to avoid that?
Edit 12/21/09:
It is a confirmed thing that roll/mouse out/over fire for every item in the datagrid. The solution I need is how to prevent that and only fire it when the user mouses out of the datagrid as a whole. I need flex to see the forest, not the trees.
PS. the rollout only fires on every item when I am dragging. mouseout fires on every item regardless
EDIT 12/21/09, End of the day:
I have managed to answer my own question so my bounty rep is lost to me :-( Anyway since my answer solves my problem I will award the bounty to anyone that can answer this. My solution uses AS to remove the the rollOut/rollOver while a user is dragging. In a dataGrid. How can you get the same result without removing the rollOut/rollOver (so that rollOut is not firing for each item as you drag another item over it)?
Why not use the property isDragging of DragManager if you are doig a drag you dont need to change the cursor. And dont forget to check for the dragExit event in case you drop outside the datagrid.
N.B
sometimes the cursor keep with the dragging shape after the drop so you can in your sectQuestReOrder remove the cursor and set it back to over state.
sample:
public function over(evt:Event):void{ //on mouse over, added with AS
if (DragManager.isDragging) // you are dragging so no cursor changed
return;
CursorManager.removeAllCursors();
CursorManager.setCursor(grabCursor,CursorManagerPriority.LOW,-7,-7);
var styleSheet:CSSStyleDeclaration = StyleManager.getStyleDeclaration("DragManager");
styleSheet.setStyle("moveCursor",grabbingCursor); //style set for the drag cursor
}
public function down(evt:Event):void{ // on mouse down
CursorManager.removeAllCursors();
CursorManager.setCursor(grabbingCursor,CursorManagerPriority.LOW,-7,-7);
}
public function up(evt:Event):void{
CursorManager.removeAllCursors();
CursorManager.setCursor(grabCursor,CursorManagerPriority.LOW,-7,-7);
}
public function out(evt:Event):void{
if (DragManager.isDragging) // you are dragging so no cursor changed
return;
CursorManager.removeAllCursors();
}
public function sectQuestReOrder(e:Event):void{
// sometime you will be stuck with the moving cursor
// so after the drop done reset cursor to what you want
CursorManager.removeAllCursors();
CursorManager.setCursor(grabCursor,CursorManagerPriority.LOW,-7,-7);
...
}
public function onDragExit(e:Event):void {
// in case you go out of the datagrid reset the cursor
// so when you do a drop outside you ll not get one of your dragging cursor
CursorManager.removeAllCursors();
}
And in your grid add dragExit
<mx:DataGrid
id="sectQuestionsDG"
x="10" y="204" width="558" height="277" headerHeight="0"
selectable="{editMode}"
dragExit="onDragExit(event)"
dragMoveEnabled="{editMode}"
dragEnabled="{editMode}"
dropEnabled="{editMode}"
dragDrop="sectQuestReOrder(event);"
rollOver="over(event);"
mouseDown="down(event);"
mouseUp="up(event);"
rollOut="out(event);"/>
I would look at the mouseOut event and determine if its firing when you're moving the mouse during a drag. I have seen cases where the dragged object doesn't move exactly with the mouse, and for a short while, the mouse is actually hovering over another object (causing the mouseOut event to fire, thus changing the cursor).
OK some props to Gabriel there for getting my mind out of a rut and back into this problem in full mode. I had to go through a few steps to get to my answer
1)remove the listeners for rollOver, rollOut, and mouseUp from the mxml and add rollOver and rollOut through the addEventListener method in AS
2) add the listener dragComplete to the mxml and assign the function previously assigned to mouseUP to it
3) change the main function to this:
public function over(evt:Event):void{ //on mouse over, added with AS
CursorManager.removeAllCursors();
CursorManager.setCursor(grabCursor,CursorManagerPriority.LOW,-7,-7);
var styleSheet:CSSStyleDeclaration = StyleManager.getStyleDeclaration("DragManager");
styleSheet.setStyle("moveCursor",grabbingCursor); //style set for the drag cursor
}
public function down(evt:Event):void{ // on mouse down
CursorManager.removeAllCursors();
CursorManager.setCursor(grabbingCursor,CursorManagerPriority.LOW,-7,-7);
sectQuestionsDG.removeEventListener(MouseEvent.ROLL_OVER,over);
sectQuestionsDG.removeEventListener(MouseEvent.ROLL_OUT,out);
//this is why I had to take it off the mxml, can only remove listeners
//added with the addEventListener, I don't remember where I read that.
}
public function up(evt:Event):void{
CursorManager.removeAllCursors();
CursorManager.setCursor(grabCursor,CursorManagerPriority.LOW,-7,-7);
sectQuestionsDG.addEventListener(MouseEvent.ROLL_OVER,over);
sectQuestionsDG.addEventListener(MouseEvent.ROLL_OUT,out);
}
public function out(evt:Event):void{
CursorManager.removeAllCursors();
}
I've got a class that extends EventDispatcher.
What I want to do is to dispatch the click event when the component is clicked. (The class is essentially some text in a textfield that needs to be able to do certain things, and it needs to be able to respond to a click). Sounds easy enough... I want the event dispatched when that portion of the text is clicked. But uh...how? it's not like a button where I can just go
myButton.addEventListener(MouseEvent.CLICK, myClickHandler);
That's clear, because some component is going to be listening for the Click event dispatched when myButton is clicked. It is built into the AS3 framework that a button knows how to listen for a click event.
After the import statements I've got:
[Event(name="click" type="mx.events.Event")]
How do I dispatch the event when the component is clicked, when the component doesn't yet know how to respond to a click event? I've tried adding an event listener in the textfield which contains this custom class of text, but nothing's happening because the Click event hasn't been dispatched.
You can create your own click event and dispatch it. You can do that also to dispatch clicks on objects where no user ever have clicked :D
Try this:
var mEvent:MouseEvent = new MouseEvent(MouseEvent.CLICK, [HERE MORE PARAMS BY YOU]);
yourObject.dispatchEvent(mEvent);
Now, you will recieve Click Events from yourObject.
Let's say your class consists TextField tf. Then public function YourClass():void { //Constructor
{
//intialize Something
//initialize tf
tf.addEventListener(MouseEvent.CLICK, onClick);
...
}
...
private function onClick(e:MouseEvent):void {
this.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
}
OK, I tried this in the constructor:
var mEvent:MouseEvent = new MouseEvent(MouseEvent.CLICK, true, false);
this.dispatchEvent(mEvent);
Then, in the containing textfield, while iterating through these objects (each of which is called cp), I did this:
cp.addEventListener(MouseEvent.CLICK, mouseClickHandler);
Finally the mouseClickHandler:
private function mouseClickHandler(event:MouseEvent):void
{
trace("Clicked!!!!!!!!!!!");
}
Running in debug mode I get nada. Nunca. Niente. Nuttin'. Which is to say: no trace of being clicked. Did I do something wrong?
Is there a way to write a custom event that gets triggered when the user clicks outside of that custom component instance? Basically anywhere else in the main flex app.
Thanks.
You can use the FlexMouseEvent.MOUSE_DOWN_OUTSIDE event. For example:
myPopup.addEventListener(
FlexMouseEvent.MOUSE_DOWN_OUTSIDE,
function(mouseEvt:FlexMouseEvent):void
{
PopUpManager.removePopUp(myPopup);
}
);
stage.addEventListener( MouseEvent.CLICK, stgMouseListener, false, 0, true );
...
private function stgMouseListener( evt:MouseEvent ):void
{
trace("click on stage");
}
private function yourComponentListener( evt:MouseEvent ):void
{
trace("do your thing");
evt.stopPropagation();
}
Got this from Senocular. I think it applies to this subject, at least it did the trick for me. What jedierikb suggested seems to be the same, but a little incomplete.
Preventing Event Propagation
If you want to prevent an event from propagating further, you can stop it from doing so within an event listener using stopPropagation() (flash.events.Event.stopPropagation()) or stopImmediatePropagation() (flash.events.Event.stopImmediatePropagation()). These methods are called from the Event objects passed into event listeners and essentially stop the event from happening - at least past that point.
stopPropagation prevents any objects beyond the current from recieving the event, and this can be within any phase of the event. stopImmediatePropagation does the same but also takes the extra step of preventing additional events within the current target receiving the event from happening too. So where as stopPropagation would prevent sprite A's parent from receiving the event, stopImmediatePropagation would prevent sprite A's parent as well as any other listeners listening to sprite A from receiving the event.
Example: toggle between using stopPropagation and stopImmediatePropagation
ActionScript Code:
var circle:Sprite = new Sprite();
circle.graphics.beginFill(0x4080A0);
circle.graphics.drawCircle(50, 50, 25);
addChild(circle);
circle.addEventListener(MouseEvent.CLICK, clickCircle1);
circle.addEventListener(MouseEvent.CLICK, clickCircle2);
stage.addEventListener(MouseEvent.CLICK, clickStage);
function clickCircle1(evt:MouseEvent):void {
evt.stopPropagation();
// evt.stopImmediatePropagation();
trace("clickCircle1");
}
function clickCircle2(evt:MouseEvent):void {
trace("clickCircle2");
}
function clickStage(evt:MouseEvent):void {
trace("clickStage");
}
Click the circle and see how the event is stopped with each method. stopPropagation prevented the stage from receiving the event while stopImmediatePropagation also prevented clickCircle2 from recognizing the event
normal output
clickCircle1
clickCircle2
clickStage
stopPropagation output
clickCircle1
clickCircle2
stopImmediatePropagation output
clickCircle1
Flex/Actionscript 3 - close popupanchor on mouse clicked anywhere outside popup anchor
for 4.6 SDK try this..
frmPUA.popUp.addEventListener(FlexMouseEvent.MOUSE_DOWN_OUTSIDE, menuPopOutside, false, 0, true);
Full code is avaiable at
http://saravanakumargn.wordpress.com/2013/12/14/flexactionscript-3-close-popupanchor-on-mouse-clicked-anywhere-outside-popup-anchor-2/