Reuters tutorial: step 2

Table of Contents

• Reuters tutorial
• Step 1: Talk to Solr
• Step 2: Add a results widget
• Step 3: Add a pager widget
• Step 4: Add a tagcloud widget
• Step 5: Display the current filters
• Step 6: Add a free-text widget
• Step 7: Add an autocomplete widget
• Step 8: Add a map widget
• Step 9: Add a calendar widget
• Step 10: Extra credit

Let’s display the documents in the Solr response by creating a results widget. We can create a new widget, ResultWidget.js, by inheriting from AbstractWidget, from which every AJAX Solr widget inherits.

(function ($) {
AjaxSolr.ResultWidget = AjaxSolr.AbstractWidget.extend({
});
})(jQuery);

And add the JavaScript files for the widget:

<script type="text/javascript" src="../../lib/core/AbstractWidget.js"></script>
<script type="text/javascript" src="widgets/ResultWidget.js"></script>

Before we define any methods on the widget, let’s add an instance of the widget to the Manager in reuters.js:

Manager.addWidget(new AjaxSolr.ResultWidget({
  id: 'result',
  target: '#docs'
}));

Every widget takes a required id, to identify the widget, and an optional target. The target is usually the CSS selector for the HTML element that the widget updates after each Solr request.

Now, we implement the abstract method afterRequest, which each widget runs after the Manager receives the Solr response. The Manager stores the response in Manager.response (which the widgets may access through this.manager.response).

afterRequest: function () {
  $(this.target).empty();
  for (var i = 0, l = this.manager.response.response.docs.length; i < l; i++) {
    var doc = this.manager.response.response.docs[i];
    $(this.target).append(AjaxSolr.theme('result', doc, AjaxSolr.theme('snippet', doc)));
  }
},

The above empties the target HTML element and appends HTML content to it for each document in the Solr response. AJAX Solr provides a AjaxSolr.theme utility to separate the HTML from the JavaScript. Here is the result theme, for example:

AjaxSolr.theme.prototype.result = function (item, snippet) {
  var output = '<div><h2>' + item.title + '</h2>';
  output += '<p id="links_' + item.id + '"></p>';
  output += '<p>' + snippet + '</p></div>';
  return output;
};

Add the JavaScript file for the result and snippet theme functions (and a few others we’ll use later):

<script type="text/javascript" src="js/reuters.theme.js"></script>

[What we have so far]

We’re now displaying the first ten results for the search term “oil” – nice! Let’s display each document’s tags and implement the “more” link. Add the following code inside the for-loop in afterRequest:

var items = [];
items.concat(this.facetLinks(doc.topics));
items.concat(this.facetLinks(doc.organisations));
items.concat(this.facetLinks(doc.exchanges));
AjaxSolr.theme('list_items', 'links_' + doc.id, items);

To get access to the list_items theme, we’ll need to include the jQuery theme file distributed with AJAX Solr:

<script type="text/javascript" src="../../lib/helpers/jquery/ajaxsolr.theme.js"></script>

To get the rest of the code to run, we’ll need to define the method facetLinks and its helper facetHandler:

facetLinks: function (facet_field, facet_values) {
  var links = [];
  if (facet_values) {
    for (var i = 0, l = facet_values.length; i < l; i++) {
      links.push(AjaxSolr.theme('facet_link', facet_values[i], this.facetHandler(facet_field, facet_values[i])));
    }
  }
  return links;
},

facetHandler: function (facet_field, facet_value) {
  var self = this;
  return function () {
    self.manager.store.remove('fq');
    self.manager.store.addByValue('fq', facet_field + ':' + AjaxSolr.Parameter.escapeValue(facet_value));
    self.manager.doRequest(0);
    return false;
  };
},

The above creates links for browsing by topic, organization, or exchange. Clicking a link will reset the filter queries, add a filter query, and send a Solr request, setting the Solr start parameter to 0. See the ParameterStore remove and addByValue, and the AbstractManager doRequest API methods.

To implement the “more” link, we implement another abstract method: init. A widget’s init method is called once when the Manager’s init method is called.

init: function () {
  $('a.more').livequery(function () {
    $(this).toggle(function () {
      $(this).parent().find('span').show();
      $(this).text('less');
      return false;
    }, function () {
      $(this).parent().find('span').hide();
      $(this).text('more');
      return false;
    });
  });
}

Add the JavaScript file for jQuery’s livequery plugin (in jQuery 1.3, you can use jQuery.live):

<script type="text/javascript" src="js/jquery.livequery.js"></script>

We implement a final abstract method, beforeRequest, to display a loading spinner while waiting for Solr to return a response. Here is the code:

beforeRequest: function () {
  $(this.target).html($('<img/>').attr('src', 'images/ajax-loader.gif'));
}

[What we have so far]

In this iteration, we wrote a results widget. We described how to define a widget and add it to the manager; introduced two widget properties – id and target – and three abstract methods – init, beforeRequest, and afterRequest – all inherited from AbstractWidget; used the ParameterStore remove and addByValue API methods; and used the AjaxSolr.theme utility.

Let's paginate those results.