« Part 8 | Part 10 »

Part 9 - How to create Search widgets

RSS widgets are cool, but being able to search from within the AJAX Desktop, and seeing the results on the Desktop is even cooler!

Here’s how to add search widgets to your AJAX Desktop application.

An example of a Google Web search widget

Since it’s built on top of our previous widget code, all we need to do is review the search code: 

//MuseStorm components
var manager=new MuseManager();
manager.init("TutorialKey",this);

var handler=new Object();	//handle SearchManager events
var searchManager=new SearchManager();
searchManager.init(manager, "searchManager", handler);

handler.onNewSearch=function(){		//start a new search
	searchManager.getFirstResults(searchManager.SEARCH_WEB,10);
}

handler.onWebResults=function(arr,res){		//place search results in widget
	if (res.status!="OK" || arr==null)
		return;
	var w=document.getElementById("google_content");
	w.innerHTML="";
	var str="<ul style='padding:0 ; margin: 0 0 0 10;'>";	
	for (var i=0;i<arr.length;i++ )
	{					
		str+="<li><a href='"+searchManager.openResult(arr[i].getMuseStormID())+"' title='"+arr[i].getSummary()+"'>";
		str+=arr[i].getTitle()+"</a></li>";
	}
	str+="</ul>";
	w.innerHTML=str;
	w.innerHTML+="<br><table align=center width=90% cellpadding=0 cellspacing=0 border=0><tr>"+
		"<td align=center><span style='font-size: 8pt; font-family: arial; ' align=right>"+
		"<b><a href='javascript:handler.prev()' style='text-decoration: none; color: blue;'>"+
		"<< prev</a>  <a href='javascript:handler.next()' style='text-decoration: none; color: blue;'>next >>"+
		"</a></b></span></td></tr></table>";
}

handler.next=function(){
	searchManager.getNextResults(searchManager.SEARCH_WEB,10);
}
handler.prev=function(){
	searchManager.getPrevResults(searchManager.SEARCH_WEB,10);
}

function search(){
	var term=document.getElementById("searchtext");		//get the search term
	if (term.value.length>0){
		searchManager.newSearch(term.value);		//start a new search
		var w=document.getElementById("google_content");
		w.innerHTML="loading...";
	}
}

We start by creating an instance of the MuseManager component var manager=new MuseManager() and initializing it (here we use the demo key - you can use it for limited testing, or register and replace it by your own key).

We then create a handler object, whose task is to update the widget when the search result data is delivered (more on this in a second).

Next we create the SearchManager object and initialize it (searchManager.init(manager, “searchManager”, handler)) by passing a reference to the manager object, the name of our SearchManager instance and a reference to the handler object to the init function.

Overview of how the SearchManager works:

  • When the user searches for something, we first call the SearchManager’s newSearch function. This instructs the server to prepare data for the user’s search term
  • When the server is ready to serve data the SearchManager calls the onNewSearch function of the handler object
  • The handler object asks the SearchManager for Web search results
  • The server returns the requested results and the SearchManager calls the handler’s onWebResults function
  • the handler displays the data

SearchManager related code:

First we implement the onNewSearch function for the handler. All we do is ask the SearchManager for the first 10 search results searchManager.getFirstResults(searchManager.SEARCH_WEB,10). You can ask for up to 20 search results per request. Note that you can simply replace SEARCH_WEB with a different flag to get different data types (remember to implement the relevant callback function as well).

When the server returns the results, the SearchManager calls the handler’s onWebResults function (handler.onWebResults=function(arr,res)) where we do the following:

  • Get a reference to the DOM element that will display the results (google_content)
  • Formulate a string containing a list of the 10 results (ID and title)
  • Add Prev/Next links to allow the user to browser results (Prev calls the handler.prev function, Next calls the handler.next function)

Two things to note:

  1. When user clicks the ‘search’ button, the browser calls the search() function which in turn calls the SearchManager’s newSearch function
  2. Each result is assigned a unique MuseStorm ID. In order to load a result, we use the SearchManager’s openResult function searchManager.openResult(arr[i].getMuseStormID()) that maps the ID into a URL.