This is my personal blog. The views expressed on these pages are mine alone and not those of my employer.

Monday, August 22, 2005

DHTML In-Place Editing in a Wiki ..... in 1999

Commercial Wikis such as SocialText and Jot have come out with in-place editing using DHTML and AJAX. Recently I was looking through some old CDs and found a project I created named OpenPortal that prototyped similar 1999:

On the left is an OpenPortal page; when the user clicks on the Wiki page title, author, or content, the field turns into a dynamic, in-place editable area that allows the user to save the value. When the SAVE button is pressed the newly changed content is shown in the page, without a full page refresh.

The DHTML was coded using W3C techniques, but only Internet Explorer supported these at the time. I used a few IE specific techniques before W3C ones were available, such as working with events, so the page only works in IE. See the page here (must be using Internet Explorer); double click the page title, author, or text to shift into edit mode, then click SAVE to save the value.

I've created a screencast of the page for those who don't have IE.

Keep in mind that I only got the client side working for this in place editing; I had not tied it into the server using XmlHttpRequest for IE (which I did not know about at the time), and the company that funded my open source work, BaseSystem, went out of business shortly afterwards, forcing me to get a real job :)

Even better, the plan included having a generic component framework named weblets that made it possible to drop semi-structured data into the page, such as a business card or an article, and then have the server-side "render" this into DHTML that could be in place edited within the browser. For example, on the server side, to specify a business card you would have:

<weblet:BUSINESS-CARD id="Brads_Bcard">
<H1>Business Card for
<weblet:NAME>Brad Neuberg</weblet:NAME></H1>



This specifies several pieces of data for the business card, each of which will be turned into a seperate in place editable form by the Wiki. In the prototype page you saw, an article weblet was placed into the page with several attributes, such as a title, author, and content.

Here's whats even cooler: users could type this into the Wiki edit form, so that they could specify at a higher level than just plain Wiki text more advanced things to drop into their page. The weblet makup, called Weblet Servet Pages (WSP), was based on JSP and included the ability to drop in server-side JavaScript for easy cross client/server event binding.

From the README file for the in-place component, from 1999, here's what we were trying to achieve:

"The motivation for this project is to combine the acts of browsing the web and changing the web together seamlessly. It makes sense to put editing together with browsing, since this can lead to new forms of interaction and higher levels of participation by members. The eventual goal is to build the Editable Web, so that working with the web becomes more like interacting with a computer spreadsheet, where values can be directly changed and manipulated, rather than like interacting with a magazine or an old batch-computer system."

Very similar to the goals of the Paper Airplane project.

Some time I'll blog more about OpenPortal itself; there were several releases of OpenPortal. The first release of OpenPortal had something called a personal portal, somewhat like tagging but more like a personal view into the wiki space using categories you could subscribe to; this version was completed for a class at Columbia University, while the second release used JSPs instead of servlets. Unfortunately I think I lost the CD containing both releases when I made the big move from New York City, which sucks because I would love to look over the code for nostalgia's sake. The final version incorporating DHTML in place editing and the full weblet component system never saw the light of day as everything halted when BaseSystem went out of business.

In the mean time you can see the OpenPortal whitepaper or see the full OpenPortal design documents for the last version. All of this is from 1999-2000.

There is also a download of the in-place editing code, including the original README file that was included with the open source distribution of this component.

I'm trying to find out more about early AJAX-style sites. I myself did a prototype of a game using AJAX-style techniques back in 1997, and I posted an article about it (my first) in early 1998.

What other early AJAX-style code (or articles) have people found?
Brad, it was impressive back then though have you made any new implementations? I have made the CMS for my blog with similar thoughts in mind, but instead of shifting to input fields I simply enable the containing elements "contentEditable"-property. This conveys in exact look and formatting and no differing between browsing and editing.

You can read the blog entry and see some screenshots of how it looks in editing mode (code and wysiwyg mode):

Hi Hakan! I enjoy chatting with you through the blog.

I ended up rolling many of the ideas in OpenPortal into a project that took the concepts to the next generation, called Paper Airplane and the Two Way Web. Paper Airplane was a research project to explore what web browsers and the web itself would look like if they deeply embedded collaboration, community, and decentralization. We produced a final research paper with a full vision at; a prototype of the decentralized, P2P network, called P2P Sockets, at; and a prototype of the Paper Airplane browsers at

Your CMS looks nice! I especially like the popup context menu with the editing and saving options; well done.
Thats cool technology, thanks to Ajax
Post a Comment

Links to this post:

Create a Link

<< Home

This page is powered by Blogger. Isn't yours?

Subscribe to Posts [Atom]