Skip to content
January 13, 2010 / ranacse05

Change UI on Deactive


I was working on Adobe AIR few days ago . Honesty i liked it very much . We needed a desktop app for our web application then we were worried about the various OS and languages , then suddenly i thought about AIR . So we did it using AIR , that makes it cross-platform and easy to develop because we used HTML,CSS & JS .

So i was thinking to make the UI fade if the app is not Active but the problem is when i tested the application i saw that after deactive the UI just become fade and after 2~3 seconds its fade effect gone again !

Here is the solution .

First we have to add a new addEventListener on boot . Suppose our function is onDeactive so it’ll be like

nativeWindow.addEventListener(air.Event.ACTIVATE, onActive);
nativeWindow.addEventListener(air.Event.DEACTIVATE, onDeactive); 

the onDeactive function is here

function onActive(){
			document.getElementById('BodyWarpper').style.opacity = 1;
		}

function onDeactive(){
		if(!window.nativeWindow.active)
			document.getElementById('BodyWarpper').style.opacity = 0.8;
		}

How its working ? Actually in AIR after every second the the EventListener called . So when we make the UI deactive it called the ondeactive function and set the opacity 0.8 but then again after 1 second it call the onDeactive and onActive and if we don’t use the checking

if(!window.nativeWindow.active)

It just make the UI opacity 1 again .

Have fun !

About these ads

2 Comments

Leave a Comment
  1. Joy / Jan 14 2010 3:00 am

    Nice to know. AIR is really a cool thing!

  2. Indian Social networking / Mar 21 2010 7:09 am

    :) very nice information
    thanks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 29 other followers

%d bloggers like this: