Yep! that’s a weird title but couldn’t think of anything better at this point, basically what I am going to explain you in this post is how you can integrate Flex SWF in XUL and develop something really cool Firefox extension (something like Google toolbar). I am going to explain you how to develop toolbar for Firefox that will launch Flex application independently (SWF will keep running even after browser is closed). This isn’t sounding cool enough then I will explain how LocalConnection will play role in this marriage. I am planning to develop ShoutCast! Toolbar which user can install in Firefox and this will automatically synchronize with ShoutCast! Widget which is embedded in user’s website or blog. Now you might have guessed it… Yes it’s LocalConnection which will synchronize Ribbit session between embedded widget and ShoutCast! Firefox toolbar.

Before further details let’s look at what is XUL (XML User Interface Language (XUL): check http://en.wikipedia.org/wiki/XUL for more details.)

Let’s start with an screenshot which will help you get started (Visuals are better than 1000 words)

My toolbar might not look fancy but it is developed for POC and can be extended further if needed.

But I it is definitely a cool idea to give your Flex application an extra edge and extend it to be part of most popular web browser.

As you can see there is a toolbar added above Google toolbar with one button called ShoutCast! When you click on that it will launch Flex SWF file in new window and this window will be detached from main browser window (ShoutCast! Window will keep running even after browser is closed).

Now LocalConnection will play its part, as Ribbit API will allow only one user session to be created at any given time that means I can only login in either of these applications (either embedded widget or toolbar launched app) but not in both and to solve this problem I have used LocalConnection which will share Ribbit Session Object between these two Flex SWFs.

LocalConnection Example:

Sender Application:

Receiver Application:

Above is one directional LocalConnection one can send and one can receive, in order to make if bidirectional you need to use unique connection names in both files and connect to them e.g.

LCObj.connect(“myConn270″);

For more information about LocalConnection checkout Flex 3 documentation.

XUL Example:

ShoutCast! Toolbar source code

To understand this you might need to explore a little bit and play with it, checkout following resources and try.
http://www.mozilla.org/projects/xul/
http://developer.mozilla.org/en/docs/Extensions
http://www.xulplanet.com/
http://www.xulplanet.com/tutorials/xultu/

Keep Flexing,
Satish