Meet MARIA: The Maintainable And Rich Internet Application

Currently, building a MARIA is quite a challenge. A Rich Internet Application (RIA) is often put together using a mixture of languages: Javascript+HTML+CSS+SOAP+XPATH+PHP+... Of course, many RIAs are short living, disposable applications as they are often built for a certain event and need only to last for a short period. Maintenance is not a large issue then. But it is for the RIAs that are supposed to last.

Writing Ajax based RIAs without a reasonably sophisticated Ajax framework usually results in a maintenance nightmare, let alone all the browser compatibility issues you will undoubtedly need to solve. Ideally, you never write even a single line of Javascript. However impressive some of the Ajax based RIA frameworks are, it is still limited to the possibilities of DHTML. Adobe's Flash Player is far better suited for running RIAs than DHTML.

Adobe's Flash Player is a ubiquitous platform for smooth and sexy web applications. Since version 9, it is called Flash Virtual Machine. It resembles the Java VM in several ways. Like the JVM, it provides for garbage collection, remote debugging and uses JIT compiling. The Flash VM was designed and optimized specifically for Rich Internet Applications built with Adobe Flex.

All development tools of the Flex SDK are built in Java. Adobe also provides an expensive but impressive serverside framework, entirely based on Java for connecting Flex applications to Java backends: Flex Data Services (FDS). A good and very affordable alternative for FDS is MidnightCoders' WebORB.

A Flex application usually consists of a set of UI component specifications that are written in an HTML-like markup language (MXML) and a number of classes written in Actionscript for handling events and doing client side processing. Since Flex version 2, ActionScript 3.0 is used. AS3 is a mature, object oriented programming language that is fairly easy to learn for Java developers. However, there is one annoying difference which lies in the way variables and class methods are declared. In action script, you declare a local variable like this:

var x: int;

whereas in Java, you are used to writing this:

int x;

A class method in Actionscript looks like this:

public function square(x: int): int {...}

You know what the Java version will look like. I think you see my point.

There exist other RIA frameworks that create shockwave binaries. The best known alternative for Flex is OpenLaszlo, which is also entirely built in Java, and supports most J2EE Application Servers.

So, developing a Flex based RIA including the required backend services requires your team to use at least three different languages: one for specifying the UI components, one for client-side event handling and processing and (hopefully) one for all the backend stuff.

It would be most ideal if it were possible to use a single programming language for all layers of your application (backend to frontend). The Google Web Toolkit gets you a good way in that direction. You write (and debug) your RIA in Java, and compile it to Javascript (a native javascript for each supported browser). Very cool. I wonder, when will Google introduce a Java to shockwave (Flash) compiler?

Google Mashup Editor

After hearing about it on the Google Developer Podcast, I immediately signed up for beta testing Google's new Mashup Editor.
It sounded very promising. I understand that the Mashup Editor itself is written with itself. That sort of stuff keeps impressing me. I just love recursive patterns like that.

With the mashup editor you can easily mix your own web cocktails and share your code so others can blend that into yet other mashups. Very much in the spirit of Web 2.0.

I haven't done anything with the mashup editor yet, but I intend to play with it a little bit and write about my experiences on this blog.

In the mean time, surf (do modern internet users still use that word?) to http://editor.googlemashups.com and take a tour.

Control Windows Media Player from an Adobe Flex application, part 2

With respect to my previous post, here's a link to a little demo. The figure above shows a screenshot. On the left side you see a list of channels, which is a very simple Flex application showing a DataGrid with single column. Out-of-the-box, the Datagrid allows you to change the sort order by clicking on the header. Clicking on a channel results in the playing of that channel in the WMP object displayed on the right side.



I will publish some source fragments later as well.

Control Windows Media Player from an Adobe Flex application

I know it's been out there for some time already, but I have just discovered how beautiful Adobe's Flex-Ajax-Bridge is. The FABridge allows you to access Flex applications from javascript. It even allows you to listen for events that occur inside the Flex application and hook javascript callback functions to those events.

This makes it possible to make embed both a Windows Media Player object and a Flex application into a website and make them work together seamlessly. Of course, you probably don't want to actually do this, but that's besides the point. You can replace WMP with any other embeddable third party object that you can control through javascript.

Here's what I am so manically enthusiastic about:
I created a very crude webpage that embeds a WMP object and a very simple Flex application. The Flex app just shows a list of live channels (*.asx) that the user can choose from. When a channel is clicked, the WMP loads that channel and starts playing it. All it takes to make this happen is about 8 lines of javascipt that hooks a tiny event listener function to the click event on the channel list in the Flex app. At each occurance of that event, the listener function sets the URL property of the WMP object to the URL of the channel the user has clicked on. Wonderfully simple. Thank you Adobe!

Just wanted to share this with you. I will post a follow-up on this post with some code fragments and such later.