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

tailorcai

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

最近访客更多访客>>

oznyang

WangJiaX

lijun1191997

wwssmm00220033

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Ajax wicket Google Apache HTML

今天，继续介绍我在尝试开发的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 代码

add( new GImageSearch("gsearch",null) {
@Override
protected void onSelect(String url, String tbUrl, AjaxRequestTarget target) {
// store it some where?
images.add( url );
imageList.modelChanged();
target.addComponent( container );
}
});

引入了两个变量

java 代码

private List<string> images = </string>new ArrayList<string>(); </string>
private ListView imageList;

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

java 代码

private WebMarkupContainer container;
container = new WebMarkupContainer("savedList-panel");
add( container );
container.setOutputMarkupId(true);
container.add( imageList = new ListView("savedImage", images) {
@Override
protected void populateItem(ListItem item) {
item.add( new StaticImage("image", item.getModel()));
}
});

代码注释：

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

java 代码

class StaticImage extends WebComponent {
public StaticImage(String id, IModel model) {
super(id, model);
}
protected void onComponentTag(ComponentTag tag) {
checkComponentTag(tag, "img");
tag.put("src", getModelObjectAsString());
}
}

wicket 却省的Image是使用Resource作为url来源。这里copy了一个例子。http://cwiki.apache.org/WICKET/how-to-load-an-external-image.html

相应的HTML代码：

xml 代码

<body>
<span wicket:id="gsearch" />
<div wicket:id="savedList-panel" >
<ul><li wicket:id="savedImage">
<img wicket:id="image" />
li>ul>
div>
body>

javaeye贴HTML代码有问题，一旦重复编辑就会乱掉！

现在可以看一下效果了。

分享到：

jboss rules brms和ruleAgent的配合使用 | 我的第一个Ajax Wicket控件：Google Ajax ...

2007-07-27 09:41
浏览 2972
评论(2)
查看更多

2 楼 tailorcai 2007-07-30

个人感觉javaeye的圈子似乎有些冷清。
我觉得可能跟javaeye即有圈子，又有论坛有关系。其实圈子就是论坛。可是如果论坛有，谁还到圈子来啊？建议取消论坛，大力发展圈子...

1 楼 fakechris 2007-07-30

为啥不加入wicket的圈子，然后把这两篇文章放到圈子博客里呢

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论