- Updated OpenSearch UI after Linton review

- Multiple OpenSearch clients can now be added to a single page
- Configured OpenSearch as a dashlet
- Made the lookup for beans in portal session more rigorous for AJAX invoke command
- Updated paging graphics

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

config/alfresco/messages/webclient.properties

@@ -1297,10 +1297,13 @@ workflow_duration=Duration:
 workflow_duration_ms=ms
 
 # OpenSearch messages
+show=Show
 opensearch=OpenSearch
 opensearch_desc=Provides ability to search across multiple OpenSearch supported search engines.
-perform_search_in=Perform Search In
+search_in=Search In
 no_engines_registered=Failed to find any registered OpenSearch engines!
+current_repo=Current Alfresco Repository
+toggle_options=Toggle Options
 
 # UI Page Titles
 title_about=About Alfresco

config/alfresco/web-api-config.xml

@@ -22,7 +22,7 @@
    <config evaluator="string-compare" condition="OpenSearch">
       <opensearch>
          <engines>
-            <engine label="Alfresco Text Search">
+            <engine label-id="current_repo">
                <url type="application/opensearchdescription+xml">
                   /service/search/textsearchdescription.xml
                </url>

config/alfresco/web-client-config.xml

@@ -211,6 +211,8 @@
             <dashlet id="my-images" label-id="dashlet_myimages"
                   description-id="dashlet_myimages_desc"
                   jsp="/jsp/dashboards/dashlets/my-images.jsp" allow-narrow="false" />
+            <dashlet id="opensearch" label-id="opensearch" description-id="opensearch_desc"
+                  jsp="/jsp/dashboards/dashlets/opensearch.jsp" />
          </dashlets>
          <!-- set true allow the Guest user to configure the dashboard view - false by default -->
          <allow-guest-config>false</allow-guest-config>

source/java/org/alfresco/web/app/servlet/ajax/InvokeCommand.java

@@ -93,20 +93,21 @@ public class InvokeCommand extends BaseAjaxCommand
                          " on variable " + variableName + 
                          " with method " + methodName);
 
+         Object bean = null;         
+         if (Application.inPortalServer())
+         {
             // retrieve the managed bean, this is really weak but if the 
             // request comes from a portal server the bean we need to get
             // is in the session with a prefix chosen by the portal vendor,
             // to cover this scenario we have to go through the names of
             // all the objects in the session to find the bean we want.
-         Object bean = null;
             
-         if (Application.inPortalServer())
+            String beanNameSuffix = "?" + variableName;
-         {
             Enumeration enumNames = request.getSession().getAttributeNames();
             while (enumNames.hasMoreElements())
             {
                String name = (String)enumNames.nextElement();
-               if (name.endsWith(variableName))
+               if (name.endsWith(beanNameSuffix))
                {
                   bean = request.getSession().getAttribute(name);
                   
@@ -118,8 +119,7 @@ public class InvokeCommand extends BaseAjaxCommand
             }
          }
          
-         // if we didn't find the bean it may be a request scope bean, in which
+         // if we don't have the bean yet try and get it via the variable resolver
-         // case go through the variable resolver to create it.
          if (bean == null)
          {
             VariableResolver vr = facesContext.getApplication().getVariableResolver();

source/java/org/alfresco/web/ui/common/component/data/UIDataPager.java

@@ -111,7 +111,7 @@ public class UIDataPager extends UICommand
             Integer.toString(pageCount)
             }));
       
-      buf.append(" ");
+      buf.append("  ");
       
       // output HTML links or labels to render the paging controls
       // first page
@@ -128,6 +128,8 @@ public class UIDataPager extends UICommand
          buf.append(Utils.buildImageTag(context, WebResources.IMAGE_FIRSTPAGE_NONE, 16, 16, null));
       }
       
+      buf.append(" ");
+      
       // previous page
       if (currentPage != 0)
       {
@@ -228,6 +230,8 @@ public class UIDataPager extends UICommand
          buf.append(Utils.buildImageTag(context, WebResources.IMAGE_NEXTPAGE_NONE, 16, 16, null));
       }
       
+      buf.append(" ");
+      
       // last page
       if ((dataContainer.getCurrentPage() < dataContainer.getPageCount() - 1) == true)
       {

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

@@ -55,7 +55,7 @@ public class UIOpenSearch extends SelfRenderingComponent
          return;
       }
       
-      String clientId = this.getClientId(context);
+      String clientId = this.getId();
       
       // output the scripts required by the component (checks are 
       // made to make sure the scripts are only written once)
@@ -78,17 +78,17 @@ public class UIOpenSearch extends SelfRenderingComponent
       
       // write out the javascript initialisation required
       out.write("<script type='text/javascript'>\n");
-      out.write("setSearchTermFieldId('");
+      out.write("var ");
       out.write(clientId);
-      out.write("-search-term');\n");
+      out.write(" = new Alfresco.OpenSearchClient('");
-      out.write("setPageSizeFieldId('");
       out.write(clientId);
-      out.write("-page-size');\n");
+      out.write("');\n");
       
       // register the engines on the client
       for (OpenSearchEngine engine : engines)
       {
-         out.write("registerOpenSearchEngine('");
+         out.write(clientId);
+         out.write(".registerOpenSearchEngine('");
          out.write(engine.getId());
          out.write("', '");
          out.write(engine.getLabel());
@@ -99,45 +99,67 @@ public class UIOpenSearch extends SelfRenderingComponent
       out.write("</script>\n");
       
       // write out the HTML
-      out.write("<div class='osPanel'>\n");
+      out.write("<div class='osPanel'><div class='osControls'>");
       out.write("<table border='0' cellpadding='2' cellspacing='0'><tr>");
       out.write("<td><input id='");
       out.write(clientId);
       out.write("-search-term' name='");
       out.write(clientId);
-      out.write("-search-term' type='text' size='25' onkeyup='return handleKeyPress(event);' />");
+      out.write("-search-term' type='text' size='30' onkeyup='return ");
+      out.write(clientId);
+      out.write(".handleKeyPress(event);' />");
       out.write("</td><td><img src='");
       out.write(context.getExternalContext().getRequestContextPath());
-      out.write("/images/icons/search_icon.gif' style='cursor:pointer' onclick='executeQuery()' title='");
+      out.write("/images/icons/search_icon.gif' style='cursor:pointer' onclick='");
+      out.write(clientId);
+      out.write(".executeQuery()' title='");
       out.write(Application.getMessage(context, "search"));
+      out.write("' /></td></tr></table>\n");
+      out.write("<table border='0' cellpadding='2' cellspacing='0' style='margin-top: 2px;'><tr><td><img src='");
+      out.write(context.getExternalContext().getRequestContextPath());
+      out.write("/images/icons/expanded.gif' style='cursor:pointer' onclick='");
+      out.write(clientId);
+      out.write(".toggleOptions(this)' class='expanded' title='");
+      out.write(Application.getMessage(context, "toggle_options"));
       out.write("' /></td><td><img src='");
       out.write(context.getExternalContext().getRequestContextPath());
-      out.write("/images/icons/collapsed.gif' style='cursor:pointer' onclick='toggleOptions(this)' class='collapsed' title='");
+      out.write("/images/icons/opensearch_controls.gif' /></td><td>");
       out.write(Application.getMessage(context, "options"));
-      out.write("' /></td></tr></table>\n");
+      out.write("</td></tr></table>\n");
-      out.write("<div id='os-options' class='osOptions'>");
+      
+      out.write("<div id='");
+      out.write(clientId);
+      out.write("-os-options' class='osOptions'>");
+      out.write(Application.getMessage(context, "show"));
       out.write("<input id='");
       out.write(clientId);
       out.write("-page-size' name='");
       out.write(clientId);
-      out.write("-page-size' type='text' value='5' style='width: 25px; margin-right: 5px;' />");
+      out.write("-page-size' type='text' value='5' style='width: 25px; margin-left: 5px; margin-right: 5px;' />");
       out.write(Application.getMessage(context, "items_per_page"));
-      out.write("<div style='margin-top: 6px; margin-bottom: 6px;'>");
+      out.write("<div style='margin-top: 6px; margin-bottom: 4px;'>");
-      out.write(Application.getMessage(context, "perform_search_in"));
+      out.write(Application.getMessage(context, "search_in"));
       out.write(":</div><table border='0' cellpadding='2' cellspacing='0'>");
       for (OpenSearchEngine engine : engines)
       {
          out.write("<tr><td><input id='");
+         out.write(clientId);
+         out.write("-");
          out.write(engine.getId());
          out.write("-engine-enabled' name='");
+         out.write(clientId);
+         out.write("-");
          out.write(engine.getId());
          out.write("-engine-enabled' type='checkbox' checked='checked' />");
          out.write("</td><td>");
          out.write(engine.getLabel());
          out.write("</td></tr>");
       }
-      out.write("</table></div>\n");
+      out.write("</table></div></div>\n");
-      out.write("<div id='os-results'></div>\n</div>\n");
+      
+      out.write("<div id='");
+      out.write(clientId);
+      out.write("-os-results'></div>\n</div>\n");
    }
    
    /**

source/web/css/main.css

@@ -435,7 +435,7 @@ a.topToolbarLinkHighlight, a.topToolbarLinkHighlight:link, a.topToolbarLinkHighl
 
 .pager
 {
-   padding: 3px;
+   padding: 6px 4px 3px 4px;
    border: 1px dotted #cccccc;
 }
 

source/web/css/opensearch.css

@@ -1,59 +1,60 @@
 .osSidebarPanel
 {
-   min-width: 190px;
+   background-color: #f5f5f5;
+   padding: 4px;
+   min-width: 212px;
    *width: 100%;
 }
 
 .osPanel
 {
-   margin: 4px;
+   margin-bottom: 3px;
+}
+
+.osControls
+{
+   padding: 4px;
+   background-color: white;
+   border: 1px solid #babfc5;
+   -moz-border-radius: 7px;
 }
 
 .osOptions
 {
-   margin: 6px;
+   margin-top: 6px;
-   display: none;
+   margin-left: 4px;
 }
 
 .osResults
 {
    margin-top: 6px;
    padding: 3px;
-   background: url(../images/parts/os-background.gif) 0 0 repeat-x;
+   background-color: white;
+   border: 1px solid #babfc5;
+   -moz-border-radius: 7px;
+   *width: 100%;
 }
 
 .osEngineTitle
 {
+   padding: 1px 2px 2px 2px;
    margin-bottom: 2px;
-   border-bottom: 1px dashed #bbb;
-}
-
-.osEngineTitleText
-{
    font-weight: bold;
-   color: #003366;
+   color: #004488;
-   padding-bottom: 2px;
+   white-space: nowrap;
-}
+   border-bottom: 1px dotted #bbb;
-
-.osResultsPosition
-{
-   font-size: 9px;
-   text-align: right;
-   padding-right: 2px;
-   _padding-right: 6px;
 }
 
 .osResultsPaging
 {
+   padding: 6px 4px 4px 4px;
    font-size: 9px;
    text-align: right;
-   padding: 4px;
-   padding-top: 6px;
 }
 
-.osResultsPaging a, .osResultsPaging a:hover, .osResultsPaging a:link, .osResultsPaging a:visited
+.osResultsPaging img
 {
-   font-size: 9px;
+   vertical-align: -4px;
 }
 
 .osResultNoMatch

source/web/jsp/dashboards/dashlets/opensearch.jsp

@@ -0,0 +1,22 @@
+<%--
+  Copyright (C) 2005 Alfresco, Inc.
+ 
+  Licensed under the Mozilla Public License version 1.1 
+  with a permitted attribution clause. You may obtain a
+  copy of the License at
+ 
+    http://www.alfresco.org/legal/license.txt
+ 
+  Unless required by applicable law or agreed to in writing,
+  software distributed under the License is distributed on an
+  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+  either express or implied. See the License for the specific
+  language governing permissions and limitations under the
+  License.
+--%>
+<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
+<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
+<%@ taglib uri="/WEB-INF/alfresco.tld" prefix="a" %>
+<%@ taglib uri="/WEB-INF/repo.tld" prefix="r" %>
+
+<r:openSearch id="dashletOsClient" />

source/web/jsp/sidebar/opensearch.jsp

@@ -21,6 +21,6 @@
 
 <f:verbatim><div class="osSidebarPanel"></f:verbatim>
 
-<r:openSearch id="os-client" />
+<r:openSearch id="sidebarOsClient" />
 
 <f:verbatim></div></f:verbatim>

source/web/scripts/ajax/common.js

@@ -3,8 +3,33 @@
 // Gavin Cornwell 14-07-2006
 //
 
+// Global Alfresco namespace object
+if (typeof Alfresco == "undefined") 
+{
+   var Alfresco = {};
+}
+
 var _alfContextPath = null;
 
+/**
+ * Error handler for errors caught in a catch block
+ */
+function handleCaughtError(err)
+{
+   var msg = null;
+      
+   if (err.message)
+   {
+      msg = err.message;
+   }
+   else
+   {
+      msg = err;
+   }
+   
+   alert("An error occurred: " + msg);
+}
+   
 /**
  * Default handler for errors when using the dojo toolkit
  */

source/web/scripts/ajax/opensearch.js

@@ -1,5 +1,5 @@
 //
-// Alfresco OpenSearch library
+// Alfresco OpenSearch client library
 // Gavin Cornwell 09-01-2007
 //
 // NOTE: This script relies on common.js so therefore needs to be loaded
@@ -7,25 +7,19 @@
 
 var _OS_NS_PREFIX = "opensearch";
 var _OS_NS_URI = "http://a9.com/-/spec/opensearch/1.1/";
-
+var _RESULTS_DIV_ID_SUFFIX = "-os-results";
-var _searchTermFieldId = null;
+var _OPTIONS_DIV_ID_SUFFIX = "-os-options";
-var _pageSizeFieldId = null;
+var _RESULTSET_PANEL_DIV_ID_SUFFIX = "-osresults-panel";
-
+var _RESULTSET_LIST_DIV_ID_SUFFIX = "-osresults-list";
-var _resultsDivId = "os-results";
+var _RESULTSET_PAGING_DIV_ID_SUFFIX = "-osresults-paging";
-var _optionsDivId = "os-options";
+var _ENGINE_ENABLED_FIELD_ID = "-engine-enabled";
-var _resultSetPanelId = "-osresults-panel";
+var _SEARCH_TERM_FIELD_ID = "-search-term";
-var _resultSetListId = "-osresults-list";
+var _PAGE_SIZE_FIELD_ID = "-page-size";
-var _resultSetPositionId = "-osresults-position";
-var _resultSetPagingId = "-osresults-paging";
-
-var _engineEnabledId = "-engine-enabled";
-var _engines = [];
-var _enginesById = [];
 
 /**
- * Define an object to hold the definition of an OpenSearch engine
+ * Constructor for an object to hold the definition of an OpenSearch engine
  */
-function OpenSearchEngine(id, label, url)
+Alfresco.OpenSearchEngine = function(id, label, url)
 {
    this.id = id;
    this.label = label;
@@ -33,37 +27,38 @@ function OpenSearchEngine(id, label, url)
 }
 
 /**
- * Sets the field id of the search term input control
+ * Constructor for an OpenSearchClient object
  */
-function setSearchTermFieldId(id)
+Alfresco.OpenSearchClient = function(id)
 {
-   _searchTermFieldId = id;
+   this.id = id;
+   this.engines = [];
+   this.enginesById = [];
 }
 
-/**
+Alfresco.OpenSearchClient.prototype = 
- * Sets the field id of the page size input control
- */
-function setPageSizeFieldId(id)
 {
-   _pageSizeFieldId = id;
+   id: null,
-}
    
-/**
+   engines: null,
+   
+   enginesById: null,
+
+   /**
     * Registers an OpenSearch engine to be called when performing queries
     */
-function registerOpenSearchEngine(id, label, url)
+   registerOpenSearchEngine: function(id, label, url)
-{
+   {
-   var se = new OpenSearchEngine(id, label, url);
+      var se = new Alfresco.OpenSearchEngine(id, label, url);
-   _engines[_engines.length] = se;
+      this.engines[this.engines.length] = se;
-   _enginesById[id] = se;
+      this.enginesById[id] = se;
-}
+   },
 
-
+   /**
-/**
     * Handles the key press event, if ENTER is pressed execute the query
     */
-function handleKeyPress(e)
+   handleKeyPress: function(e)
-{
+   {
       var keycode;
       
       // get the keycode
@@ -79,20 +74,20 @@ function handleKeyPress(e)
       // if ENTER was pressed execute the query
       if (keycode == 13)
       {  
-      executeQuery();
+         this.executeQuery();
          return false;
       }
       
       return true;
-}
+   },
 
-/**
+   /**
     * Toggles the visibility of the options panel
     */
-function toggleOptions(icon)
+   toggleOptions: function(icon)
-{
+   {
       var currentState = icon.className;
-   var optionsDiv = document.getElementById(_optionsDivId);
+      var optionsDiv = document.getElementById(this.id + _OPTIONS_DIV_ID_SUFFIX);
       
       if (currentState == "collapsed")
       {
@@ -116,16 +111,16 @@ function toggleOptions(icon)
             optionsDiv.style.display = "none";
          }
       }
-}
+   },
 
-/**
+   /**
     * Executes the query against all the registered and selected opensearch engines
     */
-function executeQuery()
+   executeQuery: function()
-{
+   {
       // gather the required parameters
-   var term = document.getElementById(_searchTermFieldId).value;
+      var term = document.getElementById(this.id + _SEARCH_TERM_FIELD_ID).value;
-   var count = document.getElementById(_pageSizeFieldId).value;
+      var count = document.getElementById(this.id + _PAGE_SIZE_FIELD_ID).value;
       
       // default the count if its invalid
       if (count.length == 0 || isNaN(count))
@@ -136,37 +131,47 @@ function executeQuery()
       // issue the queries if there is enough search criteria
       if (term != null && term.length > 1)
       {
+         // remove previous results (if necessary)
+         var resultsPanel = document.getElementById(this.id + _RESULTS_DIV_ID_SUFFIX);
+         if (resultsPanel != null)
+         {
+            while (resultsPanel.firstChild) 
+            {
+               resultsPanel.removeChild(resultsPanel.firstChild);
+            };
+         }
+         
          // issue the search request for each enabled engine
-      for (var e = 0; e < _engines.length; e++)
+         for (var e = 0; e < this.engines.length; e++)
          {
             // get the checkbox for the current engine
-         var ose = _engines[e];
+            var ose = this.engines[e];
-         var engCheckbox = document.getElementById(ose.id + _engineEnabledId);
+            var engCheckbox = document.getElementById(this.id + "-" + ose.id + _ENGINE_ENABLED_FIELD_ID);
             if (engCheckbox != null && engCheckbox.checked)
             {
-            issueSearchRequest(ose, term, count);
+               this.issueSearchRequest(ose, term, count);
             }
          }
       }
-}
+   },
    
-/**
+   /**
     * Issues an Ajax request for the given OpenSearchEngine
     * using the given search term and page size.
     */
-function issueSearchRequest(ose, term, pageSize)
+   issueSearchRequest: function(ose, term, pageSize)
-{
+   {
       // generate the search url
-   var searchUrl = generateSearchUrl(ose.url, term, pageSize);
+      var searchUrl = this.calculateSearchUrl(ose.url, term, pageSize);
       
       // issue the request
       if (searchUrl != null)
       {
          YAHOO.util.Connect.asyncRequest("GET", searchUrl, 
             { 
-            success: processSearchResults,
+               success: Alfresco.processSearchResults,
-            failure: handleSearchError,
+               failure: Alfresco.handleSearchError,
-            argument: [ose.id]
+               argument: [ose.id, this]
             }, 
             null);
       }
@@ -175,9 +180,25 @@ function issueSearchRequest(ose, term, pageSize)
          handleErrorYahoo("Failed to generate url for search engine '" + ose.label + 
                "'.\n\nThis is probably caused by missing required parameters, check the template url for the search engine.");
       }
-}
+   },
    
-/**
+   /**
+    * Shows another page of the current search results for the
+    * given engineId
+    */
+   showPage: function(engineId, url)
+   {
+      // execute the query and process the results
+      YAHOO.util.Connect.asyncRequest("GET", url, 
+         { 
+            success: Alfresco.processShowPageResults,
+            failure: Alfresco.handleSearchError,
+            argument: [engineId, this]
+         }, 
+         null);
+   },
+
+   /**
     * Generates a concrete url for the given template url and parameters.
     *
     * All parameters (inside { and }) have to be replaced. We only need to populate
@@ -185,8 +206,8 @@ function issueSearchRequest(ose, term, pageSize)
     * empty string. If there is a mandatory parameter present (other than searchTerms
     * and count) null will be returned.
     */
-function generateSearchUrl(templateUrl, term, count)
+   calculateSearchUrl: function(templateUrl, term, count)
-{
+   {
       var searchUrl = null;
       
       // define regex pattern to look for params
@@ -227,90 +248,46 @@ function generateSearchUrl(templateUrl, term, count)
       }
       
       return searchUrl;
-}
+   },
 
-/**
+   /**
- * Processes the XML search results
- */
-function processSearchResults(ajaxResponse)
-{
-   try
-   {
-      // render the results from the Ajax response
-      var engineId = ajaxResponse.argument[0];
-      var feed = ajaxResponse.responseXML.documentElement;
-      
-      // if the name of the feed element is "rss", get the channel child element
-      if (feed.tagName == "rss")
-      {
-         feed = getElementByTagName(feed, "channel");
-      }
-      
-      var resultsDiv = renderSearchResults(engineId, feed);
-
-      // create the div to hold the results and add the results
-      var resultsPanel = document.getElementById(_resultsDivId);
-      if (resultsPanel != null)
-      {
-         // first remove any existing results
-         while (resultsPanel.firstChild) 
-         {
-            resultsPanel.removeChild(resultsPanel.firstChild);
-         };
-         
-         // add the new results
-         resultsPanel.appendChild(resultsDiv);
-      }
-      else
-      {
-         alert("Failed to final results panel, unable to render search results!");
-         return;
-      }
-   }
-   catch (e)
-   {
-      handleError(e);
-   }
-}
-
-/**
     * Renders the results for the given feed element.
     */
-function renderSearchResults(engineId, feed)
+   renderSearchResults: function(engineId, feed)
-{
+   {
       // look up the label from the osengine registry
-   var engineLabel = _enginesById[engineId].label;
+      var engineLabel = this.enginesById[engineId].label;
       
       // create the div to hold the results and the header bar
       var sb = [];
       sb[sb.length] = "<div id='";
+      sb[sb.length] = this.id;
+      sb[sb.length] = "-";
       sb[sb.length] = engineId;
-   sb[sb.length] = _resultSetPanelId;
+      sb[sb.length] = _RESULTSET_PANEL_DIV_ID_SUFFIX;
       sb[sb.length] = "' class='osResults'>";
-   sb[sb.length] = "<div class='osEngineTitle'><table cellpadding='0' cellspacing='0' width='100%'>";
+      sb[sb.length] = "<div class='osEngineTitle'>";
-   sb[sb.length] = "<tr><td class='osEngineTitleText'>";
       sb[sb.length] = engineLabel;
-   sb[sb.length] = "</td><td id='";
+      sb[sb.length] = "</div>";
-   sb[sb.length] = engineId;
-   sb[sb.length] = _resultSetPositionId;
-   sb[sb.length] = "' class='osResultsPosition'>";
-   sb[sb.length] = generatePostionHTML(feed);
-   sb[sb.length] = "</td></tr></table></div>";
       
       // create the actual results to display, start with the containing div
       sb[sb.length] = "<div id='";
+      sb[sb.length] = this.id;
+      sb[sb.length] = "-";
       sb[sb.length] = engineId;
-   sb[sb.length] = _resultSetListId;
+      sb[sb.length] = _RESULTSET_LIST_DIV_ID_SUFFIX;
       sb[sb.length] = "'>";
-   sb[sb.length] = generateResultsListHTML(feed); 
+      sb[sb.length] = this.generateResultsListHTML(feed); 
       sb[sb.length] = "</div>";
       
       // create the paging controls
       sb[sb.length] = "<div id='";
+      sb[sb.length] = this.id;
+      sb[sb.length] = "-";
       sb[sb.length] = engineId;
-   sb[sb.length] = _resultSetPagingId;
+      sb[sb.length] = _RESULTSET_PAGING_DIV_ID_SUFFIX;
       sb[sb.length] = "' class='osResultsPaging'>";
-   sb[sb.length] = generatePagingHTML(engineId, feed);
+      sb[sb.length] = this.generatePagingHTML(engineId, feed);
       sb[sb.length] = "</div>";
    
       // close the containing div
@@ -322,140 +299,14 @@ function renderSearchResults(engineId, feed)
       
       // return the div
       return d;
-}
-
-/**
- * Shows another page of the current search results for the
- * given engineId
- */
-function showPage(engineId, url)
-{
-   // execute the query and process the results
-   YAHOO.util.Connect.asyncRequest("GET", url, 
-      { 
-         success: processShowPageResults,
-         failure: handleSearchError,
-         argument: [engineId]
    },
-      null);
-}
 
-/**
+   /**
- * Processes the search results and updates the postion, result list
- * and paging controls.
- */
-function processShowPageResults(ajaxResponse)
-{
-   try
-   {
-      // render the results from the Ajax response
-      var engineId = ajaxResponse.argument[0];
-      var feed = ajaxResponse.responseXML.documentElement;
-      
-      // if the name of the feed element is "rss", get the channel child element
-      if (feed.tagName == "rss")
-      {
-         feed = getElementByTagName(feed, "channel");
-      }
-      
-      // find the position div and update the count
-      var positionDiv = document.getElementById(engineId + _resultSetPositionId);
-      if (positionDiv != null)
-      {
-         positionDiv.innerHTML = generatePostionHTML(feed);
-      }
-   
-      // append the results list to the results list div
-      var resultsListDiv = document.getElementById(engineId + _resultSetListId);
-      if (resultsListDiv != null)
-      {
-         resultsListDiv.innerHTML = generateResultsListHTML(feed);
-      }
-   
-      // update the paging div with new urls
-      var pagingDiv = document.getElementById(engineId + _resultSetPagingId);
-      if (pagingDiv != null)
-      {
-         pagingDiv.innerHTML = generatePagingHTML(engineId, feed);
-      }
-   }
-   catch (e)
-   {
-      handleError(e);
-   }
-}
-
-/**
- * Generates the HTML required to display the current position i.e. "x - y of z".
- */
-function generatePostionHTML(feed)
-{
-   var totalResults = 0;
-   var pageSize = 5;
-   var startIndex = 0;
-   
-   // extract position information from results
-   var elTotalResults = getElementByTagNameNS(feed, _OS_NS_URI, _OS_NS_PREFIX, "totalResults");
-   if (elTotalResults != null)
-   {
-      totalResults = getElementText(elTotalResults);
-   }
-   
-   // if there are no results just return an empty string
-   if (totalResults == 0)
-   {
-      return "";
-   }
-   
-   var elStartIndex = getElementByTagNameNS(feed, _OS_NS_URI, _OS_NS_PREFIX, "startIndex");
-   if (elStartIndex != null)
-   {
-      startIndex = getElementText(elStartIndex);
-   }
-   
-   var elItemsPerPage = getElementByTagNameNS(feed, _OS_NS_URI, _OS_NS_PREFIX, "itemsPerPage");
-   if (elItemsPerPage != null)
-   {
-      pageSize = getElementText(elItemsPerPage);
-   }
-   
-   // calculate the number of pages the results span
-   /*var noPages = Math.floor(totalResults / pageSize);
-   var remainder = totalResults % pageSize;
-   if (remainder != 0)
-   {
-      noPages++;
-   }*/
-   
-   // calculate the endIndex for this set of results
-   var endIndex = (Number(startIndex) + Number(pageSize)) - 1;
-   if (endIndex > totalResults)
-   {
-      endIndex = totalResults;
-   }
-   
-   // make sure the startIndex is correct
-   if (totalResults == 0)
-   {
-      startIndex = 0;
-   }
-   
-   var sb = [];
-   sb[sb.length] = startIndex;
-   sb[sb.length] = "&nbsp;-&nbsp;";
-   sb[sb.length] = endIndex;
-   sb[sb.length] = "&nbsp;of&nbsp;";
-   sb[sb.length] = totalResults;
-   
-   return sb.join("");    
-}
-
-/**
     * Generates the HTML to display the search results from the 
     * given feed.
     */
-function generateResultsListHTML(feed)
+   generateResultsListHTML: function(feed)
-{
+   {
       var isAtom = true;
       
       // if the name of the feed element is "channel" this is an RSS feed
@@ -552,15 +403,19 @@ function generateResultsListHTML(feed)
          
          return sb.join("");
       }
-}
+   },
 
-/**
+   /**
- * Generates the HTML to display the paging links i.e. first, next, previous and last.
+    * Generates the HTML to display the paging information i.e. the first, next, previous 
+    * and last buttons and the position info i.e. "x - y of z".
     */
-function generatePagingHTML(engineId, feed)
+   generatePagingHTML: function(engineId, feed)
-{
+   {
-   // check there are results
       var totalResults = 0;
+      var pageSize = 5;
+      var startIndex = 0;
+      
+      // check there are results
       var elTotalResults = getElementByTagNameNS(feed, _OS_NS_URI, _OS_NS_PREFIX, "totalResults");
       if (elTotalResults != null)
       {
@@ -573,6 +428,32 @@ function generatePagingHTML(engineId, feed)
          return "";
       }
       
+      var elStartIndex = getElementByTagNameNS(feed, _OS_NS_URI, _OS_NS_PREFIX, "startIndex");
+      if (elStartIndex != null)
+      {
+         startIndex = getElementText(elStartIndex);
+      }
+      
+      var elItemsPerPage = getElementByTagNameNS(feed, _OS_NS_URI, _OS_NS_PREFIX, "itemsPerPage");
+      if (elItemsPerPage != null)
+      {
+         pageSize = getElementText(elItemsPerPage);
+      }
+      
+      // calculate the number of pages the results span
+      /*var noPages = Math.floor(totalResults / pageSize);
+      var remainder = totalResults % pageSize;
+      if (remainder != 0)
+      {
+         noPages++;
+      }*/
+      
+      var endIndex = (Number(startIndex) + Number(pageSize)) - 1;
+      if (endIndex > totalResults)
+      {
+         endIndex = totalResults;
+      }
+      
       // extract the navigation urls
       var firstUrl = null;
       var nextUrl = null;
@@ -609,78 +490,190 @@ function generatePagingHTML(engineId, feed)
    
       if (firstUrl != null)
       {
-      sb[sb.length] = "<a href='#' onclick='showPage(&quot;";
+         sb[sb.length] = "<a href='#' onclick='";
+         sb[sb.length] = this.id;
+         sb[sb.length] = ".showPage(&quot;";
          sb[sb.length] = engineId;
          sb[sb.length] = "&quot;, &quot;";
          sb[sb.length] = firstUrl;
-      sb[sb.length] = "&quot;);'>first</a> | ";
+         sb[sb.length] = "&quot;);'><img src='";
-   }
+         sb[sb.length] = getContextPath();
-   if (previousUrl != null)
+         sb[sb.length] = "/images/icons/FirstPage.gif' title='First Page' border='0' /></a>";
-   {
-      sb[sb.length] = "<a href='#' onclick='showPage(&quot;";
-      sb[sb.length] = engineId;
-      sb[sb.length] = "&quot;, &quot;";
-      sb[sb.length] = previousUrl;
-      sb[sb.length] = "&quot;);'>previous</a>";
-      if (nextUrl != null)
-      {
-         sb[sb.length] = " | ";
-      }
-   }
-   if (nextUrl != null)
-   {
-      sb[sb.length] = "<a href='#' onclick='showPage(&quot;";
-      sb[sb.length] = engineId;
-      sb[sb.length] = "&quot;, &quot;";
-      sb[sb.length] = nextUrl;
-      sb[sb.length] = "&quot;);'>next</a> | ";
-   }
-   if (lastUrl != null)
-   {
-      sb[sb.length] = "<a href='#' onclick='showPage(&quot;";
-      sb[sb.length] = engineId;
-      sb[sb.length] = "&quot;, &quot;";
-      sb[sb.length] = lastUrl;
-      sb[sb.length] = "&quot;);'>last</a>";
-   }
-   
-   return sb.join("");
-}
-
-/**
- * Error handler for errors caught in a catch block
- */
-function handleError(o)
-{
-   var msg = null;
-      
-   if (e.message)
-   {
-      msg = e.message;
       }
       else
       {
-      msg = e;
+         sb[sb.length] = "<img src='";
+         sb[sb.length] = getContextPath();
+         sb[sb.length] = "/images/icons/FirstPage_unavailable.gif' />";
       }
       
-   alert("Error occurred processing search results: " + msg);
+      sb[sb.length] = "&nbsp;";
+      
+      if (previousUrl != null)
+      {
+         sb[sb.length] = "<a href='#' onclick='";
+         sb[sb.length] = this.id;
+         sb[sb.length] = ".showPage(&quot;";
+         sb[sb.length] = engineId;
+         sb[sb.length] = "&quot;, &quot;";
+         sb[sb.length] = previousUrl;
+         sb[sb.length] = "&quot;);'><img src='";
+         sb[sb.length] = getContextPath();
+         sb[sb.length] = "/images/icons/PreviousPage.gif' title='Previous Page' border='0' /></a>";
+      }
+      else
+      {
+         sb[sb.length] = "<img src='";
+         sb[sb.length] = getContextPath();
+         sb[sb.length] = "/images/icons/PreviousPage_unavailable.gif' />";
+      }
+      
+      sb[sb.length] = "&nbsp;&nbsp;";
+      sb[sb.length] = startIndex;
+      sb[sb.length] = "&nbsp;-&nbsp;";
+      sb[sb.length] = endIndex;
+      sb[sb.length] = "&nbsp;of&nbsp;";
+      sb[sb.length] = totalResults;
+      sb[sb.length] = "&nbsp;&nbsp;";
+      
+      if (nextUrl != null)
+      {
+         sb[sb.length] = "<a href='#' onclick='";
+         sb[sb.length] = this.id;
+         sb[sb.length] = ".showPage(&quot;";
+         sb[sb.length] = engineId;
+         sb[sb.length] = "&quot;, &quot;";
+         sb[sb.length] = nextUrl;
+         sb[sb.length] = "&quot;);'><img src='";
+         sb[sb.length] = getContextPath();
+         sb[sb.length] = "/images/icons/NextPage.gif' title='Next Page' border='0' /></a>";
+      }
+      else
+      {
+         sb[sb.length] = "<img src='";
+         sb[sb.length] = getContextPath();
+         sb[sb.length] = "/images/icons/NextPage_unavailable.gif' />";
+      }
+      
+      sb[sb.length] = "&nbsp;";
+      
+      if (lastUrl != null)
+      {
+         sb[sb.length] = "<a href='#' onclick='";
+         sb[sb.length] = this.id;
+         sb[sb.length] = ".showPage(&quot;";
+         sb[sb.length] = engineId;
+         sb[sb.length] = "&quot;, &quot;";
+         sb[sb.length] = lastUrl;
+         sb[sb.length] = "&quot;);'><img src='";
+         sb[sb.length] = getContextPath();
+         sb[sb.length] = "/images/icons/LastPage.gif' title='Last Page' border='0' /></a>";
+      }
+      else
+      {
+         sb[sb.length] = "<img src='";
+         sb[sb.length] = getContextPath();
+         sb[sb.length] = "/images/icons/LastPage_unavailable.gif' />";
+      }
+      
+      return sb.join("");
+   }
+}
+
+/*********************************/
+/** Handlers for AJAX callbacks **/
+/*********************************/
+
+/**
+ * Processes the XML search results
+ */
+Alfresco.processSearchResults = function(ajaxResponse)
+{
+   try
+   {
+      // render the results from the Ajax response
+      var engineId = ajaxResponse.argument[0];
+      var clientInstance = ajaxResponse.argument[1];
+      var feed = ajaxResponse.responseXML.documentElement;
+      
+      // if the name of the feed element is "rss", get the channel child element
+      if (feed.tagName == "rss")
+      {
+         feed = getElementByTagName(feed, "channel");
+      }
+      
+      var resultsDiv = clientInstance.renderSearchResults(engineId, feed);
+
+      // create the div to hold the results and add the results
+      var resultsPanel = document.getElementById(clientInstance.id + _RESULTS_DIV_ID_SUFFIX);
+      if (resultsPanel != null)
+      {
+         // add the new results
+         resultsPanel.appendChild(resultsDiv);
+      }
+      else
+      {
+         alert("Failed to final results panel, unable to render search results!");
+         return;
+      }
+   }
+   catch (e)
+   {
+      handleCaughtError(e);
+   }
+}
+
+
+/**
+ * Processes the search results and updates the postion, result list
+ * and paging controls.
+ */
+Alfresco.processShowPageResults = function(ajaxResponse)
+{
+   try
+   {
+      // render the results from the Ajax response
+      var engineId = ajaxResponse.argument[0];
+      var clientInstance = ajaxResponse.argument[1];
+      var feed = ajaxResponse.responseXML.documentElement;
+      
+      // if the name of the feed element is "rss", get the channel child element
+      if (feed.tagName == "rss")
+      {
+         feed = getElementByTagName(feed, "channel");
+      }
+   
+      // append the results list to the results list div
+      var resultsListDiv = document.getElementById(clientInstance.id + "-" + 
+            engineId + _RESULTSET_LIST_DIV_ID_SUFFIX);
+      if (resultsListDiv != null)
+      {
+         resultsListDiv.innerHTML = clientInstance.generateResultsListHTML(feed);
+      }
+   
+      // update the paging div with new urls and position info
+      var pagingDiv = document.getElementById(clientInstance.id + "-" + 
+            engineId + _RESULTSET_PAGING_DIV_ID_SUFFIX);
+      if (pagingDiv != null)
+      {
+         pagingDiv.innerHTML = clientInstance.generatePagingHTML(engineId, feed);
+      }
+   }
+   catch (e)
+   {
+      handleCaughtError(e);
+   }
 }
 
 /**
  * Error handler for Ajax call to search engine
  */
-function handleSearchError(o)
+Alfresco.handleSearchError = function(ajaxResponse)
 {
-   // TODO: find out which search engine results could not be found!
+   var engineId = ajaxResponse.argument[0];
+   var clientInstance = ajaxResponse.argument[1];
+   var engineLabel = clientInstance.enginesById[engineId].label;
    
-   handleErrorYahoo("Error: Failed to retrieve search results");
+   handleErrorYahoo("Failed to retrieve search results for '" + engineLabel + 
-}
+         "': " + ajaxResponse.status + " " + ajaxResponse.statusText);
-
-/**
- * Error handler for Ajax call to initialise component
- */
-function handleInitError(o)
-{
-   handleErrorYahoo("Failed to initialise OpenSearch component: " + 
-         o.status + " " + o.statusText);
 }