Dismissing a Flex Mobile PopUp With the Back Button

In an application I’m building for Android I use a lot of pop up windows (because that’s how Android does combo boxes) and I was having a tough time figuring out how to get them to close when the user pushes the back button. By default, the framework will call navigator.popView() whenever the back button gets pushed and the only way to override that is by doing it at the application level, which isn’t really ideal.

So here’s what I came up with.

Basically I intercept the removing event on the view, which is the last event that gets called before the view goes away. Using that event I check to see if any of my PopUps are on the screen using the isPopUp property and if they are, I use event.preventDefault() to stop the view from being removed and instead just remove the PopUp.

protected function view1_removingHandler(event:ViewNavigatorEvent):void
{
     if(exerciseList.isPopUp)
     {
          PopUpManager.removePopUp(exerciseList);
          event.preventDefault();
     }
 
     if(timeList.isPopUp)
     {
          PopUpManager.removePopUp(timeList);
          event.preventDefault();
     }
}

I’m not sure if this is really the best way to solve this issue, so if anyone has something that they’ve done I’d love to hear about it in the comments.

Jonathan Kaye

What about using the “backKeyPressed” event of a View?

I was having the trouble of the view being popped when I had a supposed modal dialog box showing. I saw some “solutions” that involved listening for KEY_DOWN, but those didn’t work for me (like http://theorynine.com/labs/taking-control-of-the-back-button-in-views-adobe-air-flex-mobile/).

After poking around a bit, I discovered the event off a view called “backKeyPressed”. In that handler, I check to see if my dialog box isOpen, and I then do both preventDefault() and stopImmediatePropagation() to force the user to address the modal dialog (though obviously we could clear it just as easily):

…protected function backKeyPressedHandler(event:FlexEvent):void { event.preventDefault(); event.stopImmediatePropagation(); if (elementMenu == null || !elementMenu.isOpen) { endEditSim(); }}
http://blog.digitalbackcountry.com Ryan Stewart

Sweet! I didn’t realize that event existed. That’s better than event.preventDefault()
Dolaemoney

Thanks for your sharing. In order to make custom component independent, I made some changes after viewing your solutions.
I listen to events KeyboardEvent.KEY_DOWN and KeyboardEvent.KEY_UP in my popped up component which is subclass of SkinnablePopUpContainer. Here are the keynotes:
1. Listener is not the component itself but systemManager.stage
2. Listen event in the capture phase like systemManager.stage.addEventListener(KeyboardEvent.KEY_DOWN, backKeyHandler, true)
3. In the handler if(e.keyCode == Keyboard.BACK)e.preventDefault();
With this, we don’t need detect the event in view because it really messes up components.
Dolaemoney

Thanks for your sharing. In order to make custom component independent, I made some changes after viewing your solutions.
I listen to events KeyboardEvent.KEY_DOWN and KeyboardEvent.KEY_UP in my popped up component which is subclass of SkinnablePopUpContainer. Here are the keynotes:
1. Listener is not the component itself but systemManager.stage
2. Listen event in the capture phase like systemManager.stage.addEventListener(KeyboardEvent.KEY_DOWN, backKeyHandler, true)
3. In the handler if(e.keyCode == Keyboard.BACK)e.preventDefault();
With this, we don’t need detect the event in view because it really messes up components.
Dolaemoney

Thanks for your sharing. In order to make custom component independent, I made some changes after viewing your solutions.
I listen to events KeyboardEvent.KEY_DOWN and KeyboardEvent.KEY_UP in my popped up component which is subclass of SkinnablePopUpContainer. Here are the keynotes:
1. Listener is not the component itself but systemManager.stage
2. Listen event in the capture phase like systemManager.stage.addEventListener(KeyboardEvent.KEY_DOWN, backKeyHandler, true)
3. In the handler if(e.keyCode == Keyboard.BACK)e.preventDefault();
With this, we don’t need detect the event in view because it really messes up components.
Dolaemoney

Thanks for your sharing. In order to make custom component independent, I made some changes after viewing your solutions.
I listen to events KeyboardEvent.KEY_DOWN and KeyboardEvent.KEY_UP in my popped up component which is subclass of SkinnablePopUpContainer. Here are the keynotes:
1. Listener is not the component itself but systemManager.stage
2. Listen event in the capture phase like systemManager.stage.addEventListener(KeyboardEvent.KEY_DOWN, backKeyHandler, true)
3. In the handler if(e.keyCode == Keyboard.BACK)e.preventDefault();
With this, we don’t need detect the event in view because it really messes up components.
Dolaemoney

Thanks for your sharing. In order to make custom component independent, I made some changes after viewing your solutions.
I listen to events KeyboardEvent.KEY_DOWN and KeyboardEvent.KEY_UP in my popped up component which is subclass of SkinnablePopUpContainer. Here are the keynotes:
1. Listener is not the component itself but systemManager.stage
2. Listen event in the capture phase like systemManager.stage.addEventListener(KeyboardEvent.KEY_DOWN, backKeyHandler, true)
3. In the handler if(e.keyCode == Keyboard.BACK)e.preventDefault();
With this, we don’t need detect the event in view because it really messes up components.
Dolaemoney

Thanks for your sharing. In order to make custom component independent, I made some changes after viewing your solutions.
I listen to events KeyboardEvent.KEY_DOWN and KeyboardEvent.KEY_UP in my popped up component which is subclass of SkinnablePopUpContainer. Here are the keynotes:
1. Listener is not the component itself but systemManager.stage
2. Listen event in the capture phase like systemManager.stage.addEventListener(KeyboardEvent.KEY_DOWN, backKeyHandler, true)
3. In the handler if(e.keyCode == Keyboard.BACK)e.preventDefault();
With this, we don’t need detect the event in view because it really messes up components.

Ryan Stewart – Mountaineer Coding

Just an average guy trying to drink above average beer.