Facebook style auto suggest/complete component in Vaadin/GWT

2011-08-09T10:56:00.000-07:00

Facebook style auto suggest/complete component in Vaadin - VaadinAutoComplete

Most of the developers are looking for the facebook style auto suggest/complete textbox. Here is the solution for them.

Actually in facebook it is not an html textbox but it’s a combination of html components that look like a textbox.

VaadinAutoComplete is a vaadin add-on that provides facebook style auto complete features that you can easily integrate to your existing applications.

It is designed and implemented by considering use in existing applications so that you can use it as you are using any other Vaadin component like textbox.

How to use VaadinAutoComplete in your application

To use VaadinAutoComplete into your application, first you have to write a bean (POJO) to encapsulate the information of the entity on which you are going to provide auto complete feature.

For example, consider you are going to provide auto complete feature for employee selection in which employee name and email address will be displayed in the textbox like “emp_first_name, emp_last_name <emp_email_address>” as displayed in following image.

Then in this you have to define one EmployeeBean class that will encapsulate the information of the employee.

Consider your EmployeeBean as below

package com;

public class EmployeeBean

{

private String empNo;

private String firstName;

private String lastName;

private String emailId;

public String getEmpNo()

{

return empNo;

}

public void setEmpNo(String empNo)

{

this.empNo = empNo;

}

public String getFirstName()

{

return firstName;

}

public void setFirstName(String firstName)

{

this.firstName = firstName;

}

public String getLastName()

{

return lastName;

}

public void setLastName(String lastName)

{

this.lastName = lastName;

}

public String getEmailId()

{

return emailId;

}

public void setEmailId(String emailId)

{

this.emailId = emailId;

}

Now your EmployeeBean must implement com.jtechnosoft.autosuggest.client.model.ValueObject as below so that it can be used in VaadinAutoSuggest add-on.

For this you have to implement 2 methods of ValueObject.

Now your EmployeeBean will look like this.

package com;

import com.jtechnosoft.autosuggest.client.model.ValueObject;

public class EmployeeBean implements ValueObject

{

private String empNo;

private String firstName;

private String lastName;

private String emailAddress;

/***

* All the getter/setter methods will go here as above

/**

* this method must return an unique identifier for this bean..

* we are just returning employee number

public String getId()

{

return this.empNo;

}

/**

* the return value of this method will be displayed in auto suggest

textbox searched value..

* we are returning the string like "employee_first_name,

employee_last_name <employee_email_address>"

public String getValue()

{

return this.firstName+","+this.lastName+"

<"+this.emailAddress+">";

}

There are 2 ways in which you can use VaadinAutoSuggest.

1) You will provide a list (java.util.ArrayList) of ValueObject (in above example, EmployeeBean) to the VaadinAutoSuggest. This list will be sent to the client (browser) only once. Every time when user types into the auto complete textbox, component will get the values to be suggested from the list resides at client side. It will not make a server hit to get the values. So this is called a lazy loading.

2) You will provide an instance of com.jtechnosoft.autosuggest.server.util.AutoSuggestDataProvider to the VaadinAutoSuggest that will implement getData method of it. In this component will make a server hit every time user types in the auto suggest text box. So it serves live suggestions to the user.

These 2 ways are described with examples as below.

1) Providing java.util.List<ValueObject> to the component and not making server hit every time user types in the auto suggest textbox.

Consider you are going to add the component into a vaadin window.

public class AutoSuggestTestWindow extends Window

{

VerticalLayout verticalLayout = null;

public AutoSuggestTestWindow()

{

this.setWidth("500px");

this.setHeight("400px");

verticalLayout = (VerticalLayout) this.getContent();

verticalLayout.setSizeFull();

/***

* get data here… from database, file..etc

* List<ValueObject> data = getData();

//creating auto suggest component here… and passing data

AutoSuggest autoSuggest = new AutoSuggest(data);

this.addComponent(autoSuggest);

}

2) Providing an instance of com.jtechnosoft.autosuggest.server.util.AutoSuggestDataProvider to the VaadinAutoSuggest and allowing a component to make a server hit every time user types into auto complete textbox to get the live values.

For this, you have to implement interface com.jtechnosoft.autosuggest.server.util.AutoSuggestDataProvider as below.

public class MyDataProvider implements AutoSuggestDataProvider

{

private static List<ValueObject> data = new ArrayList<ValueObject>();

static

{

//here we are reading the data to be displayed in auto complete from file..

//you can modify the method to read data from database.. or from any other source

data = CommonUtil.getDataFromFile();

}

/**

* this method will be called by VaadinAutoComplete component to get live data..

* it will pass user entered search text to this method as a parameter

public List<ValueObject> getData(String searchText)

{

List<ValueObject> list = filterData(searchText);

return list;

}

private List<ValueObject> filterData(String searchText)

{

List<ValueObject> filterList = null;

if(data!=null && searchText!=null && !searchText.trim().isEmpty())

{

searchText = searchText.trim();

filterList = new ArrayList<ValueObject>();

for (ValueObject valueObject : data)

{

if(valueObject.getValue()!=null &&

valueObject.getValue().toLowerCase().contains(searchText.toLowerCase()))

{

filterList.add(valueObject);

}

return filterList;

}

You have to provide AutoSuggestDataProvider to VaadinAutoComplete component as below.

You can get selected values from component using autoSuggest.getSelectedData() method as shown in following example.

public class AutoSuggestTestWindow extends Window implements ClickListener

{

VerticalLayout verticalLayout = null;

AutoSuggest autoSuggest = null;

public AutoSuggestTestWindow()

{

this.setWidth("500px");

this.setHeight("400px");

verticalLayout = (VerticalLayout) this.getContent();

verticalLayout.setSizeFull();

//creating auto suggest component here…

autoSuggest = new AutoSuggest();

autoSuggest.setAutoSuggestDataProvider(new MyDataProvider()); //passing data provider

this.addComponent(autoSuggest);

Button btnGetSelectedData = new Button("Get Selected Data");

btnGetSelectedData.addListener(this);

this.addComponent(btnGetSelectedData);

}

public void buttonClick(ClickEvent event)

{

//getting selected values from component

List<ValueObject> selectedDataList = autoSuggest.getSelectedData();

System.out.println("selectedDataList = "+selectedDataList);

}

Other features

Adding custom values :

You can add custom value not in the suggestion list into the textbox as below.

Lazy Loading Status :

You can turn on the feature to display the status of fetching values from server as below.

This component is also available in GWT. As Vaadin is using GWT for rendering.

For more information about VaadinAutoComplete component/GWT component or to have a live demo contact me at: rohitprajapati54@gmail.com

ZK vs Vaadin

2011-05-23T09:14:00.000-07:00

I have developed a webmail system ZkMail and VaadinMail by using ZK and Vaadin frameworks. I have found some points while development regarding ZK and Vaadin that I want to share.

ZK supports XML (zul, zhtml) to create user interface, while Vaadin is based on pure java. JAVA code must be written in Vaadin to create UI.
So development in ZK is faster than Vaadin as developer can use xml tag, attributes to create user interface.
ZK users its own proprietary engine to render user interface. Vaadin uses GWT. So in Vaadin, there are lots of GWT widgets available that can be reused.
Vaadin is released under Apache 2.0 license. ZK comes under community edition (limited edition) under LGPL and commercial license for full version. Although, ZK limited edition provides so many features/functionalities that is enough to develop any application.
I found Vaadin more reliable than ZK. In ZK some components like FCK editor behavior is random and creates problems which is not possible to debug.
Both ZK and Vaadin support custom components. ZK support macro components for that and Vaadin provides com.vaadin.ui.CustomComponent.
Both Vaadin and ZK support Drag & Drop support.
ZK supports integration with other technologies like spring and others which Vaadin does not provide.
Vaadin is integrated into Liferay portal. So Vaadin applications can be easily used in liferay. Whereas there is no official integration of ZK provided with such kind of portal. Although ZK can be integrated with Liferay to be use as portlet with some effort as i have already done.
ZK can be integrated in legacy applications (html/jsp based) easily. Whereas Vaadin can not be used with such kind of legacy applications. Such applications should be rewritten entirely in Vaadin. In ZK, html files can be renamed to zhtml to leverage the power of zk in html. We can also include html code into ZK (zul) page easily by using html tag of zul.
ZK CE provides robust server push facility based on client polling and commercial edition provides comet based server push. Whereas in Vaadin there is an experimental plugin ICEPush that provides server push. Also ICEPush add-on requires that vaadin application’s url-pattern must be ‘/*’ in web.xml. In other cases it is not working. So we can not use other resources like jsp, html when using the ICEPush add-on.
ZK and Vaadin both provide rich theme support. ZK provides ZKThemer by which we can generate different theme. ZKThemer automatically creates/updates CSS and images to generate new theme. In Vaadin no such tool is available. Although there are different themes jar files available in vaadin directory, but those themes are not consistent with the vaadin default theme as applying them modifies layouts/components and do not render the same output as default theme.

So from a user interface perspective, ZK has a rich set of user interface components than Vaadin and it is easy for developers to use. And also from a productivity point of view ZK is best.
Everything in Vaadin is also provided by ZK. But reverse is not true.
The only thing in using Vaadin is that it is based on GWT. There are lots of live applications that are using GWT. So it is proven.
Whereas ZK uses it own proprietary client side for rendering.

Reference:
http://books.zkoss.org/wiki/Small_Talks/2006/July/Work_with_Legacy_Web_Applications,_Part_I_-_Servlets_and_Forms
http://books.zkoss.org/wiki/Small_Talks/2006/July/Work_with_Legacy_Web_Applications,_Part_II_-_JSP
http://vaadin.com/directory#addon/icepush
http://www.zkoss.org/product/edition.dsp
http://jtechnoprojects.blogspot.com/p/webmail-system-with-chating-ajax-based.html
http://jtechnoprojects.blogspot.com/p/vaadinmail-webmail-system.html

VaadinMail Webmail System with chat module

2011-05-02T09:10:00.001-07:00

A new webmail system VaadinMail in JAVA has been developed like ZKMail webmail system. It includes all the features of a complete webmail system including multi-tabbed chat module like in yahoo. It has been developed using Vaadin 6.5.7 RIA framework. For complete details about VaadinMail click here.

2011-05-02T09:03:00.000-07:00

ZKMail has been upgraded to ZK 5.0.6. It includes new breeze theme. For complete details about ZkMail webmail system click here.

JAVA/J2EE Projects

Facebook style auto suggest/complete component in Vaadin/GWT

ZK vs Vaadin

VaadinMail Webmail System with chat module