AIR as a Kiosk – Catching Escape Not Working
So I had a client this week that wanted to build a Kiosk application for an upcoming trade show. Of course I told them no problem knowing about the fancy new FULLSCREEN_INTERACTIVE mode of Adobe Air. Well maybe not new but new since the original release :)
So I put in the time and got this thing working great. It fires up and displays a pretty animation as a screen-saver, if you interact with the mouse it loads up the form for people to enter contact data and it was great. With one little exception. If you hit the escape key it took the application out of full screen and it didn’t work very well. Since this application is going to be running during a trade show they want to not make it very easy for the user to get out of the application. I thought this would be simple so I added a key down listener to the application and setup a listener with a break point so I could debug. The problem was unless i was out of full screen I was not hitting the break point. Which really doesn’t do me any good since I wanted to stop it from leaving full screen to begin with.
So I did a little googling and came up with a couple blog posts of people doing exactly what I wanted. The problem was when I ported their code into my application things were not working. You see I had an event handler on my WindowedApplication that called the init() function in response to the creationComplete. But when i got to init() my stage property had not yet been set. So I just used the nativeWindow.stage property thinking that they would end up being the same thing. Well as it turned out I was not catching any events on that stage for key presses.
It wasn’t until I posted on twitter thinking I had found a bug in the new 2.0 air stuff (both examples linked above were for the 1.5.2 release) did things become clear. You see the secret is in the stage. And the fact that I didn’t have a stage for my application should have been the big indicator. In a flex application creationComplete is the event that says all is well and you are ready to get started. However in an AIR application the final event that announces to the world you are ready to be used is the applicationComplete event. Of course the stage was not ready yet, the window had not been constructed at creationComplete.
So if you should come to building your own Kiosk and you need to catch key events when in full screen, remember to add the KeyboardEvent.KEY_DOWN event to your stage in your windowed application. And make sure you wait for applicationComplete to try to set the event listener.
Big props to Nate Beck for reminding me that creationComplete was just not gonna cut it. :)
It’s worth mentioning that application complete also applies to browser based flex applications, not just Adobe AIR application.
We run into this problem a lot with PushButton Engine which relies heavily on the stage. So we start the engine as a response to applicationComplete.
We are developing a “kiosk-mode” based application.
I use simple line of code:
this.nativeWindow.width = flash.system.Capabilities.screenResolutionX * 1;
this.nativeWindow.height = flash.system.Capabilities.screenResolutionY * 1.1;
This starts my application in fullscreen mode when onCreationComplete event is raised. The height is higer due to the fact that the Windows 7 taskbar otherwise get visible on mouseover. So the items in my application are displayed in a container that is equal to the height and width of the screen.
This also means that there is no restriction on what kind of code you want to load. Its always “interactive” :)
wow, re-tar-ded. i was wondering why my keyDown handler on WindowedApplication was not working.
you saved me a bunch of time, thx.