`
tailorcai
  • 浏览: 93627 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

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

AjaxwicketGoogleApacheHTML 
阅读更多
今天，继续介绍我在尝试开发的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代码有问题，一旦重复编辑就会乱掉！

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

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

相关推荐

    wicket的ajax范例（级联选择框）

    具体来说，第一个选择框包含三个选项：“1”、“2”、“3”，而第二个选择框中的选项则为第一个选择框选中项的十倍。 为了实现这一功能，我们需要重写第一个选择框的`onChange`方法，使得当第一个选择框的值发生...

    Ajax-jaulp-wicket.zip

    Ajax-jaulp-wicket.zip,这个项目是ApacheWicket组件和实用程序的集合。,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页，其中网页的小部分在不...

    wicket常用控件使用方法

    Wicket是一个灵活而强大的Java Web框架，它提供了一套简洁高效的API用于构建复杂的Web应用程序。与.NET平台的开发方式相似，Wicket允许开发者在HTML页面中声明控件，并在Java代码中处理这些控件的逻辑。本篇文章将...

    wicket基础控件

    Wicket 是一个强大的Java Web应用程序框架，它提供了一种组件化的开发方式，使得开发者可以创建出高度交互且易于维护的Web应用。Wicket的基础控件是构建用户界面的核心元素，这些控件帮助开发者构建出丰富的表单、...

    wicket例子和开发指南

    2. 第一个Wicket应用：介绍如何创建一个简单的"Hello, World!"应用，理解Wicket的基础架构。 3. 组件和页面：讲解Wicket中的组件模型，如何创建和使用组件，以及如何组织页面结构。 4. 模型和数据绑定：解释如何处理...

    Wicket.pdf(Wicket开发指南)

    - **低学习曲线：** 相比其他框架，Wicket 提供了一个更直观的 API 和简洁的文档，使得新用户能够快速上手。 - **规则配置：** 减少了对 XML 配置文件的依赖，简化了开发流程。 - **Ajax 支持：** 内置了对 Ajax ...

    wicket指南

    1. **创建页面类**：在Wicket中，每个页面都有一个对应的Java类，类中定义了页面的组件和行为。 2. **绑定HTML模板**：页面类与HTML模板通过`@MountPath`注解或`WebPage`的构造函数关联。 3. **组件定义**：使用`add...

    Wicket开发指南

    - **Wicket的历史与背景**：Wicket是一款基于Java的开源Web应用框架，它强调组件化的编程方式，并且支持多种现代Web开发特性，如AJAX等。Wicket的设计理念是为了简化Web应用的开发过程，使开发者能够更加专注于业务...

    wicket国际化例子

    Wicket是一个流行的Java web应用程序框架，它提供了强大的组件模型和灵活的国际化支持。 **一、Wicket的国际化基础** 1. **什么是国际化（i18n）**：国际化是一种软件设计方法，使得应用程序能够适应不同地区的...

    wicket 基础知识培训

    Wicket 是一个开源的Java Web框架，用于构建可重用且易于维护的Web应用程序。它以其组件模型和数据绑定机制而闻名，与Struts等传统MVC框架相比，提供了更直观和面向对象的编程方式。 在Wicket基础知识培训中，首先...

    Wicket In Action 正式版

    - **第1章：Wicket是什么**：介绍Wicket的历史背景、设计理念以及与其他框架的区别。 - **第2章：Wicket的架构**：深入探讨Wicket的内部架构，包括组件、模型和会话等核心概念。 - **第3章：构建一个简单的Wicket...

    wicket文档

    第一个例子 **3.1 老姜一块­­"HelloWorld"** 本节介绍了一个简单的Wicket "HelloWorld" 示例，展示了如何快速搭建一个Wicket项目。 **3.2 Wicket程序的开发步骤** - **3.2.1 制作一个Html模板** 创建HTML...

    wicket的tree的简单实例

    首先，我们看到一个名为"Wicket_tree2"的文件，这可能是源代码或者示例项目的第二部分，可能包含了对基础树结构的扩展或改进。在Wicket中，Tree通常由一系列TreeNode对象组成，每个TreeNode代表树中的一个节点，可以...

    apache-wicket-7

    Apache Wicket 是一个开源的Java Web应用程序框架，它专注于提供简单、声明式、以及组件化的Web开发模型。在“apache-wicket-7”这个主题中，我们主要关注的是Wicket框架的第七个主要版本，即7.0.0-M3。这个版本是一...

Magicbox
Global site tag (gtag.js) - Google Analytics