我的第一个Ajax Wicket控件：Google Ajax Image Search (1)
养振濂
最近看到Google发布了新的基于Ajax的图片搜索功能，正好本人在研究Wicket，在网上Google了一下，看到WicketStuff中只有对GoogleMap的支持，因此想自己开发一个，顺便练练手。
创建工程和代码框架
首先创建一个Wicket工程，并创建一个页面。我本人用的是Wicket Bench，不过它是针对1.2设计的，而我的库用的是1.3，因此，自动生成的import有问题，需要手工改一下。不过，对于eclipse来说，这是小菜一叠儿啊。然后添加一个wicket component，名字叫GImageSearch。
我只实现了这个构造函数，model是用来获得搜索的条件的字符串。现在先不管他，后面会用到。
相应的Html页面
<wicket:panel> </wicket:panel> 加入Ajax支持
由于要用到Ajax，因此参考了一下AjaxEditableLabel的例子。对于模块化的Wicket来说，引入Ajax涉及到几个问题：
1. 额外的js文件的引入，一般是在Head中。
2. 对当前component的html的动态修改。
3. Ajax回调到Server。
对这些问题，Wicket都有很好的解决方案。
实现AjaxBehavior
首先创建一个内部类：
在构造函数后面加入一行：
这样当Component被加入到页面中的时候，会自动调用renderHead完成对HTML-Head的扩充。
加入代码（完全照抄Google的例子）：
现在可以看一下效果了：别忘了加上WebPage的代码，很简单的：
接下来，我们要将用户喜欢的图片信息保存到服务器。To be continued...
创建工程和代码框架
首先创建一个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...
类似资料：