我的第一个Ajax Wicket控件：Google Ajax Image Search (1)

tailorcai

浏览: 93628 次
性别:
来自: 北京

最近访客更多访客>>

oznyang

WangJiaX

lijun1191997

wwssmm00220033

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Ajax wicket Google CSS HTML

最近看到Google发布了新的基于Ajax的图片搜索功能，正好本人在研究Wicket，在网上Google了一下，看到WicketStuff中只有对GoogleMap的支持，因此想自己开发一个，顺便练练手。

创建工程和代码框架
首先创建一个Wicket工程，并创建一个页面。我本人用的是Wicket Bench，不过它是针对1.2设计的，而我的库用的是1.3，因此，自动生成的import有问题，需要手工改一下。不过，对于eclipse来说，这是小菜一叠儿啊。然后添加一个wicket component，名字叫GImageSearch。

java 代码

public class GImageSearch extends Panel {
public GImageSearch(String id, IModel model) {
super(id, model);
}
}

我只实现了这个构造函数，model是用来获得搜索的条件的字符串。现在先不管他，后面会用到。
相应的Html页面

xml 代码

<html xmlns:wicket>
<wicket:panel>
<div id="searchcontrol">Loading

<wicket:panel> </wicket:panel> 加入Ajax支持
由于要用到Ajax，因此参考了一下AjaxEditableLabel的例子。对于模块化的Wicket来说，引入Ajax涉及到几个问题：
1. 额外的js文件的引入，一般是在Head中。
2. 对当前component的html的动态修改。
3. Ajax回调到Server。

对这些问题，Wicket都有很好的解决方案。

实现AjaxBehavior
首先创建一个内部类：

java 代码

protected class SearchAjaxBehavior extends AbstractDefaultAjaxBehavior {
@Override
public void renderHead(IHeaderResponse response) {
}
@Override
protected void respond(AjaxRequestTarget target) {
}
}

在构造函数后面加入一行：

java 代码

add( new SearchAjaxBehavior());

这样当Component被加入到页面中的时候，会自动调用renderHead完成对HTML-Head的扩充。
加入代码（完全照抄Google的例子）：

java 代码

@Override
public void renderHead(IHeaderResponse response) {
response.renderCSSReference("http://www.google.com/uds/css/gsearch.css");
response.renderJavascriptReference("http://www.google.com/uds/api?file=uds.js&v=1.0");
StringBuffer buffer = new StringBuffer("")
.append("function initGSearch() {\n")
.append("\tvar searchControl = new GSearchControl();\n")
.append("\tsearchControl.setOnKeepCallback(this, MyKeepHandler);\n")
.append("\tsearchControl.addSearcher(new GimageSearch());\n")
.append("\tsearchControl.draw(document.getElementById(\"" + "searchcontrol" + "\"));\n")
.append("}\n")
.append("\tfunction MyKeepHandler(result) {\n")
.append("}")
.append("GSearch.setOnLoadCallback(initGSearch);\n");
response.renderJavascript(buffer.toString(), "gsearch-init");
}