[Apache Click快速开发]基于Jquery Dialog的Click Dialog组件

在学习Click的时候发现Click中没有对话框组件，于是结合者jquery ui做了一个。

至于Jquery ui中Dialog插件的使用，我就不记录了，官网有详细的demo。

首先我选择基于Click中的AbstractContainer来书写Dialog。

[源码]ClickDialog.java

public class ClickDialog extends AbstractContainer { private boolean modal; private int width; private int height; private String okUrl=""; private String cancelUrl=""; public ClickDialog(String title,String msg,String okUrl,String cancelUrl){ super("jquery-dialog"); this.okUrl = okUrl; this.cancelUrl = cancelUrl; add(new Label("jquery-dialog-label", "<div id='jquery-dialog' title='"+title+"'>"+msg+"</div>")); } @Override public List<Element> getHeadElements() { headElements = super.getHeadElements(); if(headElements!=null){ headElements.add(new CssImport("/js/jqueryui/themes/sunny/jquery.ui.all.css")); headElements.add(new JsImport("/js/jqueryui/jquery-1.6.2.js")); headElements.add(new JsImport("/js/jqueryui/external/jquery.bgiframe-2.1.2.js")); headElements.add(new JsImport("/js/jqueryui/ui/jquery.ui.core.js")); headElements.add(new JsImport("/js/jqueryui/ui/jquery.ui.widget.js")); headElements.add(new JsImport("/js/jqueryui/ui/jquery.ui.mouse.js")); headElements.add(new JsImport("/js/jqueryui/ui/jquery.ui.draggable.js")); headElements.add(new JsImport("/js/jqueryui/ui/jquery.ui.position.js")); headElements.add(new JsImport("/js/jqueryui/ui/jquery.ui.resizable.js")); headElements.add(new JsImport("/js/jqueryui/ui/jquery.ui.dialog.js")); String okScript = okUrl.equals("")?"":"location='"+okUrl+"'"; headElements.add(new JsScript("$(function(){" +"$('#jquery-dialog').dialog({" +"buttons:{" +"Ok:function(){$(this).dialog('close');"+okScript+"}," +"Cancel:function(){$(this).dialog('close');}" +"}" +"})" +";})" )); } return headElements; } public void setOkUrl(String okUrl) { this.okUrl = okUrl; } public void setCancelUrl(String cancelUrl) { this.cancelUrl = cancelUrl; } public void setModal(boolean modal) { this.modal = modal; } public void setWidth(int width) { this.width = width; } public void setHeight(int height) { this.height = height; } }写完自定义dialog类，接下来创建一个Page，初始化dialog，并写一个事件处理器。对于处理dialog中的确定事件，我试了很多方法，最后用actionlink完成了要求。

[源码]Dd.java

<span style="color: #006600;">public class Dd extends org.apache.click.Page { private Form form = new Form("dialog-form"); private ActionLink okLink = new ActionLink("okLink", this, "onOkClick"); public Dd(){ addControl(form); addControl(okLink); form.add(new TextField("dialog-msg", true)); form.add(new Submit("form-sub", "show dialog", this, "onClickSubit")); } public boolean onOkClick(){ addModel("msg","ok is clicked"); return true; } public boolean onClickSubit(){ ClickDialog jd = new ClickDialog("hello", "怎样结合Jquery UI书写自定义Click组件",okLink.getHref(),""); addControl(jd); return false; } }</span>其中的okLink不需要在页面上显示出来，只需要用addControl()将其加入到Page，之后就直接okLink.getHref()获取处理确定事件的url。