Exhibit Data Editor Extension

Introduction

The Exhibit Data Editor Extension makes the data on semantic pages created by Exhibit editable.  It was written by the Ensemble Project, in close co-operation with the Exhibit team at MIT, as an official component of the Exhibit project.

The extension is designed to be easy to use: all that is required to transform an Exhibit page from view-only to view-and-edit is to add the extension JavaScript file and CSS file into the page header.  The extension will analyse the page’s semantic data and Exhibit markup to deduce the best way to make the data editable, within the existing page design and layout.

The default mode offers a good editing experience without any configuration, but if the page author wants more control over how the editor integrates into their page, or how individual data fields are edited, the Exhibit Data Editor Extension offers its own compliment of markup components (using the familiar Exhibit ex:role syntax), giving a high level of customisation.

• The toggle control, switching the page from its regular view to editing mode, can be attached to existing page elements.
• The layout and CSS style of an item as it is edited can be radically different to how it appears when viewed normally, thanks to an editing lens (separate to the normal display lens).
• Fields can be edited using a variety of specialised user interface components, including single or multi line text fields, formatted number fields, auto-complete lists, and tickbox lists.
• JavaScript functions can be applied to fields to validate their content before they are saved into the page’s semantic database.  For non-programmers, a standard compliment of in-built functions is provided for common validation tasks.
• Items can be validated/saved property-by-property, as each property field is edited, or in one go when a SAVE button is pressed.
• For programmers the extension exposes a rich event life-cycle, enabling other software libraries to integrate with the editor.

Background

Although the Simile Exhibit toolkit provided many ways to search and visualise  semantic data, at the time Ensemble began using it, it did not support any type of in-browser data editing facility.  If an Exhibit’s data required additions or modifications, alterations to the source documents had to be made (for example the original spreadsheets) and the data re-imported afresh via Simile’s Babel data reformatting tool.

The Ensemble team quickly realised this could be a serious limitation; in some settings it would be desirable for the tutor not only to publish an Exhibit, but to allow students to expand and enhance its data themselves (if not the original, then at least their own private copy).  While simply offering a download of the original spreadsheet would be possible, a more compelling solution would be to have an editor built into the Exhibit page itself.

MIT had already attempted to write an in-browser editing solution called Dido, combining open source toolkits for HTML editing, web forms, and saving to the desktop.  The result was an Exhibit that could be switched into a WYSIWYG editing mode.  While Dido was ambitious, when Ensemble tried using it in settings they discovered end users found its off-line mode of working counter-intuitive.  The Ensemble team also wanted greater control over how elements of data were edited (Dido saw everything as a plain text field) and validated.  As a result, FELIX (the Form Editor Lightweight Interface for eXhibit) was developed by Ensemble, promising a more formal user interface, stricter control over what data was accepted, and an agnostic approach to loading and saving.  FELIX was enhanced and adapted on-and-off for a number of months and used in a number of settings, in particular Dance at LJMU.

FELIX and Dido represented different ends of the spectrum when it came to editing semantic data.  Dido provided a simple WYSIWYG editing experience which integrated into the existing Exhibit page content/layout, but offered little customisation or control.  By contrast FELIX offered a more comprehensive and controlled form-based editing experience, divorced from the Exhibit page (it used a separate editing panel), yet FELIX required preparatory work to configure its editing forms.  In mid-2011 the developers behind FELIX and Dido met in London, and the result was an initiative to develop an Exhibit editor which could merge the control and customisation of FELIX with the WYSIWYG integration of Dido.  The new Data Editor Extension, developed by Ensemble, could be configured to provide a rich form-like experience if specific editing configuration was provided, but would fall back to simple WYSIWYG editing if no configuration was found in the page.

Functionality Overview

To make an Exhibit page editable, using Ensemble’s Data Editor Extension, the author merely needs to include links in the head of the HTML document to the data editor’s code file (JavaScript), and style sheet (CSS).  With merely the addition of these two simple links, the standard Exhibit page will be transformed to become editable.

At the head of the window, docked into the top right hand corner, floats an Editor button which acts as a toggle to enable or disable the editing mode.  When clicked to enable editing, each item (lens) on the page turns into a button — as the mouse moves over any part of a page displaying an Exhibit item, a dotted high shows it can be edited.

When clicked, the item’s data becomes editable, replicating (as close as possible) the layout and style of the non-editable version, to create an authentic WYSIWYG feel.  Intelligent guesses are made as to the types of each field (a line of text, a large body of text, a number, a list…?) and appropriate editing components used.  The fields are saved into the client-side triple store database (the  semantic database underpinning each Exhibit page) as they are edited.  Exiting editing mode is as simple as clicking the Editor button again.

This provides a compelling editing experience with only the addition of two new lines into the head of the HTML document.  But Ensemble’s Data Editor Extension can do a lot more if the page author takes the time to add editor-specific markup into their Exhibit page.  Taking its lead from Exhibit, the addition of special markup (more specifically, regular HTML tags with Exhibit attributes) is all that’s required to adapt and customise the editing experience.

The default floating Editor button can be replaced by the author’s own button (or buttons) by merely assigning ex:role attributes to a markup element.  Any such elements are automatically turned into toggles to switch editing on or off.

Form elements with special Exhibit attributes can be used to create edit lenses – specific HTML to be used when editing an item (just as the familiar Exhibit display lenses are used to display an item).  By specifying an edit lens all manner of configuration and validation options become available, enabling the author to specify not only how the item should look as it is edited (which might be quite different to how it should look when displayed normally), but also how each field should be edited, and what checked should be done on the input before it is accepted into the database.

If the author prefers the whole item to be saved back into the database in one go, as opposed to each individual field as they are edited, Save and Cancel buttons can be included to permit the user to explicitly save the item.