Changeset 4250

Timestamp:

Apr 25, 2008, 3:41:14 PM (15 years ago)

Author:

Nicklas Nordborg

Message:

References #965: Filtering the list – selection list vs. input box for enumeration type annotations

Prototype is working. Need more Firefox vs. IE checks, css optimization, etc.

Location:

trunk

Files:

• src/clients/web/net/sf/basedb/clients/web/taglib/table/ColumnDef.java (modified) (6 diffs)
• www/WEB-INF/table.tld (modified) (1 diff)
• www/common/plugin/index.jsp (modified) (2 diffs)
• www/images/dropdown.png (added)
• www/include/scripts/main.js (modified) (4 diffs)
• www/include/styles/main.css (modified) (1 diff)

trunk/src/clients/web/net/sf/basedb/clients/web/taglib/table/ColumnDef.java

@@ -64 +64 @@
       enum=...
       enumeration=...
+      smartenum=true|false
       title=...
       sortable=true|false
@@ -233 +234 @@
   
   <tr>
+    <td>smartenum</td>
+    <td>false (true for annotations)</td>
+    <td>no</td>
+    <td>
+      If the filter for an enumeration column should be displayed as
+      a free text field or a selection list. Default is to use a selection
+      list. Use this option only if both the hidden key and the displayed
+      value of the enumeration is the same. The "smartness" of this options
+      is that as the user types text, the browser will dynamically display a list
+      of options matching the entered text.
+    </td>
+  </tr>
+  
+  <tr>
     <td>formatter</td>
     <td>-</td>
@@ -346 +361 @@
   private Enumeration<String, String> enumeration;
   
+  private boolean smartEnum;
+  
   private Formatter<?> formatter;
   
@@ -507 +524 @@
   {
     return enumeration;
+  }
+  
+  /**
+    @since 2.7
+  */
+  public void setSmartenum(boolean smartEnum)
+  {
+    this.smartEnum = smartEnum;
   }
   
@@ -602 +627 @@
         Formatter<Date> dateFormatter = FormatterFactory.getDateFormatter(table.getSc());
         
+        String inputName = "filter:" + valueType.name() + ":" + getFilterproperty();
         if (getEnumeration() != null)
         {
           String filterValue = filter == null ? "" : Base.getPropertyFilterString(filter, dateFormatter);
-          sb.append("<select name=\"filter:").append(valueType.name()).append(":").append(getFilterproperty()).append("\"");
-          sb.append(" onchange=\"Forms.submit(event);\">\n");
-          sb.append("<option value=\"\">");
-          Enumeration<String, String> enumeration = getEnumeration();
-          for (int i = 0; i < enumeration.size(); ++i)
+          if (smartEnum || isAnnotation)
           {
-            String selected = filterValue.equals(enumeration.getKey(i).trim()) ? " selected" : "";
-            sb.append("<option value=\"").append(enumeration.getKey(i)).append("\"").append(selected);
-            sb.append(">").append(enumeration.getValue(i)).append("\n");
+            sb.append("<span class=\"smartinput\"><input class=\"text\" type=\"text\"");
+            sb.append(" name=\"").append(inputName).append("\"");
+            sb.append(" size=\"20\"");
+            sb.append(" maxlength=\"").append(PropertyFilter.MAX_VALUE_LENGTH).append("\"");
+            sb.append(" value=\"").append(filterValue).append("\"");
+            sb.append(">");
+            sb.append("<img class=\"smartimage\" src=\"").append(table.getPage().getRoot()).append("images/dropdown.png\"");
+            sb.append(" onclick=\"SmartEnum.activateAndDisplay('");
+            sb.append(table.getId()).append("','").append(inputName).append("')\">");
+            sb.append("</span>");
+            StringBuilder addSmart = new StringBuilder();
+            addSmart.append("SmartEnum.enableForField('").append(table.getId()).append("'");
+            addSmart.append(",'").append(inputName).append("'");
+            addSmart.append(",[");
+            for (int i = 0; i < enumeration.size(); ++i)
+            {
+              if (i > 0) addSmart.append(",");
+              addSmart.append("'").append(HTML.javaScriptEncode(enumeration.getKey(i))).append("'");
+            }
+            addSmart.append("]);\n");
+            table.addScript(addSmart.toString());
           }
-          sb.append("</select>");
+          else
+          {
+            sb.append("<select name=\"").append(inputName).append("\"");
+            sb.append(" onchange=\"Forms.submit(event);\">\n");
+            sb.append("<option value=\"\">");
+            Enumeration<String, String> enumeration = getEnumeration();
+            for (int i = 0; i < enumeration.size(); ++i)
+            {
+              String selected = filterValue.equals(enumeration.getKey(i).trim()) ? " selected" : "";
+              sb.append("<option value=\"").append(enumeration.getKey(i)).append("\"").append(selected);
+              sb.append(">").append(enumeration.getValue(i)).append("\n");
+            }
+            sb.append("</select>");
+          }
         }
         else if (valueType == Type.BOOLEAN)
         {
           boolean filterValue = filter == null ? false : Values.getBoolean(filter.getValue());
-          String radioName = "filter:"+valueType.name()+":"+getFilterproperty();
-          sb.append("<input type=\"radio\" name=\"").append(radioName).append("\"");
+          sb.append("<input type=\"radio\" name=\"").append(inputName).append("\"");
           sb.append(filter == null ? "checked" : "");
           sb.append(" value=\"\" onclick=\"Forms.submit(event)\">").append("any");
           
-          sb.append("<input type=\"radio\" name=\"").append(radioName).append("\"");
+          sb.append("<input type=\"radio\" name=\"").append(inputName).append("\"");
           sb.append(filter != null && filterValue ? "checked" : "");
           sb.append(" value=\"true\" onclick=\"Forms.submit(event)\">").append("true");
           
-          sb.append("<input type=\"radio\" name=\"").append(radioName).append("\"");
+          sb.append("<input type=\"radio\" name=\"").append(inputName).append("\"");
           sb.append(filter != null && !filterValue ? "checked" : "");
           sb.append(" value=\"false\" onclick=\"Forms.submit(event)\">").append("false");
@@ -637 +689 @@
           String filterValue = HTML.encodeTags(Base.getPropertyFilterString(filter, dateFormatter));
           sb.append("<input class=\"text\" type=\"text\"");
-          sb.append(" name=\"filter:").append(valueType.name()).append(":").append(getFilterproperty()).append("\"");
+          sb.append(" name=\"").append(inputName).append("\"");
           sb.append(" size=\"20\"");
           sb.append(" maxlength=\"").append(PropertyFilter.MAX_VALUE_LENGTH).append("\"");

trunk/www/WEB-INF/table.tld

@@ -200 +200 @@
     </attribute>
     <attribute>
+      <name>smartenum</name>
+      <required>false</required>
+      <rtexprvalue>true</rtexprvalue>
+    </attribute>
+    <attribute>
       <name>filtervalue</name>
       <required>false</required>

trunk/www/common/plugin/index.jsp

@@ +1 @@
+<%@page import="net.sf.basedb.core.signal.SignalReceiver"%>
+<%@page import="net.sf.basedb.core.signal.LocalSignalReceiver"%>
 <%-- $Id$
   ------------------------------------------------------------------
@@ -521 +523 @@
     {
       PluginExecutionRequest executionRequest = pluginResponse.getExecutionRequest(null);
-      Thread t = new Thread(executionRequest);
+      
+      executionRequest.registerSignalReceiver(LocalSignalReceiver.getSignalReceiver("localhost:0"));
+      Thread t = new Thread(executionRequest, "immediate");
       t.setPriority(Thread.currentThread().getPriority() - 1);
       t.start();

trunk/www/include/scripts/main.js

@@ -286 +286 @@
     var charCode = event.charCode;
     //if (charCode == undefined) charCode = event.which;
-    if (!charCode && event.keyCode < 32) charCode = event.keyCode;
+    if (!charCode) charCode = event.keyCode;
+    if (!charCode) charCode = event.which;
     if (!charCode) charCode = 0;
     return charCode;
@@ -294 +295 @@
   this.getEventTarget = function(event)
   {
-    var target = event.target;
-    if (!target) target = event.srcElement;
+    var target = event.srcElement;
+    if (!target) target = event.target;
     return target;
   }
@@ -317 +318 @@
     }
     return height;
+  }
+
+  // Get the position of an element; returns an object with 'left' and 'top' properties
+  this.getElementPosition = function(theElement)
+  {
+    var offsetTrail = theElement;
+    var offsetTop = 0;
+    var offsetLeft = 0;
+    while (offsetTrail)
+    {
+      offsetTop += offsetTrail.offsetTop;
+      offsetLeft += offsetTrail.offsetLeft;
+      offsetTrail = offsetTrail.offsetParent;
+    }
+    return {left: offsetLeft, top:offsetTop};
   }
   
@@ -1277 +1293 @@
 }
 
+var SmartEnum = new SmartEnumClass();
+/*
+  Handles "smart" input fields which can have an attached list of
+  enumeration options. As the user types a popup-list is displayed
+  with the matching options.
+*/
+function SmartEnumClass()
+{
+  this.initialDelay = 300;
+  this.repeatDelay = 50;
+
+  this.activeField = null;
+  this.selected = -1;
+  this.lastSelected = null;
+  this.lastText = '';
+
+  /*
+    Initialise the smart enum system by creating the <div> tag that
+    is used to hold the options.
+  */
+  this.init = function()
+  {
+    if (this.div) return;
+    var div = document.createElement('div');
+    div.className = 'smartenum';
+    div.style.display = 'none';
+    document.body.appendChild(div);
+    this.div = div;
+    this.debug = document.createElement('div');
+    document.body.appendChild(this.debug);
+  }
+
+  /*
+    Enable the input field for smart enum. Ignored if
+    the form or field doesn't exists, the field is not an
+    input field or if there are no options. This method
+    changes event handlers for the input field.
+    @param frmName The name of the form 
+    @param fieldName The name of the field
+    @param An array object with the options
+  */
+  this.enableForField = function(frmName, fieldName, options)
+  {
+    if (!options) return;
+    var frm = document.forms[frmName];
+    if (!frm) return;
+    var field = frm[fieldName];
+    if (!field) return;
+
+    this.init();
+    field.smartOptions = options;
+    field.setAttribute('autocomplete', 'off');
+    Main.addClass(field, 'smartinput');
+    field.onfocus = this.onfocus;
+    field.onkeyup = this.onkeyup;
+    field.onkeydown = this.onkeydown;
+    field.onblur = this.onblur;
+  }
+
+  this.activateAndDisplay = function(formName, fieldName)
+  {
+    var frm = document.forms[formName];
+    if (!frm) return;
+    var field = frm[fieldName];
+    if (!field) return;
+    
+    if (this.blurTimerId) 
+    {
+      clearTimeout(this.blurTimerId);
+      this.blurTimerId = null;
+    }
+    this.setActive(field);
+    this.filterOptions(true);
+    this.showOptions();
+    var oldfocus = field.onfocus;
+    field.onfocus = null;
+    field.focus();
+    field.onfocus = oldFocus;
+  }
+
+  /*
+    Set a field as the active field. All other operations will
+    now use this field. Set to null to disable all smart enum.
+    Ignored if the field doesn't have any options. This method
+    also positions the <div> with the options.
+  */
+  this.setActive = function(field)
+  {
+    if (!field || !field.smartOptions) return;
+    this.activeField = field;
+    var pos = Main.getElementPosition(this.activeField);
+    var div = this.div;
+    div.style.top = (pos.top + this.activeField.offsetHeight) + 'px';
+    div.style.left = (pos.left-2) + 'px';
+    div.style.width = (this.activeField.offsetWidth + 10) + 'px';
+  }
+
+  /*
+    Hide the enum options.
+  */
+  this.hideOptions = function()
+  {
+    this.div.style.display = 'none';
+  }
+
+  /*
+    Show the enum options setting the correct position.
+  */
+  this.showOptions = function()
+  {
+    this.div.style.display = 'block';
+  }
+
+  /*
+    Filter the enum options by the text in the active field.
+    The options that passed the filter are added as <div> tags
+    to the enum <div>.
+    @return TRUE if the filter generated any options, FALSE otherwise
+  */
+  this.filterOptions = function(allowEmpty)
+  {
+    if (!this.activeField) return false;
+    var text = this.activeField.value.replace(/^[=!<>]*/, '');
+    if (text == this.lastMatchedText) return true;
+    if (text == '' && !allowEmpty) return false;
+    
+    var options = this.activeField.smartOptions;
+    this.lastMatchedText = text;
+    this.selected = -1;
+    this.lastSelected = null;
+    var matching = '';
+    var index = 0;
+    for (var i = 0; i < options.length; i++)
+    {
+      if (options[i].indexOf(text) >= 0)
+      {
+        matching += '<div class="smartoption" id="smartoption.' + index + '"';
+        matching += ' onmouseover="SmartEnum.setSelectedOption(' + index + ')"'; 
+        matching += ' onclick="SmartEnum.submitSelected()">' + options[i] + '</div>';
+        index++;
+      }
+    }
+    this.div.innerHTML = matching;
+    return true;
+  }
+
+  /*
+    Mark a specific enum option as selected. Also makes sure
+    that the selected option is within the viewable area.
+    @param index The index of the option
+  */
+  this.setSelectedOption = function(index)
+  {
+    if (this.lastSelected)
+    {
+      Main.removeClass(this.lastSelected, 'selected');
+      this.lastSelected = null;
+    }
+    var option = document.getElementById('smartoption.' + index);
+    if (option)
+    {
+      Main.addClass(option, 'selected');
+      this.lastSelected = option;
+      this.selected = index;
+      var optionTop = option.offsetTop;
+      var optionBottom = optionTop + option.offsetHeight;
+      var parent = option.offsetParent;
+      var parentTop = parent.scrollTop;
+      var parentBottom = parentTop + parent.offsetHeight;
+      if (optionTop < parentTop)
+      {
+        parent.scrollTop = optionTop;
+      }
+      else if (optionBottom > parentBottom)
+      {
+        parent.scrollTop = optionBottom - parent.offsetHeight;
+      }
+    }
+  }
+
+  /*
+    Moves the selection up or down, optionally
+    repeating the operation at specified time intervals.
+    @param delta The number of options to shift the selection
+    @param delayRepeat Number of milliseconds to wait until
+      the move is repeated for the first time
+    @param repeat Number of milliseconds to wait between
+      subsequent repeats
+  */
+  this.moveSelection = function(delta, delayRepeat, repeat)
+  {
+    var option = document.getElementById('smartoption.' + (this.selected + delta));
+    if (option)
+    {
+      this.setSelectedOption(this.selected + delta);
+    }
+    if (delayRepeat && repeat)
+    {
+      var call = 'SmartEnum.moveSelection(' + delta + ',' + repeat + ',' + repeat + ')';
+      this.timerId = setTimeout(call, delayRepeat);
+    }
+  }
+
+  /*
+    Copies the selected option to the active field and submits
+    the form. If no option is selected, just submit the form.
+  */
+  this.submitSelected = function(event)
+  {
+    if (!this.activeField) return;
+    if (this.lastSelected)
+    {
+      var text = this.activeField.value;
+      var selectedText = this.lastSelected.innerHTML;
+      this.activeField.value = text.replace(/^([=!<>]*).*/, '$1' + selectedText);
+    }
+    this.activeField.form.submit();
+  }
+
+  /*
+    Cancels a move selection repeat set in the 'moveSelection' method.
+  */
+  this.cancelKeyRepeat = function()
+  {
+    if (this.timerId)
+    {
+      clearTimeout(this.timerId);
+      this.timerId = null;
+    }
+  }
+
+  /*
+    Called when a smart-enum enabled field receivs
+    the focus. This should set the current field to
+    the active field.
+  */
+  this.onfocus = function(event)
+  {
+    if (!event) event = window.event;
+    var field = Main.getEventTarget(event);
+    SmartEnum.setActive(field);
+  }
+  
+  /*
+    Called when a smart-enum enabled field loses
+    the focus. This should hide the options and
+    set the current field to null.
+  */
+  this.onblur = function(event)
+  {
+    if (!event) event = window.event;
+    // Need timout, otherwise the options are hidden and can't receive
+    // a possible mouseclick that selects an options and submits the form.
+    SmartEnum.blurTimerId = setTimeout('SmartEnum.hideOptions(); SmartEnum.setActive(null);', 100);
+  }
+  
+  /*
+    Called when a key is pressed in a smart-enum enabled field.
+    This function detects:
+    * up/down arrow: moves the selected option
+    * enter: submits the form
+  */
+  this.onkeydown = function(event)
+  {
+    if (!event) event = window.event;
+    var charCode = Main.getEventCharCode(event);
+    if (charCode == 38)
+    {
+      // Up arrow
+      SmartEnum.moveSelection(-1, SmartEnum.initialDelay, SmartEnum.repeatDelay);
+    }
+    else if (charCode == 40)
+    {
+      // Down arrow
+      SmartEnum.moveSelection(1, SmartEnum.initialDelay, SmartEnum.repeatDelay);
+    }
+    else if (charCode == 13)
+    {
+      // Enter
+      SmartEnum.submitSelected(event);
+    }
+  }
+  
+  /*
+    Called when a key is released in a smart-enum enabled field. 
+    This function detects changes to the text and displays matching
+    options.
+  */
+  this.onkeyup = function(event)
+  {
+    if (!event) event = window.event;
+    SmartEnum.cancelKeyRepeat();
+    var charCode = Main.getEventCharCode(event);
+    if (SmartEnum.filterOptions(charCode == 40 || charCode == 38))
+    {
+      SmartEnum.showOptions();
+    }
+    else
+    {
+      SmartEnum.hideOptions();
+    }
+  }
+  
+}
+
 var Forms = new FormClass();
 // Functions related to form handling
 function FormClass()
 {
+
   /*
     Attach this function to the onkeypress attribute of a field to

trunk/www/include/styles/main.css

@@ -348 +348 @@
   padding: 2px;
 }
+
+.smartenum {
+  position: absolute; 
+  width: 100px;
+  height: 200px;
+  background: #E0E0E0;
+  border-top: 1px solid #333333;
+  border-left: 1px solid #333333;
+  border-right: 1px solid #333333;
+  border-bottom: 1px solid #333333;
+  padding: 2px;
+  z-index: 999;
+  overflow: auto;
+}
+
+.smartinput {
+  border-top: 2px groove #999999;
+  border-left: 2px groove #999999;
+  border-bottom: 2px ridge #FFFFFF;
+  border-right: 2px ridge #FFFFFF;
+  
+}
+
+.smartinput input {
+  border: 0px;
+}
+
+.smartoption {
+  cursor: pointer;
+}
+
+.smartimage {
+  cursor: pointer;
+  border-left: 1px solid #999999;
+  background: #ffffff;
+}
+      
+.smartenum .selected {
+  background: #cccccc;      
+}