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

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

AjaxwicketGoogleCSSHTML 
阅读更多
最近看到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");  
  17. } 

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

接下来，我们要将用户喜欢的图片信息保存到服务器。To be continued...
  • 大小: 279.2 KB
分享到：
评论
发表评论

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

相关推荐

    PrimeUI Widgets

    PrimeFaces是一个轻量级的、支持JSF 2.0的开源组件套件，具有100多个丰富的JSF组件，极大地提高了JSF Web应用程序的开发效率。 PrimeFaces是一个用于提高JSF Web应用程序开发效率的开源类库。主要由三个模块组成： ...

    无需编写任何代码即可创建应用程序：Deepseek-R1 和 RooCode AI 编码代理.pdf

    deepseek最新资讯、配置方法、使用技巧，持续更新中

    Heric拓扑并网离网仿真模型：PR单环控制，SogIPLL锁相环及LCL滤波器共模电流抑制技术解析,基于Heric拓扑的离网并网仿真模型研究与应用分析：PR单环控制与Sogipll锁相环的共模电流抑

    Heric拓扑并网离网仿真模型：PR单环控制，SogIPLL锁相环及LCL滤波器共模电流抑制技术解析,基于Heric拓扑的离网并网仿真模型研究与应用分析：PR单环控制与Sogipll锁相环的共模电流抑制效能,#Heric拓扑并离网仿真模型（plecs） 逆变器拓扑为：heric拓扑。 仿真说明： 1.离网时支持非单位功率因数负载。 2.并网时支持功率因数调节。 3.具有共模电流抑制能力（共模电压稳定在Udc 2）。 此外，采用PR单环控制，具有sogipll锁相环，lcl滤波器。 注：（V0004） Plecs版本4.7.3及以上 ,Heric拓扑; 离网仿真; 并网仿真; 非单位功率因数负载; 功率因数调节; 共模电流抑制; 共模电压稳定; PR单环控制; sogipll锁相环; lcl滤波器; Plecs版本4.7.3及以上,Heric拓扑：离网并网仿真模型，支持非单位功率因数与共模电流抑制

    培训机构客户管理系统 2024免费JAVA微信小程序毕设

    2024免费微信小程序毕业设计成品，包括源码+数据库+往届论文资料，附带启动教程和安装包。 启动教程：https://www.bilibili.com/video/BV1BfB2YYEnS 讲解视频：https://www.bilibili.com/video/BV1BVKMeZEYr 技术栈：Uniapp+Vue.js+SpringBoot+MySQL。 开发工具：Idea+VSCode+微信开发者工具。

    基于SMIC 40nm工艺库的先进芯片技术,SMIC 40nm工艺库技术细节揭秘：引领半导体产业新革命,smic40nm工艺库 ,smic40nm; 工艺库; 芯片制造; 纳米技术,SMIC 40nm

    基于SMIC 40nm工艺库的先进芯片技术,SMIC 40nm工艺库技术细节揭秘：引领半导体产业新革命,smic40nm工艺库 ,smic40nm; 工艺库; 芯片制造; 纳米技术,SMIC 40nm工艺库：领先技术驱动的集成电路设计基础

    2013年上半年软件设计师上午题-真题及答案解析

    2013年上半年软件设计师上午题-真题及答案解析

    淮南市乡镇边界，shp格式

    shp格式，可直接导入arcgis使用

    ROS下的移动机器人路径规划算法：基于强化学习算法DQN、DDPG、SAC及TD3的实践与应用,ROS系统中基于强化学习算法的移动机器人路径规划策略研究：应用DQN、DDPG、SAC及TD3算法,RO

    ROS下的移动机器人路径规划算法：基于强化学习算法DQN、DDPG、SAC及TD3的实践与应用,ROS系统中基于强化学习算法的移动机器人路径规划策略研究：应用DQN、DDPG、SAC及TD3算法,ROS下的移动机器人路径规划算法，使用的是 强化学习算法 DQN DDPG SAC TD3等 ,ROS; 移动机器人; 路径规划算法; DQN; DDPG; SAC; TD3,ROS强化学习移动机器人路径规划算法研究

    粒子群优化算法精准辨识锂电池二阶RC模型参数：高仿真精度下的SOC估计铺垫,粒子群优化算法精准辨识锂电池二阶RC模型参数：仿真验证与SOC估计铺垫,使用粒子群优化算法（PSO）辨识锂电池二阶RC模型参

    粒子群优化算法精准辨识锂电池二阶RC模型参数：高仿真精度下的SOC估计铺垫,粒子群优化算法精准辨识锂电池二阶RC模型参数：仿真验证与SOC估计铺垫,使用粒子群优化算法（PSO）辨识锂电池二阶RC模型参数（附MATLAB代码） 使用粒子群优化算法来辨识锂离子电池二阶RC模型的参数。 将粒子群优化算法寻找到的最优参数代入二阶RC模型进行仿真，经过验证，端电压的估计误差小于0.1%，说明粒子群优化算法辨识得到的参数具有较高的精度，为锂离子电池SOC的估计做铺垫。 ,关键词：粒子群优化算法（PSO）; 锂电池二阶RC模型参数辨识; MATLAB代码; 端电压估计误差; 锂离子电池SOC估计。,PSO算法优化锂电池二阶RC模型参数：高精度仿真与MATLAB代码实现

    selenium环境搭建-谷歌浏览器驱动

    selenium环境搭建-谷歌浏览器驱动

    35页-华为智慧社区商业解决方案.pdf

    在当今科技日新月异的时代，智慧社区的概念正悄然改变着我们的生活方式。它不仅仅是一个居住的空间，更是一个集成了先进科技、便捷服务与人文关怀的综合性生态系统。以下是对智慧社区整体解决方案的精炼融合，旨在展现其知识性、趣味性与吸引力。 一、智慧社区的科技魅力 智慧社区以智能化设备为核心，通过综合运用物联网、大数据、云计算等技术，实现了社区管理的智能化与高效化。门禁系统采用面部识别技术，让居民无需手动操作即可轻松进出；停车管理智能化，不仅提高了停车效率，还大大减少了找车位的烦恼。同时，安防报警系统能够实时监测家中安全状况，一旦有异常情况，立即联动物业进行处理。此外，智能家居系统更是将便捷性发挥到了极致，通过手机APP即可远程控制家中的灯光、窗帘、空调等设备，让居民随时随地享受舒适生活。 视频监控与可视对讲系统的结合，不仅提升了社区的安全系数，还让居民能够实时查看家中情况，与访客进行视频通话，大大增强了居住的安心感。而电子巡更、公共广播等系统的运用，则进一步保障了社区的治安稳定与信息传递的及时性。这些智能化设备的集成运用，不仅提高了社区的管理效率，更让居民感受到了科技带来的便捷与舒适。 二、智慧社区的增值服务与人文关怀 智慧社区不仅仅关注科技的运用，更注重为居民提供多元化的增值服务与人文关怀。社区内设有互动LED像素灯、顶层花园控制喷泉等创意设施，不仅美化了社区环境，还增强了居民的归属感与幸福感。同时，社区还提供了智能家居的可选追加项，如空气净化器、远程监控摄像机等，让居民能够根据自己的需求进行个性化选择。 智慧社区还充分利用大数据技术，对居民的行为数据进行收集与分析，为居民提供精准化的营销服务。无论是周边的商业信息推送，还是个性化的生活建议，都能让居民感受到社区的智慧与贴心。此外，社区还注重培养居民的环保意识与节能意识，通过智能照明、智能温控等系统的运用，鼓励居民节约资源、保护环境。 三、智慧社区的未来发展与无限可能 智慧社区的未来发展充满了无限可能。随着技术的不断进步与创新，智慧社区将朝着更加智能化、融合化的方向发展。比如，利用人工智能技术进行社区管理与服务，将能够进一步提升社区的智能化水平；而5G、物联网等新技术的运用，则将让智慧社区的连接更加紧密、服务更加高效。 同时，智慧社区还将更加注重居民的体验与需求，通过不断优化智能化设备的功能与服务，让居民享受到更加便捷、舒适的生活。未来，智慧社区将成为人们追求高品质生活的重要选择之一，它不仅是一个居住的空间，更是一个融合了科技、服务、人文关怀的综合性生态系统，让人们的生活更加美好、更加精彩。 综上所述，智慧社区整体解决方案以其科技魅力、增值服务与人文关怀以及未来发展潜力，正吸引着越来越多的关注与认可。它不仅能够提升社区的管理效率与居民的生活品质，更能够为社区的可持续发展注入新的活力与动力。

    PowerSettingsExplorer.rar

    PowerSettingsExplorer.rar 电脑的电源管理软件，明白的不多说。自己搜索即可知道。

    2025年开源人工智能：关键参与者与预测.pdf

    deepseek最新资讯，配置方法，使用技巧，持续更新中

    DeepSeek 发布 Janus Pro AI 图像生成器 – 开源且免费.pdf

    deepseek最新资讯、配置方法、使用技巧，持续更新中

    消息中间件rabbitmq-server

    RabbitMQ 是一个开源的消息代理（Message Broker），实现了 AMQP（Advanced Message Queuing Protocol） 协议，用于在分布式系统中实现高效、可靠的消息传递。

    西门子S7-1200与汇川PLC新通信选择：Ethernet IP通信的突破与优势，功能安全及精准同步的创新实践 ,西门子S7-1200与汇川PLC通信新选择：Ethernet IP通信方案亮相，替代

    西门子S7-1200与汇川PLC新通信选择：Ethernet IP通信的突破与优势，功能安全及精准同步的创新实践。,西门子S7-1200与汇川PLC通信新选择：Ethernet IP通信方案亮相，替代Modbus TCP实现更高级功能与安全控制。,西门子PLC和汇川PLC新通信选择-西门子S7-1200 1500系列PLC也开始支持Ethernet IP通信了。 这为西门子系列的PLC和包括汇川AM400 600等Codesys系PLC的通信提供了新的解决方案。 当前两者之间的通信大多采用ModBus TCP通信。 Modbus TCP和EtherNet IP的区别主要是应用层不相同，ModbusTCP的应用层采用Modbus协议，而EtherNetIP采用CIP协议，这两种工业以太网的数据链路层采用的是CSMACCD，因此是标准的以太网，另外，这两种工业以太网的网络层和传输层采用TCPIP协议族。 还有一个区别是，Modbus协议中迄今没有协议来完成功能安全、高精度同步和运功控制等，而EtherNet IP有CIPSatety、ClIP Sync和ClPMotion来

    自适应无迹卡尔曼滤波AUKF算法：系统估计效果展示与特性分析（含MATLAB代码与Excel数据）,自适应无迹卡尔曼滤波AUKF算法：系统估计效果展示与特性分析（含MATLAB代码与Excel数据）

    自适应无迹卡尔曼滤波AUKF算法：系统估计效果展示与特性分析（含MATLAB代码与Excel数据）,自适应无迹卡尔曼滤波AUKF算法：系统估计效果展示与特性分析（含MATLAB代码与Excel数据）,自适应无迹卡尔曼滤波AUKF算法 配套文件包含MATLAB代码+excel数据+学习资料 估计效果与系统特性有关，图片展示为一复杂系统估计效果 ,AUKF算法; MATLAB代码; excel数据; 学习资料; 估计效果; 系统特性。,自适应无迹卡尔曼滤波AUKF算法：MATLAB代码与学习资料

    基于MATLAB Simscape的IGBT开关特性模型：揭示开关损耗、米勒平台及瞬态行为的分析工具,IGBT开关特性模型与MATLAB Simscape模拟：深入理解开关行为及损耗数据,IGBT开关

    基于MATLAB Simscape的IGBT开关特性模型：揭示开关损耗、米勒平台及瞬态行为的分析工具,IGBT开关特性模型与MATLAB Simscape模拟：深入理解开关行为及损耗数据,IGBT开关特性模型，MATLAB Simscape模型。 该模型展示了IGBT的详细的开关模型，用于创建开关损耗列表数据。 有助于理解IGBT米勒平台、瞬态开关行为。 也可以用于MOOSFET。 ,IGBT开关模型; MATLAB Simscape; 开关损耗; 米勒平台; 瞬态开关行为; MOOSFET。,MATLAB Simscape中IGBT精细开关模型：揭示米勒平台与瞬态行为

    基于卷积神经网络CNN的多输入单输出数据回归预测-含详细注释与多种评估指标（R2、MAE、MBE）,基于卷积神经网络CNN的多输入单输出数据回归预测模型详解-附代码注释、指标评估及Excel数据处

    基于卷积神经网络CNN的多输入单输出数据回归预测——含详细注释与多种评估指标（R2、MAE、MBE）,基于卷积神经网络CNN的多输入单输出数据回归预测模型详解——附代码注释、指标评估及Excel数据处理方法,基于卷积神经网络CNN的数据回归预测 多输入单输出预测 代码含详细注释，不负责 数据存入Excel，替方便，指标计算有决定系数R2，平均绝对误差MAE，平均相对误差MBE ,基于卷积神经网络CNN; 数据回归预测; 多输入单输出; 详细注释; Excel存储; 指标计算(R2; MAE; MBE); 不负责。,基于CNN的卷积数据回归预测模型：多输入单输出代码详解与性能评估

    四六级词汇系统 2024免费JAVA微信小程序毕设

    2024免费微信小程序毕业设计成品，包括源码+数据库+往届论文资料，附带启动教程和安装包。 启动教程：https://www.bilibili.com/video/BV1BfB2YYEnS 讲解视频：https://www.bilibili.com/video/BV1BVKMeZEYr 技术栈：Uniapp+Vue.js+SpringBoot+MySQL。 开发工具：Idea+VSCode+微信开发者工具。

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