2007-07-27

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

关键字: java wicket ajax google image search
今天，继续介绍我在尝试开发的Google Ajax Image Search控件。

为了允许用户保存自己选择的图片，Google Search API提供了一个Callback.因此，修改如下代码：
java 代码
 
  1. .append("function MyKeepHandler(result) {\n")  
  2. .append("\twicketAjaxPost('" + getCallbackUrl() + "','url='+wicketEncode(result.url)+'&tbUrl='+wicketEncode(result.tbUrl));\n")  
  3. .append("}")  
在这段代码中，利用Behavior提供的Callback机制，把js中用户选择的图片的url上传到Behavior。
相应的相应代码如下：

java 代码
 
  1. @Override  
  2. protected void respond(AjaxRequestTarget target) {  
  3.     RequestCycle requestCycle = RequestCycle.get();  
  4.     String tbUrl = requestCycle.getRequest().getParameter("tbUrl");  
  5.     String url = requestCycle.getRequest().getParameter("url");  
  6.   
  7.     onSelect( url , tbUrl , target );  
  8. }  
  9. protected abstract void onSelect(String url , String tbUrl , AjaxRequestTarget target);

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

首先修改新的GImageSearch的创建代码。
java 代码
 
  1. add( new GImageSearch("gsearch",null) {  
  2.     @Override  
  3.     protected void onSelect(String url, String tbUrl, AjaxRequestTarget target) {  
  4.         // store it some where?  
  5.         images.add( url );  
  6.         imageList.modelChanged();  
  7.         target.addComponent( container );  
  8.     }  
  9. });  

引入了两个变量
java 代码
 
  1. private List    images = new ArrayList();  
  2. private ListView        imageList;  

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

java 代码
 
  1. private WebMarkupContainer container;  
  2.   
  3.     container = new WebMarkupContainer("savedList-panel");  
  4.     add( container );  
  5.     container.setOutputMarkupId(true);  
  6.     container.add( imageList = new ListView("savedImage", images) {  
  7.   
  8.         @Override  
  9.         protected void populateItem(ListItem item) {  
  10.  
  11.             item.add( new StaticImage("image", item.getModel()));  
  12.         }  
  13.           
  14.     });  
  15.       

代码注释：
  1. 因为，当用户修改图片列表后，需要更新列表显示区域，这就是前面: target.add( container )的含义。通知wicket，本次ajax调用需要更新container对象。
  2. 对于需要ajax更新的对象，必须调用setOutputMarkupId(true)
  3. ListView是一个静态界面对象，重复Render的时候，不会再次访问它的model。因此，必须调用listview.modelChange()。也可以试用RefreshingView等动态repeater界面控件。不过代码会多些。
  4. 这里额外加入了一个container。开始的时候，我直接调用target.add( imageList )，但是得到一个错误提示，对于像listview这样的对象，只能更新他们的包含对象。因此，必须给他们一个通用的包含对象。
java 代码
 
  1. class StaticImage extends WebComponent {    
  2.   
  3.     public StaticImage(String id, IModel model) {    
  4.         super(id, model);    
  5.     }    
  6.   
  7.     protected void onComponentTag(ComponentTag tag) {    
  8.         checkComponentTag(tag, "img");    
  9.         tag.put("src", getModelObjectAsString());    
  10.     }    
  11.   
  12. }   

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

相应的HTML代码：

xml 代码
 
  1.  <body>  
  2.    <span wicket:id="gsearch" />  
  3. <div wicket:id="savedList-panel" >  
  4. <ul><li wicket:id="savedImage">  
  5. <img wicket:id="image" />  
  6. li>ul>  
  7. div>  
  8.      
  9.  body>  

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

现在可以看一下效果了。
评论
tailorcai 2007-07-30
个人感觉javaeye的圈子似乎有些冷清。
我觉得可能跟javaeye即有圈子，又有论坛有关系。其实圈子就是论坛。可是如果论坛有，谁还到圈子来啊？建议取消论坛，大力发展圈子...
fakechris 2007-07-30
为啥不加入wicket的圈子，然后把这两篇文章放到圈子博客里呢
发表评论

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

tailorcai
搜索本博客
最近加入圈子
存档
最新评论