Index: src/webapp/fluid-components/js/fluid/InlineEdit.js
===================================================================
--- src/webapp/fluid-components/js/fluid/InlineEdit.js	(revision 5770)
+++ src/webapp/fluid-components/js/fluid/InlineEdit.js	(working copy)
@@ -42,7 +42,7 @@
     
     var edit = function (that) {
         var viewEl = that.viewEl;
-        var displayText = viewEl.text();
+        var displayText = that.getValueFromViewText();
         that.updateModel(displayText === that.options.defaultViewText? "" : displayText);
         that.editField.width(Math.max(viewEl.width() + that.options.paddings.edit, that.options.paddings.minimumEdit));
 
@@ -68,16 +68,34 @@
         that.events.afterBeginEdit.fire();
     };
     
+	var isEditing = function (that) {
+	    if (that.editContainer.is(':visible')) {
+	        return true;
+	    }
+	};
+    
+	var switchToViewMode = function (that) {    
+	    that.editContainer.hide();
+	    that.viewEl.show();
+    };
+    
     var finish = function (that) {
         if (that.options.finishedEditing) {
             that.options.finishedEditing(that.editField[0], that.viewEl[0]);
         }
-        that.updateModel(that.editField.val());
+        that.updateModel(that.getValueFromEditField());
         that.events.afterFinish.fire();
         
-        that.editContainer.hide();
-        that.viewEl.show();
+        switchToViewMode(that);
     };
+    
+	var cancel = function (that) {
+	    if (isEditing(that)) {
+	        // Roll the edit field back to its old value and close it up.
+	        that.setValueOnEditField(that.model.value);
+	        switchToViewMode(that);
+	    }
+	};
 
     var clearEmptyViewStyles = function (textEl, defaultViewStyle, originalViewPadding) {
         textEl.removeClass(defaultViewStyle);
@@ -85,12 +103,12 @@
     };
     
     var showDefaultViewText = function (that) {
-        that.viewEl.text(that.options.defaultViewText);
+        that.setValueOnViewText(that.options.defaultViewText);
         that.viewEl.addClass(that.options.styles.defaultViewText);
     };
 
     var showNothing = function (that) {
-        that.viewEl.text("");
+        that.setValueOnViewText("");
         
         // workaround for FLUID-938:
         // IE can not style an empty inline element, so force element to be display: inline-block
@@ -107,7 +125,7 @@
     };
 
     var showEditedText = function (that) {
-        that.viewEl.text(that.model.value);
+        that.setValueOnViewText(that.model.value);
         clearEmptyViewStyles(that.viewEl, that.options.defaultViewStyle, that.existingPadding);
     };
         
@@ -121,7 +139,7 @@
         }
       
         if (that.editField && that.editField.index(source) === -1) {
-            that.editField.val(that.model.value);
+            that.setValueOnEditField(that.model.value);
         }
     };
     
@@ -256,7 +274,7 @@
         setupEditContainer(that);
         var padding = that.viewEl.css("padding-right");
         that.existingPadding = padding? parseFloat(padding) : 0;
-        that.updateModel(that.viewEl.text());
+        that.updateModel(that.getValueFromViewText());
         
         // Add event handlers.
         bindMouseHandlers(that);
@@ -326,13 +344,29 @@
         };
         
         /**
+         * Determines if the component is currently in edit mode.
+         * 
+         * @return true if edit mode shown, false if view mode is shown
+         */
+        that.isEditing = function () {
+            return isEditing(that);
+        };
+        
+        /**
          * Finishes editing, switching back to view mode.
          */
         that.finish = function () {
             finish(that);
         };
-            
+
         /**
+         * Cancels the in-progress edit and switches back to view mode.
+         */
+        that.cancel = function () {
+            cancel(that);
+        };
+
+        /**
          * Determines if the tooltip feature is enabled.
          * 
          * @return true if the tooltip feature is turned on, false if not
@@ -361,6 +395,47 @@
         that.updateModel = function (newValue, source) {
             updateModel(that, newValue, source);
         };
+        
+        /**
+         * Sets the specified value on the edit field.
+         * This can be overridden with your own behaviour if you aren't using typical text field.
+         * 
+         * @param {String} value the value to set on the edit field
+         */
+        that.setValueOnEditField = function (value) {
+            that.editField.val(value);
+        };
+         
+        /**
+         * Gets the current value from the edit field.
+         * This can be overridden with your own behaviour if you aren't using typical text field.
+         * 
+         * @return {String} the value of the edit field
+         */
+        that.getValueFromEditField = function () {
+            return that.editField.val();
+        };
+                
+        /**
+         * Sets the specified value on the view text.
+         * Thas can be overriden if you need custom logic such as the ability to parse
+         * or render the view text before it is displayed.
+         * 
+         * @param {Object} value the value to set for the view text
+         */
+        that.setValueOnViewText = function (value) {
+            that.viewEl.text(value);
+        };
+        
+        /**
+         * Gets the view text's current value.
+         * This can be overridden if you need custom formatting logic.
+         * 
+         * @return {String} the value of the view text
+         */
+        that.getValueFromViewText = function () {
+            return that.viewEl.text();
+        };
 
         setupInlineEdit(componentContainer, that);
         return that;
