Greg Murray's Blog: jMaki Google AJAX Search Component

My pages	Projects	Communities	java.net

Get Involved

java-net Project

Request a Project

Project Help Wanted Ads

Publicize your Project

Get Informed

java.net Online Books

java.net Archives

Get Connected

java.net Forums

Wiki and Javapedia

People, Partners, and Jobs

Java User Groups

RSS Feeds

Search

Online Books:

java.net on MarkMail:

Advanced Search

Greg Murray's Blog

«Creating AJAX Enabled JSF Components | Main | Sun Joins Open AJAX Alliance and Dojo Foundation »

jMaki Google AJAX Search Component

Posted by gmurray71 on June 06, 2006 at 05:50 PM | Comments (7)

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:

Get a copy of the Glassfish Application Server. For more information about setting up your environment see the jMaki Developer documentation.
Create a directory called gsearch. This directory will contain the HTML template file (component.htm) and the JavaScript bootstrap file (component.js)
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}"/>
```

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");

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/.
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.

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".

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.

Bookmark blog post:

del.icio.us

Digg

DZone

Furl

Comments

Comments are listed in date ascending order (oldest first) | Post Comment

I have been held by unable to use dynamic parameters with jMaki.

Instead of using 'Santa Clara, CA', I'd prefer to do this:

Posted by: lukema on January 07, 2007 at 05:29 PM

I have been held by unable to use dynamic parameters with jMaki. Instead of using 'Santa Clara, CA', I'd prefer to do this:

<ajax type="googlesearch" name="gsearch" args="{centerPoint: '${location}'}" / >

Posted by: lukema on January 07, 2007 at 05:34 PM

Hi,

Actually this will work. You also need to provide a defaultSearch property to get this to work right:

Try:

The google search should have a default value but it was not getting set. You more than likely want your own search anyways.

If your using the latest jMaki you also want to not use the 'type' attribute. We've removed it. The settings will now just use the name "google.search"

or in other words:

Let me know if that does not work for you.

Posted by: gmurray71 on January 07, 2007 at 06:52 PM

Thank you Mr. Murry.

I downloaded https://ajax.dev.java.net/files/documents/3115/46401/jmaki-java-samples-v.8.1.zip and extracted the jmaki.war file. From jmaki.war file, I extracted ajax-wrapper-comp.jar, And placed it into my WEB-INF/lib, and extracted glue-df.js glue.js injector.js jmaki-common.js jmaki.js reflection.js and placed them into resources.

On the JSP page,

<c:out value="${webAppName}"/>

works fine. But

<a:ajax name="servletStatus" args="{webAppName: '${webAppName}', servletName: '${servletName}'}" />

can not recognize ${webAppName}. The args are rendered as:

jmaki.addWidget({widgetDir:'http://localhost:7001/apsmonitor/resources/servletStatus',baseDir:'http://localhost:7001/apsmonitor/resources/servletStatus',script:'http://localhost:7001/apsmonitor/resources/servletStatus/component.js',args:{webAppName: '${webAppName}', servletName: '${servletName}'},uuid:'servletStatus0',name:'servletStatus'});

Posted by: lukema on January 08, 2007 at 01:11 PM

I found out jmaki tags can not handle EL on my applications: I am using WebLogic Server 8.1 which does not support JSP 2.0. jMaki itself does not support EL, but JSP 2.0 does.

Is it possible that you provide an extension version of jMaki which support EL?

Posted by: lukema on January 15, 2007 at 01:29 PM

I love Ajax Frameworks concept, but the only way I can code Ajax business forms (in a true cross-browser way) is to use "div innerHTML replacement" techniques behind standard HTML. Am I off?

Posted by: jmanico on April 23, 2007 at 01:11 AM

You can use innerHTML or DOM update the page DOM. Both work. I did a little write up on this topic here : https://blueprints.dev.java.net/bpcatalog/conventions/javascript-recommendations.html#innerhtml

Posted by: gmurray71 on April 23, 2007 at 01:18 AM

Powered by
Movable Type 3.01D

java.net RSS Feeds