创建基于wicket的web项目(二)-常用控件

wicket是一个java web框架,用html描述ui,并将具有特殊标记的html元素定义为ui控件,在java类中通过操作这些ui控件以控制其输出行为和样式等.
1.wicket框架是一个遵循标准MVC结构的web框架.
  model:使用IModel来存取数据.
  view:使用标准的html模板.
  control:使用控件Component来处理各种业务,并负责将model层的数据映射到View层.
  这里的IModel其实并不代表真正的数据模型,它只是提供了对外接口,需要通过getDefaultModelObject()来取得真正的数据.
2.wicket项目部署.
  wicket项目的部署与通常的Web程序区别并不大,稍微有一点不同之处是它的运行状态分为开发模式和部署模式.
  这两种模式的区别是:在开发模式下,wicket会不断的监听资源文件的改变,如html文件或者properties文件,以便在资源改变后能够及时
  载入相关的资源.但是这种对资源的监听会降低系统的性能.所以,项目在开发阶段使用开发模式,在真正部署的时候使用部署模式.
3.下面通过一个项目实例来简单认识一下wicket中常用的控件.
  a.创建名称为wicket-demo的web项目,并导入必须的jar包.

  b.创建java类,直接看代码MyResume.java.

   

<span style="font-size:12px;">package com.ilucky.wicket;

import java.util.ArrayList;
import java.util.List;

import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.form.Button;
import org.apache.wicket.markup.html.form.CheckBoxMultipleChoice;
import org.apache.wicket.markup.html.form.DropDownChoice;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.form.RadioChoice;
import org.apache.wicket.markup.html.form.TextArea;
import org.apache.wicket.markup.html.form.TextField;
import org.apache.wicket.model.Model;

/**
 * @author IluckySi
 * @date 20140401
 */
public class MyResume extends WebPage {

	private static final long serialVersionUID = 1L;

	@SuppressWarnings({ "rawtypes", "unchecked", "unused" })
	public MyResume() {
		Form form = new Form("form");
		Label title = new Label("title", "简历");
		Label usernameLabel = new Label("usernameLabel", "姓名");
		Label sexLabel = new Label("sexLabel", "性别");
		Label ageLabel = new Label("ageLabel", "年龄" );
		Label areaLabel = new Label("areaLabel", "地区");
		Label emailLabel = new Label("emailLabel", "邮箱");
		Label phoneLabel = new Label("phoneLabel", "电话");
		Label hobbyLabel = new Label("hobbyLabel", "爱好");
		Label profileLabel = new Label("profileLabel", "简介");
		Label registerLabel = new Label("registerLabel", "提交");
		final TextField usernameTextField = new TextField("usernameTextField", Model.of());
		List<String> sexList = new ArrayList<String>();
		sexList.add("男");
		sexList.add("女");
		final RadioChoice sexRadioChoice = new RadioChoice("sexRadioChoice", Model.of(), sexList);
		final TextField ageTextField = new TextField("ageTextField", Model.of());
		List<String> provienceList = new ArrayList<String>();
		provienceList.add("河北省");
		provienceList.add("河南省");
		List<String> cityList = new ArrayList<String>();
		cityList.add("石家庄");
		cityList.add("郑州市");
		cityList.add("保定市");
		cityList.add("洛阳市");
		final DropDownChoice provienceDropDownChoice = new DropDownChoice("provienceDropDownChoice", Model.of(), provienceList);
		final DropDownChoice cityDropDownChoice = new DropDownChoice("cityDropDownChoice", Model.of(), cityList);
		final TextField phoneTextField = new TextField("phoneTextField", Model.of());
		final TextField emailTextField = new TextField("emailTextField", Model.of());
		List<String> hobbyList = new ArrayList<String>();
		hobbyList.add("歌曲");
		hobbyList.add("电影");
		hobbyList.add("游泳");
		hobbyList.add("乒乓球");
		final CheckBoxMultipleChoice hobbyCheckBoxMultipleChoice = new CheckBoxMultipleChoice("hobbyCheckBoxMultipleChoice", Model.of(), hobbyList);
		final TextArea profileTextArea = new TextArea("profileTextArea", Model.of());
		Button save = new Button("save") {
			private static final long serialVersionUID = 1L;

			public void onSubmit() {
				User user = new User();
				if(usernameTextField.getDefaultModelObject() != null) {
					user.setUsername(usernameTextField.getDefaultModelObject().toString());
				}
				if(sexRadioChoice.getDefaultModelObject() != null) {
					user.setSex(sexRadioChoice.getDefaultModelObject().toString());
				}
				if(ageTextField.getDefaultModelObject() != null) {
					user.setAge(Integer.parseInt(ageTextField.getDefaultModelObject().toString()));
				}
				if(provienceDropDownChoice.getDefaultModelObject() != null) {
					String area = provienceDropDownChoice.getDefaultModelObject().toString();
					if(cityDropDownChoice.getDefaultModelObject() != null) {
						area += "," + cityDropDownChoice.getDefaultModelObject().toString();
					}
					user.setArea(area);
				}
				if(phoneTextField.getDefaultModelObject() != null) {
					user.setPhone(phoneTextField.getDefaultModelObject().toString());
				}
				if(emailTextField.getDefaultModelObject() != null) {
					user.setEmail(emailTextField.getDefaultModelObject().toString());
				}
				if(hobbyCheckBoxMultipleChoice.getDefaultModelObject() != null) {
					user.setHobby(hobbyCheckBoxMultipleChoice.getDefaultModelObject().toString());
				}
				if(profileTextArea.getDefaultModelObject() != null) {
					user.setProfile(profileTextArea.getDefaultModelObject().toString());
				}
				System.out.println("服务器收到用户简历信息(" + user.toString() +")");
			}
		};
		form.add(title, usernameLabel, sexLabel, ageLabel, areaLabel, phoneLabel, emailLabel, hobbyLabel, profileLabel);
		form.add(usernameTextField, sexRadioChoice, ageTextField, provienceDropDownChoice, cityDropDownChoice,
				phoneTextField, emailTextField, hobbyCheckBoxMultipleChoice, profileTextArea);
		form.add(save);
		this.add(form);
	}
}
/**
输出结果:
服务器收到用户简历信息(用户名:1*性别:男*年龄:2*地区:河南省,洛阳市*电话:3*邮箱:4*爱好:[歌曲, 电影]*简介:5)
**/
</span>

<span style="font-size:12px;">package com.ilucky.wicket;

/**
 * @author IluckySi
 * @date 20140401
 */
public class User {

	private String username;
	
	private String sex;
	
	private int age;
	
	private String area;
	
	private String phone;
	
	private String email;
	
	private String hobby;
	
	private String profile;
	
	public String getUsername() {
		return username;
	}

	public void setUsername(String username) {
		this.username = username;
	}

	public String getSex() {
		return sex;
	}

	public void setSex(String sex) {
		this.sex = sex;
	}

	public int getAge() {
		return age;
	}

	public void setAge(int age) {
		this.age = age;
	}

	public String getArea() {
		return area;
	}

	public void setArea(String area) {
		this.area = area;
	}

	public String getPhone() {
		return phone;
	}

	public void setPhone(String phone) {
		this.phone = phone;
	}

	public String getEmail() {
		return email;
	}

	public void setEmail(String email) {
		this.email = email;
	}
	
	public String getHobby() {
		return hobby;
	}

	public void setHobby(String hobby) {
		this.hobby = hobby;
	}

	public String getProfile() {
		return profile;
	}

	public void setProfile(String profile) {
		this.profile = profile;
	}

	public String toString() {
		return "用户名:" + username + "*性别:"  + sex + "*年龄:" + age +"*地区:" + area +"*电话:" + phone +"*邮箱:" + email
				+ "*爱好:" + hobby + "*简介:" + profile;
	}
}
</span>

    在java类中,每个控件中都有一个Model.of(),意思是此控件的数据源是此控件本身,当然也可以通过Model.of("test")为其初始化默认值.
    与Model.of()对应的是通过给控件绑定Model提供数据源,后面会讲到,这里先不做介绍.

  c.创建html模板,直接看代码MyResume.html.

<span style="font-size:12px;"><html>
	<head>
		<title>MyResume.html</title>
	</head>
<body>
	<form wicket:id="form">
		<table width="60%" align="center">
			<tr align="center">
				<td><h4 wicket:id="title"></h4></td>
			</tr>
		</table>
		<table align="center" width="60%" border="1">
			<tr align="center">
				<td><div wicket:id="usernameLabel"></div></td>
				<td><input wicket:id="usernameTextField" type="text"></input></td>
				<td><div wicket:id="sexLabel"></div></td>
				<td><div wicket:id="sexRadioChoice"></div></td>
			</tr>
			<tr align="center">
				<td><div wicket:id="ageLabel"></div></td>
				<td><input wicket:id="ageTextField" type="text"></input></td>
				<td><div wicket:id="areaLabel"></div></td>
				<td><select wicket:id="provienceDropDownChoice"></select>
						<select wicket:id="cityDropDownChoice"></select>
				</td>
			</tr>
			<tr align="center">
				<td><div wicket:id="phoneLabel"></div></td>
				<td><input wicket:id="phoneTextField" type="text"></input></td>
				<td><div wicket:id="emailLabel"></div></td>
				<td><input wicket:id="emailTextField" type="text"></input></td>
			</tr>
			<tr align="center">
				<td><div wicket:id="hobbyLabel"></div></td>
				<td><div wicket:id="hobbyCheckBoxMultipleChoice" type="checkbox"></div></td>
				<td><div wicket:id="profileLabel"></div></td>
				<td><textarea wicket:id="profileTextArea"  cols="20"  rows="4"></textarea></td>
			</tr>
		</table>
		<table align="center">
			<tr align="center">
				<td><input type="submit"  wicket:id="save"  value="save"></input></td>
			</tr>
		</table>
	</form>
</body>
</html>
</span>

  d.创建Application的实现类.

    通过Application类中的getHomePage方法可以定义用户请求时的默认页面,直接看代码WicketApplication.

<span style="font-size:12px;">package com.ilucky.wicket;

import org.apache.wicket.Page;
import org.apache.wicket.RuntimeConfigurationType;
import org.apache.wicket.protocol.http.WebApplication;

/**
 * @author IluckySi
 * @date 20140401
 */
public class WicketApplication extends WebApplication {

	public Class<? extends Page> getHomePage() {
		return MyResume.class;
	}
	
	// wicket项目运行状态分为开发模式和部署模式.
	@Override
	public RuntimeConfigurationType getConfigurationType() {
		return RuntimeConfigurationType.DEVELOPMENT;
		//return RuntimeConfigurationType.DEPLOYMENT; 
	}
}
</span>

    在WicketApplication类中,还可以通过getConfigurationType方法设置了项目的运行状态模式.
  e.配置web.xml,在web.xml文件中为wicket的入口配置映射,其实wicket就像struts一样,通过filter截获请求,

    然后将截获的请求交给Application的实现类处理,从而跳转到Application实现类里配置的默认页面.

<span style="font-size:12px;"><?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
	<display-name>wicket-demo</display-name>
	 
	 <filter>
        <filter-name>wicketFilter</filter-name>
        <filter-class>org.apache.wicket.protocol.http.WicketFilter</filter-class>
        <init-param>
            <param-name>applicationClassName</param-name>
            <param-value>com.ilucky.wicket.WicketApplication</param-value>
        </init-param>
    </filter>
    
    <filter-mapping>
        <filter-name>wicketFilter</filter-name>
        <url-pattern>/w/*</url-pattern>
    </filter-mapping>
</web-app>
</span>

  f.完成上面的步骤后,部署wicket-demo项目并启动,就可以通过http://127.0.0.1:8080/wicket-demo/w/址访问了.

注:本实例用到的控件有:Label,TextField,RadioChoice,DropDownChoice,CheckBoxMultipleChoice,TextArea和Button.