Capture hotkey in browsers - apache-flex

I'm doing SWF application which will run in browser.
And I want to capture CTRL+F key pressing event when Flex application is in focus.
In Firefox it works fine but in Opera and Safari browser captures event prior to Flex application and Find Dialog pop-ups.
Is there any way for flex application to capture CTRL+F event prior browser?

I asked this same question recently and have been playing around with it.
I came up with this gist on github:
Browser KeyboardEvent Hijacking with Javascript and Flex
CTRL-F works!
Check out the javascript in there. Basically, with Safari, you can only hear the meta keys (ctrl/alt/shift, etc.); it won't allow javascript to hear A-Z events if Flash is running for some reason. So I just listen for the meta keys in javascript, and then call window.focus() in javascript. That sets focus to the browser, making it so you can hijack browser keyboard events!. Then I listen for the A-Z events or whatever, and pass those to Flex.
The next step is to just restore focus in your Flex app to wherever it was before that, which should be easy.
Cheers,
Lance

Maybe add javascript to your html containing the swf that would block it. It sounds like those browsers process events in a different order so I doubt there would be anything you can do from within the flash player that would do it.

Where e is a keyboard event:
if(e.commandKey || e.ctrlKey){
switch(e.keyCode){
case Keyboard.N:
// do stuff
break;
}
}

Related

Flex Accessiblity - Tab Focus goes out of flex app

In an accessible flex app, the user can navigate through the control by using the TAB key.
The flex app pops up on top of the html page aftert the user activate a particular link, and is loaded using swfobject.embedSWF.
It works well in most cases, but there are some instances where either or both these happen:
a) The flex app loads ok, the "flex focus" is set on the intro text label to read out loud, but pressing tab seems to still cycle through the links on the page behind. (Now Fixed, see Edit 2)
b) The focus worked well and pressing tab cycle through the controls ok, but after going through them it then tabs out of the flex app and onto the address bar.. it becomes a nightmare to even try to get back to the flex app without clicking on it.. which isn't exactly accessibility friendly.
Is there any way to prevent these from happening?
EDIT: The target browser is IE. Seems to be the most used with Jaws
EDIT: I managed to fix problem (a). The trick was to call focus on the swf object, but after a slight time out - must be something to do with flash/js ready state.
setTimeout(function(){
document.getElementById('swfobject').focus()
},25);
Problem (b) is still an issue though...
In your mx:Application component, add an event listener for the keyFocusChange and add this code :
protected function application1_keyFocusChangeHandler(event:FocusEvent):void
{
event.preventDefault();
focusManager.getNextFocusManagerComponent(event.shiftKey).setFocus();
}
b) Try to place some focusable element after swf in html. When focus leaves flex app, see if onfocus handler of that element gets called. If it is, you can refocus flex app from there or redirect it where you want.

navigateToURL ... set modal property

When a user clicks a button, I need a separate browser window to popup. How can I set the modal property of the application? (ie, when a popup window opens, the main application is disabled until that popup is closed ... I need to use a browser window rather than a popup window, but can't figure out how to disable the main application)
PopUpManager.createPopUp (this, navigateToURL( url, "http://www.google.com" ) , true );
thanks!
[[Updated Answer]]
Ok, my modal dialog looks like so:
cg = mx.managers.PopUpManager.createPopUp(this, ChoiceGrid, true) as ChoiceGrid;
PopUpManager.centerPopUp(cg);
But, what I would do instead of what you're asking, is embed an IFrame in the modal popup. This is exactly what we're doing in our app to collect CC data (well, not the popup part, just the IFrame bit. http://code.google.com/p/flex-iframe/
This way, you have the standard modal dialog you're looking for, AND an internally managed 'view' out to your checkout server. Something like this:
<code:IFrame id="iFrameWithJSfunctions"
src="{checkoutURL}" />
The flex-iframe is pretty easy to work with, for the most part. You shouldn't have many problems with it.
[[Original Answer]]
I'm not sure you need a PopUp to do this.
Why don't you simply do:
navigateToURL(urlRequest,"_blank");
instead?
You should think of a Flex App as a self contained entity. The PopUpManager is designed to create Windows (Panels / any UIComponent) that reside over another component inside the SWF. It does not create items that pop up out of the SWF or in new browser windows.
navigateToURL could be used to create a HTML pop-up from your Flex application. However, there is very little--if any--communication between the SWF and the browser pop up. And there is no way to make a modal pop-up.
You might investigate performing an ExternalInterface call and creating your new pop up in JavaScript. Here is an article about creating modal windows in JavaScript. Before going too far down that road, I would think carefully about your requirements. How would feel if one browser window popped open another browser window and prevented you from doing any browsing until you addressed the issues in that window. Or to put it another way, how would you feel if Microsoft Word opened a word document and wouldn't let you edit any other document until you shut down the first one? I'd be pretty upset.
Modal application dialogs are one thing. And the PopUpManager allows you to create those. I would consider Model application windows a bad UI decision.

Giving a Flex application the focus in browser to capture keystrokes

I've written a little video game in Flex that runs in a browser. The player moves by pushing the arrow buttons on the keyboard, so I need to capture those keystrokes. In fact, the game action starts when the player presses one of those keys.
In order to capture the keystrokes, the Flash/Flex application, not just the browser, needs to have the focus.
How can I ensure that the application has the focus? I've implemented a bit of a hack: A "Begin" button you must click to start the game. The only point of this button is to ensure that the app has the focus. Is there a better solution to this?
No, this is the only way, but I think your present solution is a great one. The reason that you (as a user) have to click to focus, is so that the application cannot quietly steal focus, to then log the keystrokes without your knowledge, e.g. to steal passwords.
In some browsers (IE) you can give a SWF focus via JavaScript. Unfortunately this doesn't work in Firefox. So some users will have to click on the SWF to give it focus. You could pretty easily in your game check the browser and if it's IE then give the SWF focus automatically and not show the "Begin" button. Then in Firefox show the "Begin" button.
Take a look at the link below. Worked well for me.
http://www.flexjunk.com/2010/12/30/managing-initial-swf-focus-in-all-browsers/

How to capture paste event from right-click context menu?

I have a textbox in ASP.NET web form, and I need to catch the paste event from right-click context menu. But I can't see where I can catch the associated event.
The onchange event is no use, as this is only triggered when the input field loses focus. Neither does OnKeyDown event since it is not a mouse event.
Any solution?
It is a common problem to which exists no good solution.
There is no cross-browser way to capture mouse paste event.
People are getting away with running a timer to detect any change soon after it's happened and then to react to it.
There is the paste event in some but not all browsers. IE has had it since version 4 or 5, I think, as well as beforepaste. Firefox I think got the paste event from version 3.0, and recent versions of WebKit have it (Chrome and Safari 4 have it at least), don't know about Opera. You'd have to research the specifics such as precisely which browsers support it and which element raise the event, but I would say it's still not widely enough supported to use on the general web.

How do I create a popup from Flex without a browser toolbar?

I'm trying to launch a popup window from Flex, but the popup window needs to have certain properties as one can usually specify with the JavaScript window.open. For example, the popup window should not have a browser toolbar or URL box.
I've tried using navigateToURL, which works fine, but I can't find a way to specify the popup window properties.
I've tried using ExternalInterface.call, but the popup gets blocked when calling window.open directly, or even creating a custom JS function that calls window.open.
Help!
Thanks!
I don't think it's even possible to disable the browser toolbar or URL box in a lot of browsers (I certainly do not allow it on any of the browsers I use).
If you're using navigateToURL, why can't the page you're opening run the JS to try to disable the toolbar and URL? I think you can also attach attributes to the URL if you wanted to send properties over.
You can use PopUpManager class of Flex for creating custom pop up box.
This example may help you. Custom PopUp
Check out AndrewT's blog about checking for popup blockers.
If not blocked, then use ExternalInterface; otherwise use the flex popup.
Detecting Popup Blockers
Or better yet, use SWFAddress v2.3 (javascript and AS3) modules. The AS3 has SWFAddress::popup() facade that proxies the poup call to the javascript. You can modify the SWFAdress.js popup function to use Andrew's logic and return a status. This would be a best practice: leveraging superlative SWFAddress library from flex for deeplinking, google analytics, and popups.

Resources