Vaadin Touchkit vs ZK Mobile vs platform specific mobile applications

I was exploring vaadin and zk technologies for mobile devices and found these 2 technologies for it : Vaadin Touchkit and ZK Mobile.and found some below interesting points in terms of different development aspects that one should consider before using these technologies.

NOTE: I think ZK Mobile is obsolete. and not used by anyone as of now. It was released in 2008 i think and then not been upgraded.

1) Scope of Mobile Applications:
Today mobile applications comes in different categories and functionalities. So before using any Vaadin touchkit or ZK Mobile, application scope should be defined properly.

If your application needs to be native application in any platform like android, ios or java, then you should not use these technologies for development. What i mean by native mobile application is an application that requires to use OS features like notifications, alarm services, account services etc...
If your application requires to use any of the features provided by underlying operating system on which application is going to run, then Vaadin Touchkit or ZK Mobile will not help.

ZK mobile and Vaadin Touchkit are mainly developed for building web applications for mobile devices.

2) Productivity:
If you have already a web application developed in ZK or Vaadin, and you want to have it for mobile device, then you can do it easily by Vaadin Touchkit or ZK Mobile.

Your existing web application might have very rich UI which is developed for desktop browsers, which might not be handled by your mobile browser. So you can use Vaadin Touchkit or ZK Mobile to build mobile specific web app out of it easily.

In this you can use most of your existing backend logic.

But if you are planning to build a mobile application that would require to use mobile platform specific features then these technologies might not help. In that case you have to build OS specific mobile applications.

So if you are planning to develop a mobile web application, then ZK Mobile or Vaadin Touchkit are best. and will offer a great productivity.

3) User Experience:
Platform specific mobile application will definitely offer a rich and smooth user experience than Vaadin touchkit or ZK Mobile.

Vaadin Touchkit also offers very good user experience and provides wide range of UI components to apps.
Its default iOS theme provide almost iOS like UI and it also offers many other themes too.  
But this will not run as smooth as platform specific mobile apps. as ultimately it will not completely leverage the real power of mobile platform features as finally it is going to run in a mobile web browser. as compared to native mobile apps.

Zk Mobile supports very few UI components like Button, Frame, Label, Image, Textbox.. It has not been upgraded for a long time.
ZK Mobile also requires an application on mobile devices to run ZK Mobile apps. ZK Mobile apps are deployed on web servers like tomcat, jboss, weblogic or other. and to run those applications on mobile device it will require an application developed by ZK Team.
For example, to run ZK Mobile Apps on android, you have to install zkand.apk android application on your android phone. This zkand.apk application will act as a browser for ZK Mobile Apps.

4) Learning Curve:
If you are a vaadin developer then Vaadin Touchkit will be very easy to use. and if you are a ZK developer then there is no learning curve for this.
You can easily use these technologies if you have a development background on ZK or Vaadin.

If you dont have an experience in ZK or Vaadin. and wanted to build a fresh application then i would suggest to learn and build platform specific mobile applications. i mean android or iOS or J2ME. This way there will not be any limitations in providing any kind of feature.

And for android, if you already worked in AWT/Swing, then it would be very easy to learn and build an android application.

5) Cost:
ZK Mobile is free to use. You don't have to purchase any license to use it.

Vaadin Touchkit is not free. Its license price starts from 750USD.

Platform specific mobile apps can be developed freely if you know how to build it using android/iOS/J2ME etc.. There is no license to buy for this.

For comparison between ZK framework and Vaadin Framework visit blog post: Zk Vs Vaadin

Please correct me by posting your comments if anything seems wrong in above content.

References:
https://vaadin.com/home
https://vaadin.com/add-ons/touchkit
https://vaadin.com/directory#addon/vaadin-touchkit
http://www.zkoss.org/product/zk
http://www.zkoss.org/product/zkmobile
http://java.com/en/download/faq/whatis_j2me.xml
http://www.oracle.com/technetwork/java/javame/index.html
http://www.android.com/
http://developer.android.com/index.html
http://www.apple.com/ios/
http://www.javaworld.com/javaworld/jw-07-1996/jw-07-awt.html
http://docs.oracle.com/javase/tutorial/uiswing/
http://sourceforge.net/projects/zk1/files/ZK%20Mobile%20Document/zkmob-doc-0.8.10/ZKMobile-quickstart-0.8.10.pdf/download?use_mirror=citylan&download=
http://sourceforge.net/projects/zk1/files/ZK%20Mobile%20for%20Android%20Document/zkand-doc-0.8.2/ZKMobile-for-Android-quickstart.pdf-0.8.2.pdf/download

Cross Origin Resource Sharing (CORS) for Java Web Applications

When we have to include web resource from different origins then CORS comes into picture.

CORS defines how browsers and servers communicate when accessing sources across origins using HTTP headers to allow both the browser and the server to know enough about each other to determine if the request or response should succeed or fail.

Consider we have a web app app1 and app2. If we have to include resource from app2 into app1 using ajax, then we have to implement CORS into app2 web application.

Because when we make an ajax call from app1 it will get converted to CORS request call by browser. so those request should be handled at app2.

To implement it we have to configure 1 filter into app2.

com.thetransactioncompany.cors.CORSFilter

To include above filter you have to download and copy jar cors-filter-1.3.2.jar into app2/webcontent/WEB-INF/lib.

download it from : http://software.dzhuvinov.com/cors-filter-configuration.html

then you have to configure filter into web.xml

<filter>
<filter-name>CORS</filter-name>
<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>

<init-param>
<param-name>cors.supportedHeaders</param-name>
<param-value>x-requested-with</param-value>
</init-param>
</filter>

<filter-mapping>
<filter-name>CORS</filter-name>
<url-pattern>*.do</url-pattern>
</filter-mapping>

Example:

Consider you have 2 web application whose context roots are app1 and app2.

You have app1/page1.html and you want to insert the content from app2/page2.html to app1/page1.html.

app2/page2.html

<html>
<body>
app2 page2.html content here
</body>
</html>

app1/page1.html

<html>
<head>
<script type="text/javascript" src="./js/jquery-1.6.2.min.js"></script>

<script>
jQuery(document).ready(function(){
jQuery("#div1").load("/app2/page2.html");
});
</script>
</head>
<body>
<div1 id="div1">
</div1>
</body>
</html>

Above code will insert the content from app2/page2.html into div1 of app1/page1.html.

For java web application, make sure you have filter mapping for html as below for above example to work.

<filter-mapping>
<filter-name>CORS</filter-name>
<url-pattern>*.html</url-pattern>
</filter-mapping>

Facebook style auto suggest/complete component in Vaadin/GWT

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