Apache wicket text field example

If you are creating a first wicket project , then  please go through my earlier tutorial how to configure and build apache wicket?. In this tutorial, let us see how to design a wicket web form using TextField component to accept inputs.

In this example, let us design a employee form accepting employee code , employee name and mobile number where code and name are mandatory.

wicket text 1


The following code shows how to create a basic Wicket form with 3 input TextFields in a page


package com.javaonline;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.form.TextField;
import org.apache.wicket.model.Model;
import org.apache.wicket.request.mapper.parameter.PageParameters;

	public class EmployeeInputPage extends WebPage {
		Form<?> form = null;

		public EmployeeInputPage(final PageParameters page) throws Exception {


		    final TextField code = new TextField("empCode", Model.of(""));
			final TextField name = new TextField("name",  Model.of(""));
			 final  TextField mobile = new TextField("mobile", Model.of(""));

			form = new Form("empForm") {

				public void onSubmit() {

					final String empCode = (String) code.getModelObject();
					final String empName = (String) name.getModelObject();
					final String mobNo = (String) mobile.getModelObject();

					page.add("empCode", empCode);
					page.add("name", empName);
					if (mobNo==null)
						page.add("mobile", "");
						page.add("mobile", mobNo);

						try {
							setResponsePage(new Acknowledgement(page));
						} catch (Exception e) {
							// TODO Auto-generated catch block




The corresponding EmployeeInputPage.html is given below

  		<title>Employee Form</title>
		<form id="empForm1" method="get" wicket:id="empForm">
    			<legend style="color: #F90">Employee Input</legend>
    				<span>Employee Code: </span><input wicket:id="empCode" type="text" id="empCode1" /><br/>
    				<span>Employee Name: </span><input wicket:id="name" type="text" id="name1" /><br/>
    				<span>Mobile Number: </span><input wicket:id="mobile" type="text" id="mobile1" />
    					<input type="submit" name="Submit" value="Submit"/>

The Acknowledgement java page which retrieves empCode, name, mobile parameters sent by the previous page and puts in labels is given below


package com.javaonline;

import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.request.mapper.parameter.PageParameters;

public class Acknowledgement extends WebPage {

	public Acknowledgement(final PageParameters page) throws Exception {

			Label code = new Label("code", page.get("empCode"));
			Label name = new Label("name", page.get("name"));
			Label mobile = new Label("mobile", page.get("mobile"));



The corresponding Acknowledgement.html is given below

    <span>Employee Code :</span><span wicket:id="code"></span><br/>
    <span> Employee Name :</span><span wicket:id="name"></span><br/>
    <span> Mobile Number :</span><span wicket:id="mobile"></span>

and the Starter page to load home page is given below

package com.javaonline;

import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.protocol.http.WebApplication;

public class WicketStarter extends WebApplication
* @see org.apache.wicket.Application#getHomePage()
public Class&lt;? extends WebPage&gt; getHomePage()
return EmployeeInputPage.class;

public void init()


Add the below filter lines in web.xml


For the complete web.xml, please visit ….
Running the above project you will get the above page.

Fill the details  and Submit

wicket text2

Output :

wicket text3
Reference : apache wicket form

Leave a Reply