Home Tutorials Wicket Auto Completer example in Wicket
Questions:Ask|Latest

 
 

Share on Google+Share on Google+

Auto Completer example in Wicket

Advertisement
In the previous example of Wicket you have learned how to make "Hello World" application in Wicket.

Auto Completer example in Wicket

     

In the previous example of Wicket you have learned how to make "Hello World" application in  Wicket. In  this section of Wicket tutorial we are going to describe you an example to create Ajax auto completer in Wicket.

To create Ajax auto completer wicket application we need three files :

  • AutoCompleterApplication.java
  • AutoCompleter.java
  • AutoCompleter.html

AutoCompleter class extends WebPage. In this example we have created an object of Form and this form further consists of AutoCompleteTextField to create Ajax auto complete text field. Here is the full code of AutoCompleter.java as follows:

AutoCompleter.java

package com.roseindia.wicket;

import java.util.ArrayList;
import java.util.Collections;
import java.util.Iterator;
import java.util.List;
import java.util.Locale;

import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.form.AjaxFormSubmitBehavior;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.model.Model;
import org.apache.wicket.util.string.Strings;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.extensions.ajax.markup
   .html.autocomplete.AutoCompleteTextField;


public class  AutoCompleter extends WebPage
{
  public AutoCompleter()
  {
  Form form = new Form("form");
  add(form);

  final AutoCompleteTextField field = 
  new AutoCompleteTextField("auto"new Model(""))
  {
  protected Iterator getChoices(String input)
  {
  if (Strings.isEmpty(input))
 {
 return Collections.EMPTY_LIST.iterator();
  }

  List choices = new ArrayList(10);

 Locale[] locales = Locale.getAvailableLocales();

 for (int i = 0; i < locales.length; i++)
 {
  final Locale locale = locales[i];
  final String country = locale.getDisplayCountry();

if (country.toUpperCase().startsWith(input.toUpperCase()))
 {
  choices.add(country);
  if (choices.size() == 10)
 {
  break;
  }
 }
 }
 return choices.iterator();
 }
  };
  form.add(field);

final Label label = new 
 
Label("selectedValue", field.getModel());
  label.setOutputMarkupId(true);
 form.add(label);
 field.add(new AjaxFormSubmitBehavior(form, "onchange")
 {
  protected void onSubmit(AjaxRequestTarget target)
  {
 target.addComponent(label);
 }

  @Override
 protected void onError(AjaxRequestTarget target)
 {
  }
  });
  }
}

AutoCompleterApplication calls AutoCompleter class when it returns AutoCompleter class via getHomePage() method. Here is the example code as follows:

AutoCompleterApplication.java

package com.roseindia.wicket;

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

public class AutoCompleterApplication 
extends 
WebApplication {

  public AutoCompleterApplication() {
  }
  
  public Class getHomePage(){
  return AutoCompleter.class;  
  }
}

Now in the HTML file the auto completer text field is displayed with the wicket identifier "auto".

AutoCompleter.html

<html>
  <head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
  The textfield below will autocomplete country names
  <br><hr>
  <form wicket:id="form">
 Selected value is: <span wicket:id="selectedValue"></span>
 <br/>

  Country: <input type="text" wicket:id="auto" size="20"/>
 </form>
  </body>
</html>

To run this example one more thing you need to do is to create entry of AutoCompleteraApplication in XML file web.xml. Following lines of code is to be written in web.xml

<filter>
  <filter-name>AutoCompleterApplication</filter-name>
  <filter-class>org.apache.wicket.protocol.http.WicketFilter</filter-class>
   <init-param>
   <param-name>
  applicationClassName
  </param-name>
  <param-value>
   com.roseindia.wicket.AutoCompleterApplication
  </param-value>
   </init-param>
   <init-param>
  <param-name>debug</param-name>
  <param-value>2</param-value>
   </init-param>
</filter>
<filter-mapping>
   <filter-name>
  AutoCompleterApplication
  </filter-name>
   <url-pattern>
  /wicket/ajaxauto/*
   </url-pattern>
</filter-mapping>

Output:

Download Source Code

     

Advertisement

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: October 6, 2008

Related Tutorials

Ask Questions?    Discuss: Auto Completer example in Wicket   View All Comments

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
DMCA.com