Skip to main content

jMaki Google AJAX Search Component

Posted by gmurray71 on June 6, 2006 at 5:50 PM PDT

The Google AJAX Search API allows you to include a dynamic Google search in to your web pages. jMaki can be used to provide Java developers a Java interface to the search API.

Here is what it takes to implement the Google AJAX Search API as a jMaki widget:

  1. Get a copy of the Glassfish
    Application Server. For more information about setting up your
    environment see the jMaki Developer documentation.
  2. Create a directory called gsearch. This directory will contain the HTML template file (component.htm) and the JavaScript bootstrap file (component.js)
  3. Create the component.htm HTML template file and place it in the "searchcomponent" directory. The contents of this file needs to be a single line: <div id="${uuid}"/>
  4. Create the component.js JavaScript bootstrap file and copy it into the "searchcomponent" directory. The contents of this file are similar to the contents provide in the Google AJAX Search API page. This file is called when the page is loaded and each widget is passed a JavaScript object "widget" which contains the parameters needed by the component instance and correspond to the parameters used by the component.htm template file. I used the following:
          // Create a search control
          var searchControl = new GSearchControl();

          // Add in a full set of searchers
          var localSearch = new GlocalSearch();
          searchControl.addSearcher(localSearch);
          searchControl.addSearcher(new GwebSearch());
          searchControl.addSearcher(new GvideoSearch());
          searchControl.addSearcher(new GblogSearch());

          // Set the Local Search center point
          localSearch.setCenterPoint(widget.args.centerPoint);

          // Tell the searcher to draw itself and tell it where to attach
          searchControl.draw(document.getElementById(widget.uuid));

          // Execute an inital search
          searchControl.execute("AJAX");
  5. Get an API key to use the example from http://code.google.com/apis/ajaxsearch/signup.html. This key has to match the directory from which you plan to use the component. I use http://localhost:8080/jmaki/google/.
  6. Add the Google Script to the WEB-INF/types.properties file containing the API key. The entry I added is as follows:
    googlesearch=http://www.google.com/uds/api?file=uds.js&v=0.1&key=YOUR_API_KEY _HERE

    Make sure to relace the API key with the one you got from Google.

  7. Create a JSP page that contains uses the tag. The page I used is as follows:

    <%@ taglib prefix="a" uri="http://java.sun.com/jmaki" %>

    <html>

    <head><title>Google Search Test</title></head>
    <h2>Google Search Test</h2>
    <hr>
    <a:ajax type="googlesearch" name="gsearch" args="{centerPoint: 'Santa Clara, CA'}" />

    </html>

    Note that an object literal is passed as the "args" attribute containing a property "centerPoint" with the value of "Santa Clara".

  8. Package and deploy your application. For more information about the application structure see jMaki Appications.

That is it! You now have a re-usable Google AJAX Search Widget. If you don't want to go through the steps download the jMaki Web application. The jMaki sample application contains more parameters you can set on the tag itself. If you get a chance give it a try.

Related Topics >>