创建基于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项目运行状态分为开发模式和部署模式.@Overridepublic 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.