我的第一个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。

java 代码
 
  1. public class GImageSearch extends Panel {  
  2.     public GImageSearch(String id, IModel model) {  
  3.         super(id, model);  
  4.     }  
  5. }  

我只实现了这个构造函数,model是用来获得搜索的条件的字符串。现在先不管他,后面会用到。
相应的Html页面


xml 代码
 
  1. <html xmlns:wicket>  
  2. <wicket:panel>  
  3. <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 代码
 
  1. protected class SearchAjaxBehavior extends AbstractDefaultAjaxBehavior {  
  2.         @Override  
  3.         public void renderHead(IHeaderResponse response) {  
  4.         }  
  5.         @Override  
  6.         protected void respond(AjaxRequestTarget target) {  
  7.         }  
  8. }  


在构造函数后面加入一行:
java 代码
 
  1. add( new SearchAjaxBehavior());  


这样当Component被加入到页面中的时候,会自动调用renderHead完成对HTML-Head的扩充。
加入代码(完全照抄Google的例子):
java 代码
 
  1. @Override  
  2. public void renderHead(IHeaderResponse response) {  
  3.     response.renderCSSReference("http://www.google.com/uds/css/gsearch.css");  
  4.     response.renderJavascriptReference("http://www.google.com/uds/api?file=uds.js&v=1.0");  
  5.      
  6.     StringBuffer buffer = new StringBuffer("")  
  7.     .append("function initGSearch() {\n")  
  8.     .append("\tvar searchControl = new GSearchControl();\n")  
  9.     .append("\tsearchControl.setOnKeepCallback(this, MyKeepHandler);\n")  
  10.     .append("\tsearchControl.addSearcher(new GimageSearch());\n")  
  11.     .append("\tsearchControl.draw(document.getElementById(\"" + "searchcontrol" + "\"));\n")  
  12.     .append("}\n")  
  13.     .append("\tfunction MyKeepHandler(result) {\n")  
  14.     .append("}")  
  15.     .append("GSearch.setOnLoadCallback(initGSearch);\n");  
  16.     response.renderJavascript(buffer.toString(), "gsearch-init");  


现在可以看一下效果了:别忘了加上WebPage的代码,很简单的:
java 代码
 
  1. public class ImageTest extends WebPage {  
  2.     public ImageTest() {  
  3.         add( new GImageSearch("gsearch",null));  
  4.     }  
  5. }  
html 代码(JavaEye贴入html代码好像有问题,哪位告诉一下如何贴?)
 
  1.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.   <head>  
  4.     <meta http-equiv="content-type" content="text/html; charset=utf-8"/>  
  5.     <title>Hello World - Google AJAX Search API Sample<!---->title>  
  6.   <!---->head>  
  7.   <body>  
  8.     <span wicket:id="gsearch" />  
  9.   <!---->body>  
  10. <!---->html>  

接下来,我们要将用户喜欢的图片信息保存到服务器。To be continued...

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