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

最新推荐文章于 2020-06-27 10:02:22 发布

iteye_783

最新推荐文章于 2020-06-27 10:02:22 发布

阅读量119

点赞数

文章标签： 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");
}

现在可以看一下效果了：别忘了加上WebPage的代码，很简单的：

java 代码

public class ImageTest extends WebPage { public ImageTest() { add( new GImageSearch("gsearch",null)); } }

html 代码(JavaEye贴入html代码好像有问题,哪位告诉一下如何贴？）

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Hello World - Google AJAX Search API Sampletitle> head> <body> <span wicket:id="gsearch" /> body> html>

接下来，我们要将用户喜欢的图片信息保存到服务器。To be continued...

iteye_783

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我的第一个Ajax Wicket控件：Google Ajax Image Search (1)

最近看到Google发布了新的基于Ajax的图片搜索功能，正好本人在研究Wicket，在网上Google了一下，看到WicketStuff中只有对GoogleMap的支持，因此想自己开发一个，顺便练练手。创建工程和代码框架首先创建一个Wicket工程，并创建一个页面。我本人用的是Wicket Bench，不过它是针对1.2设计的，而我的库用的是1.3，因此，自动生成的import有问题，需要...
复制链接

扫一扫