Dojo Search with Yahoo BOSS

By on February 20, 2009 12:02 am

Header

The new Dojo Search is now live. I worked on creating this with the goal of showing how much information there is out there about the Dojo Toolkit and supplying a way to aggregate that information in a central location. Now you can search all of Dojo’s Resources instead of dojotoolkit.org alone. Most of the time if you have a question, it’s already been asked and answered!

The Dojo community is large and there is a lot of great information spread out across the vastness of the web. The Dojo Toolkit has been around for a while and has undergone numerous additions and improvements since its inception. Unfortunately, some of the documentation and valuable data needed by users and enthusiasts is decentralized. Dojo Search is designed to help alleviate this problem.

How it Works

SidebarThe Dojo Search engine uses the Yahoo BOSS API. The query is modified to return results that are specific to the Dojo Toolkit. This is done not only by searching sites that have a focus on Dojo, but also by excluding sites that are not relevant. For example, Google searches often return many results that have your keywords, but these results are usually comments in a Subversion commit or bug tracking history. These inclusions and exclusions are how Dojo Search operates by default.

If you wish to search outside of the default scope, you can check Dojo Specific Resources in the side panel. This will expose all of the sites that are being searched or filtered, based on whether they are checked or not. If you just want to search the Dojo API, uncheck all others and check api.dojotoolkit.org. Your settings are saved in a cookie, so they are the same the next time you return.

Under the Hood

Naturally, the search engine was created with Dojo! To be more accurate, it was built with Dojo Base. No builds were harmed in the making of this web page. The intent here is to demonstrate how full-featured Dojo Base is on its own. The exception is dojo.io.script; included as the method to communicate with Yahoo BOSS. And of course the uncompressed source files for Dojo Search are viewable.

Because Dijit is not used, the components are created with custom code. The check boxes and radio buttons are unordered lists, with their states determined by CSS and changed with JavaScript. The search results are widgets, based loosely on Dijit’s Templated mixin. It takes an HTML string with markup such as ${title} and replaces it with the data from a search item.

Component visibility is controlled almost entirely by CSS and uses the single-line CSS style. When something is clicked, the JavaScript changes the class name of the root div (with the ID wrapper) in the page and the CSS then controls what is displayed. For example, when clicking the About button, the wrapper class name has “about” added to it. The CSS looks like this:

#wrapper #content #about, #wrapper #midBar #aboutOff{ 
	display:none;
}
#wrapper.about #content #about, #wrapper.about #midBar #aboutOff{ 
	display:block;
}
#wrapper #content #results, #wrapper #midBar #aboutOn{ 
	display:block;
}
#wrapper.about #content #results, #wrapper.about #midBar #aboutOn{ 
	display:none;
}

The second line shows that when #wrapper has an about class (#wrapper.about), use display:block. The first line shows the normal state without the about class. #aboutOn and #aboutOff are IDs for the actual button that toggles the About section. This technique is used throughout the page, including toggling the Specific Resources section in the options and controlling the elements of the result items in the Result Display options. It keeps things within an “MVC” paradigm — allowing JavaScript to be the controller and using CSS to handle the view.

Conclusion

There are more plans for Dojo Search in the future, including bells and whistles, and more importantly, refinement of the search. If you have ideas on how to make it better, or if you have a site that should be included in the search scope, leave a comment!