Sunday, August 26, 2012

Vaadin Button

Button is the UI component that can be clicked upon to perform an action. User can click on button using mouse(Button.ClickEvent ) or keyboard shortcut(Button.ClickShortcut ). Listener (Button.ClickListener ) can handle this action fired by the button.

There are various styles to define listener that listens button click. Following are some of the code snippets  to use button declaration, click & listeners.

Button Creation
There are four types of constructors to create a button. For more information and syntax see API Doc

  1.     Button button = new Button();
  2.     button.setCaption("Click Here") ;

Button Handler

  1. public class JavaadinbuttonexampleApplication extends Application implements
  2.   ClickListener {
  3.  @Override
  4.  public void init() {
  5.   Window mainWindow = new Window("Javaadinbuttonexample Application")
  6.   Button button = new Button("Click Here");
  7.   button.addListener(this);
  8.   mainWindow.addComponent(button);
  9.   setMainWindow(mainWindow);
  10.  }
  11.  public void buttonClick(ClickEvent event) {
  12.   // TODO Auto-generated method stub
  13.  }
  14. }

If there are more than one event then we can write the handlers as shown in above and the logic which distinguishes the button event can be written in buttonClick function
Listener with more than one handler

  1. public class JavaadinbuttonexampleApplication extends Application implements
  2.   ClickListener {
  3.  Button button1 = new Button("Buton1");
  4.  Button button2 = new Button("Button2");
  5.  @Override
  6.  public void init() {
  7.   Window mainWindow = new Window("Javaadinbuttonexample Application");
  8.   button1.addListener(this);
  9.   button2.addListener(this);
  10.   mainWindow.addComponent(button1);
  11.   mainWindow.addComponent(button2);
  12.   setMainWindow(mainWindow);
  13.  }
  14.  public void buttonClick(ClickEvent event) {
  15.   if (event.getButton() == button1) {
  16.    // TODO Auto-generated method stub
  17.    getMainWindow().showNotification("This is Button1 event");
  18.   } else if (event.getButton() == button2) {
  19.    // TODO Auto-generated method stub
  20.    getMainWindow().showNotification("This is Button1 event");
  21.   }
  22.  }
  23. }

Another way to handle is event is to take the event handler method as a parameter.
Listener using anonymous class

  1. public class JavaadinbuttonexampleApplication extends Application {
  2.  Button button1;
  3.  @Override public void init() { Window mainWindow = new
  4.     Window("Javaadinbuttonexample Application");
  5.     button1 = new Button("Click Here"); button1.addListener(new
  6.     Button.ClickListener() {
  7.     public void buttonClick(ClickEvent event) { // TODO Auto-generated method
  8.     stub getMainWindow().showNotification("Button1 event"); } });
  9.     mainWindow.addComponent(button1); setMainWindow(mainWindow);
  10.     }
  11. }

If we want to perform action from keyboard, we need to add shortcut key to the button.

Performing action from keyboard
  1. public class JavaadinbuttonexampleApplication extends Application implements
  2.   ClickListener {
  3.  Button button1;
  4.  @Override
  5.  public void init() {
  6.   Window mainWindow = new Window("Javaadinbuttonexample Application");
  7.   button1 = new Button("Press Enter");
  8.   button1.setClickShortcut(KeyCode.ENTER);
  9.   button1.addListener(this);
  10.   mainWindow.addComponent(button1);
  11.   setMainWindow(mainWindow);
  12.  }
  13.  public void buttonClick(ClickEvent event) {
  14.   if (event.getButton() == button1) {
  15.    // TODO Auto-generated method stub
  16.    getMainWindow().showNotification(
  17.      "This is Button1 event performed from keyboard");
  18.   }
  19.  }

For more supported key codes and modifier codes go thorough following link
https://vaadin.com/book/-/page/advanced.shortcuts.html#advanced.shortcuts.keycodes

Vaadin Button CSS
To custom style the button add following snippet to your code

buttton1.addStyleName("style.css");

CSS Rules
.v-button
.v-button-my-stylename .my-stylename
    .v-button-wrap
        .v-button-caption
.v-button-borderless .v-button-caption


Other Stuff
  • There is not direct option to set unique ID for Vaadin button but workaround could be setdata which will be inherited from Abstract component. 

Button button = new Button("Click here");
Object object;
button.setData(object);

Further Reading:
API Documentation for Vaadin Button
https://vaadin.com/api/com/vaadin/ui/Button.html
For demo and examples
http://demo.vaadin.com/sampler#Buttons
http://demo.vaadin.com/book-examples/book/#component.button.basic


Saturday, August 11, 2012

Configure Vaadin Libraries Manually

1. gwt-dev.jar, gwt-user.jar, validation-api-1.0.0.GA-sources.jar,validation-api-1.0.0.GA.jar libraries missing
While configuring vaadin environment on eclipse IDE, somelibrary.jar missing  is the common error we can see. Some times you can find these libraries from eclipse it self(Eclipse downloads them automatically). Most commonly missing libraries are


gwt-dev.jar: eclipse\configuration\com.vaadin.integration.eclipse\download\gwt-dev\2.3.0
gwt-user.jar : eclipse\configuration\com.vaadin.integration.eclipse\download\gwt-user\2.3.0
validation-api-1.0.0.GA.jar. : eclipse\configuration\com.vaadin.integration.eclipse\download\gwt-dependencies\2.3.0
validation-api-1.0.0.GA-sources.jar : eclipse\configuration\com.vaadin.integration.eclipse\download\gwt-dependencies\2.3.0



Find these four libraries from eclipse, if you are not able to find out these files then you can google them by their name and download all. Keep these four libraries in vaadin\2.3.0 folder. Copy this vaadin folder in path: tomcat-7.0.23\webapps\ROOT\WEB-INF


2. Miss match of Vaadin with local library.
 If you use vaadin add-on eclipse, sometimes this add-comes with one version and you might have another version. Or if you like to upgrade your vaadin then just download new vaadin which will having name like Vaadin.6.7.8.jar.  Rename this jar file as Vaadin.jar and copy this in
path: tomcat-7.0.23\webapps\ROOT\WEB-INF\lib

Create First Vaadin Application

Let us create a simple Vaadin application(survlet/portlet) using eclipse IDE. First configure vaadin with eclipse. For more details Configure Vaadin Environment for Eclipse IDE


Open eclipse File->New->Other (Ctrl+N) Type vaadin and you can see the following wizard


Select Vaadin Project -Next
In the new project wizard enter details
  • Project name: Enter project name
  • Target runtime: Select a server if you have already configured otherwise select none. 
  • Vaadin deployment configuration: Servlet(default), select portlet if you want to create portlet
  •  Click on Next-Next, if you want to change application name, display name then change it and click on Finish


Configuration for tomcat server on eclipse 

  • Go to Window-Preferences-Servers-Runtime Environment there click on Add in right panel and add your tomcat folder. After that click on finish. 
  • Open Window-Show View-Servers window.
  • On Servers window right click and click on New-Server and select server which is already configured. 
  •  Now right click on server which is been added just now and click on Add and Remove then select first vaadin portlet and add it. 
If you know how to deploy an application on tomcat just ignore above steps and deployt your firstvaadin project on tomcat.

Done....

You have created Vaadin servlet now. Type http://localhost:8080/firstVaadin
You can see default content(Vaadin label with a text 'Hi Vaadin User') which is already added.
Done...

Some times you may face following warning while creating project. It is because eclipse is unable to download/setup gwt-dev.jar file by default. In such cases we can setup manually.

 Vaadin libraries installation failed
 Failed to add Vaadin jar to project
 Failed to download gwt-dev.jar from http://vaadin.com/download/external/gwt/2.3.0/gwt-dev.jar

To install vaadin libraries manually go through this post : Configure Vaadin Libraries Manually

Configure Vaadin Environment for Eclipse IDE


In this post I am going to show how to configure Vaadin for eclipse IDE. As we have discussed in the earlier post I will be using the following software.

Java jdk1.6.0_18
Eclipse Indigo
Vaadin-jar-bundle-6.7.9
Tomcat 7.0


We need to install Vaadin-jar-buncle-6.7.9XXXXXX.zip into eclipse. Who ever familiar with eclipse add-on installation can ignore following steps and install Vaadin addon.

Step 1: Open eclipse,go to Help menu and click on Install New Software.
Step 2: In install form click on Add now you can see Add Repository form. Click on Archive and select your Vaadin-jar-buncle-6.7.9.zip file. Select Vaadin check box click on Next-Next-Finish. Wait for some time until it installs software and restart eclipse.
 
Now Vaadin has been installed in your eclipse IDE now. If you want to create your first Vaadin project the go through post : Create First Vaadin Application.

Friday, August 10, 2012

Introduction to Vaadin

What is Vaadin?
Vaadin is a web application framework like JSF, SWING or AWT to  create a Rich Internet Application using Java. Let me put into layman words "Vaadin is a java framework to create a web-application". Its a large collection of UI components with listeners, handlers and different data models. 
Who can use Vaadin? 
Anyone who knows Java with basic web technologies.
Where to download software?
 What is the best-way to learn Vaadin?
Vaadin website itself is the best way to learn/download vaadin related stuff. 
Primary postive aspects of Vaadin
  • Java web develpment
  • Uses AJAX which will minimize the loading and increase the performance
  • Data binding using MVC(Model-View-Controller)
  • Based on GWT(Google Web Toolkit) hence no browser plugin is needed
  • Customizable look and feel
  • UI component extension
  • It is a secured web architecture, as it uses server-side state management
  • No need to have much knowledge on Javascript, HTML and other web technologies
  • Tool integration support, tech/forum/community support and many more....
Basic software needed to develop Vaadin web application
 Finally
Why javaadin blog if every thing is there in Vaadin website?
Yes. All most vaadin related stuff can be found in their own website including Sampler demo. But while designing web application using vaadin I faced some problems since I was a newbie to vaadin. Website provides concrete examples and demos, but there are no simple examples for Vaadin UI tools. For example if we want to use table as a basic thing( Fetch data from database and insert back into it), there is no tutorial found in vaadin ofcourse you can find it in their communities. Javaadin intention is to write some posts to use vaadin UI with simple examples. 

Meet you in next post...
Related Posts Plugin for WordPress, Blogger...