« AJAX XMLHttpRequest x IFrame | Main | Synchronous versus Asynchronous »

Zimbra ALE, Ajax Linking and Embedding

From Desktop to Web, AJAX have made a great progress by providing powerful web applications such text processors, spreadsheets, webmail ... but sometimes you'll need to create documents using different kind of objects such images, text, charts, spreadsheet ...etc. things you can do in desktop for example using the Windows OLE by embding component from an application to another.

Zimbra ALE, Ajax Linking and Embedding, provides the ability to embed and edit rich content into a browser document in much the same way that an end user may do so in a traditional desktop environment. The difference is that instead of embedding objects that are backed by installed desktop applications, the embedded objects are AJAX components that adhere to a key set of design patterns. For example, if a user is composing an email message, then they will be able to embed a spreadsheet into the email. The spreadsheet will be implemented as an AJAX components adhering to the ALE design pattern. Since it is an ALE component it will be fetched across the network so that it may be instantiated and used regardless of the user’s location.

http://ajax.phpmagazine.net/upload/2006/04/zimbra_ale_edit_mode-thumb.jpg

Many modern browsers (such as FireFox, Safari, and Microsoft Internet Explorer 6.0+) support a capability called “design mode”. Design mode enables the browser to become an HTML editor. This feature makes it possible to create and edit HTML documents from within browser. In essence this gives the ability to provide a “mini-word processor” within the browser..

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.

For more information see ALE specification draft [PDF]
Demo online Zimbra Preview

Bookmark this article at these sites
Post a comment





(Email will remain hidden)





Please enter the security code you see here




Related entries
Email to a friend
Email this article to:


Your email address:


Message (optional):