AIR HTML Alert

As part of a larger project, I have been working to simulate an alert from AIR ala TweetDeck. Attached to this is the results of that work. I stripped the alert out so that I could share it. I have included the AIR application as well as all the source code.

The application example is very simplistic. It is just an AIR html window with a button to launch the alert. In the larger application this came from I launch the alert as a response to a BlaseDS message. The alert window is actually a styled, transparent AIR window.

Now, let me try and explain the workings of the code. The first part is the launching of the alert window. Using "air.Capabilities" I am able to get the resolution of the users screen. This allows me to create positioning so I can place the alert top right on the screen. Next I set the options for the window. These options just create a transparent window with no header/footer or other controls. The last part is just the click action to launch the window and have it load the html file into itself.

[More]

Air HTML mouseOut event

While working on an AIR / HTML project I needed to fire an event if the mouse left the window. This seemed fairly straight forward. Just add a mouseout to the html body.

view plain print about
1<body onmouseout="somefunction();" >

However, the onmouseout never fired. Adding the same onmouseout to a div also failed. So, I then tried to use jQuery's events to catch the mouseout

view plain print about
1$('#someDiv').mouseleave(function(){
2     //something here
3     });

Unfortunately, this had the same result; the event never fired.

I then started looking into AIR specific functions to see if there was something to accomplish this. To my non-surprise AIR has this handled.

view plain print about
1window.nativeWindow.stage.addEventListener('mouseLeave',function(e){
2     // some js here
3    });
4    
5    window.nativeWindow.stage.addEventListener('mouseOver',function(e){
6     // some js here
7    });

Till next time..

--Dave