Reuters tutorial: step 9

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

Adding a calendar widget will introduce the Solr date faceting parameters.

First, update the Solr parameters for faceting in reuters.js:

var params = {
  ...
  'facet.date': 'date',
  'facet.date.start': '1987-01-01T00:00:00.000Z/DAY',
  'facet.date.end': '1987-11-31T00:00:00.000Z/DAY+1DAY',
  'facet.date.gap': '+1DAY',
  ...
};

Create a new widget, CalendarWidget.js, inheriting from AbstractFacetWidget:

(function ($) {
AjaxSolr.CalendarWidget = AjaxSolr.AbstractFacetWidget.extend({
});
})(jQuery);

Add the JavaScript and CSS files. We will be using jQuery UI’s Datepicker for the calendar :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="ext/smoothness/jquery-ui.css" media="screen" />
<link rel="stylesheet" type="text/css" href="ext/smoothness/ui.theme.css" media="screen" />
<script type="text/javascript" src="widgets/CalendarWidget.js"></script>

And add an instance of the widget to the Manager in reuters.js:

Manager.addWidget(new AjaxSolr.CalendarWidget({
  id: 'calendar',
  target: '#calendar',
  field: 'date'
}));

Now, we’re ready to implement afterRequest:

afterRequest: function () {

}

[What we have so far]

If you click on a date in the calendar, the corresponding facet field-facet value pair will appear under “Current Selection.” The facet values will probably be long and verbose. To shorten them, we must replace one line in CurrentSearchWidget.js:

links.push($('<a href="#"/>').text('(x) ' + fq[i]).click(self.removeFacet(fq[i])));

With:

if (fq[i].match(/[\[\{]\S+ TO \S+[\]\}]/)) {
  var field = fq[i].match(/^\w+:/)[0];
  var value = fq[i].substr(field.length + 1, 10);
  links.push($('<a href="#"/>').text('(x) ' + field + value).click(self.removeFacet(fq[i])));
}
else {
  links.push($('<a href="#"/>').text('(x) ' + fq[i]).click(self.removeFacet(fq[i])));
}

Now, the facet values will be short and concise.

[What we have so far]

That’s it for building the AJAX Solr demo site. Congrats!

Let’s wrap-up with suggestions for future work.