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

今天,继续介绍我在尝试开发的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<string>    images = </string>new ArrayList<string>();  </string>
  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代码有问题,一旦重复编辑就会乱掉!

现在可以看一下效果了。

你可能感兴趣的:(apache,html,Ajax,Google,wicket)