FELIX: Form Editor Lightweight Interface for eXhibit

FELIX is a item editor for Simile Exhibit that tries to make editing item collections easy, safe and intuitive (in this page the term item refers to a record in an Exhibit database, while collection refers to all the items of a given type). FELIX was developed by the Ensemble Team as part of an attempt to create a compelling round trip solution for faceted browsing, with potential for collaborative working. While Exhibit can display data from a variety of sources, its support for editing items in place then saving the updates is limited. This LOAD > VIEW > EDIT > SAVE work flow is what defines the round trip, and the EDIT component is what FELIX seeks to address.

Other editing solutions for Exhibit exist, notably Dido (a technically accomplished WYSIWYG editor), but they lack the structure of FELIX. FELIX was specifically designed to allow editing of the data behind the page, the items and properties that may form important semantic links but are never actually displayed on screen. It also attempts to prevent pollution of collections with bad data or broken semantic links, thanks to a controlled form-based editing environment.

FELIX uses its own type of lens to create an item editor window, in the same way Exhibit uses a lens to display an item. The editor lens is created from field editors, each of which are charged with modifying the data in one property in an item.

<div ex:editorFor="label"
	ex:editorType="textfield"
	ex:editorLabel="Label"
	ex:columns="20"></div>

An example field editor is show above. Line 1 describes which property in the item the editor is for, line 2 describes the type of editor to be used to modify this data (a simple text field), line 3 is the text label to accompany the editor when it appears on screen, and line 4 sets the displayed width of the text field to 20 characters (which is separate to the actual number of characters the field can hold).

Documentation for the various field editor types can be found here.

Design principles

The guiding principles underpinning FELIX’s development are:

  • Easy to create: editors can be created with just HTML (although hooks are provided for bespoke functionality if you know JavaScript). As with Exhibit, a single JavaScript include is all that’s required.
  • Intuitive, safe: plenty of editors (text field, text area, numeric, single/multi enum, item ref…) and the ability to constrain and validate input reduces the chance of bad data being added by the user.
  • Lightweight, robust: small bandwidth footprint, plenty of error trapping.
  • Flexible: can handle multiple item types at once, permits items of different types to be linked.
  • Comprehensive: the sidebar provides access to ‘hidden’ data fields and item types that may be used to link and ‘facet’ the data, but do not actually appear on-screen.
  • Configurable: plenty of options to let the author decide what can and cannot be edited/added/deleted by end users.
  • Extensible (for JavaScript coders): (v. important!!) new/customised editors should be easy to plug in — no hacking of FELIX code base required. Proper event API for third party JavaScript to work against.
  • Unobtrusive, uncluttered: if desired the whole FELIX interface can be hidden behind just a tiny sidebar tab in the corner of the page.
  • Storage agnostic: ultimately FELIX will work with whatever data has been loaded into the Exhibit database, and should not care how or where that data is saved. FELIX should be aware its data may come from cloud services, or sources that require user authentication, and should be flexible enough to cope (for “cope” read: not get in the way!)
  • Supportive of collaboration: FELIX should permit its editors to be disabled (for regular site visitors) or offer different editing experiences for different types of user (full access/restricted access, novice user/expert user). Given a small amount of JavaScript it should be easy to integrate FELIX into known web auth technologies (.htaccess, OAuth, LDAP…)

FELIX is designed for non-programmers to use: just a reasonable knowledge of HTML is all that’s required. However, with a little JavaScript knowledge it should be possible to customise and extend FELIX easily. The idea is that for HTML authors FELIX should be really really useful, but for JavaScript programmers it should be really, really, really (that’s an extra level of really) useful!

Editing lenses

Including FELIX onto your Exhibit page is as simple as adding a reference to the FELIX JavaScript file after your include for Exhibit itself, like so:

<script type="text/javascript" src="http://ensemble.ljmu.ac.uk/simile/extensions/ljmu_libs/editor/felix.js"></script>

Once included FELIX will configure itself from special markup in the HTML, just like Exhibit.

<div ex:role="editor" ex:itemType="person">
	<div ex:editorFor="label"
		ex:editorType="textfield"
		ex:editorLabel="Label"
		ex:editorUsage="create"
		ex:validator="validateLabel"
		ex:columns="20"></div>
	<div ex:editorFor="name"
		ex:editorType="textfield"
		ex:editorLabel="Name"
		ex:validator="validateNotEmpty"
		ex:columns="40"></div>
	<div ex:editorFor="description"
		ex:editorType="textarea"
		ex:editorLabel="Description"
		ex:validator="validateNotEmpty"
		ex:columns="40"
		ex:rows="5"></div>
	<div ex:editorFor="nationality"
		ex:editorType="enumSingle"
		ex:editorLabel="Nationality"
		ex:initialValue="england"
		ex:enumValues="algeria;austria;belarus;brazil;china;croatia;czechrepublic;england;france;germany;greece;india;italy;netherlands;scotland;switzerland;usa"></div>
	<div ex:editorFor="birth_date"
		ex:editorType="number"
		ex:editorLabel="Year of birth"
		ex:columns="5"
		ex:rangeHigh="death_date"></div>
	<div ex:editorFor="death_date"
		ex:editorType="number"
		ex:editorLabel="Year of death"
		ex:initialValue="2000"
		ex:columns="5"
		ex:rangeLow="birth_date"
		ex:rangeHigh="2011"></div>
	<div ex:editorFor="depiction"
		ex:editorType="textfield"
		ex:editorLabel="Depiction"
		ex:validator="validateURL"
		ex:columns="40"></div>
</div>

<div ex:role="editor" ex:itemType="Item">
	<div ex:editorFor="dc_title"
		ex:editorType="textfield"
		ex:editorLabel="Title"
		ex:columns="40"></div>
	<div ex:editorFor="dc_description"
		ex:editorType="textarea"
		ex:editorLabel="Description"
		ex:columns="40"
		ex:rows="3"></div>
	<div ex:editorFor="week"
		ex:editorType="enumSingle"
		ex:editorLabel="Week"
		ex:initialValue="Week 1"
		ex:enumValues="*"></div>
	<div ex:editorFor="session"
		ex:editorType="enumSingle"
		ex:editorLabel="Session"
		ex:validator="testValidator"
		ex:enumValues="Lecture 1;Lecture 2;Lecture 3;Lecture 4;Lecture 5;Lecture 6;Lecture 7"></div>
	<div ex:editorFor="foaf_depicts"
		ex:editorType="itemRef"
		ex:editorLabel="Philosophers"
		ex:validator="testValidator"
		ex:ref="person"
		ex:height="5em"></div>
	<div ex:editorFor="dc_subject"
		ex:editorType="enumMulti"
		ex:editorLabel="Subjects"
		ex:validator="testValidator"
		ex:height="5em"
		ex:enumValues="*"></div>
</div>

Sidebar menus

FELIX offers a really convenient sidebar to access the editor for each item. This is important as non-trivial Exhibits often use multiple collections, where items of different types are linked to provide vital semantic associations. While this extra data may be crucial to the working of the Exhibit, it isn’t necessarily displayed to the user (at least, not in a way that makes is amenable to invoking an editor). 

<div ex:role="editorMenu">
	<div ex:itemType="person" ex:filter="func" ex:allowNew="yes" ex:allowDelete="yes"></div>
	<div ex:itemType="Item"></div>
</div>

In keeping with the general design philosophy of FELIX, rather than just add a menu to the page automatically a brief bit of configuration markup is required. If you do not want to include a sidebar, don’t include this markup (you can add a JavaScript link to your Exhibit view lens which will invoke the editor instead).

In the above example line 1 adds the sidebar tab (the transparent button in the top left corner of the browser window), and lines 2 and 3 define collections to be included in the sidebar. If you don’t wish to permit editing access to a given collection, simply don’t include it in the configuration markup. By default the sidebar allows editing of existing items, but does not allow new items to be created or existing items to be deleted. As you can see from the person example, however, all it takes is a few attribute to enable these features.