The Dev Shack » AIR

Adobe Air Notification Demo

mfleming — Wed, 29 Sep 2010 23:54:42 +0000

To go along with my previous post I have put together a demo so that you can download the source and see how the notifications work. As I was starting to zip up the source code I saw a comment on my previous post from Ray that made me think about a possible issue. Running a test using task manager, I quickly saw that every time I clicked the button to display the notification the memory used by AIR rose a little. With every click it rose higher and higher and never went back down. The problem was the main app window spawned a new window for the notification but never closed that window. I was able to solve this by using air.Timer. It sets up a timer that runs a function once it reaches the limit you provide. So setting this number a second or so after the notification fades out, allows it to close the notification window via nativeWindow.close();

The source code is below. If you are using Aptana Studio, you should be able to promote it to a project and then run it. I am open to suggestions on how to streamline this if possible.

Download Source Code: Notification-Demo.zip

Growl Type Notifications in Adobe AIR

mfleming — Wed, 29 Sep 2010 18:24:42 +0000

The past week or so I have been able to work on my first Adobe AIR app using HTML/JavaScript. So far I have been very impressed with what you can build in AIR. The application I have been working on pings a web service via jQuery and needs to pop up an alert to the user that new content is available for viewing. The most difficult piece for me so far has been building the notification functionality. My requirements called for notifications that were similar to those of some of the AIR based Twitter apps. In the lower right corner of the screen a notification should display then auto hide after a given time frame. I was able to get this working, but I was not happy with the display portion of the notification. It just appeared clunky to me.

On my quest to find another way to accomplish this I joined the newly created Google Group for AIR with HTML and JavaScript. I had mentioned in a post there that I had struggled a bit with the notifications. Andy Matthews replied back and made me aware of jQuery plugin named BlockUI that allowed you to create Growl type notifications. That is exactly what I was looking for. I was able to modify some of the code I already had and implement the new plugin. The results were great and were exactly what I needed. The plugin also allows you to easily change the opacity, fade in and fade out times, etc…

There are two parts of code here that makes this work. The first bit of code lives in my main HTML file for my application. This code creates a new window that will essentially be the holder of the notification itself. The last two lines of this code tell it to spawn my window and load the results of an HTML file into it.

function displayNotification()
{
	var options = new air.NativeWindowInitOptions();

	options.type = air.NativeWindowType.LIGHTWEIGHT;
	options.transparent = true;
	options.systemChrome = air.NativeWindowSystemChrome.NONE;

	var bounds = null;
	var screen = air.Screen.mainScreen.visibleBounds;
	var windowHeight = 150;
	var windowWidth = 400;

	bounds = new air.Rectangle(
		screen.width - windowWidth - 40,
		screen.height - windowHeight - 50,
		windowWidth,
		windowHeight
	);

	var notification = air.HTMLLoader.createRootWindow(
		true,
		options,
		false,
		bounds
	);

	notification.paintsDefaultBackground = false;
	notification.stage.nativeWindow.alwaysInFront = true;
	notification.navigateInSystemBrowser = true;

	var NOTIFY_SOURCE = "growl.html";
	notification.load( new air.URLRequest( NOTIFY_SOURCE ) );
}

So now that we have our window fired off, we need to create the associated HTML page that contains the notification itself. This is where the plugin comes into play. You can see from the code below that all the HTML page does is fire off the jQuery function to create our notification. The plugin will then handle the display of the message, which is simple HTML code wrapped into a DIV. I did create a stylesheet that I use for the notifications that is included as well.



	Notify

	

	
 	
	




    New Items Available
    New articles have been posted

The result is a nice looking notification that displays, then fades out after a few seconds.

Again, thanks to Andy for pointing me over to the jQuery BlockUI plugin.

MLB onBase: An Adobe AIR App

mfleming — Fri, 28 Aug 2009 11:01:34 +0000

I have talked before about some of the Major League Baseball apps on this blog before. They have added another application to their arsenal this week: MLB.com OnBase. This application is built on Adobe AIR and is one slick little app.

When you first start the app you can choose your favorite team or teams or you can flag your favorite players. It then uses these settings to notify you of any news or updates involving your selections. So for example, you will get an alert when the lineups are set for your teams games. There are also alerts for in game notifications. When a team scores in a game that involves one of your flagged teams, an alert pops up informing you that a run or runs scored and how they scored. It also displays the scoreboard of your team’s games.

Twitter is also an integral part of the application. Part of the news feeds involving your favorite teams or players , are tweets that are found matching your selections. This updates every few minutes. You can also hook up your Twitter account and send tweets directly from the application.

I have always believed that Major League Baseball is at the forefront of internet related technology in the pro sports. Their MLB.tv offering is the best streaming technology in sports, bar none. With the release of this application they continue to be the front runners in cool technology.

Facebook Finally Gets the Big Picture, Opens up API and Releases AIR App

mfleming — Mon, 27 Apr 2009 22:24:04 +0000

It appears as though Facebook is finally getting the hint about it’s API. The company announced today they have released the Open Stream API. This new API will allow developers to take advantage of all kinds of Facebook features. This same openess has worked wonders for Twitter, and I am sure Facebook is hoping for the same. In my opinion Facebook was forced to do this in order to keep up Twitter, as their service is growing like a wildfire every day. I for one, have stopped using Facebook on a regular basis due to this. I do not like having to log into their website (which is slow) to interact with certain features. I love Twitter because I have a plethora of desktop and cell phone apps to choose from.

On a related note Facebook has also announced an application built for Adobe AIR. Now I can’t wait for TweetDeck to update and use all the new Facebook features!

TweetDeck Introduces Facebook Integration

mfleming — Tue, 17 Mar 2009 12:02:13 +0000

TweetDeck has announced a new beta version of their AIR product that introduces Facebook integration. I downloaded it yesterday and have to say that so far it appears promising. You can now view status updates from your friends on Facebook directly in TweetDeck. When posting a new message you can choose to send it to Twitter, Facebook or both. Just remember that this release is a beta release, so use at your own risk.

Below is a quick screenshot of what the new message area looks like (notice the checkboxes for Facebook and Twitter).

Queued: Netflix AIR Application

mfleming — Wed, 04 Mar 2009 00:13:06 +0000

Yesterday I came across another wonderful Adobe AIR app. It's called Queued and provides an interface to your Netflix account. The application is provided free from SitePen, Inc. and uses a combination of Adobe AIR, the Dojo Toolkit and the Netflix API. Queued will allow you to view your queue, add movies, rate movies and launch on demand movies. It's an impressive application and I would recommend checking it out if you are a Netflix subscriber.

I would also like to point out they also allow you to download the source code! So you can open the hood and see how this application was put together.

Download Queued here.

New AIR Application: CL Desktop

mfleming — Thu, 26 Feb 2009 12:49:33 +0000

Ever been on Criagslist before? I am sure most everyone has by now, at least to browse some listings. It has one of the most minimalist designs of any popular site in history. If you have ever wished for a nicer looking layout for the site, look no further. CL Desktop is an Adobe AIR app that wraps Craigslist into your desktop. I have not tried the application out yet, but it appears you can save searches to run again as favorites. Another plus is that it allows you to view the pictures associated with a post on the listing screen. This eliminates the click to a listing just to see a photo. If anyone has tried this yet let me know what you think.