Click的组件很多,功能强大,能满足绝大多数开发情况。
您还可以书写自定义组件,当然这会花费您更多的时间,由您决定。 我们首先看一下Click自带的组件。
我试图用一个表单来尝试显示出平常我们使用的html元素,但是发现它远不止这些,比如还有html中没有的Menu,PickList,EmialField,TablePaginator等等。
HelloPage.java
package com.apc.pages;
import java.util.ArrayList;
import java.util.List;
import org.apache.click.control.ActionLink;
import org.apache.click.control.FileField;
import org.apache.click.control.Form;
import org.apache.click.control.Option;
import org.apache.click.control.PasswordField;
import org.apache.click.control.Radio;
import org.apache.click.control.RadioGroup;
import org.apache.click.control.Select;
import org.apache.click.control.Submit;
import org.apache.click.control.TextField;
import org.apache.click.dataprovider.DataProvider;
import org.apache.click.extras.control.CheckList;
public class HelloControls extends org.apache.click.Page {
private Form form = new Form("controlForm");
private TextField tf;
private PasswordField pf;
private Select select;
private Select multiSelect;
private CheckList cl;
private RadioGroup rg;
private FileField ff;
public ActionLink al = new ActionLink("al", this, "onActionLinkTrigger");
private void init(){
//textfield
tf = new TextField("username", "账号", true);
tf.setMinLength(5);
tf.setMaxLength(16);
//paswordfield
pf = new PasswordField("passwd", "密码", false);
tf.setMinLength(6);
//select
select = new Select("gender", "性别");
select.setDataProvider(new DataProvider<Option>() {
public List<Option> getData() {
List<Option> options = new ArrayList<Option>();
options.add(new Option("男", "男"));
options.add(new Option("女", "女"));
return options;
}
});
select.setValue("男");
//multi-select
multiSelect = new Select("hobby", "爱好");
multiSelect.setMultiple(true);
multiSelect.setDataProvider(new DataProvider<Option>() {
public List<Option> getData() {
List<Option> options = new ArrayList<Option>();
options.add(new Option("看电影","看电影"));
options.add(new Option("踢足球", "踢足球"));
options.add(new Option("看书", "看书"));
return options;
}
});
multiSelect.setDefaultOption(Option.EMPTY_OPTION);
//radio
rg = new RadioGroup("marriage");
rg.add(new Radio("未婚", "未婚"));
rg.add(new Radio("已婚", "已婚"));
rg.setValue("未婚");
//checkbox
cl = new CheckList("getway","您从哪里获知我们");
cl.addAll(new String[]{"网络","电视","朋友","其他"});
//filefield
ff = new FileField("photo", "您的照片");
}
public HelloControls(){
init();
addControl(form);
form.add(tf);
form.add(pf);
form.add(select);
form.add(multiSelect);
form.add(rg);
form.add(cl);
form.add(ff);
form.add(new Submit("保存",this,"onSubmitClick"));
form.add(new Submit("取消", this, "onCancelClick"));
}
public boolean onSubmitClick(){
return false;
}
public boolean onCancelClick(){
return true;
}
public boolean onActionLinkTrigger(){
addModel("msg", "您点击了actionLink");
return false;
}
}
Page中添加了1个form表单,表单中分别添加了TextField,PasswordField,Select,RadioGroup,CheckList,FileField,ActionLink
helloPage.htm
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=UTF-8">
<title>Blank</title>
$headElements
</head>
<body>
<div><a href="$al.href">Learn more</a></div>
<div>$controlForm</div>
#if($msg)
<div style="width:300px;border:1px solid gray;background-color:orange;padding:5px">$msg</div>
#end
$jsElements
</body>
</html>
最终在Safari中请求helloPage您会看到
初始化TextField的时候可以添加第三个参数来表示需要非空验证,如 tf = new TextField("username", "账号", true); 所以,当您未填写任何信息的时候,点击提交会出现错误提示,这就为我们节省了很多去写验证方法的事件,看看它的提示信息是怎样的吧.。
我还加入了最简单的actionlink事件,点击上方的 learn more 下面就会出现msg的提示,你所要做的只是在处理方法中用addModel,将消息添加到model中。
总结:Click的组件直接在java文件中编译好,速度很快;基于事件驱动的方式也是不错的。