Ajax picker enhancements and fixes. Ajax File Picker component implemented (ready for web-client collaboration UI). Ajax space/category pickers replace old JSF pickers in existing JSP pages. Advanced Search category selector now support multi-selection of categories.

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

source/java/org/alfresco/web/bean/AdvancedSearchDialog.java

@@ -72,6 +72,7 @@ import org.alfresco.web.data.QuickSort;
 import org.alfresco.web.ui.common.Utils;
 import org.alfresco.web.ui.common.component.UIModeList;
 import org.alfresco.web.ui.common.component.UIPanel.ExpandedEvent;
+import org.alfresco.web.ui.repo.component.UIAjaxCategoryPicker;
 import org.alfresco.web.ui.repo.component.UICategorySelector;
 import org.alfresco.web.ui.repo.component.UISearchCustomProperties;
 
@@ -936,16 +937,21 @@ public class AdvancedSearchDialog extends BaseDialogBean
     */
    public void addCategory(ActionEvent event)
    {
-      UICategorySelector selector = (UICategorySelector)event.getComponent().findComponent("catSelector");
+      UIAjaxCategoryPicker selector = (UIAjaxCategoryPicker)event.getComponent().findComponent("catSelector");
       UISelectBoolean chkChildren = (UISelectBoolean)event.getComponent().findComponent("chkCatChildren");
       
-      NodeRef categoryRef = (NodeRef)selector.getValue();
-      if (categoryRef != null)
+      List<NodeRef> categoryRefs = (List<NodeRef>)selector.getValue();
+      if (categoryRefs != null)
       {
-         Node categoryNode = new MapNode(categoryRef);
-         // add a value bound propery used to indicate if searching across children is selected
-         categoryNode.getProperties().put(INCLUDE_CHILDREN, chkChildren.isSelected());
-         properties.getCategories().add(categoryNode);
+         for (NodeRef categoryRef : categoryRefs)
+         {
+            Node categoryNode = new MapNode(categoryRef);
+            // add a value bound propery used to indicate if searching across children is selected
+            categoryNode.getProperties().put(INCLUDE_CHILDREN, chkChildren.isSelected());
+            properties.getCategories().add(categoryNode);
+         }
+         // clear selector value after the list has been populated
+         selector.setValue(null);
       }
    }
    

source/java/org/alfresco/web/bean/BrowseBean.java

@@ -527,8 +527,7 @@ public class BrowseBean implements IContextListener
 	               MapNode node = null;
 
 	               // look for Space folder node
-	               if (this.dictionaryService.isSubClass(type, ContentModel.TYPE_FOLDER) == true &&
-	                        this.dictionaryService.isSubClass(type, ContentModel.TYPE_SYSTEM_FOLDER) == false)
+	               if (this.dictionaryService.isSubClass(type, ContentModel.TYPE_FOLDER))
 	               {
 	                  // create our Node representation
 	                  node = new MapNode(nodeRef, this.nodeService, fileInfo.getProperties());
@@ -782,8 +781,7 @@ public class BrowseBean implements IContextListener
                   this.contentNodes.add(node);
                }
                // look for Space folder node
-               else if (this.dictionaryService.isSubClass(type, ContentModel.TYPE_FOLDER) == true &&
-                        this.dictionaryService.isSubClass(type, ContentModel.TYPE_SYSTEM_FOLDER) == false)
+               else if (this.dictionaryService.isSubClass(type, ContentModel.TYPE_FOLDER))
                {
                   // create our Node representation
                   node = new MapNode(nodeRef, this.nodeService, fileInfo.getProperties());

source/java/org/alfresco/web/bean/ajax/PickerBean.java

@@ -34,13 +34,16 @@ import javax.transaction.UserTransaction;
 import org.alfresco.model.ApplicationModel;
 import org.alfresco.model.ContentModel;
 import org.alfresco.repo.content.MimetypeMap;
+import org.alfresco.service.cmr.dictionary.DictionaryService;
 import org.alfresco.service.cmr.model.FileFolderService;
 import org.alfresco.service.cmr.model.FileInfo;
 import org.alfresco.service.cmr.repository.ChildAssociationRef;
+import org.alfresco.service.cmr.repository.FileTypeImageSize;
 import org.alfresco.service.cmr.repository.NodeRef;
 import org.alfresco.service.cmr.repository.NodeService;
 import org.alfresco.service.cmr.search.CategoryService;
 import org.alfresco.web.app.Application;
+import org.alfresco.web.app.servlet.DownloadContentServlet;
 import org.alfresco.web.app.servlet.ajax.InvokeCommand;
 import org.alfresco.web.bean.BrowseBean;
 import org.alfresco.web.bean.repository.Repository;
@@ -55,6 +58,8 @@ import org.apache.commons.logging.LogFactory;
  */
 public class PickerBean
 {
+   private static final String FOLDER_IMAGE_PREFIX = "/images/icons/";
+   
    private static Log logger = LogFactory.getLog(PickerBean.class);
    
    private CategoryService categoryService;
@@ -134,6 +139,8 @@ public class PickerBean
          {
             out.writeNullValue("id");
             out.writeValue("name", "Categories");
+            out.writeValue("isroot", true);
+            out.writeValue("selectable", false);
          }
          else
          {
@@ -178,12 +185,14 @@ public class PickerBean
          tx.begin();
          
          List<ChildAssociationRef> childRefs;
+         NodeRef companyHomeRef = new NodeRef(Repository.getStoreRef(), Application.getCompanyRootId(fc));
          NodeRef parentRef = null;
          Map params = fc.getExternalContext().getRequestParameterMap();
          String strParentRef = (String)params.get("parent");
          if (strParentRef == null || strParentRef.length() == 0)
          {
-            parentRef = new NodeRef(Repository.getStoreRef(), Application.getCompanyRootId(fc));
+            parentRef = companyHomeRef;
+            strParentRef = parentRef.toString();
          }
          else
          {
@@ -195,15 +204,11 @@ public class PickerBean
          out.startObject();
          out.startValue("parent");
          out.startObject();
-         if (strParentRef == null || strParentRef.length() == 0)
+         out.writeValue("id", strParentRef);
+         out.writeValue("name", Repository.getNameForNode(this.internalNodeService, parentRef));
+         if (parentRef.equals(companyHomeRef))
          {
-            out.writeNullValue("id");
-            out.writeValue("name", Repository.getNameForNode(this.internalNodeService, parentRef));
-         }
-         else
-         {
-            out.writeValue("id", strParentRef);
-            out.writeValue("name", Repository.getNameForNode(this.internalNodeService, parentRef));
+            out.writeValue("isroot", true);
          }
          out.endObject();
          out.endValue();
@@ -217,7 +222,7 @@ public class PickerBean
             out.writeValue("id", folder.getNodeRef().toString());
             out.writeValue("name", (String)folder.getProperties().get(ContentModel.PROP_NAME));
             String icon = (String)folder.getProperties().get(ApplicationModel.PROP_ICON);
-            out.writeValue("icon", (icon != null ? icon + "-16.gif" : BrowseBean.SPACE_SMALL_DEFAULT + ".gif"));
+            out.writeValue("icon", FOLDER_IMAGE_PREFIX + (icon != null ? icon + "-16.gif" : BrowseBean.SPACE_SMALL_DEFAULT + ".gif"));
             out.endObject();
          }
          
@@ -234,4 +239,87 @@ public class PickerBean
          try { if (tx != null) {tx.rollback();} } catch (Exception tex) {}
       }
    }
+   
+   @InvokeCommand.ResponseMimetype(value=MimetypeMap.MIMETYPE_HTML)
+   public void getFileFolderNodes() throws Exception
+   {
+      FacesContext fc = FacesContext.getCurrentInstance();
+      
+      UserTransaction tx = null;
+      try
+      {
+         tx = Repository.getUserTransaction(FacesContext.getCurrentInstance(), true);
+         tx.begin();
+         
+         DictionaryService dd = Repository.getServiceRegistry(fc).getDictionaryService();
+         
+         List<ChildAssociationRef> childRefs;
+         NodeRef companyHomeRef = new NodeRef(Repository.getStoreRef(), Application.getCompanyRootId(fc));
+         NodeRef parentRef = null;
+         Map params = fc.getExternalContext().getRequestParameterMap();
+         String strParentRef = (String)params.get("parent");
+         if (strParentRef == null || strParentRef.length() == 0)
+         {
+            parentRef = companyHomeRef;
+            strParentRef = parentRef.toString();
+         }
+         else
+         {
+            parentRef = new NodeRef(strParentRef);
+         }
+         List<FileInfo> items = this.fileFolderService.list(parentRef);
+         
+         JSONWriter out = new JSONWriter(fc.getResponseWriter());
+         out.startObject();
+         out.startValue("parent");
+         out.startObject();
+         out.writeValue("id", strParentRef);
+         out.writeValue("name", Repository.getNameForNode(this.internalNodeService, parentRef));
+         if (parentRef.equals(companyHomeRef))
+         {
+            out.writeValue("isroot", true);
+         }
+         out.writeValue("selectable", false);
+         out.endObject();
+         out.endValue();
+         out.startValue("children");
+         out.startArray();
+         
+         // filter out those children that are not spaces
+         for (FileInfo item : items)
+         {
+            out.startObject();
+            out.writeValue("id", item.getNodeRef().toString());
+            String name = (String)item.getProperties().get(ContentModel.PROP_NAME);
+            out.writeValue("name", name);
+            if (dd.isSubClass(this.internalNodeService.getType(item.getNodeRef()), ContentModel.TYPE_FOLDER))
+            {
+               // found a folder
+               String icon = (String)item.getProperties().get(ApplicationModel.PROP_ICON);
+               out.writeValue("icon", FOLDER_IMAGE_PREFIX + (icon != null ? icon + "-16.gif" : BrowseBean.SPACE_SMALL_DEFAULT + ".gif"));
+               out.writeValue("selectable", false);
+            }
+            else
+            {
+               // must be a file
+               String icon = Utils.getFileTypeImage(fc, name, FileTypeImageSize.Small);
+               out.writeValue("icon", icon);
+               out.writeValue("url", DownloadContentServlet.generateBrowserURL(item.getNodeRef(), name));
+            }
+            out.endObject();
+         }
+         
+         out.endArray();
+         out.endValue();
+         out.endObject();
+         
+         tx.commit();
+      }
+      catch (Throwable err)
+      {
+         Utils.addErrorMessage("PickerBean exception in getFileFolderNodes()", err);
+         fc.getResponseWriter().write("ERROR: " + err.getMessage());
+         try { if (tx != null) {tx.rollback();} } catch (Exception tex) {}
+      }
+   }
 }

source/java/org/alfresco/web/ui/repo/component/BaseAjaxItemPicker.java

@@ -25,17 +25,25 @@
 package org.alfresco.web.ui.repo.component;
 
 import java.io.IOException;
+import java.util.ArrayList;
+import java.util.List;
 import java.util.Map;
 import java.util.ResourceBundle;
+import java.util.StringTokenizer;
 
 import javax.faces.component.UIInput;
 import javax.faces.context.FacesContext;
 import javax.faces.context.ResponseWriter;
 import javax.faces.el.ValueBinding;
-import javax.faces.event.AbortProcessingException;
-import javax.faces.event.FacesEvent;
+import javax.transaction.UserTransaction;
 
+import org.alfresco.model.ContentModel;
+import org.alfresco.service.cmr.repository.NodeRef;
+import org.alfresco.service.cmr.repository.NodeService;
 import org.alfresco.web.app.Application;
+import org.alfresco.web.bean.repository.Repository;
+import org.alfresco.web.ui.common.Utils;
+import org.springframework.web.jsf.FacesContextUtils;
 
 /**
  * @author Kevin Roast
@@ -110,16 +118,23 @@ public abstract class BaseAjaxItemPicker extends UIInput
       Map requestMap = context.getExternalContext().getRequestParameterMap();
       String fieldId = getHiddenFieldName();
       String value = (String)requestMap.get(fieldId);
-      
-      
-   }
-   
-   /**
-    * @see javax.faces.component.UIInput#broadcast(javax.faces.event.FacesEvent)
-    */
-   public void broadcast(FacesEvent event) throws AbortProcessingException
-   {
-      super.broadcast(event);
+      if (value != null && value.length() != 0)
+      {
+         if (getSingleSelect() == true)
+         {
+            NodeRef ref = new NodeRef(value);
+            this.setSubmittedValue(ref);
+         }
+         else
+         {
+            List<NodeRef> refs = new ArrayList<NodeRef>(5);
+            for (StringTokenizer t = new StringTokenizer(value, ","); t.hasMoreTokens(); /**/)
+            {
+               refs.add(new NodeRef(t.nextToken()));
+            }
+            this.setSubmittedValue(refs);
+         }
+      }
    }
    
    /**
@@ -134,17 +149,83 @@ public abstract class BaseAjaxItemPicker extends UIInput
       
       ResponseWriter out = fc.getResponseWriter();
       
+      String formClientId = Utils.getParentForm(fc, this).getClientId(fc);
+      Map attrs = this.getAttributes();
       ResourceBundle msg = Application.getBundle(fc);
       
-      // TODO: from submitted value or 'none'
-      String selection = "none";
+      // get values from submitted value or none selected
+      String selection = null;
+      List<NodeRef> submitted = null;
+      if (getSingleSelect() == true)
+      {
+         NodeRef ref = (NodeRef)getSubmittedValue();
+         if (ref == null)
+         {
+            Object objRef = getValue();
+            if (objRef instanceof String)
+            {
+               ref = new NodeRef((String)objRef);
+            }
+            else if (objRef instanceof NodeRef)
+            {
+               ref = (NodeRef)objRef;
+            }
+         }
+         if (ref != null)
+         {
+            submitted = new ArrayList<NodeRef>(1);
+            submitted.add(ref);
+         }
+      }
+      else
+      {
+         submitted = (List<NodeRef>)getSubmittedValue();
+         if (submitted == null)
+         {
+            submitted = (List<NodeRef>)getValue();
+         }
+      }
+      if (submitted != null)
+      {
+         UserTransaction tx = null;
+         try
+         {
+            tx = Repository.getUserTransaction(fc, true);
+            tx.begin();
+            
+            StringBuilder buf = new StringBuilder(128);
+            NodeService nodeService = (NodeService)FacesContextUtils.getRequiredWebApplicationContext(
+                  fc).getBean("nodeService");
+            for (NodeRef value : submitted)
+            {
+               String name = (String)nodeService.getProperty(value, ContentModel.PROP_NAME);
+               if (buf.length() != 0)
+               {
+                  buf.append(", ");
+               }
+               buf.append(name);
+            }
+            selection = buf.toString();
+            
+            // commit the transaction
+            tx.commit();
+         }
+         catch (Throwable err)
+         {
+            try { if (tx != null) {tx.rollback();} } catch (Exception tex) {}
+         }
+      }
       
+      // generate the Ids for our script object and containing DIV element
       String divId = getId();
       String objId = divId + "Obj"; 
+      
+      // generate the script to create and init our script object
       String contextPath = fc.getExternalContext().getRequestContextPath();
       out.write("<script type='text/javascript'>");
       out.write("function init" + divId + "() {");
-      out.write(" window." + objId + " = new AlfPicker('" + divId + "','" + objId + "','" + getServiceCall() + "'," + getSingleSelect() + ");");
+      out.write(" window." + objId + " = new AlfPicker('" + divId + "','" + objId + "','" + getServiceCall() +
+                "','" + formClientId + "'," + getSingleSelect() + ");");
       if (getInitialSelection() != null)
       {
          out.write(" window." + objId + ".setStartId('" + getInitialSelection() + "');");
@@ -157,12 +238,32 @@ public abstract class BaseAjaxItemPicker extends UIInput
       out.write("window.addEvent('domready', init" + divId + ");");
       out.write("</script>");
       
+      // generate the DIV structure for our component as expected by the script object
       out.write("<div id='" + divId + "' class='picker'>") ;
-      out.write(" <input id='" + divId + "-value' name='" + divId + "-value' type='hidden'>");
-      out.write(" <div id='" + divId + "-noitems' class='pickerNoSelectedItems'>");
-      out.write("  <span>&lt;" + selection + "&gt;</span>");
-      out.write("  <span class='pickerActionButton'><a href='#' onclick='" + objId + ".showSelector();'>");
-      out.write(msg.getString(getLabel()));
+      out.write(" <input id='" + getHiddenFieldName() + "' name='" + getHiddenFieldName() + "' type='hidden'>");
+      // current selection displayed as link and message to launch the selector
+      out.write(" <div id='" + divId + "-noitems'");
+      if (attrs.get("style") != null)
+      {
+         out.write(" style=\"");
+         out.write((String)attrs.get("style"));
+         out.write('"');
+      }
+      if (attrs.get("styleClass") != null)
+      {
+         out.write(" class=");
+         out.write((String)attrs.get("styleClass"));
+      }
+      out.write(">");
+      out.write("  <span class='pickerActionButton'><a href='javascript:" + objId + ".showSelector();'>");
+      if (selection == null)
+      {
+         out.write(getLabel());
+      }
+      else
+      {
+         out.write(selection);
+      }
       out.write("</a></span>");
       out.write(" </div>");
       // container for item navigation
@@ -181,10 +282,11 @@ public abstract class BaseAjaxItemPicker extends UIInput
       out.write("     </span>");
       out.write("     <span class='pickerNavBreadcrumb'>");
       out.write("      <div id='" + divId + "-nav-bread' class='pickerNavBreadcrumbPanel'></div>");
-      out.write("      <a href='#' onclick='" + objId + ".breadcrumbToggle();'><span id='" + divId + "-nav-txt'></span><img border='0' src='");
+      out.write("      <a href='javascript:" + objId + ".breadcrumbToggle();'><span id='" + divId + "-nav-txt'></span><img border='0' src='");
       out.write(contextPath);
       out.write("/images/icons/arrow_open.gif'></a>");
       out.write("     </span>");
+      out.write("     <span id='" + divId + "-nav-add'></span>");
       out.write("    </div>");
       out.write("   </div>");
       // container for item selection
@@ -193,14 +295,17 @@ public abstract class BaseAjaxItemPicker extends UIInput
       out.write("    <div id='" + divId + "-results-list' class='pickerResultsList'></div>");
       out.write("   </div>");
       out.write("  </div>");
-      out.write("  <div id='" + divId + "-finish' class='pickerFinishControls'>");
-      out.write("   <div class='pickerDoneButton'><a href='#' onclick='" + objId + ".doneClicked();'>");
+      // controls (OK & Cancel buttons etc.)
+      out.write("  <div class='pickerFinishControls'>");
+      out.write("   <div id='" + divId + "-finish' style='float:left' class='pickerButtons'><a href='javascript:" + objId + ".doneClicked();'>");
       out.write(msg.getString(MSG_OK));
       out.write("</a></div>");
-      // TODO: Cancel button
+      out.write("   <div style='float:right' class='pickerButtons'><a href='javascript:" + objId + ".cancelClicked();'>");
+      out.write(msg.getString(MSG_CANCEL));
+      out.write("</a></div>");
       out.write("  </div>");
       out.write(" </div>");
-      // container for selected items
+      // container for the selected items
       out.write(" <div id='" + divId + "-selected' class='pickerSelectedItems'></div>");
       out.write("</div>");
    }
@@ -331,6 +436,6 @@ public abstract class BaseAjaxItemPicker extends UIInput
     */
    protected String getHiddenFieldName()
    {
-      return this.getClientId(getFacesContext());
+      return this.getId() + "-value";
    }
 }

source/java/org/alfresco/web/ui/repo/component/UIAjaxCategoryPicker.java

@@ -44,6 +44,6 @@ public class UIAjaxCategoryPicker extends BaseAjaxItemPicker
    @Override
    protected String getDefaultIcon()
    {
-      return "category_small.gif";
+      return "/images/icons/category_small.gif";
    }
 }

source/java/org/alfresco/web/ui/repo/component/UIAjaxFilePicker.java

@@ -0,0 +1,50 @@
+/*
+ * Copyright (C) 2005-2007 Alfresco Software Limited.
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+
+ * As a special exception to the terms and conditions of version 2.0 of 
+ * the GPL, you may redistribute this Program in connection with Free/Libre 
+ * and Open Source Software ("FLOSS") applications as described in Alfresco's 
+ * FLOSS exception.  You should have recieved a copy of the text describing 
+ * the FLOSS exception, and it is also available here: 
+ * http://www.alfresco.com/legal/licensing
+ */
+package org.alfresco.web.ui.repo.component;
+
+/**
+ * @author Kevin Roast
+ */
+public class UIAjaxFilePicker extends BaseAjaxItemPicker
+{
+   @Override
+   public String getFamily()
+   {
+      return "org.alfresco.faces.AjaxFilePicker";
+   }
+
+   @Override
+   protected String getServiceCall()
+   {
+      return "PickerBean.getFileFolderNodes";
+   }
+
+   @Override
+   protected String getDefaultIcon()
+   {
+      // none required - we always return an icon name in the service call
+      return null;
+   }
+}

source/java/org/alfresco/web/ui/repo/tag/AjaxFileSelectorTag.java

@@ -0,0 +1,43 @@
+/*
+ * Copyright (C) 2005-2007 Alfresco Software Limited.
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+
+ * As a special exception to the terms and conditions of version 2.0 of 
+ * the GPL, you may redistribute this Program in connection with Free/Libre 
+ * and Open Source Software ("FLOSS") applications as described in Alfresco's 
+ * FLOSS exception.  You should have recieved a copy of the text describing 
+ * the FLOSS exception, and it is also available here: 
+ * http://www.alfresco.com/legal/licensing"
+ */
+/*
+ * Created on 25-May-2005
+ */
+package org.alfresco.web.ui.repo.tag;
+
+
+/**
+ * @author Kevin Roast
+ */
+public class AjaxFileSelectorTag extends AjaxItemSelectorTag
+{
+   /**
+    * @see javax.faces.webapp.UIComponentTag#getComponentType()
+    */
+   public String getComponentType()
+   {
+      return "org.alfresco.faces.AjaxFilePicker";
+   }
+}

source/java/org/alfresco/web/ui/repo/tag/AjaxItemSelectorTag.java

@@ -29,14 +29,14 @@ package org.alfresco.web.ui.repo.tag;
 
 import javax.faces.component.UIComponent;
 
-import org.alfresco.web.ui.common.tag.BaseComponentTag;
+import org.alfresco.web.ui.common.tag.HtmlComponentTag;
 
 /**
  * Base class for the item selector tag
  * 
  * @author Kevin Roast
  */
-public abstract class AjaxItemSelectorTag extends BaseComponentTag
+public abstract class AjaxItemSelectorTag extends HtmlComponentTag
 {
    /** the value */
    private String value;

source/web/WEB-INF/faces-config-repo.xml

@@ -218,6 +218,11 @@
       <component-type>org.alfresco.faces.AjaxCategoryPicker</component-type>
       <component-class>org.alfresco.web.ui.repo.component.UIAjaxCategoryPicker</component-class>
    </component>
+   
+   <component>
+      <component-type>org.alfresco.faces.AjaxFilePicker</component-type>
+      <component-class>org.alfresco.web.ui.repo.component.UIAjaxFilePicker</component-class>
+   </component>
 
 
    <!-- ==================== CONVERTERS ==================== -->

source/web/WEB-INF/repo.tld

@@ -2227,6 +2227,18 @@
          <rtexprvalue>true</rtexprvalue>
       </attribute>
       
+      <attribute>
+         <name>style</name>
+         <required>false</required>
+         <rtexprvalue>true</rtexprvalue>
+      </attribute>
+      
+      <attribute>
+         <name>styleClass</name>
+         <required>false</required>
+         <rtexprvalue>true</rtexprvalue>
+      </attribute>
+      
       <attribute>
          <name>value</name>
          <required>false</required>
@@ -2281,6 +2293,84 @@
          <rtexprvalue>true</rtexprvalue>
       </attribute>
       
+      <attribute>
+         <name>style</name>
+         <required>false</required>
+         <rtexprvalue>true</rtexprvalue>
+      </attribute>
+      
+      <attribute>
+         <name>styleClass</name>
+         <required>false</required>
+         <rtexprvalue>true</rtexprvalue>
+      </attribute>
+      
+      <attribute>
+         <name>value</name>
+         <required>false</required>
+         <rtexprvalue>true</rtexprvalue>
+      </attribute>
+
+      <attribute>
+         <name>label</name>
+         <required>true</required>
+         <rtexprvalue>true</rtexprvalue>
+      </attribute>
+
+      <attribute>
+         <name>initialSelection</name>
+         <required>false</required>
+         <rtexprvalue>true</rtexprvalue>
+      </attribute>
+      
+      <attribute>
+         <name>singleSelect</name>
+         <required>false</required>
+         <rtexprvalue>true</rtexprvalue>
+      </attribute>
+      
+      <attribute>
+         <name>disabled</name>
+         <required>false</required>
+         <rtexprvalue>true</rtexprvalue>
+      </attribute>
+   </tag>
+   
+   <tag>
+      <name>ajaxFileSelector</name>
+      <tag-class>org.alfresco.web.ui.repo.tag.AjaxFileSelectorTag</tag-class>
+      <body-content>JSP</body-content>
+      
+      <attribute>
+         <name>id</name>
+         <required>false</required>
+         <rtexprvalue>true</rtexprvalue>
+      </attribute>
+      
+      <attribute>
+         <name>binding</name>
+         <required>false</required>
+         <rtexprvalue>true</rtexprvalue>
+      </attribute>
+      
+      <attribute>
+         <name>rendered</name>
+         <required>false</required>
+         <rtexprvalue>true</rtexprvalue>
+      </attribute>
+      
+      <attribute>
+         <name>style</name>
+         <required>false</required>
+         <rtexprvalue>true</rtexprvalue>
+      </attribute>
+      
+      <attribute>
+         <name>styleClass</name>
+         <required>false</required>
+         <rtexprvalue>true</rtexprvalue>
+      </attribute>
+      
       <attribute>
          <name>value</name>
          <required>false</required>

source/web/css/main.css

@@ -422,6 +422,7 @@ a.topToolbarLinkHighlight, a.topToolbarLinkHighlight:link, a.topToolbarLinkHighl
 {
    border: 1px dashed #cccccc;
    padding: 4px;
+   display: inline;
 }
 
 .selectedItems

source/web/css/picker.css

@@ -1,8 +1,3 @@
-.pickerNoSelectedItems
-{
-   margin-top: 2px
-}
-
 .pickerSelectedItems
 {
    padding-left: 6px;
@@ -112,7 +107,7 @@ img.pickerActionButton
 div.pickerResultsRow
 {
    padding: 4px;
-   height: 16px;
+   height: auto;
 }
 
 .pickerResultsOddRow
@@ -142,7 +137,7 @@ div.pickerResultsRow
    float: right;
 }
 
-div.pickerDoneButton
+div.pickerButtons
 {
    margin: 0 auto;
    width: 50px;
@@ -155,6 +150,8 @@ div.pickerDoneButton
 div.pickerFinishControls
 {
    text-align: center;
+   padding: 0px 64px 0px 64px;
+   height: 2em;
 }
 
 .pickerNavBreadcrumb

source/web/jsp/actions/check-out.jsp

@@ -113,10 +113,10 @@
                                  <tr>
                                     <td><nobr><h:outputText value="#{msg.checkout_location}"/>:</nobr></td>
                                     <td width="100%">
-                                       <r:spaceSelector id="space-selector" label="#{msg.select_checkout_prompt}" 
-                                                        value="#{WizardManager.bean.actionProperties.destinationLocation}" 
-                                                        initialSelection="#{NavigationBean.currentNodeId}"
-                                                        styleClass="selector"/>
+                                       <r:ajaxFolderSelector id="spaceSelector" label="#{msg.select_checkout_prompt}" 
+                                                             value="#{WizardManager.bean.actionProperties.destinationLocation}" 
+                                                             initialSelection="#{NavigationBean.currentNode.nodeRefAsString}"
+                                                             styleClass="selector" />
                                     </td>
                                  </tr>
                                  <tr><td class="paddingRow"></td></tr>

source/web/jsp/actions/copy.jsp

@@ -113,10 +113,10 @@
                                  <tr>
                                     <td><h:outputText value="#{msg.destination}"/>:</td>
                                     <td width="90%">
-                                       <r:spaceSelector id="space-selector" label="#{msg.select_destination_prompt}" 
-                                                        value="#{WizardManager.bean.actionProperties.destinationLocation}" 
-                                                        initialSelection="#{NavigationBean.currentNodeId}"
-                                                        styleClass="selector"/>
+                                       <r:ajaxFolderSelector id="spaceSelector" label="#{msg.select_destination_prompt}" 
+                                                             value="#{WizardManager.bean.actionProperties.destinationLocation}" 
+                                                             initialSelection="#{NavigationBean.currentNode.nodeRefAsString}"
+                                                             styleClass="selector" />
                                     </td>
                                  </tr>
                                  <tr><td class="paddingRow"></td></tr>

source/web/jsp/actions/import.jsp

@@ -113,11 +113,10 @@
                                  <tr>
                                     <td><h:outputText value="#{msg.import_to}"/>:</td>
                                     <td width="90%">
-                                       <r:spaceSelector id="category-selector"
-                                                        label="#{msg.select_destination_prompt}" 
-                                                        value="#{WizardManager.bean.actionProperties.destinationLocation}" 
-                                                        initialSelection="#{NavigationBean.currentNodeId}"
-                                                        style="border: 1px dashed #cccccc; padding: 6px;"/>
+                                       <r:ajaxFolderSelector id="spaceSelector" label="#{msg.select_destination_prompt}" 
+                                                             value="#{WizardManager.bean.actionProperties.destinationLocation}" 
+                                                             initialSelection="#{NavigationBean.currentNode.nodeRefAsString}"
+                                                             style="border: 1px dashed #cccccc; padding: 6px; display: inline;" />
                                     </td>
                                  </tr>
                                  <%--

source/web/jsp/actions/link-category.jsp

@@ -113,9 +113,9 @@
                                  <tr>
                                     <td valign="top"><h:outputText value="#{msg.category}"/>:</td>
                                     <td width="90%">
-                                       <r:categorySelector id="category-selector" label="#{msg.select_category_prompt}" 
-                                                        value="#{WizardManager.bean.actionProperties.category}" 
-                                                        styleClass="selector"/>
+                                       <r:ajaxCategorySelector id="catSelector" styleClass="selector"
+                                                value="#{WizardManager.bean.actionProperties.category}" 
+                                                label="#{msg.select_category_prompt}" />
                                     </td>
                                  </tr>
                                  <tr><td class="paddingRow"></td></tr>

source/web/jsp/actions/move.jsp

@@ -113,10 +113,10 @@
                                  <tr>
                                     <td><h:outputText value="#{msg.destination}"/>:</td>
                                     <td width="90%">
-                                       <r:spaceSelector id="space-selector" label="#{msg.select_destination_prompt}" 
-                                                        value="#{WizardManager.bean.actionProperties.destinationLocation}" 
-                                                        initialSelection="#{NavigationBean.currentNodeId}"
-                                                        styleClass="selector"/>
+                                       <r:ajaxFolderSelector id="spaceSelector" label="#{msg.select_destination_prompt}" 
+                                                             value="#{WizardManager.bean.actionProperties.destinationLocation}" 
+                                                             initialSelection="#{NavigationBean.currentNode.nodeRefAsString}"
+                                                             styleClass="selector" />
                                     </td>
                                  </tr>
                                  <tr><td class="paddingRow"></td></tr>

source/web/jsp/actions/simple-workflow.jsp

@@ -175,11 +175,11 @@
                                              <td valign="top" style="padding-top:10px;"><h:outputText value="#{msg.to}"/>:</td>
                                              <td style="padding-left:6px;"></td>
                                              <td style="padding-top:6px;">
-                                                <r:spaceSelector id="client-approve-folder"
-                                                        label="#{msg.select_destination_prompt}" 
-                                                        value="#{WizardManager.bean.actionProperties.approveFolder}" 
-                                                        initialSelection="#{NavigationBean.currentNodeId}"
-                                                        styleClass="selector"/>
+                                                <r:ajaxFolderSelector id="clientApproveFolder"
+                                                             label="#{msg.select_destination_prompt}" 
+                                                             value="#{WizardManager.bean.actionProperties.approveFolder}" 
+                                                             initialSelection="#{NavigationBean.currentNode.nodeRefAsString}"
+                                                             styleClass="selector" />
                                              </td>
                                           </tr>
                                        </table>
@@ -231,11 +231,11 @@
                                                                <td valign="top" style="padding-top:10px;"><h:outputText value="#{msg.to}"/>:</td>
                                                                <td style="padding-left:6px;"></td>
                                                                <td style="padding-top:6px;">
-                                                                  <r:spaceSelector id="client-reject-folder"
-                                                                          label="#{msg.select_destination_prompt}" 
-                                                                          value="#{WizardManager.bean.actionProperties.rejectFolder}"
-                                                                          initialSelection="#{NavigationBean.currentNodeId}" 
-                                                                          styleClass="selector"/>
+                                                                  <r:ajaxFolderSelector id="clientRejectFolder"
+                                                                               label="#{msg.select_destination_prompt}" 
+                                                                               value="#{WizardManager.bean.actionProperties.rejectFolder}" 
+                                                                               initialSelection="#{NavigationBean.currentNode.nodeRefAsString}"
+                                                                               styleClass="selector" />
                                                                </td>
                                                             </tr>
                                                          </table>

source/web/jsp/actions/transform-image.jsp

@@ -128,10 +128,10 @@
                                  <tr>
                                     <td><h:outputText value="#{msg.destination}"/>:</td>
                                     <td>
-                                       <r:spaceSelector id="space-selector" label="#{msg.select_destination_prompt}" 
-                                                        value="#{WizardManager.bean.actionProperties.destinationLocation}" 
-                                                        initialSelection="#{NavigationBean.currentNodeId}"
-                                                        styleClass="selector"/>
+                                       <r:ajaxFolderSelector id="spaceSelector" label="#{msg.select_destination_prompt}" 
+                                                             value="#{WizardManager.bean.actionProperties.destinationLocation}" 
+                                                             initialSelection="#{NavigationBean.currentNode.nodeRefAsString}"
+                                                             styleClass="selector" />
                                     </td>
                                  </tr>
                                  <tr><td class="paddingRow"></td></tr>

source/web/jsp/actions/transform.jsp

@@ -122,10 +122,10 @@
                                  <tr>
                                     <td><h:outputText value="#{msg.destination}"/>:</td>
                                     <td>
-                                       <r:spaceSelector id="space-selector" label="#{msg.select_destination_prompt}" 
-                                                        value="#{WizardManager.bean.actionProperties.destinationLocation}" 
-                                                        initialSelection="#{NavigationBean.currentNodeId}"
-                                                        styleClass="selector"/>
+                                       <r:ajaxFolderSelector id="spaceSelector" label="#{msg.select_destination_prompt}" 
+                                                             value="#{WizardManager.bean.actionProperties.destinationLocation}" 
+                                                             initialSelection="#{NavigationBean.currentNode.nodeRefAsString}"
+                                                             styleClass="selector" />
                                     </td>
                                  </tr>
                                  <tr><td class="paddingRow"></td></tr>

source/web/jsp/categories/edit-node-categories.jsp

@@ -44,8 +44,9 @@
                                noSelectedItemsMsg="#{msg.no_selected_categories}"
                                styleClass="selector">
             <f:subview id="categorySelector">
-               <r:categorySelector id="category-selector" label="#{msg.select_category_prompt}"
-                                   styleClass="selector" value="#{DialogManager.bean.addedCategory}" />
+               <r:ajaxCategorySelector id="catSelector" styleClass="selector"
+                        value="#{DialogManager.bean.addedCategory}" 
+                        label="#{msg.select_category_prompt}" />
             </f:subview>
          </r:multiValueSelector>
          <f:verbatim>

source/web/jsp/dialog/advanced-search.jsp

@@ -184,7 +184,7 @@
                                              </tr>
                                              <tr>
                                                 <td style="padding-left:26px">
-                                                   <r:spaceSelector label="#{msg.select_space_prompt}" value="#{SearchProperties.location}" initialSelection="#{NavigationBean.currentNodeId}" styleClass="selector" id="spaceSelector" />
+                                                   <r:ajaxFolderSelector id="spaceSelector" styleClass="selector" label="#{msg.select_space_prompt}" value="#{SearchProperties.location}" singleSelect="true" initialSelection="#{NavigationBean.currentNode.nodeRefAsString}" />
                                                 </td>
                                              </tr>
                                              <tr>
@@ -203,7 +203,7 @@
                                           <table cellpadding="2" cellspacing="2" border="0">
                                              <tr>
                                                 <td style="padding-left:8px;padding-top:8px">
-                                                   <r:categorySelector id="catSelector" label="#{msg.select_category_prompt}" styleClass="selector" />
+                                                   <r:ajaxCategorySelector id="catSelector" styleClass="selector" label="#{msg.select_category_prompt}" singleSelect="false" />
                                                 </td>
                                              </tr>
                                              <tr>

source/web/jsp/dialog/checkout-file.jsp

@@ -69,10 +69,11 @@
                   <td style="padding-left:26px">
                      <%-- Space selector to allow user to pick a Space --%>
                      </f:verbatim>
-                     <r:spaceSelector id="space-selector" label="#{msg.select_space_prompt}"
-                                      value="#{CCProperties.selectedSpaceId}"
-                                      initialSelection="#{NavigationBean.currentNodeId}"
-                                      styleClass="selector"/><f:verbatim>
+                     <r:ajaxFolderSelector id="spaceSelector" label="#{msg.select_space_prompt}" 
+                                           value="#{CCProperties.selectedSpaceId}" 
+                                           initialSelection="#{NavigationBean.currentNode.nodeRefAsString}"
+                                           styleClass="selector" />
+                     <f:verbatim>
                   </td>
                </tr>
             </table>

source/web/jsp/dialog/edit-simple-workflow.jsp

@@ -98,12 +98,12 @@
    			<td valign="top" style="padding-top:10px;"></f:verbatim><h:outputText
    				value="#{msg.to}" /><f:verbatim>:</td>
    			<td style="padding-left:6px;"></td>
-   			<td style="padding-top:6px;"></f:verbatim><r:spaceSelector
-   				id="client-approve-folder"
-   				label="#{msg.select_destination_prompt}"
-   				value="#{EditSimpleWorkflowDialog.workflowProperties.approveFolder}"
-   				initialSelection="#{NavigationBean.currentNodeId}"
-   				styleClass="selector" /><f:verbatim></td>
+   			<td style="padding-top:6px;"></f:verbatim><r:ajaxFolderSelector
+   			      id="clientApproveFolder"
+   			      label="#{msg.select_destination_prompt}" 
+                  value="#{EditSimpleWorkflowDialog.workflowProperties.approveFolder}" 
+                  initialSelection="#{NavigationBean.currentNode.nodeRefAsString}"
+                  styleClass="selector" /><f:verbatim></td>
    		</tr>
    	</table>
    	</td>
@@ -158,12 +158,12 @@
    							<td valign="top" style="padding-top:10px;"></f:verbatim><h:outputText
    								value="#{msg.to}" /><f:verbatim>:</td>
    							<td style="padding-left:6px;"></td>
-   							<td style="padding-top:6px;"></f:verbatim><r:spaceSelector
-   								id="client-reject-folder"
-   								label="#{msg.select_destination_prompt}"
-   								value="#{EditSimpleWorkflowDialog.workflowProperties.rejectFolder}"
-   								initialSelection="#{NavigationBean.currentNodeId}"
-   								styleClass="selector" /><f:verbatim></td>
+   							<td style="padding-top:6px;"></f:verbatim><r:ajaxFolderSelector
+							      id="clientRejectFolder"
+            			      label="#{msg.select_destination_prompt}" 
+                           value="#{EditSimpleWorkflowDialog.workflowProperties.rejectFolder}" 
+                           initialSelection="#{NavigationBean.currentNode.nodeRefAsString}"
+                           styleClass="selector" /><f:verbatim></td>
    						</tr>
    					</table>
    					</td>

source/web/jsp/dialog/edit-space-simple-workflow.jsp

@@ -102,12 +102,12 @@
 					<td valign="top" style="padding-top:10px;"></f:verbatim><h:outputText
 						value="#{msg.to}" /><f:verbatim>:</td>
 					<td style="padding-left:6px;"></td>
-					<td style="padding-top:6px;"></f:verbatim><r:spaceSelector
-						id="client-approve-folder"
-						label="#{msg.select_destination_prompt}"
-						value="#{EditSpaceSimpleWorkflowDialog.workflowProperties.approveFolder}"
-						initialSelection="#{NavigationBean.currentNodeId}"
-						styleClass="selector" /><f:verbatim></td>
+					<td style="padding-top:6px;"></f:verbatim><r:ajaxFolderSelector
+   			      id="clientApproveFolder"
+   			      label="#{msg.select_destination_prompt}" 
+                  value="#{EditSpaceSimpleWorkflowDialog.workflowProperties.approveFolder}" 
+                  initialSelection="#{NavigationBean.currentNode.nodeRefAsString}"
+                  styleClass="selector" /><f:verbatim></td>
 				</tr>
 			</table>
 			</td>
@@ -162,12 +162,12 @@
 									<td valign="top" style="padding-top:10px;"></f:verbatim><h:outputText
 										value="#{msg.to}" /><f:verbatim>:</td>
 									<td style="padding-left:6px;"></td>
-									<td style="padding-top:6px;"></f:verbatim><r:spaceSelector
-										id="client-reject-folder"
-										label="#{msg.select_destination_prompt}"
-										value="#{EditSpaceSimpleWorkflowDialog.workflowProperties.rejectFolder}"
-										initialSelection="#{NavigationBean.currentNodeId}"
-										styleClass="selector" /><f:verbatim></td>
+									<td style="padding-top:6px;"></f:verbatim><r:ajaxFolderSelector
+   							      id="clientRejectFolder"
+               			      label="#{msg.select_destination_prompt}" 
+                              value="#{EditSpaceSimpleWorkflowDialog.workflowProperties.rejectFolder}" 
+                              initialSelection="#{NavigationBean.currentNode.nodeRefAsString}"
+                              styleClass="selector" /><f:verbatim></td>
 								</tr>
 							</table>
 							</td>

source/web/jsp/dialog/export.jsp

@@ -64,10 +64,12 @@ onkeyup="javascript:checkButtonState();" /><f:verbatim>
 <tr>
 <td><nobr></f:verbatim><h:outputText value="#{msg.destination}"/><f:verbatim>:</nobr></td>
 <td>
-</f:verbatim><r:spaceSelector id="destination" label="#{msg.select_destination_prompt}"
-value="#{DialogManager.bean.destination}"
-initialSelection="#{NavigationBean.currentNodeId}"
-styleClass="selector"/><f:verbatim>
+</f:verbatim>
+<r:ajaxFolderSelector id="destination" label="#{msg.select_destination_prompt}" 
+   value="#{DialogManager.bean.destination}" 
+   initialSelection="#{NavigationBean.currentNode.nodeRefAsString}"
+   styleClass="selector" />
+<f:verbatim>
 </td>
 </tr>
 <tr><td class="paddingRow"></td></tr>

source/web/jsp/rules/in-category.jsp

@@ -113,9 +113,9 @@
                                  <tr>
                                     <td valign="top"><h:outputText value="#{msg.category}"/>:</td>
                                     <td width="90%">
-                                       <r:categorySelector id="category-selector" label="#{msg.select_category_prompt}" 
-                                                        value="#{WizardManager.bean.conditionProperties.category}" 
-                                                        styleClass="selector"/>
+                                       <r:ajaxCategorySelector id="catSelector" styleClass="selector"
+                                                value="#{WizardManager.bean.conditionProperties.category}" 
+                                                label="#{msg.select_category_prompt}" />
                                     </td>
                                  </tr>
                                  <tr><td colspan="2" class="paddingRow"></td></tr>

source/web/jsp/spaces/create-space-wizard/from-existing.jsp

@@ -63,10 +63,10 @@
    <tr>
       <td>
          </f:verbatim>
-         <r:spaceSelector id="space-selector" label="#{msg.select_existing_space_prompt}" 
-                          value="#{WizardManager.bean.existingSpaceId}" 
-                          initialSelection="#{NavigationBean.currentNodeId}"
-                          styleClass="selector" />
+         <r:ajaxFolderSelector id="spaceSelector" label="#{msg.select_existing_space_prompt}" 
+                               value="#{WizardManager.bean.existingSpaceId}" 
+                               initialSelection="#{NavigationBean.currentNode.nodeRefAsString}"
+                               styleClass="selector" />
          <f:verbatim>
       </td>
    </tr>

source/web/jsp/trashcan/recover-item.jsp

@@ -63,8 +63,10 @@
 
 </td>
 <td width=100%>
-</f:verbatim><r:spaceSelector id="space-selector" label="#{msg.select_destination_prompt}"
-value="#{TrashcanDialogProperty.destination}" styleClass="selector" />
+</f:verbatim>
+<r:ajaxFolderSelector id="spaceSelector" label="#{msg.select_destination_prompt}" 
+                               value="#{TrashcanDialogProperty.destination}" 
+                               styleClass="selector" />
 <f:verbatim>
 </td>
 </tr>

source/web/jsp/trashcan/recover-listed.jsp

@@ -68,8 +68,10 @@
 </f:verbatim><h:outputText value="#{msg.destination}" /><f:verbatim>:&nbsp;
 </td>
 <td width=100%>
-</f:verbatim><r:spaceSelector id="space-selector" label="#{msg.select_destination_prompt}"
-value="#{TrashcanDialogProperty.destination}" styleClass="selector" />
+</f:verbatim>
+<r:ajaxFolderSelector id="spaceSelector" label="#{msg.select_destination_prompt}" 
+                               value="#{TrashcanDialogProperty.destination}" 
+                               styleClass="selector" />
 <f:verbatim>
 </td>
 </tr>

source/web/jsp/wizard/new-user/user-properties.jsp

@@ -203,7 +203,10 @@
                                  <tr>
                                     <td><h:outputText value="#{msg.home_space_location}"/>:</td>
                                     <td>
-                                       <r:spaceSelector id="space-selector" label="#{msg.select_home_space_prompt}" value="#{NewUserWizard.homeSpaceLocation}" initialSelection="#{NavigationBean.currentNodeId}" style="border: 1px dashed #cccccc; padding: 2px;"/>
+                                       <r:ajaxFolderSelector id="spaceSelector" label="#{msg.select_home_space_prompt}" 
+                                                                      value="#{NewUserWizard.homeSpaceLocation}" 
+                                                                      initialSelection="#{NavigationBean.currentNode.nodeRefAsString}"
+                                                                      style="border: 1px dashed #cccccc; padding: 2px; display: inline;" />
                                     </td>
                                  </tr>
                                  <tr>

source/web/scripts/ajax/picker.js

@@ -28,7 +28,10 @@ var AlfPicker = new Class(
    id: null,
 
    /* variable name being used */
-   varName: null, 
+   varName: null,
+   
+   /* form Id to submit when selection complete */
+   formClientId: null,
    
    /* the item the picker will start with */
    startId: null,
@@ -57,13 +60,15 @@ var AlfPicker = new Class(
    /* single selection mode flag */
    singleSelect: false,
    
-   initialize: function(id, varName, service, singleSelect) 
+   /* initial display style of the outer div */
+   initialDisplayStyle: null,
+   
+   initialize: function(id, varName, service, formClientId, singleSelect) 
    {
       this.id = id;
       this.varName = varName;
-      this.parent = this.startId;
-      this.selected = [];
       this.service = service;
+      this.formClientId = formClientId;
       if (singleSelect != undefined)
       {
          this.singleSelect = singleSelect;
@@ -82,7 +87,13 @@ var AlfPicker = new Class(
    
    showSelector: function()
    {
+      // init selector state
+      this.selected = [];
+      this.stack = [];
+      
+      this.initialDisplayStyle = $(this.id + "-noitems").getStyle("display");
       $(this.id + "-selector").setStyle("display", "block");
+      $(this.id + "-selected").empty();
       $(this.id + "-selected").setStyle("display", "block");
       $(this.id + "-noitems").setStyle("display", "none");
       if (this.singleSelect)
@@ -90,7 +101,7 @@ var AlfPicker = new Class(
          $(this.id + "-finish").setStyle("display", "none");
       }
       
-      // simulate an ajax request for children of start item
+      // first ajax request for the children of the start item
       this.getChildData(this.startId, this.populateChildren);
    },
    
@@ -115,7 +126,15 @@ var AlfPicker = new Class(
    
    addItem: function(index)
    {
-      var item = this.items[index];
+      var item;
+      if (index != -1)
+      {
+         item = this.items[index];
+      }
+      else
+      {
+         item = this.parent;
+      }
       
       // add item to list of selected items      
       this.selected.push(item);
@@ -154,7 +173,7 @@ var AlfPicker = new Class(
          itemDiv.injectInside($(this.id + "-selected"));
          
          // set the background image now the itemdiv has been added to the DOM (for IE)
-         itemDiv.setStyle("background-image", "url(" + getContextPath() + "/images/icons/" + item.icon + ")");
+         itemDiv.setStyle("background-image", "url(" + getContextPath() + item.icon + ")");
          
          // set opacity the style now the item has been added to the DOM (for IE)
          $E('.pickerSelectedIcon', itemDiv).setStyle("opacity", 0);
@@ -253,10 +272,23 @@ var AlfPicker = new Class(
    
    doneClicked: function()
    {
-      $(this.id + "-selector").setStyle("display", "none");
-      $(this.id + "-value").setProperty("value", this.selected);
+      var ids = "";
+      for (i=0; i<this.selected.length; i++)
+      {
+         if (i != 0) ids += ",";
+         ids += this.selected[i].id;
+      }
+      $(this.id + "-value").setProperty("value", ids);
       
-      alert("The following items have been selected: " + $(this.id + "-value").value);
+      document.forms[this.formClientId].submit();
+      return false;
+   },
+   
+   cancelClicked: function()
+   {
+      $(this.id + "-selector").setStyle("display", "none");
+      $(this.id + "-selected").setStyle("display", "none");
+      $(this.id + "-noitems").setStyle("display", this.initialDisplayStyle);
    },
    
    populateChildren: function(response, picker, scrollpos)
@@ -266,18 +298,18 @@ var AlfPicker = new Class(
       results.empty();
       
       // set the new parent
-      picker.parent = response.parent.id;
+      picker.parent = {id: response.parent.id, name: response.parent.name};
       
-      // if nav stack is empty - add an item to represent the parent as the first entry
+      // if nav stack is empty - add the parent item as the first entry
       if (picker.stack.length == 0)
       {
-         picker.stack.push({id: response.parent.id, name: response.parent.name});
+         picker.stack.push(picker.parent);
       }
       
       // if the parent is null we're at the root so hide the up link
       // otherwise we need to render it with the correct details
       var upLink = $(picker.id + "-nav-up");
-      if (picker.parent == null)
+      if (picker.parent.id == null || response.parent.isroot == true)
       {
          upLink.setStyle("display", "none");
          upLink.setProperty("href", "#");
@@ -285,11 +317,37 @@ var AlfPicker = new Class(
       else
       {
          upLink.setStyle("display", "block");
-         upLink.setProperty("href", "javascript:" + picker.varName + ".upClicked('" + picker.parent + "');");
+         upLink.setProperty("href", "javascript:" + picker.varName + ".upClicked('" + picker.parent.id + "');");
       }
       
       // show what the parent next to the breadcrumb drop-down
-      $(picker.id + "-nav-txt").setText(response.parent.name);
+      $(picker.id + "-nav-txt").setText(picker.parent.name);
+      
+      // render action for parent item (as it may be the root and not shown in child list!)
+      $(picker.id + "-nav-add").empty();
+      if (response.parent.selectable != false)
+      {
+         var isSelected = false;
+         for (i=0; i<picker.selected.length; i++)
+         {
+            if (picker.selected[i].id == picker.parent.id)
+            {
+               isSelected = true; break;
+            }
+         }
+         if (isSelected == false)
+         {
+            var actionId = picker.id + "-add-" + picker.parent.id;
+            var actionScript = "javascript:" + picker.varName + ".addItem(-1);";
+            var actionLink = new Element("a", {"href": actionScript});
+            var actionImg = new Element("img", {"id": actionId, "src": getContextPath() + "/images/icons/plus.gif", "class": "pickerActionButton",
+                                        "border": 0, "title": "Add", "alt": "Add"});
+            actionImg.injectInside(actionLink);
+            actionLink.injectInside($(picker.id + "-nav-add"));
+            // style modification for this Add button - it's inside a floating div unlike the others
+            if (document.all == undefined) actionImg.setStyle("vertical-align", "-18px");
+         }
+      }
       
       // iterate through the children and render a row for each one
       picker.items = [];
@@ -322,37 +380,48 @@ var AlfPicker = new Class(
       
       // render icon
       var iconSpan = new Element("span", {"class": "pickerResultIcon"});
-      var iconImg = new Element("img", {"src": getContextPath() + "/images/icons/" + item.icon});
+      var iconImg = new Element("img", {"src": getContextPath() + item.icon});
       iconImg.injectInside(iconSpan);
       iconSpan.injectInside(div);
       
       // render actions
-      var actionsSpan = new Element("span", {"class": "pickerResultActions"});
-      
-      // see if the item exists in the selected items array - don't display Add button if it does
-      var found = false;
-      for (i=0; i<this.selected.length; i++)
+      var isSelected = false;
+      if (item.selectable != false)
       {
-         if (this.selected[i].id == item.id)
+         var actionsSpan = new Element("span", {"class": "pickerResultActions"});
+         
+         // display Add button for the item 
+         for (i=0; i<this.selected.length; i++)
          {
-            found = true; break;
+            if (this.selected[i].id == item.id)
+            {
+               isSelected = true; break;
+            }
          }
+         // even if found in the selected list, still need to generate the button - but hide it later
+         var actionId = this.id + "-add-" + item.id;
+         var actionScript = "javascript:" + this.varName + ".addItem(" + index + ");";
+         var actionLink = new Element("a", {"href": actionScript});
+         var actionImg = new Element("img", {"id": actionId, "src": getContextPath() + "/images/icons/plus.gif", "class": "pickerActionButton",
+                                     "border": 0, "title": "Add", "alt": "Add"});
+         actionImg.injectInside(actionLink);
+         actionLink.injectInside(actionsSpan);
+         
+         actionsSpan.injectInside(div);
       }
-      var actionId = this.id + "-add-" + item.id;
-      var actionScript = "javascript:" + this.varName + ".addItem(" + index + ");";
-      var actionLink = new Element("a", {"href": actionScript});
-      var actionImg = new Element("img", {"id": actionId, "src": getContextPath() + "/images/icons/plus.gif", "class": "pickerActionButton",
-                                  "border": 0, "title": "Add", "alt": "Add"});
-      actionImg.injectInside(actionLink);
-      actionLink.injectInside(actionsSpan);
-      actionsSpan.injectInside(div);
       
-      // render name
+      // render name link
       var nameSpan = new Element("span", {"class": "pickerResultName"});
-      
-      var link = "javascript:" + this.varName + ".childClicked(" + index + ");";
-      
-      var nameLink = new Element("a", {"href": link});
+      var nameLink;
+      if (item.url == undefined)
+      {
+         var link = "javascript:" + this.varName + ".childClicked(" + index + ");";
+         nameLink = new Element("a", {"href": link});
+      }
+      else
+      {
+         nameLink = new Element("a", {"href": getContextPath() + item.url, "target": "new"});
+      }
       nameLink.appendText(item.name);
       nameLink.injectInside(nameSpan);
       nameSpan.injectInside(div);
@@ -361,7 +430,7 @@ var AlfPicker = new Class(
       div.injectInside($(this.id + "-results-list"));
       
       // hide the Add button (now this item is in the DOM) if in the selected list
-      if (found)
+      if (isSelected)
       {
          actionImg.setStyle("display", "none");
       }