A Pint of ALE – Ajax Linking and Embedding

By | April 3, 2006

Recently I had to write a document which required the inclusion of some images, a chart, and a few drawings in the text – something that modern word processors allow you to simply and readily do. In fact, the ability to embed and edit rich content directly in a document is actually a pretty handy and powerful feature; arguably one of the more important and enabling features of modern day office suites, such as OpenOffice and Microsoft Office.What is really nice is that the embedded content is saved along with the enclosing document. So for example, if I email a document to a colleague, then the embedded objects I have included into the document follow it to their destination. This embedding capability has traditionally been enabled by leveraging component object models such as Microsoft’s COM/DCOM or IBM’s DSOM and has been the domain of fat desktop applications and office suites.

Is it feasible to provide the same kind of embedding capabilities found in desktop applications in Ajax based applications? After some prototyping it is clear that it is possible.


AJAX Linking and Embedding (ALE) provides the ability to embed rich content into an editable document and to then interact with and edit that content in much the same way as it is done with traditional office suites and applications in a desktop environment. A key difference is that instead of embedding objects that are backed by installed desktop applications (e.g. a spreadsheet or drawing application), within the ALE world the embedded objects are AJAX components that are embedded into an editable HTML document. These components adhere to a set of design patterns specified by the ALE specification. So, for example, if a user is editing some content such as a personal note or an email message, then she would be able to directly embed an AJAX spreadsheet into the note or email body and interact with the spreadsheet while remaining in the editing context of the note or email message. As long as the spreadsheet component adheres to the ALE specification it could be fetched across the network, instantiated, and used regardless of the user’s location.

In the screen shot below left, notice the spreadsheet being rendered as a table in the read-only view of a document. The screen shot below right shows the same document being edited. Notice now that the spreadsheet is now activated and its content has become editable. Importantly, the content surrounding the spreadsheet may also be edited by the user – much in the same way as it is possible with traditional desktop based work processors.

                 

ALE components are not limited to the components found in traditional office applications – they can include just about anything. For example, you can imagine AJAX based form components that could be used for workflow management within a messaging system. Another point to be noted about ALE is that it is platform and operating system agnostic and is based on open standards. The first version of ALE is intentionally quite simple and specifies basic serialization/deserialization semantics, and a limited set of rules for components to register and interact with an implementation framework. Over time we expect ALE become richer and more full featured as it is used in more diverse and rich applications.

Technically, ALE leverages two key capabilities provided by most modern browsers, such as FireFox, Safari, and Microsoft Internet Explorer 6.0+.

The first is called “design mode”. Design mode enables the browser to become an HTML document editor, making it possible to create and edit HTML documents directly within the browser. This provides the ability to create a “mini-word processor” within the browser. To make a document editable inside a browser, “design mode” must be enabled on its document element (This is usually done by the following JavaScript code: document.designMode = “on”;). It is important to understand that any HTML document element may be put into design mode. Specifically, this applies to the IFRAME element which contains its own document element.

The second capability provided by browsers is the ability to embed one or more IFRAMEs within another IFRAME that has been put into design mode. This is very important for ALE as it takes advantage of this by using such IFRAMEs as the containers for embedded components. Thus when a user inserts an ALE component into a document that he is editing, the ALE framework is in fact creating an IFRAME into which the ALE component is loaded. The ALE framework then manages the interaction between the outer document, and embedded ALE component, thus providing the object embedding capability of traditional applications to AJAX based applications.

There are some interesting hacks that you have to implement to make an ALE implementation work – for example working around the fact that FireFox will disable JavaScript execution inside an embedded iFrame if the document in which it is contained is itself in design mode) – but ultimately it does work quite well. (I will make sure to write about how we implemented ALE in a future post)

For a more detailed technical discussion of ALE check out the draft ALE specification. We have also made a demo of our prototype available here, so that you can see ALE in action. I hope you enjoy it.

ALE Spec
Zimbra Preview Hosted Demo

FYI Here’s some more detail on getting to the Notes app.

* Log into the preview by following the link Hosted Preview Demo.
* Click on the notebook icon (The bottom icon on the far left of the app window)
* You will get to a table of contents page
* Click on the “new” button in the app toolbar (the far left button. It has a page icon with a green plus sign on it)
* You should now be in an editable document where you can type/insert away
* The spreadsheet may be inserted via the insert object drop down
* Click save to save the page.


Comments are closed.