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.
on April 4th, 2006 at 12:20 am
I searched for the example but I couldn’t find it! I which message is the example?
on April 4th, 2006 at 9:24 am
Hey guys,
This is really cool. Here’s an idea to make it even better: come up with a microformat for ALE components. Once you have that, you can combine this idea with the web copy/paste techniques that Ray Ozzie recently demoed to allow users to copy/paste arbitrary ALE components across multiple websites.
What do you think?
Maurice
on April 4th, 2006 at 9:57 am
A really interesting idea. Adding structure to this chaos is a compelling idea. I wonder if there are applications outside of the embedded document paradigm. I wonder if the ALE concept could be applied to pages that have a ‘print view’. The ALE object could also provide the printable content in those instances.
on April 4th, 2006 at 12:12 pm
Smies,
There is an email with the subject like:
“Flight Tracker, Skype and Map My Location”
The click on “UA 25″ so see a pop-up of flight status.
on April 4th, 2006 at 12:44 pm
Brillian, love this concept. We (At folknology) have been playing around with similar ideas but using Microformats as a data basis and then adding bahaviour on top using javascript. I will take a look at the documentation for ALE and check it out properly, but would love to get togetehr with you guys and work on the microformat side. (PS we have already done some work on the table/spreadsheet Microformat side). Which ever way it happens we need to hook up our stuff and yours at some point it would be fun.
regards
Al
on April 4th, 2006 at 9:03 pm
ALE is really cool, it will add more power to existing applications.
on April 5th, 2006 at 6:51 am
Hello, my name is Jorge Rubiano, of Colombia, I want to congratulate them by the Zimbra Beta, is something very good, with Ajax estan obtaining many things, that a time ago were impossible.
It wanted to know if they have tutorials of Ajax, that can facilitate to me, since at this moment I am learning. Again congratulations….
on April 7th, 2006 at 2:19 pm
This is some very innovative stuff. Keep up the good work!
on April 12th, 2006 at 12:45 am
An impressive demo, and a truly useful idea!
The spec definitely still needs a lot of work, however. The lifecycle of ALE components is certainly not clear from my reading.
For example, the process by which an ALE component is instantiated doesn’t make sense. When the ALE framework creates the IFRAME, does it set the ALE property first and then load the URL and call create(), or does it load the URL first, then set the ALE property and finally call create()? The former seems to make the most sense, but the description of the lifecycle in the spec seems to imply the latter. And if it is the latter, how can the loaded document use the ALE property if it isn’t set until after the document is loaded?
Anyway, nice work, but this is far from a useful spec.
on April 16th, 2006 at 9:35 am
Hi, excellent idea. But i have a query. Is it possible to have several windows on the same page, one is having the word doc changed, other might be excel sheet, pdf etc. Can this happen without usage of IFrames. Do u need to change the content type of page to achieve this ?
vikramark
on June 9th, 2006 at 6:53 pm
AJAX is truly at the forefront of w2.0, alongside rss.
I wonder if this kind of implementation is going to be used with the upcoming goffice? :raises eyebrow:
on June 30th, 2006 at 1:37 pm
Hi, excellent idea.
on September 26th, 2006 at 6:11 pm
Hi
Really amazing! Very useful idea for all ajax developers.
on October 11th, 2006 at 4:02 am
Preliminary thoughts on Office 2.0
Yes, I agree the “2.0″ hype is getting out of hand. However, just as with Web 2.0, the technology evolution we are participating in is sufficent to at least justify the discussion. So before you dismiss Office 2.0 as just…
on April 16th, 2007 at 9:46 pm
AJAX Articles Around the Web
AJAX Applications vs Server Load? - Slashdot thread AJAX/DHTML Tutorial: Should I Render My UI On The
on August 22nd, 2007 at 2:29 am
Hi this is a great blog to read about.I appreciate this kind of work. Check out my site..Brand name fragrances, hair care, and skin care products for men and women at up to 90% off retail prices. Earn 5% cash back on each purchase.For more info visit:Perfumesworldwide
on September 30th, 2007 at 11:02 pm
This content seemes to be a boom for all developers interested in ajax.
on October 4th, 2007 at 7:11 am
Really amazing! Very useful idea for all ajax developers. Good work guys.
on December 27th, 2007 at 2:06 pm
Hi, excellent idea. But i have a query. Is it possible to have several windows on the same page, one is having the word doc changed (http://muz-fiesta.com/), other might be excel sheet, pdf etc. Can this happen without usage of IFrames. Do u need to change the content type of page to achieve this ?