<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>CarbonRider &#187; AIR notification</title>
	<atom:link href="http://www.carbonrider.com/tag/air-notification/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.carbonrider.com</link>
	<description>You make a matrix, you define the limits.</description>
	<lastBuildDate>Wed, 08 Sep 2010 17:33:39 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>AIR Notifier</title>
		<link>http://air.carbonrider.com/2009/10/17/air-notifier/</link>
		<comments>http://air.carbonrider.com/2009/10/17/air-notifier/#comments</comments>
		<pubDate>Sat, 17 Oct 2009 06:30:22 +0000</pubDate>
		<dc:creator>Carbon Rider</dc:creator>
				<category><![CDATA[Air]]></category>
		<category><![CDATA[AIR notification]]></category>
		<category><![CDATA[AIR notifier]]></category>
		<category><![CDATA[AIR popup]]></category>
		<category><![CDATA[popup window]]></category>

		<guid isPermaLink="false">http://air.carbonrider.com/?p=133</guid>
		<description><![CDATA[Building applications with AIR is real fun and what could be more interesting when you install it on desktop and see it running. In last few months, I have seen many applications built using Adobe AIR. Nice, soft look and feel, great functionality, quite handy are some of the words I will use to describe those applications. [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fair.carbonrider.com%2F2009%2F10%2F17%2Fair-notifier%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fair.carbonrider.com%2F2009%2F10%2F17%2Fair-notifier%2F&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>Building applications with AIR is real fun and what could be more interesting when you install it on desktop and see it running. In last few months, I have seen many applications built using Adobe AIR. Nice, soft look and feel, great functionality, quite handy are some of the words I will use to describe those applications.</p>
<p><span id="more-133"></span></p>
<p>Well how can I keep myself from building one on this buzzing technology and so I started one. I found that building application in Flex and AIR is not so different (apart from configuration and few more added AIR API&#8217;s). The journey was so far good but when I started looking for creating a notifier that can have a pleasant look and feel and with some flashy effects, I really struggled to find options.</p>
<p>It wasn&#8217;t that bad, I found quite a few good reference sites but unfortunately none of them met my expectations. But when I saw twhirl with its awesome notification display, my fingers started googling again to find how can I get something like the one I can see now on my desktop.</p>
<p>Overall I liked the appearance of twhirl and the way stuffs are managed into it. The most interesting part was twhirl notifier. It pops up when you receive a message and it goes like whosshhh. After crawling through various sites and reading many source codes, I found an interesting project on Google Code &#8211; <a title="Bamboo Notifier" href="http://code.google.com/p/bamboo-notifier/" target="_blank">Bamboo notifier</a>. Getting deeper into the source code, helped me to understand how Bamboo displays notification and hurrayy thats what I was looking for. No additional SWC, everything built using Adobe AIR APIs.</p>
<p>I used similar concept and on top of that using Flex Effects, I finally achieved what I was looking for.</p>
<p>Well not to stretch any more, here is the code snippet that might help you to built your own notifier.<br />
There are two files,<br />
1. One that is used as popup. (Notification.mxml)<br />
2. Used to display popup. (Client.mxml)</p>
<p><strong>Notification.mxml</strong></p>
<pre class="brush: xml;">
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" creationCompleteEffect="{fade}"
width="250" height="75" cornerRadius="8" borderStyle="solid" borderThickness="1" alpha="0.1"
backgroundAlpha="0.8" backgroundColor="#2E2E2E"  creationComplete="startCloseTimer()" mouseOver="closeTimer.stop()" mouseOut="closeTimer.start()">
<mx:Script>
<![CDATA[
import mx.events.CloseEvent;
[Bindable]
public var message:String;

private var closeTimer:Timer;

private function startCloseTimer():void
{
closeTimer = new Timer(3000);
closeTimer.addEventListener(TimerEvent.TIMER, function():void
	{
	mvEffect.play();
	closeTimer.stop();
	closeTimer = new Timer(1500);
	closeTimer.addEventListener(TimerEvent.TIMER, function():void
		{
		dispatchEvent(new CloseEvent(CloseEvent.CLOSE));
		closeTimer.stop();
		});
	closeTimer.start();
});
closeTimer.start();
}

private function closeWindow():void
{
mvEffect.play();
closeTimer.stop();
closeTimer = new Timer(1500);
closeTimer.addEventListener(TimerEvent.TIMER, function():void
	{
	dispatchEvent(new CloseEvent(CloseEvent.CLOSE));
	closeTimer.stop();
	});
closeTimer.start();
}
]]&gt;
</mx:Script>
<mx:Text text="{message}" x="16" y="24" width="170" height="39" color="#FFFFFF" fontFamily="Arial" fontSize="12" id="notificationText"/>
<mx:Button click="closeWindow()" label="X" cornerRadius="8" fillColors="[#B70000, #560000]" fillAlphas="[1.0, 1.0]" right="0" top="0" color="#FFFFFF"/>
<mx:Fade id="fade" alphaFrom="0.1" alphaTo="1.0" duration="2000"/>
	<mx:Move id="mvEffect" target="{this}" yTo="{this.y + 150}" duration="1000"/>

</mx:Canvas>
</pre>
<p><strong>Client.mxml</strong></p>
<pre class="brush: xml;">
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="showPopup()">
<mx:Script>
<![CDATA[
import mx.events.CloseEvent;
import notification.Notification;
private function showPopup():void
{
var descriptionPopup:NativeWindow;
var nativeWindowOptions:NativeWindowInitOptions = new NativeWindowInitOptions();
nativeWindowOptions.type = NativeWindowType.UTILITY;
nativeWindowOptions.systemChrome = NativeWindowSystemChrome.NONE;
nativeWindowOptions.transparent = true;
nativeWindowOptions.resizable = true;
descriptionPopup = new NativeWindow(nativeWindowOptions);
descriptionPopup.width = 250;
descriptionPopup.height = 75;
descriptionPopup.stage.align = "TL";
descriptionPopup.stage.scaleMode = "noScale";
descriptionPopup.alwaysInFront = true;
descriptionPopup.x = Screen.mainScreen.visibleBounds.right - descriptionPopup.width;
descriptionPopup.y = Screen.mainScreen.visibleBounds.bottom - descriptionPopup.height;

var container:Notification = new Notification();
container.message = "Hey hi there";
mx.core.Application.application.addChild(container);
mx.core.Application.application.removeChild(container);
descriptionPopup.stage.addChild(container);
descriptionPopup.activate();

container.addEventListener(CloseEvent.CLOSE, function():void{
	descriptionPopup.close();
});
}
]]&gt;
</mx:Script>
<mx:Button label="Hi there" click="showPopup()"/>
</mx:WindowedApplication>
</pre>
<p>For your reference, I am attaching Flex project with this post. <a href="http://www.carbonrider.com/wp-content/uploads/2009/11/AIRRND.zip">Click here</a> to download.</p>
<p>Hope this will help you to kickstart building your own Notifier.<br />
So keep airing and notifying <img src='http://www.carbonrider.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://air.carbonrider.com/2009/10/17/air-notifier/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>
