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


No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...