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!

Comments

  • Chris Hoffmann

    Great stuff! But I’d almost say that http://www.nabble.com/Dojo-f13676.html should be included :x

  • Thanks for the great example of how to write Dojo code, great idea to provide a unified search. I love the fancy mouse-over effect in the logo.

    One suggestion would be to place the prev/next buttons at the bottom of the page as this is where the user will be once they realise the current page doesn’t include the results they were looking for.

  • Very nice – a few points though:

    1. The checkbox labels on the left are a bit too light, with any kind of direct light or on a crap monitor they’re very hard to read.

    2. The next button button should be disabled if there is no next page

    3. Sometimes clicking next two or three times jumps forward 20 pages, not one, and then the back button doesn’t work, it just refreshed the current page of results.

    4. You can already do Dojo search with my Dojo-built (along with Yahoo-BOSS) search engine Chofter.com ‘s Technical search :-)

    Still, a very nice application.

  • Thanks Shane, those are exactly the suggestions I was looking for. I didn’t want to the left side to be too visually intrusive, but I will darken them up a bit. And fix that fickle next button.

    I’ve seen Chofter, and it’s great! I’ve done complex search mashups before so I know exactly how much work you put into that. Dojo Search still has its niche though, with a broader scope of Dojo resources. For example, searching DaftMonkey will bring your page up in the results! :)

  • Awesome work! A couple of thoughts:

    1.) perhaps the CSS could squelch the outline around the inner input box on Safari or redirect it to the outer container?

    2.) searches don’t give you a URL that you can copy/paste/use-back-button with. Is that on the roadmap?

    3.) the main text on the page (not the options) is light enough that it’s kinda hard on the eyes. Might be nice if there were more contrast in the search result text in general.

    Thanks for the awesome app!

  • Thanks Alex! I implemented your suggestions, although the back button functionality was giving me trouble so I’ll put that on my TODO list. I also added your site to the list :)