[Apache Click快速开发]Click的组件(一)

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文件中编译好,速度很快;基于事件驱动的方式也是不错的。







  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

dyyaries

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值