- cleanup of the way in which xform:items are created in the schema form builder (reduces some code)

- emitting xform:upload in schemaformbuilder if an xs:anyURI is encountered
- generating a file picker for xforms:upload


git-svn-id: https://svn.alfresco.com/repos/alfresco-enterprise/alfresco/HEAD/root@4539 c4b6b30b-aa2e-2d43-bbcb-ca4b014f7261

source/java/org/alfresco/web/bean/wcm/AVMConstants.java

@@ -232,6 +232,18 @@ public final class AVMConstants
       return parent + path;
    }
 
+   /**
+    * Returns a path relative to the webapp portion of the avm path.
+    *
+    * @param absoluteAVMPath an absolute path within the avm
+    * @return a relative path within the webapp.
+    */
+   public static String getWebappRelativePath(final String absoluteAVMPath)
+   {
+      final Matcher m = webappRelativePath.matcher(absoluteAVMPath);
+      return m.matches() && m.group(1).length() != 0 ? m.group(1) : "/";
+   }
+   
    // names of the stores representing the layers for an AVM website
    public final static String STORE_STAGING = "-staging";
    public final static String STORE_MAIN = "-main";
@@ -262,4 +274,7 @@ public final class AVMConstants
    // patter for absolute AVM Path
    private final static Pattern absoluteAVMPath = Pattern.compile(
          "([^:]+:/" + AVMConstants.DIR_APPBASE + "/[^/]+/[^/]+).*");
+   private final static Pattern webappRelativePath = Pattern.compile(
+      "[^:]+:/" + AVMConstants.DIR_APPBASE +
+      "/" + AVMConstants.DIR_WEBAPPS + "/[^/]+(.*)");
 }

source/java/org/alfresco/web/forms/xforms/XFormsBean.java

@@ -31,12 +31,18 @@ import javax.servlet.http.HttpSession;
 
 import org.apache.commons.logging.Log;
 import org.apache.commons.logging.LogFactory;
+import org.alfresco.repo.avm.AVMNodeConverter;
+import org.alfresco.service.ServiceRegistry;
+import org.alfresco.service.cmr.avm.AVMNodeDescriptor;
+import org.alfresco.service.cmr.avm.AVMService;
 import org.alfresco.web.bean.wcm.AVMConstants;
 import org.alfresco.web.forms.*;
 import org.w3c.dom.Document;
 import org.w3c.dom.Node;
-import org.alfresco.web.bean.wcm.AVMBrowseBean;
 import org.alfresco.web.app.servlet.FacesHelper;
+import org.alfresco.web.bean.repository.Repository;
+import org.alfresco.web.bean.wcm.AVMBrowseBean;
+import org.alfresco.web.ui.common.Utils;
 import org.chiba.xml.xforms.ChibaBean;
 import org.chiba.xml.xforms.Instance;
 import org.chiba.xml.xforms.XFormsElement;
@@ -46,6 +52,7 @@ import org.chiba.xml.xforms.exception.XFormsException;
 import org.chiba.xml.xforms.events.XFormsEvent;
 import org.chiba.xml.xforms.events.XFormsEventFactory;
 import org.chiba.xml.xforms.ui.BoundElement;
+import org.chiba.xml.xforms.ui.Upload;
 
 import org.w3c.dom.*;
 import org.w3c.dom.bootstrap.DOMImplementationRegistry;
@@ -99,8 +106,7 @@ public class XFormsBean
       final ExternalContext externalContext = facesContext.getExternalContext();
       final HttpServletRequest request = (HttpServletRequest)
          externalContext.getRequest();
-      final HttpSession session = (HttpSession)
+      final HttpSession session = (HttpSession)externalContext.getSession(true);
-         externalContext.getSession(true);
       final AVMBrowseBean browseBean = (AVMBrowseBean)
          session.getAttribute("AVMBrowseBean");
       LOGGER.debug("avm cwd is " + browseBean.getCurrentPath());
@@ -170,14 +176,12 @@ public class XFormsBean
       throws IOException,
       XFormsException
    {
-      LOGGER.debug(this + " building xform");
+      LOGGER.debug(this + ".getXForm()");
       final FacesContext context = FacesContext.getCurrentInstance();
       final ResponseWriter out = context.getResponseWriter();
-      final Map requestParameters = context.getExternalContext().getRequestParameterMap();
       LOGGER.debug("building xform for " + this.tt.getName());
       final Node form = this.chibaBean.getXMLContainer();
-      final FormsService ts = FormsService.getInstance();
+      FormsService.getInstance().writeXML(form, out);
-      ts.writeXML(form, out);
    }
 
    /**
@@ -195,12 +199,18 @@ public class XFormsBean
       final String id = (String)requestParameters.get("id");
       final String value = (String)requestParameters.get("value");
 
-      LOGGER.debug(this + " setXFormsValue(" + id + ", " + value + ")");
+      LOGGER.debug(this + ".setXFormsValue(" + id + ", " + value + ")");
+      if (this.chibaBean.lookup(id) instanceof Upload)
+      {
+         this.chibaBean.updateControlValue(id, null, value, value.getBytes());
+      }
+      else
+      {
          this.chibaBean.updateControlValue(id, value);
+      }
 
-      final FormsService ts = FormsService.getInstance();
       final ResponseWriter out = context.getResponseWriter();
-      ts.writeXML(this.getEventLog(), out);
+      FormsService.getInstance().writeXML(this.getEventLog(), out);
       out.close();
    }
 
@@ -219,12 +229,11 @@ public class XFormsBean
       final String id = (String)requestParameters.get("id");
       final int index = Integer.parseInt((String)requestParameters.get("index"));
 
-      LOGGER.debug(this + " setRepeatIndex(" + id + ", " + index + ")");
+      LOGGER.debug(this + ".setRepeatIndex(" + id + ", " + index + ")");
       this.chibaBean.updateRepeatIndex(id, index);
 
-      final FormsService ts = FormsService.getInstance();
       final ResponseWriter out = context.getResponseWriter();
-      ts.writeXML(this.getEventLog(), out);
+      FormsService.getInstance().writeXML(this.getEventLog(), out);
       out.close();
    }
 
@@ -240,12 +249,11 @@ public class XFormsBean
       final Map requestParameters = context.getExternalContext().getRequestParameterMap();
       final String id = (String)requestParameters.get("id");
 
-      LOGGER.debug(this + " fireAction(" + id + ")");
+      LOGGER.debug(this + ".fireAction(" + id + ")");
       this.chibaBean.dispatch(id, XFormsEventFactory.DOM_ACTIVATE);
 
-      final FormsService ts = FormsService.getInstance();
       final ResponseWriter out = context.getResponseWriter();
-      ts.writeXML(this.getEventLog(), out);
+      FormsService.getInstance().writeXML(this.getEventLog(), out);
       out.close();
    }
 
@@ -255,16 +263,16 @@ public class XFormsBean
    public void handleAction() 
       throws Exception
    {
-      LOGGER.debug(this + " handleAction");
+      LOGGER.debug(this + ".handleAction");
       final FacesContext context = FacesContext.getCurrentInstance();
       final HttpServletRequest request = (HttpServletRequest)
          context.getExternalContext().getRequest();
-      final FormsService ts = FormsService.getInstance();
+      final FormsService formsService = FormsService.getInstance();
-      final Document result = ts.parseXML(request.getInputStream());
+      final Document result = formsService.parseXML(request.getInputStream());
       this.instanceData.setContent(result);
 
       final ResponseWriter out = context.getResponseWriter();
-      ts.writeXML(result, out);
+      formsService.writeXML(result, out);
       out.close();
    }
 
@@ -274,21 +282,95 @@ public class XFormsBean
    public void swapRepeatItems() 
       throws Exception
    {
-      LOGGER.debug(this + " handleAction");
       final FacesContext context = FacesContext.getCurrentInstance();
-      final HttpServletRequest request = (HttpServletRequest)
-         context.getExternalContext().getRequest();
       final Map requestParameters = context.getExternalContext().getRequestParameterMap();
 
       final String fromItemId = (String)requestParameters.get("fromItemId");
       final String toItemId = (String)requestParameters.get("toItemId");
-      LOGGER.debug("swapping from " + fromItemId + " to " + toItemId);
+      LOGGER.debug(this + ".swapRepeatItems(" + fromItemId + ", " + toItemId + ")");
       this.swapRepeatItems(this.chibaBean.lookup(fromItemId), 
                            this.chibaBean.lookup(toItemId));
 
-      final FormsService ts = FormsService.getInstance();
       final ResponseWriter out = context.getResponseWriter();
-      ts.writeXML(this.getEventLog(), out);
+      FormsService.getInstance().writeXML(this.getEventLog(), out);
+      out.close();
+   }
+
+   /**
+    * Provides data for a file picker widget.
+    */
+   public void getFilePickerData()
+      throws Exception
+   {
+      final FacesContext facesContext = FacesContext.getCurrentInstance();
+      final ExternalContext externalContext = facesContext.getExternalContext();
+      final HttpSession session = (HttpSession)
+         externalContext.getSession(true);
+      final AVMBrowseBean browseBean = (AVMBrowseBean)
+         session.getAttribute("AVMBrowseBean");
+
+      final Map requestParameters = externalContext.getRequestParameterMap();
+      String currentPath = (String)requestParameters.get("currentPath");
+      if (currentPath == null)
+      {
+         currentPath = browseBean.getCurrentPath();
+      }
+      else
+      {
+         currentPath = AVMConstants.buildAbsoluteAVMPath(browseBean.getCurrentPath(),
+                                                         currentPath);
+      }
+      LOGGER.debug(this + ".getFilePickerData(" + currentPath + ")");
+
+      final ServiceRegistry serviceRegistry = 
+         Repository.getServiceRegistry(facesContext);
+      final AVMService avmService = serviceRegistry.getAVMService();
+
+      final FormsService formsService = FormsService.getInstance();
+      final Document result = formsService.newDocument();
+      final Element filePickerDataElement = result.createElement("file-picker-data");
+      result.appendChild(filePickerDataElement);
+
+
+      final AVMNodeDescriptor currentNode = avmService.lookup(-1, currentPath);
+      if (currentNode == null)
+      {
+         final Element errorElement = result.createElement("error");
+         errorElement.appendChild(result.createTextNode("Path " + currentPath + " not found"));
+         filePickerDataElement.appendChild(errorElement);
+         currentPath = browseBean.getCurrentPath();
+      }
+      else if (! currentNode.isDirectory())
+      {
+         currentPath = AVMNodeConverter.SplitBase(currentPath)[0];
+      }
+      
+      Element e = result.createElement("current-node");
+      e.setAttribute("avmPath", currentPath);
+      e.setAttribute("webappRelativePath", 
+                     AVMConstants.getWebappRelativePath(currentPath));
+      e.setAttribute("type", "directory");
+      e.setAttribute("image", "/images/icons/space_small.gif");
+      filePickerDataElement.appendChild(e);
+
+      for (Map.Entry<String, AVMNodeDescriptor> entry : 
+              avmService.getDirectoryListing(-1, currentPath).entrySet())
+      {
+         e = result.createElement("child-node");
+         e.setAttribute("avmPath", entry.getValue().getPath());
+         e.setAttribute("webappRelativePath", 
+                        AVMConstants.getWebappRelativePath(entry.getValue().getPath()));
+         e.setAttribute("type", entry.getValue().isDirectory() ? "directory" : "file");
+         e.setAttribute("image", (entry.getValue().isDirectory()
+                                  ? "/images/icons/space_small.gif"
+                                  : Utils.getFileTypeImage(facesContext, 
+                                                           entry.getValue().getName(),
+                                                           true)));
+         filePickerDataElement.appendChild(e);
+      }
+
+      final ResponseWriter out = facesContext.getResponseWriter();
+      FormsService.getInstance().writeXML(result, out);
       out.close();
    }
 

source/java/org/alfresco/web/forms/xforms/XFormsProcessor.java

@@ -71,7 +71,7 @@ public class XFormsProcessor
 
 	// this div is where the ui will write to
 	final Element div = result.createElement("div");
-	div.setAttribute("id", "alf-ui");
+	div.setAttribute("id", "alfresco-xforms-ui");
 	result.appendChild(div);
 
 	// a script with config information and globals.

source/test-resources/xforms/unit-tests/upload-tests/upload-simple-test.xsd

@@ -0,0 +1,15 @@
+<?xml version="1.0"?>
+<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"
+           elementFormDefault="qualified">
+  <xs:element name="upload-simple">
+    <xs:complexType>
+      <xs:sequence>
+	<xs:element name="string_with_default" type="xs:string" default="default value"/>
+	<xs:element name="file_from_element" type="xs:anyURI" minOccurs="1" maxOccurs="1"/>
+	<xs:element name="file_from_element_with_default" type="xs:anyURI" default="/index.jsp"/>
+      </xs:sequence>
+      <xs:attribute name="file_from_attribute" type="xs:anyURI" use="required"/>
+      <xs:attribute name="file_from_attribute_fixed" type="xs:anyURI" use="required" fixed="/index.jsp"/>
+    </xs:complexType>
+  </xs:element>
+</xs:schema>

source/web/scripts/ajax/xforms.js

@@ -230,6 +230,54 @@ dojo.declare("alfresco.xforms.Widget",
                }
              });
 
+dojo.declare("alfresco.xforms.FilePicker",
+             alfresco.xforms.Widget,
+             {
+               initializer: function(xform, xformsNode)
+               {
+               },
+               render: function(attach_point)
+               {
+                 this.domNode = document.createElement("div");
+                 this.domNode.setAttribute("id", this.id + "-widget");
+                 this.domNode.style.width = "100%";
+                 this.domNode.widget = this;
+                 this.domNode.addEventListener("heightChanged", 
+                                               function(event) 
+                                               { 
+                                                 this.widget.domContainer.style.height = 
+                                                   event.target.offsetHeight + "px";
+                                               }, 
+                                               false);
+                 attach_point.appendChild(this.domNode);
+                 //XXXarielb support readonly and disabled
+                 this.widget = new FilePickerWidget(this.domNode, this.getInitialValue(), false);
+                 this.widget.render();
+                 this.domNode.addEventListener("valueChanged",
+                                               function(event)
+                                               {
+                                                 var w = event.target.widget;
+                                                 w.xform.setXFormsValue(w.id, w.getValue());
+                                               },
+                                               false);
+               },
+               getValue: function()
+               {
+                 return this.widget.getValue();
+               },
+               setValue: function(value)
+               {
+                 if (!this.widget)
+                   this.setInitialValue(value);
+                 else
+                   this.widget.setValue(value);
+               },
+               _filePicker_changeHandler: function(event)
+               {
+                 this.xform.setXFormsValue(this.id, this.getValue());
+               }
+             });
+
 dojo.declare("alfresco.xforms.DatePicker",
              alfresco.xforms.Widget,
              {
@@ -1064,7 +1112,7 @@ dojo.declare("alfresco.xforms.Repeat",
                                                },
                                                function(type, data, event)
                                                {
-                                                 this.xform._handleEventLog(data.documentElement)
+                                                 this.target._handleEventLog(data.documentElement)
                                                });
                  send_ajax_request(req);
                },
@@ -1372,7 +1420,7 @@ dojo.declare("alfresco.xforms.XForm",
                                                        {},
                                                        function(type, data, evt) 
                                                        {
-                                                         this.xform._loadHandler(data);
+                                                         this.target._loadHandler(data);
                                                        }));
                },
                _loadHandler: function(xformDocument)
@@ -1389,7 +1437,7 @@ dojo.declare("alfresco.xforms.XForm",
                                                ? bindings[i].parent.id
                                                : 'null'));
                  }
-                 var alfUI = document.getElementById("alf-ui");
+                 var alfUI = document.getElementById("alfresco-xforms-ui");
                  alfUI.style.width = "100%";
                  this.rootWidget = new alfresco.xforms.Group(this, alfUI);
                  this.rootWidget.render(alfUI);
@@ -1407,6 +1455,8 @@ dojo.declare("alfresco.xforms.XForm",
                    return new alfresco.xforms.Repeat(this, node);
                  case XFORMS_NS_PREFIX + ":textarea":
                    return new alfresco.xforms.TextArea(this, node);
+                 case XFORMS_NS_PREFIX + ":upload":
+                   return new alfresco.xforms.FilePicker(this, node);
                  case XFORMS_NS_PREFIX + ":input":
                    var type = this.getType(node);
                  switch (type)
@@ -1541,7 +1591,7 @@ dojo.declare("alfresco.xforms.XForm",
                                                { id: id, index: index },
                                                function(type, data, evt)
                                                {
-                                                 this.xform._handleEventLog(data.documentElement);
+                                                 this.target._handleEventLog(data.documentElement);
                                                });
                  send_ajax_request(req);
                },
@@ -1553,7 +1603,7 @@ dojo.declare("alfresco.xforms.XForm",
                                                function(type, data, evt)
                                                {
                                                  dojo.debug("fireAction." + type);
-                                                 this.xform._handleEventLog(data.documentElement);
+                                                 this.target._handleEventLog(data.documentElement);
                                                });
                  send_ajax_request(req);
                },
@@ -1566,7 +1616,7 @@ dojo.declare("alfresco.xforms.XForm",
                                                { id: id, value: value },
                                                function(type, data, evt)
                                                {
-                                                 this.xform._handleEventLog(data.documentElement);
+                                                 this.target._handleEventLog(data.documentElement);
                                                });
                  send_ajax_request(req);
                },
@@ -1575,8 +1625,10 @@ dojo.declare("alfresco.xforms.XForm",
                  var prototypeClones = [];
                  for (var i = 0; i < events.childNodes.length; i++)
                  {
-                   if (events.childNodes[i].nodeType == dojo.dom.ELEMENT_NODE)
+                   if (events.childNodes[i].nodeType != dojo.dom.ELEMENT_NODE)
                    {
+                     continue;
+                   }
                    var xfe = new alfresco.xforms.XFormsEvent(events.childNodes[i]);
                    dojo.debug("parsing " + xfe.type +
                               "(" + xfe.targetId + ", " + xfe.targetName + ")");
@@ -1687,27 +1739,38 @@ dojo.declare("alfresco.xforms.XForm",
                      break;
                    }
                    case "chiba-replace-all":
+                   {
                      if (this.submitWidget)
                      {
                        this.submitWidget.done = true;
                        this.submitWidget.currentButton.click();
                      }
                      break;
+                   }
                    case "xforms-valid":
+                   {
                      xfe.getTarget().setValid(true);
                      xfe.getTarget().setModified(true);
                      break;
+                   }
                    case "xforms-invalid":
+                   {
                      xfe.getTarget().setValid(false);
                      xfe.getTarget().setModified(true);
                      break;
+                   }
                    case "xforms-required":
+                   {
                      xfe.getTarget().setRequired(true);
                      break;
+                   }
                    case "xforms-optional":
+                   {
                      xfe.getTarget().setRequired(false);
                      break;
+                   }
                    case "xforms-submit-error":
+                   {
                      var invalid = this.rootWidget.getWidgetsInvalidForSubmit();
                      _show_error(document.createTextNode("Please provide values for all required fields."));
                      var error_list = document.createElement("ul");
@@ -1720,6 +1783,7 @@ dojo.declare("alfresco.xforms.XForm",
                      }
                      _show_error(error_list);
                      break;
+                   }
                    default:
                    {
                      dojo.debug("unhandled event " + events.childNodes[i].nodeName);
@@ -1727,7 +1791,6 @@ dojo.declare("alfresco.xforms.XForm",
                    }
                  }
                }
-               }
              });
 
 function _findElementById(node, id)
@@ -1749,10 +1812,10 @@ function _findElementById(node, id)
   return null;
 }
 
-function create_ajax_request(xform, serverMethod, methodArgs, load, error)
+function create_ajax_request(target, serverMethod, methodArgs, load, error)
 {
   var result = new dojo.io.Request(WEBAPP_CONTEXT + "/ajax/invoke/XFormsBean." + serverMethod, "text/xml");
-  result.xform = xform;
+  result.target = target;
   result.content = methodArgs;
 
   result.load = load;
@@ -1772,7 +1835,7 @@ function create_ajax_request(xform, serverMethod, methodArgs, load, error)
 
 function _hide_errors()
 {
-  var errorDiv = document.getElementById("alf-xforms-error");
+  var errorDiv = document.getElementById("alfresco-xforms-error");
   if (errorDiv)
   {
     dojo.dom.removeChildren(errorDiv);
@@ -1782,17 +1845,17 @@ function _hide_errors()
 
 function _show_error(msg)
 {
-  var errorDiv = document.getElementById("alf-xforms-error");
+  var errorDiv = document.getElementById("alfresco-xforms-error");
   if (!errorDiv)
   {
     errorDiv = document.createElement("div");
-    errorDiv.setAttribute("id", "alf-xforms-error");
+    errorDiv.setAttribute("id", "alfresco-xforms-error");
-    errorDiv.setAttribute(document.all ? "className" : "class", "infoText statusErrorText");
+    dojo.html.setClass(errorDiv, "infoText statusErrorText");
     errorDiv.style.padding = "2px";
     errorDiv.style.borderColor = "#003366";
     errorDiv.style.borderWidth = "1px";
     errorDiv.style.borderStyle = "solid";
-    var alfUI = document.getElementById("alf-ui");
+    var alfUI = document.getElementById("alfresco-xforms-ui");
     dojo.dom.prependChild(errorDiv, alfUI);
   }
   if (errorDiv.style.display == "block")
@@ -1810,11 +1873,11 @@ function send_ajax_request(req)
 
 function _get_ajax_loader_element()
 {
-  var result = document.getElementById("alf-ajax-loader");
+  var result = document.getElementById("alfresco-ajax-loader");
   if (result)
     return result;
   result = document.createElement("div");
-  result.setAttribute("id", "alf-ajax-loader");
+  result.setAttribute("id", "alfresco-ajax-loader");
   result.style.position = "absolute";
   result.style.right = "0px";
   result.style.top = "0px";
@@ -1953,3 +2016,216 @@ if (!Array.prototype.indexOf)
     return -1;
   }
 }
+
+function FilePickerWidget(node, value, readonly)
+{
+  this.node = node;
+  this.value = value == null || value.length == 0 ? null : value;
+  this.readonly =  readonly || false;
+}
+
+FilePickerWidget.prototype = {
+getValue: function()
+{
+  return this.value;
+},
+setValue: function(v)
+{
+  this.value = (v == null || v.length == 0 ? null : v);
+  var event = document.createEvent("UIEvents");
+  event.initUIEvent("valueChanged", true, true, window, 0);
+  this.node.dispatchEvent(event);
+},
+setReadonly: function(r)
+{
+  this.readonly = r;
+},
+render: function()
+{
+  this._showSelectedValue();
+},
+_showSelectedValue: function()
+{
+  var d = this.node.ownerDocument;
+  dojo.dom.removeChildren(this.node);
+  dojo.html.setClass(this.node, "selector");
+
+  this.node.style.height = "20px";
+  this.node.style.lineHeight = this.node.style.height;
+  var event = d.createEvent("UIEvents");
+  event.initUIEvent("heightChanged", true, true, window, 0);
+  this.node.dispatchEvent(event);
+
+  this.node.appendChild(d.createTextNode(this.value == null 
+                                         ? "<none selected>" 
+                                         : this.value));
+  var selectButton = d.createElement("input");
+  this.node.appendChild(selectButton);
+  selectButton.filePickerWidget = this;
+  selectButton.type = "button";
+  selectButton.value = this.value == null ? "Select" : "Change";
+  selectButton.enabled = this.readonly;
+  selectButton.style.marginLeft = "10px";
+  selectButton.style.position = "absolute";
+  selectButton.style.right = "10px";
+  selectButton.style.top = (.5 * this.node.offsetHeight) - (.5 * selectButton.offsetHeight) + "px";
+  dojo.event.connect(selectButton, 
+                     "onclick", 
+                     function(event)
+                     {
+                       var w = event.target.filePickerWidget;
+                       w._navigateToNode(w.getValue() || "");
+                     });
+},
+_navigateToNode: function(path)
+{
+  var req = create_ajax_request(this,
+                                "getFilePickerData",
+                                {},
+                                function(type, data, evt)
+                                {
+                                  this.target._showPicker(data.documentElement);
+                                });
+  req.content.currentPath = path;
+  send_ajax_request(req);
+},
+_showPicker: function(data)
+{
+  dojo.dom.removeChildren(this.node);
+  var d = this.node.ownerDocument;
+  this.node.style.height = "200px";
+  var event = d.createEvent("UIEvents");
+  event.initUIEvent("heightChanged", true, true, window, 0);
+  this.node.dispatchEvent(event);
+
+  var currentPath = data.getElementsByTagName("current-node")[0];
+  currentPath = currentPath.getAttribute("webappRelativePath");
+  var currentPathName = currentPath.replace(/.*\/([^/]+)/, "$1")
+
+  var headerDiv = d.createElement("div");
+  headerDiv.style.position = "relative";
+  this.node.appendChild(headerDiv);
+  headerDiv.style.width = "100%";
+  headerDiv.style.backgroundColor = "lightgrey";
+  headerDiv.style.paddingLeft = "2px";
+  headerDiv.appendChild(d.createTextNode("In: " + currentPathName));
+
+  var headerRightLink = d.createElement("a");
+  headerRightLink.setAttribute("webappRelativePath", currentPath);
+  headerRightLink.filePickerWidget = this;
+  headerRightLink.setAttribute("href", "javascript:void(0)");
+  if (currentPathName != "/")
+  {
+    dojo.event.connect(headerRightLink, 
+                       "onclick", 
+                       function(event)
+                       {
+                         var w = event.target.filePickerWidget;
+                         var parentPath = event.target.getAttribute("webappRelativePath");
+                         parentPath = (parentPath.lastIndexOf("/") == 0 
+                                       ? "/" 
+                                       : parentPath.substring(0, parentPath.lastIndexOf("/")));
+                         w._navigateToNode(parentPath);
+                       });
+  }
+  var navigateToParentNodeImage = d.createElement("img");
+  navigateToParentNodeImage.style.borderWidth = "0px";
+  navigateToParentNodeImage.style.opacity =  (currentPathName == "/" ? .3 : 1);
+  navigateToParentNodeImage.style.marginRight = "2px";
+  navigateToParentNodeImage.setAttribute("src", WEBAPP_CONTEXT + "/images/icons/up.gif");
+  headerRightLink.appendChild(navigateToParentNodeImage);
+  headerRightLink.appendChild(d.createTextNode("Go up"));
+
+  headerRightLink.style.position = "absolute";
+  headerRightLink.style.height = headerDiv.style.height;
+  headerRightLink.style.lineHeight = headerRightLink.style.height;
+  headerRightLink.style.top = "0px";
+  headerRightLink.style.right = "0px";
+  headerRightLink.style.paddingRight = "2px";
+  headerDiv.appendChild(headerRightLink);
+
+  var contentDiv = d.createElement("div");
+  this.node.appendChild(contentDiv);
+
+  var footerDiv = d.createElement("div");
+  footerDiv.style.backgroundColor = "lightgrey";
+  var cancelButton = d.createElement("input");
+  cancelButton.filePickerWidget = this;
+  cancelButton.type = "button";
+  cancelButton.value = "Cancel";
+  cancelButton.style.margin = "2px 0px 2px 0px";
+  dojo.event.connect(e, "onclick", function(event)
+                       {
+                         var w = event.target.filePickerWidget;
+                         w._showSelectedValue();
+                       });
+
+  footerDiv.style.textAlign = "center";
+  footerDiv.style.height = headerDiv.style.height;
+  footerDiv.appendChild(cancelButton);
+  this.node.appendChild(footerDiv);
+
+  contentDiv.style.height = (this.node.offsetHeight - 
+                             footerDiv.offsetHeight -
+                             headerDiv.offsetHeight - 10) + "px";
+  contentDiv.style.overflowY = "auto";
+  var childNodes = data.getElementsByTagName("child-node");
+  for (var i = 0; i < childNodes.length; i++)
+  {
+    if (childNodes[i].nodeType != dojo.dom.ELEMENT_NODE)
+    {
+      continue;
+    }
+    var row = d.createElement("div");
+    contentDiv.appendChild(row);
+    row.style.position = "relative";
+    row.style.backgroundColor = i % 2 ? "#f0f0ee" : "#ffffff"
+    var e = d.createElement("img");
+    e.align = "absmiddle";
+    e.style.margin = "0px 4px 0px 4px";
+    e.setAttribute("src", WEBAPP_CONTEXT + childNodes[i].getAttribute("image"));
+    row.appendChild(e);
+
+    var path = childNodes[i].getAttribute("webappRelativePath");
+    var name = path.replace(/.*\/([^/]+)/, "$1");
+
+    if (childNodes[i].getAttribute("type") == "directory")
+    {
+      e = d.createElement("a");
+      e.filePickerWidget = this;
+      e.setAttribute("href", "javascript:void(0)");
+      e.setAttribute("webappRelativePath", path); 
+      dojo.event.connect(e, "onclick", function(event)
+                         {
+                           var w = event.target.filePickerWidget;
+                           w._navigateToNode(event.target.getAttribute("webappRelativePath"));
+                           return true;
+                         });
+      e.appendChild(d.createTextNode(name));
+      row.appendChild(e);
+    }
+    else
+    {
+      row.appendChild(d.createTextNode(name));
+    }
+
+    e = d.createElement("input");
+    e.filePickerWidget = this;
+    row.appendChild(e);
+    e.type = "button";
+    e.name = path;
+    e.value = "Select";
+    
+    e.style.position = "absolute";
+    e.style.right = "10px";
+    e.style.top = (.5 * row.offsetHeight) - (.5 * e.offsetHeight) + "px";
+    dojo.event.connect(e, "onclick", function(event)
+                       {
+                         var w = event.target.filePickerWidget;
+                         w.setValue(event.target.name);
+                         w._showSelectedValue();
+                       });
+                       
+  }
+}
+};