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

最新推荐文章于 2020-12-31 21:47:13 发布

最新推荐文章于 2020-12-31 21:47:13 发布 · 174 阅读

文章标签：

本文介绍了如何使用Wicket框架开发一个带有图片保存功能的Google图片搜索应用。通过自定义GImageSearch组件，实现了图片的选择与保存，并展示了如何利用Ajax进行图片URL的传递及更新界面。

今天，继续介绍我在尝试开发的Google Ajax Image Search控件。

为了允许用户保存自己选择的图片，Google Search API提供了一个Callback.因此，修改如下代码：

java 代码

.append("function MyKeepHandler(result) {\n")
.append("\twicketAjaxPost('" + getCallbackUrl() + "','url='+wicketEncode(result.url)+'&tbUrl='+wicketEncode(result.tbUrl));\n")
.append("}")

在这段代码中，利用Behavior提供的Callback机制，把js中用户选择的图片的url上传到Behavior。
相应的相应代码如下：

java 代码

@Override
protected void respond(AjaxRequestTarget target) {
RequestCycle requestCycle = RequestCycle.get();
String tbUrl = requestCycle.getRequest().getParameter("tbUrl");
String url = requestCycle.getRequest().getParameter("url");
onSelect( url , tbUrl , target );
}
protected abstract void onSelect(String url , String tbUrl , AjaxRequestTarget target);

这里，我引入了一个虚函数，onSelect。通过实现这个函数，页面可以对选择的图片信息进行进一步的处理。在这里，我们先在页面中加入一个列表区域，显示用户选择的所有图片：

首先修改新的GImageSearch的创建代码。

java 代码

引入了两个变量

java 代码

images保存历史图片。imageList则是一个用来显示list数据的wicket控件。

java 代码

代码注释：

因为，当用户修改图片列表后，需要更新列表显示区域，这就是前面: target.add( container )的含义。通知wicket，本次ajax调用需要更新container对象。
对于需要ajax更新的对象，必须调用setOutputMarkupId(true)
ListView是一个静态界面对象，重复Render的时候，不会再次访问它的model。因此，必须调用listview.modelChange()。也可以试用RefreshingView等动态repeater界面控件。不过代码会多些。
这里额外加入了一个container。开始的时候，我直接调用target.add( imageList )，但是得到一个错误提示，对于像listview这样的对象，只能更新他们的包含对象。因此，必须给他们一个通用的包含对象。

java 代码