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:

  2. LoggerPanel.mxml 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

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=""
width="400" height="300" alpha="0.95" initialize="init();">
<![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="" logger="components.logger.*">

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

<!-- ... 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 -->


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.

November 27, 2008

JavaFX: cool, but not hot

Some days ago I posted an item on JavaFX on the Capping IT Off blog titled: JavaFX, will the cat jump? The item has a slightly ironic undertone. That is because I am being very sceptic about JavaFX. However cool it will become, it will probably not become hot. That reminds me of that crazy webbrowser SUn once had: HotJava. That wasn't really hot either. Sun just doesn't seem to have the knack for being hot & cool.

Well anyway, I keep on playing with JavaFX, because it really is a very cool technology. I even put my pet project Tweetbox out in the open on Google Code.

Let me know if you want to join me and see where we could end up with this. I haven't seen any really really cool JavaFX apps yet, except for a few thingies and trinkets here and there. There's really a lot more that can be done with JavaFX, like for example a nice and smooth twitter client. Have a look at it and let me know what you think.

When you get it running it should first ask you for your twitter id and password. Enter them and save. Then restart the app. You should then see some tweets. It's not fully functional yet. Lots of functionality is still missing, but hey, it's a toy project and I have a family too.

November 23, 2008

Talking about JSF

This Wednesday, I will be doing a little talk about Java Server Faces for a group of Capgemini colleagues. I actually have no hands-on experience with JSF, so I had to do some reading first. Some time ago (around the time I promised to do a provocative talk about JSF) I was a bit skeptic about this technology, but I know better now. There is a lot going on around JSF, and I take distance from a phrase I dared to say in front of a group of Java experts: "JSF is obsolete".

Below you should see the slides for my presentation. I am still working on them, but you may as well take a peek and provide me with your feedback.

You can view the full screen version here

November 09, 2008

TweetBox preview release

The title sounds more official then I intend to, but I guess this what I should call it. I don't even have a versioning scheme for TweetBox. I still see it as a toy project. On the other hand, the TweetBox is taking nice shapes. Programming JavaFX turns out to be a lot of fun, and once you get the hang of it, it is pretty easy too. Imho, java developers now finally have a sophisticated GUI API that is productive (Swing is rather counter-productive, and that's coming from a faithfull fan) and easy to use. JavaFX still has quite a way to go before it becomes as sophisticated as Adobe Flex and AIR, but still. A big pro of JavaFX is that the syntax of the language allows you to build GUI's declaratively (just like Flex's MXML) and that it is very neat and clean. Compared with JavaFX, MXML is definitely more cumbersome.

You can download the binaries for TweetBox here. Simply unzip it somewhere and double click TweetBox.jar (or run "java -jar TweetBox.jar" on the command line). Mind you, it still misses lots of functions that we take so much for granted in tools such as Twhirl, such as sending updates, replies and direct messages, retweeting, following/unfollowing people, et cetera. I have now come to appreciate them even more.

For the time being, configuration of your twitter login credentials must be done through a properties file (here's an example), that you must place in your user home folder (you can figure out the location of that folder yourself, I just use the value of the java system property "user.home").

TweetBox sometimes crashes rather spectacularly every once in a while at startup. That has something to do with the fact that I am using a separate thread for invoking the Twitter API. Also, it is not yet getting your friend timeline at regular intervals. The button with the binoculars allows you to do a twitter search. It will only get 20 results, but it works.

I have only tested TweetBox on Vista, so let me know the results of using it on other platforms.

In short, TweetBox is unstable and misses lots of features, but admit it, the way it fades in on your desktop when you start the TweetBox, it's nice shapes and that you can see through it is awesomely cool.

November 07, 2008

TweetBox progress

I have received a few cheers (thanks Lee and Rick), so I continued my hobbying with JavaFX. I am now really getting the hang of JavaFX. This fall, version 1.0 of the JavaFX SDK will be released. I can't wait, because many things in the preview release that I currently using are a bit cumbersome.

It also misses some rather essential GUI building blocks, such as a scroll view. So, I had to build one myself (I used James Weaver's TableNode class as the basis). I also had to write a new Text node that can wrap text. I had to do some very ugly AWT tricks to pull that off.

The current application still is very dumb, but it works rather well. I will next have to implement some config screens and have the tweetbox get tweets at a configurable interval.

At some point, I think I will decide to make this all open source on, so you can all look at the code and see how it is done.

In any case, here's a new screenshot (some of you should recognize the color scheme):

November 06, 2008

Mark opened his mind

Yesterday, I was at the Open Your Mind mini conference at Capgemini in the Netherlands. This year, this event was organized around Capgemini's Technovision, which is not just about social networking, rich internet applications, SaaS or iPodification, to name a few of the innovation blocks, but really about freeying your business' energy for innovation.

I attended these talks:
1. Technovision and Open Source Software by Ron Tolido from Capgemini
2. The launch of by Rob Bindt from Capgemini
3. Changes need innovation by Aad Koppenhol & Jaco Haans from Sun
4. Using jBPM to coordinate your enterprise by Michel Goossens from Redhat/JBoss

All in all, a very interesting event. Well organized. Good speakers.

I happily tweeted away during the talks. My tweets are summized here.

November 02, 2008

Teaching myself JavaFX by building a Twitter client

I am playing with the JavaFX Preview SDK to see what it does and feels like. I am using Netbeans 6.1. So far, I think I like it, although it takes some time to get used to the JavaFX syntax. It looks like java and underneath it is java, but you need a different mindset to use it.
The preview SDK is missing several things as it seems. Maybe I am using the wrong distribution.

To teach myself JavaFX I needed a goal. Something simple and fun to build. I decided on a Twitter client. Using much of James Weaver's (check out his blog, it is worth your while if you want to learn JavaFX) example code, I have cobbled together a very crude Twitter thingy that can only read my own friend timeline (or the public timeline), but I have gotten this far without too much effort.

Here's a screenshot:

Of course, I will never finish it, because I perpetually lack time. Cheering me on might help.

October 27, 2008

SaaS for enterprises

Lately, I am thinking a lot about Software-as-a-Service (SaaS). I can easily see the benefits of SaaS, which I will not discuss here. But I have concerns too, especially in using SaaS on an enterprise scale. Currently, using SaaS means accessing applications (e.g. a word processor, or a spreadsheet application) through the web. The benefits of that are easy enough to grasp. I have more difficulties grasping this on a bigger scale: using SaaS on enterprise scale. Here are the questions that I have at the moment:

1. How sensible and safe is it to base important, critical parts of your business on SaaS?

Suppose you would use SaaS for something strongly data centric such as ERP. In such a case, the ERP Service provider is responsible not only for providing the required functionality and UI, but also for providing storage of all your data. In other words: would you trust your data to the service provider? Should a government use SaaS in that way for examle? What if the SaaS provider goes bankrupt?

2. Do you always have to accept changes made to the software by the SaaS provider?

With classic software, you can use a certain version of that software as long as your system can support it, even after the vendor of that software has stopped providing support for that version. A property of SaaS that is often named as a benefit is that you always have the latest version. Is that really always a benefit? Businesses using SaaS will base their workflows on the functionality and user interfaces of provided software.

3. Is SaaS mature enough for providing enterprise level QoS? Will it ever be?

This concern is related to my first question. Basing critical parts of your business on SaaS requires certain guarantees about availability, reliability and performance. Can such service level agreements be made individually for every business?

Don't get me wrong, I really digg the concept of SaaS. I am a definitive adopter of SaaS. However, I feel that these are important issues that I would want answers for before I would advise SaaS on an enterprise scale. Maybe I am thinking too far ahead. Tell me what you think.

Write once, REALLY run everywhere

Remember Sun's slogan for Java: write once, run everywhere? Because of the platform independency of Java, a Java application will indeed run on many platforms without any rewrite or recompile. Java is mostly used on the server side of things but it is hardly used on the desktop. I doubt that JavaFX will change that. On the other hand, Java is huge on mobile devices (Symbian). All in all, Sun has done an impressive job at keeping their promise.

Interestingly however, Java is quickly loosing field in this respect from a surprising enemy: Javascript. An open source HTML rendering kit that has become hugely popular in a small period of time deserves the credit for this: Webkit.

Webkit might well be the most installed piece of open source software today. Here are some instances I know from the top of my head: Apple Safari, Apple's iPhone (and the iPod Touch), Adobe AIR, Google's Android, Google's Chrome, Nokia's S60 phones (read section 2.1 of this pdf), Nokia's N810 (web tablet) and KDE. Webkit definitely has good specs: it is small, it is fast and it has a very good and simple API. That last one makes it a very popular choice for developers, resulting in a large and active online community.

As of version 4, KDE has been outfitted with a brand new desktop shell named Plasma. Plasma deploys Webkit (which originally started as KHMTL as part of the Konqueror webbrowser) for allowing web applications (javascript) to run natively on the desktop.

By the way, KDE nowadays runs on just about any major operating system (I heard this on the FLOSS Weekly podcast while I was commuting). Yes, that includes Windows and MacOS. Being the geek that I am, I installed KDE on my Vista Laptop (no sweat at all), and there you go, Konqueror (among other K-stuff) is now on my desktop. I am free!


KDE also uses Trolltech's QT, a multi-platform C++ GUI toolkit. Trolltech has been bought by Nokia in the beginning of this year. Below is a citation from the official press release:

The acquisition of Trolltech will enable Nokia to accelerate its cross-platform software strategy for mobile devices and desktop applications, and develop its Internet services business. With Trolltech, Nokia and third party developers will be able to develop applications that work in the Internet, across Nokia's device portfolio and on PCs. Nokia's software strategy for devices is based on cross-platform development environments, layers of software that run across operating systems, enabling the development of applications across the Nokia device range.

As of version 4.4, the WebKit API has also been included in QT. That is how WebKit must have ended up in so many Nokia devices. Very interesting. Webkit is becoming ever more ubiquitous. Applications that are developed against this platform will quite probably run without problem on any of the Webkit instances listed above. It means that you can now truly write your application once and run it on almost any desktop and a large number of mobile devices too.

Isn't it interesting how an open source product such as WebKit has sneakily made its way to so many platforms and as such created a very ubiquitous platform for web application development? This ubiquity is especially significant in the light of SaaS but that is something to explore in another post.

To me this all proves that Open is the way to go.

October 10, 2008

Talking about Adobe Flex from an Architecture's perpective (soon)

On october 21st, I will give a short talk about Adobe Flex for a group of colleagues. I won't have much time to prepare my slides, and my wife will not be amused if I take my laptop with me on the holiday planned for next week. Besides, I will be having too much fun with my children.

Fortunately, my Adobe contact provided me with some nice slides that I can use in my presentation, and I am good at improvising.

I'll keep you posted.

September 22, 2008

talking about mashups

This thursday, I will do a short talk about Mashups for a special interest group about user centered design at Capgemini in the Netherlands. I have prepared my slides on (my favorite online presentation tool). You can see my slides below:

July 21, 2008

Hyper Clarity

We have had quite a lot of rain here but there's only a slight drizzle now. We are on our way to Apeldoorn to pick up our twins who were sleeping over at my parents in law. As we approach the N11 (a local highway), it suddenly happens: the front wheels of the car slightly skid sideways to the left. I steer a little bit to keep course, but then the rear end of the car skids to the right causing the car to spin. I lost control over the car, and I hear myself curse and yell "ooh, no here we go!". My wife braces for whatever impact there is to expect.

My immediate thoughts were with my son who sits in the back, and my wife who sits next to me. Then, while the car spins its first 360 degrees and at the same time bumping into curb of the shoulder, I think about the skid course that I once took, years ago. As if I have all the time in the world, I assess the situation: speed is about 50 kilometers per hour, little other traffic and all behind me, the car is spinning anti-clockwise, we are moving into the curve in stead of out of the curve, I have depressed the clutch pedal with my left foot. Based on those observations, I decide to keep my left foot down and steer to the right (in my mind, that involved frantic turning, but my wife told me that wasn't the case at all).

The car makes another spin and breaks loose from the shoulder. I am now on the approach for the opposite direction on the N11 that we were heading. No traffic. Good. I keep the clutch depressed. The car makes one final spin and because I notice we are about to crash into the next shoulder I decide to step on the breaks. A few easy, steady pumps at first. I am recovering control over the car! It stops spinning, but now drives backwards. Now I step on the break, depressing it completely. ABS kicks in. We bump over the second curb and come to a stand still on the exit from the N11. Fortunately, there is no traffic at that moment. Good thing this is happening on a sunday.

The situation seen from above (Google Maps). I have drawn in the trajectory of the car. This particular highway approach is a notorious one, as there have been several accidents here before.

By passers stop to see if we need help, but we are okay. I restart the car and drive it to a safe spot where I finally freak out. I am shaking with excitement and I feel like laughing. We were incredibly lucky. My son cries a little bit, but he is very brave. My wife is all shaky too. I seem to have used up all my mind clarity, because I really don't know what to do. Now what? Let's call your dad, I say to my wife. There really is no logic to that at all, and my wife calmy tells me to call the police in stead.

The police instructs me to wait there, and while I do that I walk around the car and look at the trail of gravel I have made on the road. I have thoroughly ploughed up about three meters of a road shoulder. There's almost no damage to the car. Amazing.

A few moments later the police arrives. They are very friendly and point out that one wheel is broken and that the car needs to be towed away. I am also requested to breath into a drunkometer. I probably make a drunken expression because I have just made a full three bloody spins with my car. Of course, I wasn't drunk, but I don't blame them for checking.

The tow truck arrives and about an hour later we drive back home in a rental car. All is well. We were very lucky. At home, I reflect on the whole situation. I am amazed by the extreme clarity I had during the time the car was skidding and spinning. It must have been only a few seconds, but it seemed more like a whole minute. I very clearly remember the cool and calm assessment that I made and the decisions I made based on that. I had completely shut out fear and uncertainty. The adrenaline did its work, enhancing my sight, hearing, sensitivity and body strength and creating hyper clarity in my head. Wow, what amazing creatures we are!

July 07, 2008


This wednesday, I will be giving a little talk about my experiences with Adobe AIR (for Capgemini insiders). I will also be showing off that ultra cool 280 Slides, because I have composed my slides using that.

Here's a link to my presentation, and below, you should see that presentation as it is loaded by the embeddded 280 Slides Viewer.

May 18, 2008

AirWiki received SoftPedia "100% Clean" Award!

AirWiki has just been certified by SoftPedia to be 100% malware free.
This is awesome!

You can read the review here. They even made screen shots of their tests.
They also tested it on a Mac, which is what I hadn't done yet. Thanks SoftPedia!

April 13, 2008

AIR wiki is open sourced

What can I say? I open sourced AIR wiki under the Mozilla Public License. I put all the sources on Google Code. These include:

  • the sources of the AIR Wiki application
  • the sources of a Flex library for doing very basic object-to-relational mapping (ASORM)
  • the sources of a Flex library for doing text diffs (ASTextDiff)
  • the sources of a ASTextDiffTester
The ASTextDiff library is not yet used by AIRWiki, because it is still too buggy to my taste. As I mentioned in my previous post, I ported a TextDiff algorithm that was written in Java to ActionScript 3. The original algorithm is well documented and looked promising. It was fairly easy to port to AS3. I added a few functions for generating edit scripts and reading those edit scripts back and reproduce a new version text from an old version of that text. And that is where it gets buggy. Play a little bit with the ASTextDiffTester application, and you will see what I mean. Your invited to help me out here.

Here's the project page URL:

You can download the sources and use it to your advantage as long as you don't violate the MPL rules. And you are more than welcome to contribute to the source code too. Just let me know, and I will create the necessary account.

April 09, 2008

AIR wiki progress

I have made some progress with my AIR wiki. I now have a nice little AIR application that has the following functionality:

  • edit & save pages
  • navigating to pages through internal links
  • load page from a page index
  • supports a bunch of basic MediaWiki compatible wiki patterns:
    • bold text ('''bold''')
    • italics text (''italics'')
    • bullets (* bullet)
    • horizontal line (---)
    • heading levels 1 to 3 (==level1==, et cetera)
    • simple internal links ([[internal link]]
    • simple external links ([[http://...]])
I have tried to keep the wiki as simple as possible while at the same time trying to use some of the rich features of AIR. For example, I have built-in an automatic preview for the editor. The wiki source text is parsed and rendered in the HTML view while you are editing it. I thought that would be cool. I have also added a little numeric stepper that allows you to time travel through the revisions that have been made to the page you are editing.

The application uses a few of the excellent FamFamFam Silk Icons: ... I hope I am not breaking any licensing rules in that respect. Flex developers: check these icons out, because they are really useful.

You can download the first version of AIRWiki: here. It includes a source view. Admitted, the code needs cleaning, but there it is. Let me know what you think of it.

I am applying a simple architecture style that is much inspired by Joe Berkovitz' MVCS. I like MVCS because it is plain and makes a lot of sense. I have a simple FrontController that provides access to the main use cases (Load page, Save page, ...). There also is a simple Model component that records the application state in properties such as currentPage. Only these two components are directly accessed from MXML components. Al the lower level stuff such as the actual storing of PageUpdates into the database is hidden from MXML. The database is even hidden from the FrontController, because I have implemented a StorageService that takes care of all the database interactions.

As I said, I want to keep things simple (because that is the essence of a wiki). Therefore, I wanted to have the simplest data model that I could think of. It consists of two entities: Page and PageUpdate. A Page consists of multiple PageUpdates, and a PageUpdate belongs to exactly one Page. The underlying SQLite database only has a single table "PAGE_UPDATE" for persisting the PageUpdate entities.

Page diffs
At the moment, a PageUpdate stores a complete page, and not a delta from the previous revision. I am working on that now. I have ported a Java TextDiff algorithm to ActionScript 3.0 to be able to generate unix style edit scripts which I could use as the deltas between PageUpdates. So far, that has resulted in a little Flex library named ASTextDiff and a test application. It compares textA and textB , resulting in a Diff report. This report can generate an edit script whichm, when applied to textA, results in textB 95% of the time (it is still somewhat buggy).

By the way, porting Java to AS3 by hand is not too difficult, but it is a pain. I believe it could very easily be automated. Doing it by hand is very tedious. First you will have to "rotate" all variable and class method definitions. For instance: int i in java becomes var i:int in AS3, and String someMethod(String s) in java becomes
function someMethod(s:String):String
in AS3
. Besides the syntax rotating, you also need to translate Java Collection classes and other concepts to AS3 classes and concepts. A Java Map for instance could be translated to a simple AS3 Object. I chose to create a simple AS3 class named Map that mimics the behavior of a Java Map.

I intend to put the sources of my little project out in the open for everybody to use, probably on Google Code.

March 27, 2008

Wiki in AIR

I have started my first Adobe AIR project (whoohoo!). After I heard the announcement about WikiNotes, a wiki for Android (by Dick Wall) on the Java Posse podcast, I decided to magic my own wiki implementation out of AIR.

So far I have an AIR app with a TextArea, a Save button and an HTML View. I have reused the wiki parser example from the Flex3 examples to convert the wiki format to HTML. Text that is typed in the textarea is converted to HTML and displayed in the HTML View. It took me about 30 minutes to build that.

Now, I am building the parts that persist the wiki data using the built-in SQLite database manager. When AIR was still in beta (and still called Apollo) I already toyed a little bit with the built-in database components. These components are quite basic and use an asynchronous model. You ask the database to execute some SQL and point out a result handler to deal with the response. So you have to treat the database as a service. Not a bad idea, actually. Back then I built a tiny DAO layer on top of the database components, that allows me to do very crude but useful OR mapping. I think I might be able to reuse that stuff for my little wiki.

I must say that I am very impressed with Flex Builder 3 and the way it is integrated with AIR. Two thumbs up Adobe!

March 10, 2008

Marauder's Map on Adobe AIR

Last week, 3 days after Adobe Flex 3 was released, I attended a product briefing at Adobe in Amsterdam. Although I already knew about much of what was presented, I found it was very interesting and inspiring. Adobe is working hard to create a well integrated enterprise technology suite combined with tools for both designer and developer. These tools will allow designers and developers to work together more effectively.

Thermo is a code name for such a tool. It will have a UI that a designer can work with, very similar to PhotoShop. The designer can add interactivity to the design and export that design to a format that a RIA developer can pick-up and "simply" wire to logic and services. I hope that in the end, Thermo will allow designers to make changes throughout the development of the RIA as well. The designer should be able to edit views that have already been developed.

Recently, Adobe also released the first release of the Adobe Integrated Runtime (AIR). Using the same development environment and concepts as for Flex, AIR allows you to develop RIAs that run on your desktop, outside the web browser (Rich internet comes to your desktop). Obvious uses of this technology lie in the occasionally online applications.

Adobe has developed a very cool phonebook application using AIR. Of course, it stores a local copy of the phone book that is synchronized with the company phone book when connected to the company network. The cool part is in its ability to show you on office maps where a queried Adobe employee has his or her office. Combine that with WLAN 802.11 Positioning (adding the ability to see the exact current location of the employee) and you get the muggle version of the Marauder's Map!

Technorati Profile

February 21, 2008

Capping IT off

I am now also blogging at a blog named "Capping IT off". You can read my latest post on that blog here .

Let me know what you think.


January 25, 2008

Control Windows Media Player from an Adobe Flex application, part 3 (the sources)

As I promised way too long ago, I have now finally published the sources for the demo. You can view the sources here.

January 07, 2008

Sensible RIA engineering: handle events where they should be

In general, separation of concerns in software engineering is a very sensible idea. We have all come to understand this. Loosely coupled and consistently engineered components and applications are better reusable and maintainable. This also goes for Rich Internet Applications (RIAs).

My point
In this post, I just want to briefly touch on sensible event handling in the light of the above. The point that I want to make is that events should be handled where it makes sense. An event is something that happens at the perimeter of an application or a component. It could be a user gesture like moving the mouse pointer over a part of the surface of a visual component. But is can also be the reception of a response from an asynchronous invocation of a web service.

Handling user gesture events
Let's have a look at events generated by the user first. An RIA is basically a tree of UI-components. Its leaves are the "sensors" for user gestures. components closer to the root should not be bothered with fine grain events. A component should pre-process local events and generate chunkier events for the lower branches.

A reasonably sophisticated RIA framework like for example Adobe Flex, Google Web Toolkit, or Backbase usually allows for hierarchical composition of the UI components and supports standard UI-concepts such as views, dialogs, containers, layout managers, controls and events.

A RIA framework (and most object oriented GUI frameworks) generally supports the following two concepts: containers and controls. The first concept comprises all components that - as the name implies - contain other components (children). A container often determines the layout of its children and handles events triggered by these children. Examples of containers are windows, panels and decks.

All other visual components fall into the second category. These are the controls that allow the user to have meaningful interaction with the application. Examples of controls are button, scrollbar, check box, list box, slider, input box, et cetera. A control instance always has a container instance as its single parent.

Because of polymorphism, all containers are controls too, allowing for recursive containment.

By means of events, controls communicate user gestures (key presses, mouse moves, mouse clicks, screen touches, voice commands, you name it) to other components that are eagerly listening for these events. It is a good practice to handle user gesture events within the environment of the originating component. A container should therefore capture and possibly process the events generated by its children and generate and broadcast higher level (composite) events within its own environment, which in turn should be captured and handled by the container's parent. In short: handle user gesture events close to their source, generate higher level, composite events for higher level handling.

An example:

Consider an online registration form that contains a number of input controls and an OK and Cancel button. The input controls generate events informing their parent (the form) that, they have received or lost focus or that their contents have changed. The buttons inform the form about mouse clicks on their surfaces. All controls contained in the form handle mouse-overs and outs by themselves, as they should.

The form will deal with the content change events to do validation and respond to a click on the OK button to collect all inputs and generate a composite event such as "RegistrationCompleted" that notifies the form's container about the fact that the user has correctly filled out and submitted the registration form.

Handling web service responses
These events are received at the "other end" or the backside of the application. Here's the path they usually travel:

  1. First, the RIA asynchronously invokes a webservice. This done in a separate, new thread that keeps listening for the response until a certain timeout has occurred.
  2. When the response from the web service arrives, the designated response handler in the RIA is invoked.
  3. The response handler changes a part of the RIAs internal state (i.e. it updates a part of the model).
  4. All updated model parts generate a separate state change event that, in the end, will trigger observing views to repaint themselves in order to reflect the state change.
So the effect of a web service response travels through the application from back to front. An RIA should process the responses received from web services and generate and broadcast lower level (more specific) events to In short: handle web service responses close to the backside of the application, generating lower level, finer grain events for visualizing the effect of the response.