The Dev Shack » jQuery

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.

Using jQuery and ASP.NET

mfleming — Wed, 15 Apr 2009 10:48:36 +0000

I’ve been using jQuery quite a lot lately in my ColdFusion apps. I’ve been working on a .NET site and yesterday I needed to throw a little jQuery into that site. I quickly found that ASP.NET poses one issue when using jQuery or simple Javascript in the situations where you are performing an operation on a named element. This relates specifically to using the ASP.NET controls, or any HTML control that has a runatserver command. As soon as you set runatserver=”true” on a control or HTML element, ASP.NET will rename that element when the page is loaded. For example, if I have a div element with an id attribute of “displayInfo”, ASP.NET will convert the ID into something like: ctl00_MainContent_displayInfo. As you can imagine this makes it difficult to use in some situations. But there is a very quick solution.

Microsoft has provided a simple ClientID variable that you can call that returns the correct ID of the control or HTML element. You just append .ClientID to the ID of your element. So in our example of above we would use displayInfo.ClientID anytime we needed to reference the displayInfo div in our jQuery or Javascript code.

Below is an example of using this with a little jQuery:

Using the jQuery UI Datepicker

mfleming — Fri, 06 Mar 2009 11:58:57 +0000

I have really been into learning and using jQuery the last few weeks. I keep coming across some very simple functions that provide a much nicer UI experience. One of these is the Datepicker widget that is a part of the jQuery UI package. The widget is super fast and is customizable in a variety of ways. It takes only a couple of lines of code to add into your page. To place the widget into your code with the default setup is simply this:

I am not going to post any demos, as the jQuery UI page for this widget has all you need. It also lists out all the options you can pass in to control the widget as well. Some of the cool features I like are:

You can easily set the date format it returns
You can restrict the selectable date range
You can display more than 1 month at a time
You can display the widget inline