December 17, 2008

Debugging an Open Social application built with Adobe Flex

During my last work week of this year, I got involved in a fun little project where an OpenSocial Widget is developed. This particular widget is targeted at the Dutch Hyves communities. Hyves supports the OpenSocial standard version 0.7.

The widget itself mostly consists of an Adobe Flex 3 application that is embedded in an OpenSocial container using a flash-javascript bridge. The Flex application makes asynchronous calls to the OpenSocial API of Hyves through the javascript bridge.

Hyves users can add this widget to their profile and configure it to point to a charity activity that is initiated by this user. Friends of that user that donate money to support that charity activity are also displayed by the widget, including the total amount of funding that was donated.
All in all a very nice use case for a social application.

The widget was, of course, developed in very little time (remember this is charity...). The code looks awful, but that is okay, because maintenance isn't an issue. It is disposable software. However, because of the extremely pragmatic approach, some nasty bugs creeped in for which I could really use some sort of debugging mechanism. I needed to be able to look inside during runtime.

Fortunately, Hyves provides a sandbox environment that simulates embedding in a real environment. This is where you can test drive widgets that you develop. Of course, I could run and debug the flex application locally, but accessing the OpenSocial API is then meaningless, because you are outside the Hyves context. And, sure, I could possibly produce a debug version of the widget, embed it in the sandbox and connect the Flex Debugger to the application once it runs in the container, but I somehow couldn't get that to work.

That's why I desparately decided to build a mini log console. Since I see no point in keeping that to myself or my employer, I am sharing that thingy with you. It came in really useful to me. I could look under the hood while the app was running and see what was wrong. Purpose fulfilled.

The picture below shows the logger in action:


The mini logger consists of two parts:

  1. Logger.as
  2. LoggerPanel.mxml
Logger.as provides the main interface for writing log messages. It implements a singleton class that has two functions: clear(), and logMessage(message:String), and a public, bindable property logText.

LoggerPanel.mxml displays the contents of Logger.instance.logText, and provides a clear button.

Below I have attempted to display the source code for all this in a somewhat decent fashion. I couldn't get the layout like I wanted it. I hope you will forgive me for that.

Here's the source code for Logger.as:

package components.logger
{
public class Logger
{
[Bindable]public var logText:String = "";

public function clear(): void {
logText = "";
}

public function logMessage(message:String): void {
var now:Date = new Date();
var timestamp:String = "["
+ now.getFullYear() + "/" + now.getMonth() + "/" + now.getDay() + " "
+ now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds()
+ ":" + now.getMilliseconds() + "] ";
var newText:String = logText + timestamp + message + "\r";
logText = newText;
}

private static var _instance:Logger = null;

public static function get instance(): Logger {
if (_instance == null) {
_instance = new Logger();
}
return _instance;
}

public function Logger() {
}
}
}


Here's the source code for LoggerPanel.mxml:


<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
width="400" height="300" alpha="0.95" initialize="init();">
<mx:Script>
<![CDATA[< logger =" Logger.instance;" id="console" height="100%" width="100%" text="{logger.logText}" label="clear" click="logger.clear()" height="20">


Here's how you use it in your code:


<mx:application mx="http://www.adobe.com/2006/mxml" logger="components.logger.*">

<mx:script>
<!--[CDATA[ import components.logger.Logger; function doSomething(): void { Logger.instance.logMessage("I got here"); } ]]-->
</mx:script>

<!-- ... your components... -->

<!-- Embedding the LoggerPanel. You will need to tweak the position and size for ypour application: -->

<logger:loggerpanel visible="{loggerVisible}" id="logger" top="0" left="0" height="350" width="100%">

<mx:button height="20" top="330" right="0" label="{loggerVisible ? 'hide debug log' : 'show debug log'}" click="toggleLogger();">

<!-- End of LoggerPanel embedding -->

</mx:button></logger:loggerpanel></mx:application>


Use it to your advantage.

December 13, 2008

A loud and happy XMas to all!

A long time ago (1998), I purchased the best xmas CD ever: "wir warten auf's christkind..." by "die Roten Rosen" aka "die Toten Hosen" or in English: "The dead pants". I play it each year around XMas. It is really loud, rocky and punky. My kids love it too. You should see them jump around when I play the CD.

Someone made a splendid little animation using one of the songs on this CD ("Still, still, still"), which I found back on YouTube again. Here it is:



The one below is a live performance of the same song. Also hilarious:



If you can get your hands on the CD, then do so. It is a blast.
But whether you buy it or not:

I wish you all a loud and happy Christmas and a fine 2009!

December 08, 2008

I want an all-in-one communicator!

Here's a list of ways in which I currently communicate with others:

  • corporate e-mailing through outlook
  • corporate e-mailing through a web client
  • private e-mailing using my ISP provider's services
  • mixed private & professional e-mailing using GMail
  • chatting using mainly GTalk
  • group chats through chatterous (which isn't really useful for large groups)
  • publishing blog items on an internal blog (rarely)
  • publishing blog items on a public corporate blog (about once a week)
  • publishing blog items on my public personal blog (which you are reading right now)
  • leaving comments on blog posts
  • posting updates & replying to updates from friends on Twitter
  • sending direct messages on Twitter
  • phone calls over VoIP using my ISP provider's services (fairly frequently)
  • phone calls over VoIP using Skype (very rarely)
  • phone calls using a land line
  • phone calls using a cell phone
  • sending short messages using my cell phone (very rarely)
  • sharing documents on Google Documents
I could probably find a few more if I took more time, but I think this already suffices to make my point. To support all this communication I need various tools:
  • an e-mail client
  • a web browser
  • a Twitter interface (a web client or desktop client)
  • RSS reader
  • a cell phone
  • a chat client
  • a VoIP capable phone
I probably use a web browser for most of my communications, but I use various online applications for this, which in my opinion adds to the list of tools I need:
  • the URL of the admin interface of my personal blog
  • the URL of the admin interface of the corporate blog
  • the URL of Twitter
  • the URLs of the various webmail interfaces I use
  • ...
In spite of the title of this post, I am not looking for an all-in-one tool for ALL my communications, but a mashup of some sorts would be really usefull.

I am thinking of a single tool that provides me with the following services:
  • notify me when someone writes about a topic that interests me
  • notify me about comments I receive on a blog post (for all blogs I publish to)
  • notify me about updates to documents I share with others
  • notify me about e-mails that really interest me (for example because of their contents and because they are sent to me by people in my network)
  • notify me about my friend's whereabouts and activities (twitter)
  • allow me to contact people using various methods depending on my relationship with these people (e.g. twitter reply, leaving a comment, send a direct e-mail, chat, call, ...)
Wouldn't it be great to have all that combined in a single, easy to use tool? If it exists, please tell me where it is. Otherwise I am calling out to the open source community to go create one.