browse.js

YAHOO.namespace("convio.itemchooser");
YAHOO.convio.itemchooser.BrowseTab = {
  tree : null,
  savedFolderID : null,
  savedSize : 20,
  browseTablePaginator : null,
  selectOnExpand : true,
  safeToSwitchFocus : true,
  newItemMenu : null,
  foldersToExpand : null,
  
  _setSavedFolderID : function(folderID) {
    YAHOO.log("Setting the saved folder ID to " + folderID);
    var b = YAHOO.convio.itemchooser.BrowseTab;
    b.savedFolderID = folderID;
    if (folderID != null && b.tree != null) {
      YAHOO.log("Highlighting " + folderID);
      //Also, find the folder with this ID and set it selected:
      var node = b.tree.getNodeByProperty('id', folderID);
      if (node != null) {
        //OK, first make sure NOTHING has the class:
        var nodes = YAHOO.util.Dom.getElementsByClassName('selected-tree-node', 'table');
        YAHOO.log("Got nodes: " + nodes.length);
        for (var i = 0 ; i < nodes.length ; i ++) {
          YAHOO.util.Dom.removeClass(nodes[i], 'selected-tree-node');
        }
        var el = node.getEl();
        
        if (el != null) {
          var nodes = YAHOO.util.Dom.getChildren(el) 
          for (var i = 0 ; i < nodes.length ; i ++) {
            if (YAHOO.util.Dom.hasClass(nodes[i], 'ygtvtable')) {
              YAHOO.util.Dom.addClass(nodes[i], 'selected-tree-node');
            }
          }
          YAHOO.log("Highlighted " + folderID);
        }
      }
    }
  },

  _refreshBrowseTable : function() {
    var b = YAHOO.convio.itemchooser.BrowseTab;
    //The changeRequest event is how we get the data table to update itself
	b.browseTablePaginator.fireEvent('changeRequest',b.browseTablePaginator.getState({'page':1}));
  },

  setFolder : function(folderID) {
    YAHOO.log("setting folderID " + folderID);
    var b = YAHOO.convio.itemchooser.BrowseTab;
    if (folderID != b.savedFolderID) {
      YAHOO.log("setting folderID (inner) " + folderID);
      b._setSavedFolderID(folderID);
      b._refreshBrowseTable();
    }
  },

  changeRoot : function() {
    var b = YAHOO.convio.itemchooser.BrowseTab;
    var t = YAHOO.convio.itemchooser.Tree;
	var selector = document.getElementById("subsiteSelector");
	var index = selector.selectedIndex;
	var rootFolderID = selector.options[index].value;
    //refresh the tree:
    t.setupRootNode(b.tree, rootFolderID); 
  },

  changeRootAndSelectFolder : function(folderID) {
    var b = YAHOO.convio.itemchooser.BrowseTab;
    var t = YAHOO.convio.itemchooser.Tree;
   
	var selector = document.getElementById("subsiteSelector");
    var index = selector.selectedIndex;
	var rootFolderID = selector.options[index].value;
	if (rootFolderID != folderID) b.selectOnExpand = false;
	else b.selectOnExpand = true;
    //refresh the tree:
    t.setupRootNode(b.tree, rootFolderID,  b.setFolder, folderID); 
  },

  changeSizeOfResultsOfBrowseTab : function () {
    var b = YAHOO.convio.itemchooser.BrowseTab;
    var selector = document.getElementById("pageSizeSelector");
    var index = selector.selectedIndex;
    var pageSize = selector.options[index].value;
    if (pageSize != b.savedSize) {
      b.savedSize = pageSize;
      b.browseTablePaginator.setRowsPerPage(pageSize);	    
    }
  },

  setupBrowseTree : function(rootFolderID, folderID, foldersToExpand) {
    var b = YAHOO.convio.itemchooser.BrowseTab;
    var t = YAHOO.convio.itemchooser.Tree;
    b.foldersToExpand = foldersToExpand;
    if (b.tree != null) {
      b.tree.destroy();
      b.tree = null;
    }
	
    b.tree = new YAHOO.widget.TreeView("ItemChooserBrowseTabTreeDiv");
    b.tree.setDynamicLoad(t.loadDataForNode);
    b.tree.subscribe("labelClick", function(node) { 
        b.setFolder(node.data.id, false);
      }); 
	       
    b.tree.singleNodeHighlight = true;        
    b.tree.subscribe('clickEvent',b.tree.onEventToggleHighlight);    
    //Now load the root:
    t.setupRootNode(b.tree, rootFolderID, b.setFolder, folderID); 
    
    b.tree.render();	  
	
    //I noticed some not-perfect behavior with respect to expanding nodes and focusing.
    b.tree.subscribe('expandComplete', function(node) {
      if (b.selectOnExpand) {
        b._setSavedFolderID(node.data.id);
        b._refreshBrowseTable();
      } else if (b.foldersToExpand) {
        var folderToExpand = b.foldersToExpand.pop();
        if (b.foldersToExpand.length == 0) {
          b.foldersToExpand = null;
        }
        if (folderToExpand) {
          var treeNode = b.tree.getNodeByProperty("id", folderToExpand);
          treeNode.expand();
        } else {
          b._setSavedFolderID(node.data.id);
          b._refreshBrowseTable();
          b.selectOnExpand = true;
        }
      } else {
        b._setSavedFolderID(b.savedFolderID);
        b._refreshBrowseTable();
        b.selectOnExpand = true;
      }   
    });

    //One special case: if we switch tabs, we need to make sure we don't try to set the focused node
    //Unless we're coming BACK to this tab.  In which case, refocus.
    var c = YAHOO.convio.itemchooser.ChooserUtil;
    c.tabView.subscribe('activeTabChange', function(oArgs) {
        b.safeToSwitchFocus = false;
      });
  },

  itemOrFolderSelected : function(oArgs, dataTable) {
    //Since we're browsing, if someone clicks on a folder OR an item from the 
    //listing part of the browse tab, this method will get called.
    var b = YAHOO.convio.itemchooser.BrowseTab;
	var elTarget = oArgs.target;
    var oRecord = this.getRecord(elTarget);
    //Get the target, then check what type it is.
    if (oRecord.getData("Type") == "Folder") {  
      //If it's a folder, expand that folder in the tree AND in the list and focus on it in the tree.
      b._setSavedFolderID(oRecord.getData("ID"));
	  b._refreshBrowseTable();
	  var treeNode = b.tree.getNodeByProperty("id", oRecord.getData("ID"));
      treeNode.expand();
    } else {
      //If it isn't a folder, it must be an item, so call the standard itemSelected method from ChooserUtil.
      YAHOO.convio.itemchooser.ChooserUtil.itemSelected(oArgs, dataTable);
    }
  },
  setupBrowseTable : function(folderID) {
    //This will be a dynamic table and data source, complete with pagination and sorting.  
    var b = YAHOO.convio.itemchooser.BrowseTab;
	//Save this folder ID for later:
    b.savedFolderID = folderID;
    //Get the page size:
    var selector = document.getElementById("pageSizeSelector");
    var index = selector.selectedIndex;
    var pageSize = selector.options[index].value;
    //Because this is to be dynamic, the dataSourceURL has no parameters.
    var dataSourceURL = "/components/x-dialog/chooser/browse/list-retrieve.jsp?";
    //We can create it as usual, from the URL:
    var tableDataSource = new YAHOO.util.XHRDataSource(dataSourceURL);
    
    //It will need a response Schema that includes:
    //The location of the items in the JSON response, the set of properties, AND a "metaField" which is YUI magic.
    //In this case, the YUI metafield is "totalRecords".
    tableDataSource.responseSchema = {
      resultsList: "FolderContents.items",
      fields: ["URL", "Thumbnail", "Title", "FileName", "Size", "Type", "IsLive", "IsAsset", "IsFolder", "Status", "Modified", "ID", "liveURL", "FolderID"],
      metaFields: {totalRecords: "FolderContents.resultCount"} 
    };
    //Make sure the data source knows to parse the response as JSON.
    tableDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
    // Add the custom formatter to the shortcuts 
    YAHOO.widget.DataTable.Formatter.thumbnailCustom = YAHOO.convio.itemchooser.ChooserUtil.thumbnailFormatter; 

    //These column definitions should be self-explanatory.
    //the formatter is for converting a path to an image to the IMG tag for it (for example) 	 
    var columnDefs = [
      {key:"Thumbnail", label:"&nbsp;", minWidth: 80, formatter:"thumbnailCustom"},
      {key:"Title", parser:"string", sortable:true}, 
      {key:"FileName", parser:"string", sortable:true}, 
      {key:"Size", parser:"number", sortable:true}, 
      {key:"Type", parser:"string", sortable:true}, 
      {key:"Status", parser:"string", sortable:true}, 
      {key:"Modified", parser:"date", sortable:true}
    ]; 

    //OK, so when a different page of results is requested OR a new folder OR the sorting is changed,
    //the following requestBuilder function is called.  
    //The response is like:  hostID=foo&data2=bar&... 
    var myRequestBuilder = function(oState, oSelf) { 
      //If oState is valid (passed in by YUI), use its pagination and sortedBy.  Otherwise, set them to null.
      oState = oState || {pagination : null, sortedBy : null};
      //If the pagination value isn't null, it has a recordOffset (starting at 0)
	  var startIndex = (oState.pagination) ? oState.pagination.recordOffset : 0;
	  //If the pagination value isn't null, it has a rowsPerPage
	  var results = (oState.pagination) ? oState.pagination.rowsPerPage : 20;
	  //If the sortedBy value isn't null, it has a sorting key
	  var sort = (oState.sortedBy) ? oState.sortedBy.key : "Title"; 
	  //This next line is the YUI way of defining Ascending vs. Descending
	  var dir = (oState.sortedBy && oState.sortedBy.dir === YAHOO.widget.DataTable.CLASS_DESC) ? "false" : "true";
      //We saved the current folder before.
      var folderID = b.savedFolderID;
      //So create the query string.  This is appended to the table data source's URL above.
      var params = "folderID=" + folderID + 
	               "&pageStart=" + (startIndex + 1) + //We start indexing at 1, not at 0
	               "&pageEnd=" + (startIndex + results) +
	               "&sortProperty=" + encodeURIComponent(sort) + "&sortAscending=" + dir; 
      if (YAHOO.convio.itemchooser.ChooserUtil.baseType != "") {
        //And if we have a BASE type (image chooser does, other uses for this, might not), use it.
        params += "&baseType=" + YAHOO.convio.itemchooser.ChooserUtil.baseType;
      }
      return params;
    };
                             
    //Need an initial request:
    var myInitialRequest = "folderID=" + b.savedFolderID + 
                           "&pageStart=1&pageEnd=" + pageSize;
    if (YAHOO.convio.itemchooser.ChooserUtil.baseType != "") {
      myInitialRequest += "&baseType=" + YAHOO.convio.itemchooser.ChooserUtil.baseType;
    }  
    
    //Configs has:
    //1)Pagination - this tells YUI where to put the paginator.  It knows how to handle it.
    //2)dynamicData : true tells YUI this is dynamic.
    //3)generateRequest : myRequestBuilder tells YUI how to generate a request when needed.
    //4)initialRequest: myInitialRequest tells YUI what request to make right at the beginning when the table is shown.
    b.browseTablePaginator = 
      new YAHOO.widget.Paginator({
        rowsPerPage : pageSize,
        containers: 'pageLinks',
        alwaysVisible: false
      });    
     
    var configs = {
      //set up pagination
      paginator : b.browseTablePaginator,
      dynamicData : true,
      generateRequest : myRequestBuilder,
      initialRequest: myInitialRequest,
      width: "100%",
      height: "334px"
    };
 
    //Construct the data table:                       
    var dataTable = new YAHOO.widget.ScrollingDataTable("ItemChooserBrowseTabTableDiv", columnDefs, tableDataSource, configs);
    //Enables standard row selection:
    dataTable.set("selectionMode", "single");
    //We want to select a row when it's clicked but we ALSO want to make sure the appropriate item or folder is selected.
    dataTable.subscribe("rowClickEvent", dataTable.onEventSelectRow);
    dataTable.subscribe("rowClickEvent", b.itemOrFolderSelected, dataTable);
    
    //This is YUI magic that is needed to make pagination work.  We defined the 
    //metafield "totalRecords" before.  This puts the value in a place where YUI can access it.
    dataTable.handleDataReturnPayload = function (oRequest, oResponse, oPayload) {
       oPayload.totalRecords = oResponse.meta.totalRecords;
       return oPayload;
    };        
    //And finally, setup the context menu.  
    YAHOO.convio.itemchooser.CmsChooserContextMenu.setupContextMenu(dataTable, "Browse", "ItemChooserBrowseTabTableDiv"); 

    b.newItemMenu = new YAHOO.widget.Menu("add-file-menu", {
        context : ["add-file", "tl", "bl"], 
        classname : "itemChooserNewItemMenu"
      });
    
    // Add events to add-file and add-folder buttons
    YAHOO.util.Event.addListener("add-file", 'click', b.showNewItemMenu);
    YAHOO.util.Event.addListener("add-folder", 'click', b.showNewSubfolderDialog);
  },

  /**
   * On-click handler for the "New Item" button.
   * Renders the menu options for creating a new content item.
   */
  showNewItemMenu : function() {
    var th = YAHOO.convio.itemchooser.BrowseTab;
    var m = th.newItemMenu;
    var folderID = th.savedFolderID;


    var url =  "/components/x-dialog/chooser/browse/folder-types-retrieve.jsp";
    url += "?folderID=" + folderID;
    if (YAHOO.convio.itemchooser.ChooserUtil.baseType) {
      url += "&baseType=" + escape(YAHOO.convio.itemchooser.ChooserUtil.baseType);
    }

    var callback = {
      success : function(o) {
        try {
          var response = YAHOO.lang.JSON.parse(o.responseText);
        } catch (e) {
          alert("Failed to fetch content types for folder.");
          return;
        }

        m.clearContent();

        if (response.status == "error") {
          // Friendly error.

          var msg = null;
          switch (response.errorCode) {
          case 'no_types':
          case 'permission_denied':
            msg = "Access Denied";
          default:
            YAHOO.convio.dialog.showError({detail : response.errorMessage, showDetail : false});
          }

          return;
        }

        if (response.types.length == 1) {
          // Only one CCT is mapped to this folder. No need for a menu.

          th.showNewItemDialog("click", th, response.types[0].id);

        } else if (response.types.length > 1) {
          // At least one CCT is mapped to this folder. Provide a menu.

          for (var i=0; i<response.types.length; i++) {
            var type = response.types[i];

            var newItemLabel = "<img src=\"" + type.icon + "\"/> New " + type.label + "...";

            m.addItem({
                text : newItemLabel,
                  onclick : {
                  fn : th.showNewItemDialog,
                    obj : type.id,
                    scope : th
                    }
              });
          }
        }

        m.render("add-file-menu");
        m.show();
      },

      cache : false
    };

    YAHOO.util.Connect.asyncRequest('GET', url, callback);
  },

  /**
   * Open the new content item dialog.
   *
   * @param typeID The extended content type ID
   */
  showNewItemDialog : function(type, context, args) {
    var typeID = args;

    var th = YAHOO.convio.itemchooser.BrowseTab;

    YAHOO.convio.item.showNewItemDialog(th.savedFolderID, typeID, function(item) {
      // Execute the following function on the parent dialog.
      YAHOO.convio.dialog.addPostProcessListener(function() {
          YAHOO.convio.itemchooser.ChooserUtil.selectItem(item);
          YAHOO.convio.dialog.submit();
        });
    });
  },

  selectNewFolder: function(oArgs) {
    window.alert("Selecting folder " + oArgs.folderID);
  }, 
  showNewSubfolderDialog : function() {
    var th = YAHOO.convio.itemchooser.BrowseTab;
    var url = "/components/x-dialog/chooser/browse/folder-new-dialog.jsp";
    url += "?parentID=" + th.savedFolderID;
    
    var configuration = {
      authenticate : true,
      process : function(o) {
        try {
          var response = YAHOO.lang.JSON.parse(o.responseText);
        } catch (e) {
          alert("Failed to create new folder.");
          return;
        }

        if (response.error) {
          if (response.error == "duplicatename") {
            alert("The URL name \"" + response.systemName + "\" is taken.  Please re-open the 'Add Folder' dialog and choose another name.");
	        return;
	      } else if (response.error == "duplicatetitle") {
	        alert("The title \"" + response.title + "\" is taken.  Please re-open the 'Add Folder' dialog and choose another title.");
	        return;
	      } else if (response.error == "duplicatealias") {
	        alert("The URL name \"" + response.systemName + "\" is taken by an alias.  Please re-open the 'Add Folder' dialog and choose another name.");
	        return;
	      } else if (response.error == "reservedname") {
	        alert("The URL name \"" + response.systemName + "\" is reserved for system use.  Please re-open the 'Add Folder' dialog and choose another name.");
	        return;
	      } else {
            // An error occurred trying to create the new subfolder.
            YAHOO.convio.dialog.showError({msg : "An error occurred", detail : response.error});
            return;
          }
        }

        var b = YAHOO.convio.itemchooser.BrowseTab;
        b.changeRootAndSelectFolder(response.id, response.parentID);
      },
      argument : {browseTabClass : YAHOO.convio.itemchooser.BrowseTab}
    };
    YAHOO.convio.dialog.open(url, configuration);
  },
  labelToFileName : function(label, separator) {
    if (! separator) {
      separator = "-";
    } 
    var name = label.toLowerCase();
    name = name.replace(/\s/g, separator);
    name = name.replace(/[^a-zA-Z0-9-_]/g, "");
    return name;
  },
  copyTitleToURLInNewSubfolderDialog : function(separator) {
    var th = YAHOO.convio.itemchooser.BrowseTab;
    
    var systemName = th.getElement("form", "systemName");
    var title = th.getElement("form", "title");
    if (systemName.value || ! title.value) { return; }

    systemName.value = th.labelToFileName(title.value, separator);
  },
  getElement : function(formName, elementName) {

    var form = document.forms[formName];
    if (! form) { 
      alert("No such form " + formName);
      return null;
    }

    var element = form.elements[elementName];
    if (! element) { 
      alert("No such element " + elementName);
      return null;
    }
    return element;
  },

  /**
   * Destroys any content and state associated with the browse tab.
   */
  destroy : function() {
    var th = YAHOO.convio.itemchooser.BrowseTab;

    if (th.newItemMenu) {
      th.newItemMenu.destroy();
      th.newItemMenu = null;
    }

    if (th.tree) {
      th.tree.destroy();
      th.tree = null;
    }
  }
}

chooser.jsp

<%--
 $Source: /home/cvs/cvsroot/cms/integration/web/components/x-dialog/chooser/chooser.jsp,v $
 $Author: marick $
 $Revision: 1.46 $
 $Date: 2009/12/15 01:51:06 $
--%>

<%@ page contentType="text/html; charset=UTF-8"
	import="com.frontleaf.sql.*,
	        com.frontleaf.locale.Formats,
	        com.frontleaf.content.*,
	        com.frontleaf.content.util.RecentTracker,
	        com.frontleaf.request.RequestTools,
	        com.frontleaf.server.FileIconManager,
	        com.frontleaf.server.Host,
	        com.frontleaf.security.User,
	        com.frontleaf.util.StringTools,
	        java.util.ArrayList,
	        java.util.Date,
	        java.util.List" %>

<%@ taglib uri="http://www.frontleaf.com/tlds/ui-tags-1.0" prefix="ui" %>
<%@ taglib uri="http://www.frontleaf.com/tlds/request-tags-1.0" prefix="rc" %>

<rc:request>
  <parameter name="itemID" type="integer" required="false"/>
  <parameter name="folderID" type="folder" />
  <parameter name="baseType" type="string" default=""/>
  <parameter name="view" type="string" values="gallery,list" default="list"/>
  <parameter name="selectionType" type="string" values="image,all,none" 
             default="all"/>
  <parameter name="publish" type="boolean" default="false"/>
  <parameter name="recent" type="boolean" default="true"/>
  <parameter name="toolbars" type="boolean" default="true"/>
</rc:request>

<%
  final User user = (User) request.getUserPrincipal();

  Folder folder = (Folder) requestData.getObject("folderID");
  Host host = folder.getHost();

  // Permission check. The user must be an administrator.
  if (user == null || ! host.isAdmin(user)) {
    response.sendError(response.SC_UNAUTHORIZED);
    return;
  }

  String view = requestData.getString("view");
  String baseType = requestData.getString("baseType");
  String selectionType = requestData.getString("selectionType");
  String dialogTitle = selectionType.equals("image") ? "Choose Image" : "Website Explorer";
  Integer itemID = requestData.getInteger("itemID");
  
  boolean publish = requestData.getBoolean("publish");

  boolean showRecent = requestData.getBoolean("recent");

  RecentTracker tracker = RecentTracker.getInstance(request);
  Folder lastFolder = tracker.getLastFolder();
  if (lastFolder != null && lastFolder.getHost().equals(folder.getHost())) {
    folder = lastFolder;
  }

  Folder root = folder.getRoot();
  
  String paneQuery = 
    "context=dialog&folderID=" + folder.getID() 
      + "&view=" + StringTools.encode(view) 
      + "&baseType=" + StringTools.encode(baseType) 
      + "&subsiteID=" + root.getID();
  
  // Generate a path to the root folder.
  List<Folder> pathToRoot = new ArrayList<Folder>();
  Folder lastParent = folder;
  
  if (! root.equals(lastParent)) {
    pathToRoot.add(lastParent);
    while (! root.equals(lastParent.getParent())) {
      lastParent = lastParent.getParent();
      pathToRoot.add(lastParent);
    }
  }
%>

<ui:dialog>
<ui:title><%=dialogTitle%></ui:title>
<ui:init>
  var gHostID = <%=host.getID()%>;
  var gItemID = <%=itemID%>;
  var gFolderID = <%=folder.getID()%>;
  var gRootID = <%=root.getID()%>;
  var gBaseType = '<%=StringTools.isEmpty(baseType) ? "" : StringTools.escapeQuotes(baseType)%>';
  var gPaneQuery = '<%=paneQuery%>';

  var gFoldersToExpand = [];
  <%
    for (int i = 0 ; i < pathToRoot.size() ; i ++) {
     
  %>
      gFoldersToExpand.push('<%=pathToRoot.get(i).getID()%>');
  <% 
    }
  %>   
  
  var dialogArguments = YAHOO.convio.dialog.getArgs(); 

  YAHOO.convio.itemchooser.ChooserUtil.setBaseType(gBaseType);
  YAHOO.convio.itemchooser.ChooserUtil.setItemID(gItemID);
        
  // Initialize tabs.
  var tabView = new YAHOO.widget.TabView(); 
                  
  // Browse tab.
  var tab1 = new YAHOO.widget.Tab({ 
    label: 'Browse', 
    dataSrc: "/components/x-dialog/chooser/browse/frame.jsp?" + gPaneQuery,
    cacheData: true,
    active: true
  });
  tab1.addListener("dataLoadedChange", function(o) {
      YAHOO.convio.itemchooser.BrowseTab._setSavedFolderID(gFolderID);
      YAHOO.convio.itemchooser.BrowseTab.selectOnExpand = false;
      YAHOO.convio.itemchooser.BrowseTab.setupBrowseTree(gRootID, gFolderID, gFoldersToExpand);
      YAHOO.convio.itemchooser.BrowseTab.setupBrowseTable(gFolderID);
    }, null);
  tabView.addTab(tab1); 
        
  // Search tab.
  var tab2 = new YAHOO.widget.Tab({
    label: 'Search',
    dataSrc: "/components/x-dialog/chooser/search/search.jsp?" + gPaneQuery,
    cacheData: true
  });
  tab2.addListener("dataLoadedChange", function(o) {
      var params = { 'keywords':''};
      YAHOO.convio.itemchooser.SearchTab.setHostID(gHostID);
      YAHOO.convio.itemchooser.SearchTab.setupSearchFilters();
      YAHOO.convio.itemchooser.SearchTab.setupSearchResultsTable(params);   
      YAHOO.convio.itemchooser.SearchTab.setupToggles();   
    }, null);
  tabView.addTab(tab2); 

  // Recent tab.
  var tab3 = new YAHOO.widget.Tab({ 
    label: 'Recent', 
    dataSrc: "/components/x-dialog/chooser/recent/recent.jsp",
    cacheData: true
  });
  tab3.addListener("dataLoadedChange", function(o) {  
      YAHOO.convio.itemchooser.RecentTab.setupRecentTable(gHostID);
      YAHOO.convio.itemchooser.ChooserUtil.ready = true;
    }, null);
  tabView.addTab(tab3); 

  tabView.appendTo('ItemChooserDialogTabs');

  // Make sure the browse tab is done loading before switching tabs.
  tabView.addListener('beforeActiveTabChange', function(e) {
    return YAHOO.convio.itemchooser.ChooserUtil.ready;
  });
       
  YAHOO.convio.itemchooser.ChooserUtil.tabView = tabView;
  dialogArguments.searchTabClass = YAHOO.convio.itemchooser.SearchTab;
  dialogArguments.browseTabClass = YAHOO.convio.itemchooser.BrowseTab;
  dialogArguments.recentTabClass = YAHOO.convio.itemchooser.RecentTab;
        
  //Uncomment these to see logging statements on IE7
  //var myContainer = document.body.appendChild(document.createElement("div"));
  //var myLogReader = new YAHOO.widget.LogReader(myContainer);
</ui:init>

<ui:body>
<div id="ItemChooserDialogTabs"></div>
</ui:body>
</ui:dialog>

item-chooser.js

YAHOO.namespace("convio.itemchooser");
YAHOO.convio.itemchooser = {

  // Flag used to serialize item chooser dialog requests.
  _isLoading : false,

  /**
   * Shows an item chooser dialog.
   *
   * @param folderID The folder
   * @param config   Item chooser configuration
   * @param callbackFn The callback function, of the form function(item),
   *          where item contains the following attributes: text, url
   */
  showItemChooser : function(folderID, config, callbackFn) {

    if (! this._isLoading) {
      this._isLoading = true;
      YAHOO.convio.itemchooser._ensureRequiredIsLoadedThenItemChooser(folderID, config, callbackFn);
    }
  }, 
  
  _ensureRequiredIsLoadedThenItemChooser : function(folderID, config, callback) {

    var loader = new YAHOO.util.YUILoader({ 
        base: "/system/components/yui/", 
        require : ["tabview", "treeview", "button", "event", "datatable", "json", "paginator", "item-chooser-css", "treeview-css", "connection", "calendar", "menu", "context-menu", "browse-tab", "search-tab", "recent-tab", "item-form", "chooser-util", "chooser-tree", "logger", "dom"], 
        loadOptional : true, 
        combine : false, 
        onSuccess : function() {
          YAHOO.convio.itemchooser._realShowItemChooser(folderID, config, callback);
          YAHOO.convio.itemchooser._isLoading = false;
        },
        onFailure : function(msg, xhrobj) {
          YAHOO.convio.itemchooser._isLoading = false;
        }
      });
     
    loader.addModule({
        name : "item-chooser-css",
          type : "css",
          fullpath : "/components/x-dialog/chooser/chooser.css",
          requires : ["tabview"]
          });

    loader.addModule({
        name : "treeview-css",
          type : "css",
          fullpath : "/components/x-dialog/chooser/tree/folders/tree.css",
          requires : ["treeview"]
          });
   
    //It looks like these javascript files will only be loaded once by YUILoader
    loader.addModule({
        name : "context-menu",
          type: "js",
          fullpath : "/components/x-dialog/chooser/context-menu.js",
          requires : ["menu"]
          });
     
    loader.addModule({
        name : "chooser-util",
          type: "js",
          fullpath : "/components/x-dialog/chooser/chooser-util.js",
          requires : []
          });
     
    loader.addModule({
        name : "chooser-tree",
          type: "js",
          fullpath:"/components/x-dialog/chooser/tree/tree.js",
          requires: ["treeview", "connection", "logger"]
          });
     
    loader.addModule({
        name : "browse-tab",
          type: "js",
          fullpath:"/components/x-dialog/chooser/browse/browse.js",
          requires: ["treeview", "datatable", "context-menu", "menu", "chooser-util", "chooser-tree", "logger", "dom"]
          });
     
    loader.addModule({
        name : "search-tab",
          type: "js",
          fullpath:"/components/x-dialog/chooser/search/search.js",
          requires: ["datatable", "context-menu", "menu", "button", "event", "json", "calendar", "paginator", "connection", "chooser-util", "chooser-tree"]
          });
     
    loader.addModule({
        name : "recent-tab",
          type: "js",
          fullpath:"/components/x-dialog/chooser/recent/recent.js",
          requires: ["datatable", "context-menu", "menu", "chooser-util"]
          });
     
    loader.addModule({
        name : "item-form",
          type: "js",
          fullpath:"/components/x-dialog/authoring/item-form.js",
          requires: ["event", "dom"],
          varName : "YAHOO.convio.item"
          });

    loader.insert();
  },
  
  _realShowItemChooser: function(folderID, config, callbackFn) {

    var configuration = {
      argument : {},
      authenticate: true,

      process : function(o) {
        var args = YAHOO.convio.dialog.getArgs();
        if (callbackFn != null) {
          // should ensure it has a url and a text variable
          callbackFn(args.returnValue);
        }
      },

      isReady : function() {
        // Don't allow the dialog to be acted upon until the tree has been loaded.
        return YAHOO.convio.itemchooser.ChooserUtil.ready;
      },

      destroy : function(o) {
        // Destroy the browse tab.
        YAHOO.convio.itemchooser.BrowseTab.destroy();

        // Destroy tab view.
        YAHOO.convio.itemchooser.ChooserUtil.tabView = null;
      }
    };

    //The folder ID that's passed in here is used to determine which host to show the dialog for.
    var url = "/components/x-dialog/chooser/chooser.jsp?folderID=" + folderID;
    if (config["basetype"] != undefined) {
      url += "&baseType=" + config["basetype"];
    }
    if (config["itemID"] != undefined) {
      url += "&itemID=" + config["itemID"];
    }

    YAHOO.convio.dialog.open(url, configuration, { width: 800, height: 500 });
  }

};